Skip to main content

​
概要

新規または既存の 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 テナント を選択し、画面の案内に従って Auth0 アカウントに接続します。まだ Auth0 アカウントをお持ちでない場合は、https://auth0.com/signup から登録できます。
  4. ドロップダウンリストからテナントを選択し、Accept を選択してアカウントへのアクセスを承認します。
  5. テナントのリンクが完了したら、Add tenant を選択します。
  6. テナントとアプリケーションに必要な情報を入力し、Redeploy site チェックボックスをオンにして Create site tenant を選択します。
  7. これで、正常にリンクされたサイトテナントが Site Configuration に表示されます。
これで、Auth0 Dashboard の Applications にクライアントアプリケーションと API が表示されます。

​
連携を設定する

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

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

アプリケーションが Auth0 の設定をファイルから読み込む場合は、ビルド時にこの処理を自動化できます。これにより、ファイルを手動で変更しなくても、アプリケーションで常に適切な認可設定を使用できます。 これを行うには:
  1. Netlify のダッシュボードに移動します。
  2. Site configuration > Build & deploy > Build settings に進みます。
  3. ビルドを開始する前にシェルスクリプトが実行されるように、Build command を変更します。
このスクリプトは 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 内の他のアプリケーションと同様に、このアプリケーションをカスタマイズしたり変更したりできます。