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

> Netlify への Auth0 の統合に関するドキュメント

# Netlify と連携する

<div id="overview">
  ## 概要
</div>

新規または既存の Auth0 インスタンスを Netlify プロジェクトに接続し、Auth0 統合を使用してアプリのセキュリティ、スケーラビリティ、カスタマイズ性を強化します。この統合により、シンプルで一貫した顧客アイデンティティの仕組みをアプリケーションに直接実装できます。

この新しい統合を使用すると、Netlify プロジェクトのアイデンティティフローを構築してカスタマイズできます。アプリをすばやく安全に立ち上げるために、この統合では次のことを行います。

* わずか数回のクリックで、Auth0 テナントと連携する本番環境を Netlify に設定します。
* Netlify プロジェクトに接続する Application を Auth0 テナント内に自動的に作成します。
* Auth0 の認証情報を Netlify に事前設定するため、このプロセスで必要な手動手順の一部を省略できます。

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

Netlify プロジェクトへの Auth0 の統合を開始する前に、事前に設定しておく必要がある要件がいくつかあります。

* 統合対象のプロジェクトを含む Netlify アカウント。[Create your Netlify account](https://www.netlify.com/) にアクセスして、アカウントを作成してください。
* React、Vue、またはサーバーレス関数を備えた静的サイトなど、認証が必要な Web アプリケーション。

<div id="add-a-netlify-integration">
  ## Netlify 統合を追加する
</div>

Netlify アカウントを作成してダッシュボードにログインしたら、統合の追加を開始できます。既存の Netlify プロジェクトに Auth0 統合を追加するには、次の手順に従います。

1. Netlify のダッシュボードで、**Extensions > Directory** に移動します。
2. [**Auth0**](https://app.netlify.com/extensions/auth0) を検索し、**Install** を選択します。
3. **Install** を選択して、Auth0 統合ポータルへのインストールに進みます。

<Frame>
  <img src="https://mintcdn.com/translations/raZlN0BXDjNonwyb/docs/images/cdy7uua7fh8z/18pdegCJ6AHGyWsWY53aQt/f5ecef993ef893f1920dda33246e6840/netlify-directory.png?fit=max&auto=format&n=raZlN0BXDjNonwyb&q=85&s=1ad114f4beafeb5162299c2fed2d244c" alt="" width="2234" height="1222" data-path="docs/images/cdy7uua7fh8z/18pdegCJ6AHGyWsWY53aQt/f5ecef993ef893f1920dda33246e6840/netlify-directory.png" />
</Frame>

<div id="connect-your-site">
  ## サイトを接続する
</div>

サイトを Auth0 に接続するには、次の手順に従います。

1. Auth0 に接続するサイトの **Site Configuration** に移動します。
2. サイドバーで、**Access & security.** の下にある **Auth0** を選択します。
3. **Link an Auth0 tenant** を選択し、画面の案内に従って Auth0 アカウントに接続します。Auth0 アカウントをまだお持ちでない場合は、[https://auth0.com/signup](https://auth0.com/signup) から登録できます。

   <Frame>
     <img src="https://mintcdn.com/translations/3nS3prIggmJG9TUI/docs/images/cdy7uua7fh8z/3wZZNNVMadwZjeLi9vyQtH/01821cd184326a004592f5e0e20a6f72/2025-03-03_12-12-09.png?fit=max&auto=format&n=3nS3prIggmJG9TUI&q=85&s=d5f97658ddc8049face10d4093258f0a" alt="" width="886" height="1424" data-path="docs/images/cdy7uua7fh8z/3wZZNNVMadwZjeLi9vyQtH/01821cd184326a004592f5e0e20a6f72/2025-03-03_12-12-09.png" />
   </Frame>
4. ドロップダウンリストからテナントを選択し、**Accept** を選択してアカウントを承認します。

   <Frame>
     <img src="https://mintcdn.com/translations/c0RQ9V0YAcT0-8l5/docs/images/cdy7uua7fh8z/7mrUvgQh70cgtri09aOHso/a76600ebf472dcddb3977a8b9e726e01/netlify-link.png?fit=max&auto=format&n=c0RQ9V0YAcT0-8l5&q=85&s=9f69230b2779b2f1849027c613894696" alt="" width="1966" height="846" data-path="docs/images/cdy7uua7fh8z/7mrUvgQh70cgtri09aOHso/a76600ebf472dcddb3977a8b9e726e01/netlify-link.png" />
   </Frame>
5. テナントのリンクが完了したら、**Add tenant** を選択します。
6. テナントとアプリケーションに必要な情報を入力し、**Redeploy site** チェックボックスをオンにして **Create site tenant** を選択します。

   <Frame>
     <img src="https://mintcdn.com/translations/mMSz-RNYLuOm2GmQ/docs/images/cdy7uua7fh8z/hPxAU8mwd9035AXOPMqxp/f74d0864a6cc5a4aed963bfc77237d7c/auth0_tenant.png?fit=max&auto=format&n=mMSz-RNYLuOm2GmQ&q=85&s=a0a034de759f1f95df4d26e0e821e331" alt="" width="2436" height="2444" data-path="docs/images/cdy7uua7fh8z/hPxAU8mwd9035AXOPMqxp/f74d0864a6cc5a4aed963bfc77237d7c/auth0_tenant.png" />
   </Frame>
7. これで、サイト設定にリンク済みのサイトテナントが表示されます。

   <Frame>
     <img src="https://mintcdn.com/translations/eVsQcTnbClN-oB7d/docs/images/cdy7uua7fh8z/1y8khKk4yjGvySB2QRItD3/0f9a5606373c69761ff6fefa4fe180af/netlify-success.png?fit=max&auto=format&n=eVsQcTnbClN-oB7d&q=85&s=049ecdd1543816ff9fab4904d645f1d2" alt="" width="2362" height="750" data-path="docs/images/cdy7uua7fh8z/1y8khKk4yjGvySB2QRItD3/0f9a5606373c69761ff6fefa4fe180af/netlify-success.png" />
   </Frame>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  これで、Auth0 Dashboard の **Applications** にクライアントアプリケーションと API が表示されます。
</Callout>

<div id="set-up-the-integration">
  ## 統合を設定する
</div>

Auth0 を Netlify プロジェクトと統合するには、アプリケーションに **<Tooltip tip="クライアントID: Auth0 から登録済みリソースに付与される識別値です。" cta="用語集を見る" href="/ja/docs/glossary?term=Client+ID">クライアントID</Tooltip>** や **Auth0 ドメイン** などの認証設定を指定する必要があります。

アプリケーションがこれらの設定を環境変数から読み取る場合、拡張機能によって自動的に追加されます。

1. Netlify ダッシュボードに移動します。
2. **Site configuration > Environment variables** に移動します。
3. **Add a variable** をクリックし、次を入力します。

   * `AUTH0_CLIENT_ID` (Auth0 クライアントID)
   * `AUTH0_DOMAIN` (Auth0 ドメイン)

     <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
       これらの変数は、その他すべてのアプリケーション情報とあわせて、Auth0 Dashboard の **Applications > \[Your app] > Settings** で確認できます。
     </Callout>

これで、デプロイに必要な Auth0 の認証情報が正しく設定されました。

<div id="populate-a-configuration-file">
  ### 設定ファイルに値を設定する
</div>

アプリケーションがファイルから Auth0 の設定を読み込む場合は、ビルドフェーズ中にこの処理を自動化できます。これにより、ファイルを手動で変更しなくても、アプリケーションで常に適切な認可設定を使用できます。

これを行うには、次の手順に従います。

1. Netlify のダッシュボードに移動します。
2. **Site configuration > Build & deploy > Build settings** に移動します。
3. ビルドを開始する前にシェルスクリプトが実行されるよう、**Build command** を変更します。

   ```bash wrap lines theme={null}
   echo "{\"clientId\": \"${AUTH0_CLIENT_ID}\", \"domain\": \"${AUTH0_DOMAIN}\"}" > auth_config.json && npm run build
   ```

このスクリプトは `auth_config.json` という名前の JSON ファイルを作成し、そこに上で設定した環境変数 `AUTH0_CLIENT_ID` と `AUTH0_DOMAIN` を書き込みます。これにより、アプリケーションは実行時に正しい Auth0 設定を使用できます。

<div id="manage-integration">
  ## 統合を管理する
</div>

Netlify プロジェクトに Auth0 統合を追加すると、<Tooltip tip="Auth0 Dashboard: サービスを設定するための Auth0 のメイン製品です。" cta="用語集を見る" href="/ja/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip> で、CIAM ワークフローを管理およびカスタマイズするための新しいアプリケーションが作成されます。

1. Auth0 Dashboard に移動します。
2. **Applications > Applications > \[Your Netlify application]** を選択します。
3. **Settings > Application URIs** で Netlify アプリケーションの URI を確認します。

これで、このアプリケーションは Auth0 Dashboard 内の他のアプリケーションと同様にカスタマイズおよび変更できます。