認証
訪問者トークンを渡すか、認証付きアクセスを使用することで、認証が必要なサイトでも Docs Embed を利用できます
GitBookドキュメントが認証を必要とする場合(例:OIDC、Auth0、またはカスタムバックエンドを介した訪問者認証)、ユーザーの認証トークンが提供されない限り埋め込みはドキュメントのコンテンツにアクセスできません。
2つの方法があります:
トークンを直接渡す (推奨)- 訪問者トークンで埋め込みを初期化する
クッキー検出を使用する - 読み込み前にクッキー内のトークンを確認する
方法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" },
},
});<GitBookProvider siteURL="https://docs.company.com">
<GitBookFrame
visitor={{
token: "your-jwt-token",
unsignedClaims: { userId: "123" },
}}
/>
</GitBookProvider>方法2:クッキーに基づく検出
ドキュメントサイトが訪問者トークンをクッキーに保存している場合(例: gitbook-visitor-token)、埋め込みを読み込む前にそれを確認できます。
ユーザーが認証されたドキュメントにサインインすると、GitBookはブラウザのクッキーにキーとして訪問者トークンを保存します gitbook-visitor-token。埋め込みはドキュメントからコンテンツを取得するためにこのトークンを必要とします。
フロー:
ユーザーがあなたのドキュメントサイトにサインインする
GitBookがブラウザのクッキーに訪問者トークンを保存する
あなたのアプリがトークンを確認する
トークンが存在する場合、埋め込みを読み込みトークンを渡す
トークンが存在しない場合、ユーザーにサインインを促す
コピーペースト用スニペット
ユーザーがサインインした後にのみ埋め込みを読み込むにはこのスニペットを使用します:
<script>
(function () {
// クッキー内の訪問者トークンを確認する
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length === 2) return parts.pop().split(";").shift();
}
var token = getCookie("gitbook-visitor-token");
if (!token) {
console.warn("[Docs Embed] まずドキュメントにサインインしてください。");
return;
}
// トークンが存在するので埋め込みを読み込む
var script = document.createElement("script");
script.src =
"https://docs.example.com/~gitbook/embed/script.js?jwt_token=" +
encodeURIComponent(token);
script.async = true;
script.onload = function () {
window.GitBook(
"init",
{ siteURL: "https://docs.example.com" },
{ visitor: { token: token } }
);
window.GitBook("show");
};
document.head.appendChild(script);
})();
</script>を置き換えてください docs.example.com を実際のドキュメントサイトのURLにしてください。
代替:ユーザーにサインインを促す
トークンが見つからない場合、ユーザーにサインインを促すことができます:
<script>
(function () {
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length === 2) return parts.pop().split(";").shift();
}
var token = getCookie("gitbook-visitor-token");
if (!token) {
// ドキュメントにリダイレクトするかメッセージを表示する
alert("ヘルプにアクセスするにはドキュメントにサインインしてください。");
window.location.href = "https://docs.example.com";
return;
}
// トークンを使って埋め込みを読み込む
var script = document.createElement("script");
script.src =
"https://docs.example.com/~gitbook/embed/script.js?jwt_token=" +
encodeURIComponent(token);
script.async = true;
script.onload = function () {
window.GitBook(
"init",
{ siteURL: "https://docs.example.com" },
{ visitor: { token: token } }
);
window.GitBook("show");
};
document.head.appendChild(script);
})();
</script>NPMパッケージを使用する場合、初期化前にトークンを確認してください:
import { createGitBook } from "@gitbook/embed";
function initializeEmbed() {
// クッキー内のトークンを確認する
const getCookie = (name) => {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(";").shift();
};
const token = getCookie("gitbook-visitor-token");
if (!token) {
console.warn("[Docs Embed] ユーザーはまずサインインする必要があります。");
return null;
}
const gitbook = createGitBook({
siteURL: "https://docs.example.com",
});
const iframe = document.createElement("iframe");
iframe.src = gitbook.getFrameURL({
visitor: { token: token },
});
const frame = gitbook.createFrame(iframe);
document.getElementById("embed-container").appendChild(iframe);
return frame;
}
initializeEmbed();Reactアプリの場合、トークンの有無に応じて埋め込みを条件付きでレンダリングしてください:
import { useEffect, useState } from "react";
import { GitBookProvider, GitBookFrame } from "@gitbook/embed/react";
function App() {
const [token, setToken] = useState(null);
useEffect(() => {
// クッキー内のトークンを確認する
const getCookie = (name) => {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(";").shift();
};
const visitorToken = getCookie("gitbook-visitor-token");
setToken(visitorToken);
}, []);
if (!token) {
return (
<div>
<p>ヘルプにアクセスするにはサインインしてください。</p>
<a href="https://docs.example.com">サインイン</a>
</div>
);
}
return (
<GitBookProvider siteURL="https://docs.example.com">
<YourAppContent />
<GitBookFrame visitor={{ token: token }} />
</GitBookProvider>
);
}よくある落とし穴
サインイン前に埋め込みを読み込んでしまうこと – スクリプトやコンポーネントを読み込む前に常にトークンを確認するか、初期化時にトークンを直接渡してください。
ドメイン間でトークンが保持されないこと – ブラウザのセキュリティポリシーによりクッキーは異なるドメイン間で保持されません。アプリとドキュメントは同じドメインまたはサブドメイン上である必要があるか、トークンを直接渡してください。
トークンの有効期限切れ – トークンは期限切れになります。埋め込みが認証エラーを返す場合、ユーザーに再度サインインを促してください。
間違ったクッキー名の使用 – トークンはとして保存されます
gitbook-visitor-token、ではなくgitbook-tokenやその他のバリエーションではありません。init/getFrameURLにトークンを渡していない – クッキー方式を使用する場合、トークンをに渡すことを確認してください
GitBook('init', ..., { visitor: { token } })またはgetFrameURL({ visitor: { token } }).
デバッグ
トークンが存在するか確認するには、ブラウザコンソールを開いて次を実行します:
document.cookie.split(";").find((c) => c.includes("gitbook-visitor-token"));これが返された場合 undefined、ユーザーはまだドキュメントにサインインしていません。
次のステップ
埋め込みのカスタマイズ – ようこそメッセージやアクションを追加する
カスタムツールの作成 – 製品のAPIと統合する
Docs Embedドキュメント – 埋め込みガイド(完全版)
最終更新
役に立ちましたか?