> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 複数のAPIの論理APIを構成する

> Auth0で単一の論理APIを使用して複数のAPIへのアクセスを表し、制御する方法を学びます。

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [processedChildren, setProcessedChildren] = useState(children);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      unsubscribe = window.autorun(() => {
        let processedChildren = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          processedChildren = processedChildren.replace(new RegExp(key, "g"), value);
        }
        setProcessedChildren(processedChildren);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  return <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
      {processedChildren}
    </CodeBlock>;
};

export const codeExample = `https://{yourDomain}/authorize?
   scope=read:contacts%20read:calendar&
   audience=organize&
   response_type=id_token%20token&
   client_id={yourClientId}&
   redirect_uri=http://localhost:3000&
   nonce={nonce}
`;

論理的にはすべて同じAPIの一部である複数の異なる API 実装がある場合、Auth0ダッシュボードで単一の論理APIを使用してそれらを表すことで、承認プロセスを簡素化できます。これを行うと、適切なスコープを割り当てることで個々のAPIへのアクセスを制御しながら、1つの承認フローのみを実装できます。

次のセクションでは、Auth0で複数のAPIを単一のリソースサーバーとして使用して表す方法について説明します。例では、次のサンプルアプリケーションを使用します。サンプルアプリケーションはマイクロサービスアーキテクチャを使用し、次のものが含まれています。

* 2つの Node.js API：`contacts`と`calendar`（マイクロサービスと考えることができます）
* 2つのAPIを表す1つのリソースサーバー
* 2つの名前空間スコープ：`read:contacts`および`read:calendar`
* 両方のAPIで機能する`access_token`を取得するための暗黙の付与フロー

2つのAPIを、`Organizer Service`という1つのAuth0 APIを使用して表します。次に、[暗黙のフロー](/docs/ja-JP/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce)を使用してSPAから`calendar`APIと`contacts`APIにアクセスする方法を示す2つのスコープを作成します。

次のステップを完了する必要があります。

1. アプリケーションの接続を有効にする
2. テストユーザーを作成する
3. Auth0で論理APIを登録する
4. 論理APIのスコープを構成する
5. 論理APIへのアクセスを許可する
6. （オプション）シングルログアウト（SLO）またはシングルサインオン（SSO）を実装する

<div id="prerequisites">
  ## 前提条件
</div>

* [アプリケーションを登録します](/docs/ja-JP/ja-jp/get-started/auth0-overview/create-applications/single-page-web-apps)。

  * **シングルページアプリ** の**アプリケーションタイプ** を選択します。
  * `http://localhost:3000`および`http://localhost:3000/callback.html`の**許可されたコールバックURL** を追加します。
