"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "はじめに", "hProperties": { "id": "はじめに" } }, "depth": 2, "value": "はじめに" }, { "data": { "id": "まずは何をしてなぜか", "hProperties": { "id": "まずは何をしてなぜか" } }, "depth": 2, "value": "まずは、何をして、なぜか？" }, { "data": { "id": "oidc-サーバーの統合", "hProperties": { "id": "oidc-サーバーの統合" } }, "depth": 2, "value": "OIDC サーバーの統合" }, { "data": { "id": "oidc-プロバイダーを探す", "hProperties": { "id": "oidc-プロバイダーを探す" } }, "depth": 3, "value": "OIDC プロバイダーを探す" }, { "data": { "id": "サブジェクトクライアントオーディエンス", "hProperties": { "id": "サブジェクトクライアントオーディエンス" } }, "depth": 3, "value": "サブジェクト、クライアント、オーディエンス" }, { "data": { "id": "1-ユーザーが-web-アプリケーションでサインインボタンをクリックする", "hProperties": { "id": "1-ユーザーが-web-アプリケーションでサインインボタンをクリックする" } }, "depth": 4, "value": "1. ユーザーが Web アプリケーションでサインインボタンをクリックする" }, { "data": { "id": "2-ユーザーがシングルページアプリケーションを使用する", "hProperties": { "id": "2-ユーザーがシングルページアプリケーションを使用する" } }, "depth": 4, "value": "2. ユーザーがシングルページアプリケーションを使用する" }, { "data": { "id": "3-マシン間通信", "hProperties": { "id": "3-マシン間通信" } }, "depth": 4, "value": "3. マシン間通信" }, { "data": { "id": "まとめ", "hProperties": { "id": "まとめ" } }, "depth": 4, "value": "まとめ" }, { "data": { "id": "トークン", "hProperties": { "id": "トークン" } }, "depth": 3, "value": "トークン" }, { "data": { "id": "複数のオーディエンス", "hProperties": { "id": "複数のオーディエンス" } }, "depth": 3, "value": "複数のオーディエンス" }, { "data": { "id": "コード交換要求で-resource-を指定", "hProperties": { "id": "コード交換要求で-resource-を指定" } }, "depth": 4, "value": "コード交換要求で resource を指定" }, { "data": { "id": "リフレッシュトークンを使用して新しいアクセストークンを取得", "hProperties": { "id": "リフレッシュトークンを使用して新しいアクセストークンを取得" } }, "depth": 4, "value": "リフレッシュトークンを使用して新しいアクセストークンを取得" }, { "data": { "id": "クライアントクレデンシャルグラント", "hProperties": { "id": "クライアントクレデンシャルグラント" } }, "depth": 4, "value": "クライアントクレデンシャルグラント" }, { "data": { "id": "api-サービスの保護", "hProperties": { "id": "api-サービスの保護" } }, "depth": 3, "value": "API サービスの保護" }, { "data": { "id": "クレームをアサートする", "hProperties": { "id": "クレームをアサートする" } }, "depth": 4, "value": "クレームをアサートする" }, { "data": { "id": "認可", "hProperties": { "id": "認可" } }, "depth": 2, "value": "認可" }, { "data": { "id": "終わりの注意", "hProperties": { "id": "終わりの注意" } }, "depth": 2, "value": "終わりの注意" }]; const readingTime = { "minutes": 5, "words": 1515, "text": "5 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", em: "em", h2: "h2", h3: "h3", h4: "h4", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Info, LogtoCloudButton, Note} = _components; if (!Info) _missingMdxReference("Info", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "はじめに", children: ["はじめに", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#はじめに", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "集中型の認証および認可システム、つまりアイデンティティアクセスマネジメント (IAM) またはアイデンティティプロバイダー (IdP) が必要な状況に遭遇するかもしれません。時にはビジネスを示すために、カスタマー IAM やワークフォース IAM などの言葉が追加されることもあります。" }), "\n", _jsx(_components.p, { children: "これらのファンシーな名前はひとまず置いておきましょう。アプリケーションが成長しているため、または最初からベンダーに仕事を委任することを計画しているため、IAM の必要性が生じるかもしれません。それにもかかわらず、プロジェクトにアイデンティティシステムを導入する必要が生じるポイントに達しています。" }), "\n", _jsx(_components.p, { children: "OAuth 2.0 の人気を考慮すると、OpenID Connect (OIDC) は多くの開発者にとって自然な選択です。OIDC は OAuth 2.0 の上に構築された認証レイヤーであるため、OIDC で作業を始めるときに親しみを感じるかもしれません。では、始めましょう！" }), "\n", _jsxs(_components.h2, { id: "まずは何をしてなぜか", children: ["まずは、何をして、なぜか？", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#まずは何をしてなぜか", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "アイデンティティプロバイダーの概念とその重要性をすでに理解している場合は、このセクションを自由にスキップしてください。" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["OIDC サーバー、またはアイデンティティプロバイダーは、ユーザーの認証と認可を管理する集中型システムです。", _jsx(_components.a, { href: "https://blog.logto.io/centralized-identity-system", children: "なぜマルチアプリビジネスに集中型アイデンティティシステムが必要か" }), "で議論したように、集中型アイデンティティシステムには多くの利点があります。"] }), "\n", _jsx(_components.p, { children: "プロジェクトが簡単な Web アプリケーションから始まったとしましょう。そして、そのアプリケーションには組み込みの認証があります：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n A[ユーザー] --> B[Web アプリケーション]\n" }) }), "\n", _jsx(_components.p, { children: "プロジェクトが成長するにつれて、モバイル版を導入する必要が出てきます：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n A[ユーザー] --> B[Web アプリケーション]\n A --> C[モバイルアプリケーション]\n" }) }), "\n", _jsx(_components.p, { children: "各アプリケーションごとにアカウントを作成する必要があると、ユーザーの体験が悪くなります。Web アプリケーションから始めたので、モバイルアプリケーションが Web アプリケーションと通信して認証を行うことを許します：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n A[ユーザー] --> B[Web アプリケーション]\n A --> C[モバイルアプリケーション]\n C --> B\n" }) }), "\n", _jsx(_components.p, { children: "新しい API サービスが導入されるとします。有料ユーザー向けのサービスであるため、ユーザーが認証され、そのサービスにアクセスする権限があることを確認する必要があります。これを達成するために、サービスを Web アプリケーションを介してプロキシすることができます：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n A[ユーザー] --> B[Web アプリケーション]\n A --> C[モバイルアプリケーション]\n C --> B\n B --> D[API サービス]\n" }) }), "\n", _jsx(_components.p, { children: "または、ユーザーを認証するためにトークン技術を使用し、サービスで Web アプリケーションと通信してトークンを検証します。したがって、モバイルアプリケーションが直接サービスを利用できます：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n A[ユーザー] --> B[Web アプリケーション]\n A --> C[モバイルアプリケーション]\n C --> B\n B <--> D[API サービス]\n C --> D\n" }) }), "\n", _jsx(_components.p, { children: "事態は混乱しています。そのため、認証と認可のロジックを別のサービスに分離することに決めます：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph LR\n A[ユーザー] --> B[Web アプリケーション]\n A --> C[モバイルアプリケーション]\n B --> D[API サービス]\n C --> D\n B --> E[アイデンティティサービス] \n C --> E\n D --> E \n\n subgraph アプリケーション\n B\n C\n end\n\n subgraph サービス\n D\n end\n\n subgraph アイデンティティ\n E\n end\n" }) }), "\n", _jsx(_components.p, { children: "リファクタリングプロセスは苦痛なものになります。プロジェクトにアプリケーションやサービスを追加するにつれて、その複雑さが指数関数的に増加することに気付くかもしれません。さらに悪いことに、パスワードレスサインイン、ソーシャルログイン、SAML など、複数の認証方法を維持する必要があるかもしれません。" }), "\n", _jsx(_components.p, { children: "これが、プロジェクトを拡張する计划を持っている時に最初からアイデンティティプロバイダーを導入するのが良い理由です。" }), "\n", _jsx(Note, { children: _jsx(_components.p, { children: "もちろん、プロジェクトが十分に簡単で、しばらくは簡単な状態を保つだろうとわかっているケースもあります。このアーティクルを離れて、必要になった時に戻ってくることができます。" }) }), "\n", _jsxs(_components.h2, { id: "oidc-サーバーの統合", children: ["OIDC サーバーの統合", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#oidc-サーバーの統合", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "oidc-プロバイダーを探す", children: ["OIDC プロバイダーを探す", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#oidc-プロバイダーを探す", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "市場には多くの OIDC プロバイダーが存在します。要件やお好みに基づいて選択することができます。プロバイダーが OIDC 準拠である限り、プロジェクトで同じ役割を果たします。" }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://logto.io", children: "Logto" }), " は、即使用可能なアイデンティティおよびアクセス管理機能を備えたオープンソースの OIDC プロバイダーです。"] }) }), "\n", _jsxs(_components.h3, { id: "サブジェクトクライアントオーディエンス", children: ["サブジェクト、クライアント、オーディエンス", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#サブジェクトクライアントオーディエンス", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["概念を簡略化するために考えると、", _jsx(_components.em, { children: "サブジェクト" }), "は", _jsx(_components.em, { children: "クライアント" }), "を介して", _jsx(_components.em, { children: "オーディエンス" }), "へのアクセスを要求するエンティティです。"] }), "\n", _jsx(Note, { title: "トークンにオーディエンス (aud) が見えない", children: _jsx(_components.p, { children: "オーディエンスが欠如している場合、通常、それはオーディエンスが OIDC サーバー自体であることを意味します。" }) }), "\n", _jsx(_components.p, { children: "以下は典型的なシナリオです：" }), "\n", _jsxs(_components.h4, { id: "1-ユーザーが-web-アプリケーションでサインインボタンをクリックする", children: ["1. ユーザーが Web アプリケーションでサインインボタンをクリックする", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#1-ユーザーが-web-アプリケーションでサインインボタンをクリックする", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "伝統的でサーバーサイドレンダリングの Web アプリケーションでは、フロントエンドとバックエンドが結合されています。Web アプリケーションがフロントエンドとバックエンドの両方を提供するとします：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "サブジェクト" }), ": ユーザー"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "オーディエンス" }), ": OIDC サーバー"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "クライアント" }), ": Web アプリケーション"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["オーディエンスが OIDC サーバーであることは直感的には不自然に思えるかもしれませんが、実際には最終利用者に SSO (シングルサインオン) 体験を実現する鍵です。", _jsx(_components.a, { href: "https://blog.logto.io/implicit-flow-is-dead#how-authorization-code-flow-works", children: "承認コードフロー" }), "のための簡単化されたシーケンス図を見てみましょう："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User as ユーザー
(サブジェクト)\n participant App1 as WebApp 1
(クライアント)\n participant App2 as WebApp 2
(クライアント)\n participant OIDC as OIDC サーバー
(オーディエンス)\n\n User ->> App1: サインインをクリック\n App1 ->> OIDC: リダイレクト
(承認リクエスト)\n OIDC ->> User: サインインページを表示\n User ->> OIDC: サインイン\n OIDC ->> App1: `code` でリダイレクト\n App1 ->> OIDC: `code` を使ってトークンを交換\n Note over User: コーヒーを一杯飲む\n User ->> App2: サインインをクリック\n App2 ->> OIDC: リダイレクト\n OIDC ->> OIDC: 有効なセッションが見つかりました\n OIDC ->> App2: `code` でリダイレクト\n App2 ->> OIDC: `code` を使ってトークンを交換\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "code" }), "は、アクセストークン、ID トークン、リフレッシュトークンなど、さまざまなトークンと交換可能な一回限りのコードです。現時点ではこれらのトークンをすべて理解していなくても問題ありません。進むにつれて、それらをよりよく理解できるようになります。"] }), "\n", _jsx(_components.p, { children: "上記のケースでは、ユーザー (サブジェクト) が OIDC サーバー (オーディエンス) で既に認証されているため、別のアプリケーションに切り替えたときに再度サインインする必要がありません。" }), "\n", _jsxs(_components.h4, { id: "2-ユーザーがシングルページアプリケーションを使用する", children: ["2. ユーザーがシングルページアプリケーションを使用する", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#2-ユーザーがシングルページアプリケーションを使用する", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "シングルページアプリケーション (またはモバイルアプリケーション) では、フロントエンドとバックエンドが分離されています。バックエンドが API サービスであるとします：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "サブジェクト" }), ": ユーザー"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "オーディエンス" }), ": API サービス"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "クライアント" }), ": シングルページアプリケーション (SPA)"] }), "\n"] }), "\n", _jsx(_components.p, { children: "承認コードフローの簡略化されたシーケンス図：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant User as ユーザー
(サブジェクト)\n participant SPA as シングルページアプリケーション
(クライアント)\n participant API as API サービス
(オーディエンス)\n participant OIDC as OIDC サーバー
(オーディエンス)\n\n User ->> SPA: サインインをクリック\n SPA ->> OIDC: リダイレクト
(承認リクエスト)\n OIDC ->> User: サインインページを表示\n User ->> OIDC: サインイン\n OIDC ->> SPA: `code` でリダイレクト\n SPA ->> OIDC: `code` を使ってトークンを交換\n User ->> SPA: 保護されたページを表示しようとする\n SPA ->> API: アクセストークンでデータを要求\n API ->> OIDC: アクセストークンを検証\n OIDC ->> API: OK\n API ->> SPA: データを応答\n" }) }), "\n", _jsxs(_components.p, { children: ["API サービスは非インタラクティブなので、SPA はオーディエンスとして API サービスを持つアクセストークンを使用する必要があります (トークンの ", _jsx(_components.code, { children: "aud" }), ")。"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "なぜ OIDC サーバーがまだオーディエンスなのか？" }) }), "\n", _jsx(_components.p, { children: "技術的には、オーディエンスリストから OIDC サーバーを削除することができます。しかし、ほとんどの場合、OIDC サーバーからユーザー情報が必要になるため (OIDC サーバーがオーディエンスである必要があります)、ユーザーのインタラクションが関わる場合は常に OIDC サーバーをオーディエンスリストに含めるのが良いでしょう。" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "待って、それは承認リクエストで複数のオーディエンスを持てるということ？" }) }), "\n", _jsxs(_components.p, { children: ["その通りです！OIDC は OAuth 2.0 の上に構築されているため、承認リクエストで ", _jsx(_components.a, { href: "https://datatracker.ietf.org/doc/html/rfc8707", children: "RFC 8707: OAuth 2.0 のリソースインジケータ" }), " を活用して複数のオーディエンスを指定することが可能です。これには、グラントと OIDC サーバーのサポートが必要です。", _jsx(_components.a, { href: "https://logto.io", children: "Logto" }), " はこの機能をネイティブにサポートしています。"] }), "\n", _jsxs(_components.h4, { id: "3-マシン間通信", children: ["3. マシン間通信", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#3-マシン間通信", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "サービス A がサービス B を呼び出す必要があるとします：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "サブジェクト" }), ": サービス A"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "オーディエンス" }), ": サービス B"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "クライアント" }), ": サービス A"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://datatracker.ietf.org/doc/html/rfc6749#section-1.3.4", children: "クライアントクレデンシャルグラント" }), "による簡略化されたシーケンス図："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant ServiceA as サービス A
(サブジェクトとクライアント)\n participant ServiceB as サービス B
(オーディエンス)\n participant OIDC as OIDC サーバー\n\n ServiceA ->> OIDC: クライアントクレデンシャルでアクセストークンを要求 (トークン要求)\n OIDC ->> ServiceA: アクセストークン\n ServiceA ->> ServiceB: アクセストークンでデータを要求\n ServiceB ->> OIDC: アクセストークンを検証\n OIDC ->> ServiceB: OK\n ServiceB ->> ServiceA: 応答データ\n" }) }), "\n", _jsx(_components.p, { children: "サービス B がサービス A を呼び出す必要がある場合、役割は単に入れ替わります。" }), "\n", _jsxs(_components.h4, { id: "まとめ", children: ["まとめ", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#まとめ", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "サブジェクト" }), ": ユーザー、サービス、またはオーディエンスにアクセスする必要がある任意のエンティティです。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "クライアント" }), ": Web アプリケーション、モバイルアプリケーション、またはリクエストを開始するエンティティまたはサブジェクトの代わりに動作するエンティティです。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "オーディエンス" }), ": サービス、API、またはサブジェクトにアクセスを提供する任意のエンティティです。"] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "トークン", children: ["トークン", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#トークン", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "OIDC で作業する際に遭遇する可能性のある 3 種類のトークンがあります：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "アクセストークン" }), ": オーディエンスにアクセスするために使用されます。JWT (JSON Web Token) または不透明トークン (通常はランダム文字列) になれます。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "ID トークン" }), ": ユーザー情報を含む OIDC 専用トークンです。常に JWT です。クライアントはトークンをデコードしてユーザー情報を取得できます。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "リフレッシュトークン" }), ": アクセストークンまたは ID トークンの期限切れ時に新しいセットのトークンを取得するために使用されます。"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["これらのトークンの詳細な説明については、", _jsx(_components.a, { href: "https://blog.logto.io/understanding-tokens-in-oidc", children: "OIDC プロトコルでのリフレッシュトークン、アクセストークン、および ID トークンの理解" }), "を参照してください。"] }), "\n", _jsxs(_components.p, { children: ["前述のシナリオ 1 および 2 では、", _jsx(_components.em, { children: "承認リクエスト" }), " という用語は、特定の", _jsx(_components.em, { children: "グラント" }), " を介して一組のトークンを取得する要求を指します。"] }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["OAuth 2.0 RFC は ", _jsx(_components.em, { children: "グラント" }), " という用語を使用しますが、実際には、一般的なエンドツーエンドのプロセスを説明するために ", _jsx(_components.em, { children: "フロー" }), " という用語がよく使用されます。"] }) }), "\n", _jsxs(_components.p, { children: ["すべてが順調に進むと、\"コードを使用してトークンを交換\" ステップで一組のトークンが返されます。一組に含まれるトークンは、特に承認リクエストの ", _jsx(_components.code, { children: "scope" }), " パラメーターなど、複数の要因によって異なります。簡単のため、すべてのトークンがセットに含まれていると仮定します。アクセストークンが期限切れになると、クライアントはユーザーの操作なしに新しいセットのトークンを取得するためにリフレッシュトークンを使用できます。"] }), "\n", _jsx(_components.p, { children: "シナリオ 3 では、クライアントクレデンシャルグラントはアクセストークンしか返さないため、より簡単です。" }), "\n", _jsxs(_components.h3, { id: "複数のオーディエンス", children: ["複数のオーディエンス", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#複数のオーディエンス", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "一度に 1 つのアクセストークンしか返されないことに気付くでしょう。クライアントが複数のオーディエンスにアクセスする必要がある場合、どうするのでしょうか？" }), "\n", _jsx(_components.p, { children: "一般的な解決策が 2 つあります：" }), "\n", _jsxs(_components.h4, { id: "コード交換要求で-resource-を指定", children: ["コード交換要求で ", _jsx(_components.code, { children: "resource" }), " を指定", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#コード交換要求で-resource-を指定", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["クライアントがコードをトークンに交換するとき、リクエストに ", _jsx(_components.code, { children: "resource" }), " パラメーターを指定できます。OIDC サーバーは、該当する場合に指定されたオーディエンスのアクセストークンを返します。"] }), "\n", _jsx(_components.p, { children: "以下は非規範的な例です：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-http", children: "POST /token HTTP/1.1\nHost: oidc-server.example.com\nContent-Type: application/x-www-form-urlencoded\n\nグラント_type=authorization_code\n&code=AUTHORIZATION_CODE\n&client_id=CLIENT_ID\n&client_secret=CLIENT_SECRET\n&resource=API_SERVICE\n" }) }), "\n", _jsxs(_components.p, { children: ["次に、OIDC サーバーは、該当する場合に ", _jsx(_components.code, { children: "API_SERVICE" }), " オーディエンスのアクセストークンを返します。"] }), "\n", _jsxs(_components.h4, { id: "リフレッシュトークンを使用して新しいアクセストークンを取得", children: ["リフレッシュトークンを使用して新しいアクセストークンを取得", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#リフレッシュトークンを使用して新しいアクセストークンを取得", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["RFC 8707 を使用すると、クライアントは ", _jsx(_components.code, { children: "resource" }), " パラメーターを複数回使用して複数のオーディエンスを指定することもできます。今、リフレッシュトークンがクライアントで利用可能であれば、トークンを更新するときに ", _jsx(_components.code, { children: "resource" }), " パラメーターでオーディエンスを指定できます。"] }), "\n", _jsx(_components.p, { children: "以下は非規範的な例です：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-http", children: "POST /token HTTP/1.1\nHost: oidc-server.example.com\nContent-Type: application/x-www-form-urlencoded\n\nグラント_type=refresh_token\n&refresh_token=REFRESH_TOKEN\n&client_id=CLIENT_ID\n&client_secret=CLIENT_SECRET\n&resource=API_SERVICE\n" }) }), "\n", _jsx(_components.p, { children: "これには前の解決策と同じ効果があります。一方で、他の付与されたオーディエンスは将来のトークンリクエストでまだ利用可能です。" }), "\n", _jsxs(_components.h4, { id: "クライアントクレデンシャルグラント", children: ["クライアントクレデンシャルグラント", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#クライアントクレデンシャルグラント", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["クライアントクレデンシャルグラントで、", _jsx(_components.code, { children: "resource" }), " パラメーターを使用してオーディエンスを指定することもできます。複数のオーディエンスにこのグラントで問題はありません。異なるオーディエンスの新しいアクセストークンを取得するために別のトークン要求を単に送信することで常に要求できます。"] }), "\n", _jsxs(_components.h3, { id: "api-サービスの保護", children: ["API サービスの保護", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#api-サービスの保護", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "シナリオ 2 の「API サービス」とシナリオ 3 の「サービス B」には共通点があります。それは、リクエストが承認されているかどうかを判断するためにアクセストークンを検証する必要があることです。アクセストークンの形式に応じて、検証プロセスは異なる場合があります。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "不透明トークン" }), ": API サービスは、OIDC サーバーにトークンを検証するために呼び出す必要があります。たいてい、OIDC サーバーはこのために ", _jsx(_components.a, { href: "https://blog.logto.io/oauth2-token-introspection", children: "イントロスペクションエンドポイント" }), " を提供します。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "JWT" }), ": API サービスは、トークンの署名と請求をチェックすることによってローカルでトークンを検証できます。OIDC サーバーは通常、API サービスが署名を検証するために公開鍵を取得するための ", _jsx(_components.a, { href: "https://openid.net/specs/openid-connect-discovery-1_0.html#ProviderMetadata", children: "JSON Web キーセット (JWKS) エンドポイント" }), " (", _jsx(_components.code, { children: "jwks_uri" }), ") を提供します。"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["JWT に不慣れな場合は、", _jsx(_components.a, { href: "https://blog.logto.io/what-is-jwt", children: "JSON Web Token (JWT) とは？" }), " を参照してください。実際には、手動で署名を検証して請求をアサートする必要はほとんどありません。Node.js や Web ブラウザ向けの ", _jsx(_components.a, { href: "https://github.com/panva/jose", children: "jose" }), " などの多くのライブラリがあります。"] }), "\n", _jsxs(_components.h4, { id: "クレームをアサートする", children: ["クレームをアサートする", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#クレームをアサートする", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "JWT 署名を検証することに加えて、API サービスは常にトークンの請求をチェックする必要があります：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "iss" }), ": トークンの発行者。OIDC サーバーの発行者 URL と一致する必要があります。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "aud" }), ": トークンの受信者。API サービスのオーディエンス値 (通常は有効な URI) と一致する必要があります。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "exp" }), ": トークンの有効期限。期限が切れている場合、API サービスはトークンを拒否する必要があります。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "scope" }), ": トークンのスコープ(許可)。API サービスは、トークンに必要なスコープが含まれているかを確認する必要があります。"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["他の請求、例えば ", _jsx(_components.code, { children: "sub" }), " (サブジェクト) や ", _jsx(_components.code, { children: "iat" }), " (発行時) も、場合によっては重要です。追加のセキュリティ対策がある場合、請求をそれに応じてチェックしてください。"] }), "\n", _jsxs(_components.h2, { id: "認可", children: ["認可", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#認可", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["未解決の質問がまだあります：", _jsx(_components.em, { children: "スコープ" }), " (すなわち許可) をサブジェクトに付与できることをどのように決定しますか？"] }), "\n", _jsx(_components.p, { children: "この単一の質問は、認可という全く新しい世界につながり、このアーティクルの範囲外です。簡単に言えば、RBAC (ロールベースアクセス制御) や ABAC (属性ベースアクセス制御) などの一般的なアプローチがあります。以下は、始めるためのリソースです：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://blog.logto.io/rbac-and-abac", children: "RBAC と ABAC: 知っておくべきアクセス制御モデル" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://blog.logto.io/mastering-rbac", children: "Logto での RBAC のマスタリング: 実際の包括的な例" }) }), "\n"] }), "\n", _jsxs(_components.h2, { id: "終わりの注意", children: ["終わりの注意", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#終わりの注意", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "プロジェクトに OIDC サーバーを導入することは大きなステップです。これは、プロジェクトのセキュリティとスケーラビリティを大幅に向上させることができます。これに伴い、コンポーネント間の概念や相互作用を理解するのに少し時間がかかるかもしれません。" }), "\n", _jsx(_components.p, { children: "要件や嗜好に合った良い OIDC プロバイダーを選ぶことは、統合プロセスの複雑さを著しく軽減することができます。プロバイダーは通常、OIDC サーバー、認可メカニズム、SDK、将来必要になる可能性のある企業機能を含む全パッケージを提供します。" }), "\n", _jsxs(_components.p, { children: ["このガイドが OIDC サーバーの統合の基本を理解するのに役立つことを願っています。何から始めればいいのか迷っているならば、自分勝手にも ", _jsx(_components.a, { href: "https://logto.io", children: "Logto" }), " をお勧めします。それは開発者のための私たちのアイデンティティインフラストラクチャです。"] }), "\n", _jsx(LogtoCloudButton, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }