メインコンテンツへスキップ

​
概要

新規または既存の Auth0 インスタンスを Netlify プロジェクトに接続し、Auth0 統合を使用してアプリのセキュリティ、スケーラビリティ、カスタマイズ性を強化します。この統合により、シンプルで一貫した顧客アイデンティティの仕組みをアプリケーションに直接実装できます。 この新しい統合を使用すると、Netlify プロジェクトのアイデンティティフローを構築してカスタマイズできます。アプリをすばやく安全に立ち上げるために、この統合では次のことを行います。
  • わずか数回のクリックで、Auth0 テナントと連携する本番環境を Netlify に設定します。
  • Netlify プロジェクトに接続する Application を Auth0 テナント内に自動的に作成します。
  • Auth0 の認証情報を Netlify に事前設定するため、このプロセスで必要な手動手順の一部を省略できます。

​
前提条件

Netlify プロジェクトへの Auth0 の統合を開始する前に、事前に設定しておく必要がある要件がいくつかあります。
  • 統合対象のプロジェクトを含む Netlify アカウント。Create your Netlify account にアクセスして、アカウントを作成してください。
  • React、Vue、またはサーバーレス関数を備えた静的サイトなど、認証が必要な Web アプリケーション。

​
Netlify 統合を追加する

Netlify アカウントを作成してダッシュボードにログインしたら、統合の追加を開始できます。既存の Netlify プロジェクトに Auth0 統合を追加するには、次の手順に従います。
  1. Netlify のダッシュボードで、Extensions > Directory に移動します。
  2. Auth0 を検索し、Install を選択します。
  3. Install を選択して、Auth0 統合ポータルへのインストールに進みます。

​
サイトを接続する

サイトを Auth0 に接続するには、次の手順に従います。
  1. Auth0 に接続するサイトの Site Configuration に移動します。
  2. サイドバーで、Access & security. の下にある Auth0 を選択します。
  3. Link an Auth0 tenant を選択し、画面の案内に従って Auth0 アカウントに接続します。Auth0 アカウントをまだお持ちでない場合は、https://auth0.com/signup から登録できます。
  4. ドロップダウンリストからテナントを選択し、Accept を選択してアカウントを承認します。
  5. テナントのリンクが完了したら、Add tenant を選択します。
  6. テナントとアプリケーションに必要な情報を入力し、Redeploy site チェックボックスをオンにして Create site tenant を選択します。
  7. これで、サイト設定にリンク済みのサイトテナントが表示されます。
これで、Auth0 Dashboard の Applications にクライアントアプリケーションと API が表示されます。

​
統合を設定する

Auth0 を Netlify プロジェクトと統合するには、アプリケーションに や Auth0 ドメイン などの認証設定を指定する必要があります。 アプリケーションがこれらの設定を環境変数から読み取る場合、拡張機能によって自動的に追加されます。
  1. Netlify ダッシュボードに移動します。
  2. Site configuration > Environment variables に移動します。
  3. Add a variable をクリックし、次を入力します。
    • AUTH0_CLIENT_ID (Auth0 クライアントID)
    • AUTH0_DOMAIN (Auth0 ドメイン)
      これらの変数は、その他すべてのアプリケーション情報とあわせて、Auth0 Dashboard の Applications > [Your app] > Settings で確認できます。
これで、デプロイに必要な Auth0 の認証情報が正しく設定されました。

​
設定ファイルに値を設定する

アプリケーションがファイルから Auth0 の設定を読み込む場合は、ビルドフェーズ中にこの処理を自動化できます。これにより、ファイルを手動で変更しなくても、アプリケーションで常に適切な認可設定を使用できます。 これを行うには、次の手順に従います。
  1. Netlify のダッシュボードに移動します。
  2. Site configuration > Build & deploy > Build settings に移動します。
  3. ビルドを開始する前にシェルスクリプトが実行されるよう、Build command を変更します。 
    echo "{\"clientId\": \"${AUTH0_CLIENT_ID}\", \"domain\": \"${AUTH0_DOMAIN}\"}" > auth_config.json && npm run build
このスクリプトは auth_config.json という名前の JSON ファイルを作成し、そこに上で設定した環境変数 AUTH0_CLIENT_ID と AUTH0_DOMAIN を書き込みます。これにより、アプリケーションは実行時に正しい Auth0 設定を使用できます。

​
統合を管理する

Netlify プロジェクトに Auth0 統合を追加すると、 で、CIAM ワークフローを管理およびカスタマイズするための新しいアプリケーションが作成されます。
  1. Auth0 Dashboard に移動します。
  2. Applications > Applications > [Your Netlify application] を選択します。
  3. Settings > Application URIs で Netlify アプリケーションの URI を確認します。
これで、このアプリケーションは Auth0 Dashboard 内の他のアプリケーションと同様にカスタマイズおよび変更できます。