* [サンプルアプリケーション](https://github.com/auth0-samples/auth0-api-auth-implicit-sample)をダウンロードします。サンプルアプリケーションの設定方法については、[README](https://github.com/auth0-samples/auth0-api-auth-implicit-sample#readme)をお読みください。

<div id="enable-a-connection-for-your-application">
  ## アプリケーションの接続を有効にする
</div>

新しく登録したアプリケーションにはユーザーのソースが必要なので、[接続](/docs/ja-JP/ja-jp/connections)を構成する必要があります。このサンプルでは、​​ユーザーのメールアドレスとパスワードのみを要求するシンプルな[データベース接続](/docs/ja-JP/ja-jp/connections/database)を作成します。詳細については、[データベース接続の設定](/docs/ja-JP/ja-jp/get-started/applications/set-up-database-connections)をお読みください。

<div id="create-a-test-user">
  ## テストユーザーを作成する
</div>

新しく作成した接続を使用しているため、それに関連付けられたユーザーはいません。サンプルアプリケーションのログインプロセスをテストする前に、ユーザーを作成して接続に関連付ける必要があります。ユーザーを作成するときは、新しく作成した接続を選択してください。詳細については、[ユーザーの作成](/docs/ja-JP/ja-jp/manage-users/user-accounts/create-users)をお読みください。

<div id="register-a-logical-api-in-auth0">
  ## Auth0で論理APIを登録する
</div>

サンプルアプリケーション内に含まれる複数のAPIを表すために使用する単一の論理APIを登録します。このサンプルでは、​​APIの`Organizer Service`を呼び出して、その一意の識別子を`organize`に設定します。デフォルトでは、このAPI用に取得されたトークンの署名アルゴリズムは**RS256** ですが、そのままにしておきます。詳細については、「[APIを登録する](/docs/ja-JP/ja-jp/get-started/auth0-overview/set-up-apis)」お読みください。

<div id="configure-permissions-for-the-logical-api">
  ## 論理APIの権限を構成する
</div>

論理APIがサンプルアプリケーション内に含まれるAPIを表すようにするには、適切な権限（スコープ）を作成する必要があります。

スコープを使用すると、呼び出し元のアプリケーションがアクセスできるAPIアクションを定義できます。1つのスコープは1つのAPI/アクションの組み合わせを表します。このサンプルでは、​​呼び出し元のアプリケーションが`calendar`という1つのAPIと`contacts`という別のAPIから`read`ことができるようにする必要があるため、次の権限を作成する必要があります。

* `read:calendar`
* `read:contacts`

それぞれをマイクロサービスと考えることができます。詳細については、[API権限の追加](/docs/ja-JP/ja-jp/get-started/apis/add-api-permissions)および[APIスコープ](/docs/ja-JP/ja-jp/get-started/apis/scopes/api-scopes)をお読みください。

<div id="grant-access-to-the-logical-api">
  ## 論理APIへのアクセスを許可する
</div>

これで、論理APIがアクセストークンを取得できるようにすることで、APIへのアクセスを提供する準備が整いました。必要なスコープを含めることで、論理APIによって表されるAPIへのアプリケーションのアクセスを制御できます。次の手順では、[暗黙的なフロー](/docs/ja-JP/ja-jp/get-started/authentication-and-authorization-flow/implicit-flow-with-form-post)を使用してサンプルを反映しています。ただし、ニーズに最適なフローを使用できます。例：

* **マシン間アプリケーション** がある場合は、[クライアントの資格情報フロー](/docs/ja-JP/ja-jp/get-started/authentication-and-authorization-flow/client-credentials-flow)を実行して、APIのアクセストークンを要求することを承認できます。
* **ネイティブアプリ** を構築している場合は、[コード交換用証明キー（PKCE）を使用して承認コードフロー](/docs/ja-JP/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce)を実装できます。

承認フローの詳細については、[認可と承認フロー](/docs/ja-JP/ja-jp/get-started/authentication-and-authorization-flow)をお読みください。

1. ユーザーがSPA内でログインをクリックすると、アプリはユーザーをAuth0承認サーバー（`/authorize`エンドポイント）にリダイレクトします。呼び出しのパラメーターの詳細については、チュートリアルをご覧ください。[PKCEを使った認可コードフローで独自のAPIを呼び出し](/docs/ja-JP/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce/call-your-api-using-the-authorization-code-flow-with-pkce)。

   <AuthCodeBlock children={codeExample} language="http" lines />

   <Frame>
     <img src="https://mintcdn.com/generaltranslationinc/P5C2FvJW5xWCh6NI/docs/images/ja-jp/cdy7uua7fh8z/1ogYIaeDdyGL3Qo511m6Sh/5ab97c1535b2b62523a367594d44d66f/home.png?fit=max&auto=format&n=P5C2FvJW5xWCh6NI&q=85&s=31d5d2e4f9504a44d6c3752396066ed4" alt="Example application sign in page" width="750" height="579" data-path="docs/images/ja-jp/cdy7uua7fh8z/1ogYIaeDdyGL3Qo511m6Sh/5ab97c1535b2b62523a367594d44d66f/home.png" />
   </Frame>

2. Auth0承認サーバーはユーザーをログインページにリダイレクトし、ユーザーは構成されたログインオプションの1つを使用して認証します。

   <Frame>
     <img src="https://mintcdn.com/generaltranslationinc/tqPYu6gkIVBTtEtD/docs/images/ja-jp/cdy7uua7fh8z/6z6aA5nfA1uwOyx8srhvvI/2435a0909cfe44a57bef3ff27ef24e5b/lock.png?fit=max&auto=format&n=tqPYu6gkIVBTtEtD&q=85&s=4511702d900048c258df99401622b898" alt="Lock login page" width="750" height="579" data-path="docs/images/ja-jp/cdy7uua7fh8z/6z6aA5nfA1uwOyx8srhvvI/2435a0909cfe44a57bef3ff27ef24e5b/lock.png" />
   </Frame>

3. ユーザーがこのフローを初めて通過する場合は、Auth0がSPAに付与する権限をリストした同意プロンプトが表示されます。この場合、ユーザーはアプリが連絡先とカレンダーを読み取ることに同意するよう求められます。

   <Frame>
     <img src="https://mintcdn.com/generaltranslationinc/PUgbyUqJRl3iBJzI/docs/images/ja-jp/cdy7uua7fh8z/1te4FYRbu0aFcdohdXY2Rv/116bed5515eb2114c39374fb0a258912/consent-screen.png?fit=max&auto=format&n=PUgbyUqJRl3iBJzI&q=85&s=c7b52d7813b3e4f191b67ae7ef393d6c" alt="Example application Lock Consent screen" width="750" height="579" data-path="docs/images/ja-jp/cdy7uua7fh8z/1te4FYRbu0aFcdohdXY2Rv/116bed5515eb2114c39374fb0a258912/consent-screen.png" />
   </Frame>

4. ユーザーが同意すると、Auth0はURIのハッシュフラグメントにトークンを含むSPAにユーザーをリダイレクトします。SPAは、JavaScriptを使用してハッシュフラグメントからトークンを抽出し、ユーザーに代わってAPIを呼び出すことができるようになりました。

   ```javascript lines theme={null}
   function getParameterByName(name) {
     var match = RegExp('[#&]' + name + '=([^&]*)').exec(window.location.hash);
     return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
   }

   function getAccessToken() {
     return getParameterByName('access_token');
   }
   ```

サンプルでは、​​ログインに成功すると、論理APIから取得したアクセストークンを使用していずれかのAPIを呼び出すためのボタンが表示されます。

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/ABlkB6TUYafgJS-z/docs/images/ja-jp/cdy7uua7fh8z/2pGWG5Wa7U1tBPhAJZ7Bat/7e194066560605cc842f20624b80d958/apis.png?fit=max&auto=format&n=ABlkB6TUYafgJS-z&q=85&s=8f230f60bcb2191e10932d6762e45895" alt="Example application user authorized screen" width="750" height="579" data-path="docs/images/ja-jp/cdy7uua7fh8z/2pGWG5Wa7U1tBPhAJZ7Bat/7e194066560605cc842f20624b80d958/apis.png" />
</Frame>

<div id="implement-single-logout-slo-or-single-sign-on-sso">
  ### シングルログアウト（SLO）またはシングルサインオン（SSO）を実装する
</div>

シングルログアウトが必要な一部のマルチアプリケーションのシナリオ（あるアプリケーションからログアウトするユーザーが他のアプリケーションからもログアウトする必要があるような場合）では、`checkSession()`を使用して定期的にAuth0をポーリングし、セッションが存在するかどうかを確認するようにアプリケーションを設定できます。セッションがない場合は、ユーザーをアプリケーションからログアウトさせることができます。同じポーリング方式を使用して、シングルサインオン（<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-JP/ja-jp/glossary?term=single-sign-on" tip="シングルサインオン（SSO）: ユーザーが1つのアプリケーションにログインした後、そのユーザーを他のアプリケーションに自動的にログインさせるサービス。" cta="用語集の表示">SSO</Tooltip>）のシナリオにサイレント認証を実装することができます。

ポーリング間隔として、`checkSession()`の呼び出し間隔を15分以上に設定し、レート制限の問題が生じないようにします。

<div id="learn-more">
  ## もっと詳しく
</div>

* [APIを登録する](/docs/ja-JP/ja-jp/get-started/auth0-overview/set-up-apis)
* [API許可の追加](/docs/ja-JP/ja-jp/get-started/apis/add-api-permissions)
* [APIスコープ](/docs/ja-JP/ja-jp/get-started/apis/scopes/api-scopes)
* [APIの呼び出しをチェックする](/docs/ja-JP/ja-jp/troubleshoot/authentication-issues/check-api-calls)