認証
訪問者トークンを渡すか認証付きアクセスを使用することで、認証が必要なサイトでDocs Embedを利用します
GitBook のドキュメントに認証が必要な場合(例: OIDC、Auth0、またはカスタムバックエンドによる訪問者認証)、ユーザーの認証トークンが提供されない限り、埋め込みはドキュメントのコンテンツにアクセスできません。
アプローチは2つあります:
トークンを直接渡す (推奨)- 訪問者トークンで埋め込みを初期化する
Cookie ベースの検出を使う - 読み込み前に Cookie 内のトークンを確認する
アプローチ1: トークンを直接渡す(推奨)
埋め込みを初期化するときに、訪問者トークンを直接渡します:
<script src="https://docs.company.com/~gitbook/embed/script.js?jwt_token=your-jwt-token"></script>
<script>
window.GitBook(
"init",
{ siteURL: "https://docs.company.com" },
{ visitor: { token: "your-jwt-token" } }
);
window.GitBook("show");
</script>import { createGitBook } from "@gitbook/embed";
const gitbook = createGitBook({
siteURL: "https://docs.company.com",
});
const iframe = document.createElement("iframe");
iframe.src = gitbook.getFrameURL({
visitor: {
token: "your-jwt-token",
unsignedClaims: { userId: "123", plan: "premium" },
},
});アプローチ2: Cookie ベースの検出
ドキュメントサイトが訪問者トークンを Cookie に保存している場合( gitbook-visitor-tokenのように)、埋め込みを読み込む前にそれを確認できます。
ユーザーが認証済みドキュメントにサインインすると、GitBook はブラウザ Cookie のキー gitbook-visitor-tokenの下に訪問者トークンを保存します。埋め込みはドキュメントからコンテンツを取得するためにこのトークンを必要とします。
フロー:
ユーザーがドキュメントサイトにサインインする
GitBook がブラウザ Cookie に訪問者トークンを保存する
アプリがトークンの有無を確認する
トークンがあれば、埋め込みを読み込んでトークンを渡す
トークンがなければ、ユーザーにサインインを促す
コピペ用スニペット
このスニペットを使うと、ユーザーがサインインした後にのみ埋め込みを読み込めます:
置き換え docs.example.com を実際のドキュメントサイトの URL に置き換えてください。
代替案: ユーザーにサインインを促す
トークンがない場合は、ユーザーにサインインを促せます:
NPM パッケージを使用する場合は、初期化前にトークンの有無を確認してください:
React アプリでは、トークンの有無に応じて埋め込みを条件付きで描画します:
よくある落とし穴
サインイン前に埋め込みを読み込む – スクリプトやコンポーネントを読み込む前に必ずトークンを確認するか、初期化時にトークンを直接渡してください。
トークンがドメイン間で保持されない – ブラウザのセキュリティポリシーにより、Cookie は別ドメイン間では保持されません。アプリとドキュメントは同じドメインまたはサブドメイン上にある必要があり、そうでなければトークンを直接渡してください。
トークンの期限切れ – トークンには有効期限があります。埋め込みで認証エラーが返る場合は、ユーザーに再度サインインしてもらってください。
Cookie 名が間違っている – トークンは
gitbook-visitor-tokenであり、gitbook-tokenまたはその他のバリエーションとして保存されます。init/getFrameURL にトークンを渡していない – Cookie ベースのアプローチを使う場合は、必ずトークンを次の関数に渡してください
GitBook('init', ..., { visitor: { token } })またはgetFrameURL({ visitor: { token } }).
デバッグ
トークンが存在することを確認するには、ブラウザのコンソールを開いて次を実行します:
これが undefinedを返す場合、ユーザーはまだドキュメントにサインインしていません。
次のステップ
埋め込みのカスタマイズ – ウェルカムメッセージとアクションを追加する
カスタムツールの作成 – 製品 API と統合する
Docs Embed のドキュメント – 埋め込みガイド کامل版
最終更新
役に立ちましたか?