💭

Auth0連携のGoogleログイン申請手順(2024.9時点)

2024/09/25に公開

前提

  • 開発、ステージング、本番の3環境を作成する
  • Auth0のテナントは作成済み
  • Auth0のデフォルトドメイン
    • smesh-prod.jp.auth0.comsmesh-stg.jp.auth0.comsmesh-dev.jp.auth0.com
  • Auth0のカスタムドメイン
    • login.smesh.jplogin-stg.smesh.jplogin-dev.smesh.jp

Google Developerアカウントの作成

  1. Google Developerコンソールにアクセス
  2. Googleアカウントでログイン(または作成してログイン)
  3. コンソールが表示される
    コンソール画面

プロジェクトの作成

  1. 上部メニュー、Google Cloudアイコンの右にあるプルダウンを選択
  2. 新しいプロジェクトを選択
  3. 以下の通りに入力
    1. プロジェクト名環境がわかる名称(id-prodなど)
    2. 組織任意に設定
    3. 場所任意に設定
  4. 作成を選択
  5. 作成が完了したら、1のプルダウンから作成したプロジェクトを選択

同意画面の設定

  1. 左メニューのOAuth同意画面を選択
  2. User Type外部を選択
  3. 作成を選択
  4. 以下の通りに入力
    1. アプリ名共通IDなど(ログインユーザーに表示される)
    2. ユーザーサポートメールサポート用のメールアドレスを選択
    3. アプリのロゴなし(設定しても問題ないが、審査が発生する)
    4. アプリケーションのホームページ任意に設定(https://example.com)
    5. アプリケーションのプライバシーポリシーリンク`任意(https://example.com/privacy)
    6. アプリケーションの利用規約リンク任意に設定(https://example.com/terms)
    7. 承認済みドメイン
      1. Auth0のデフォルトドメインmesh.jp.auth0.com
      2. Auth0のカスタムドメインlogin.mesh.jp
    8. デベロッパーの連絡先情報Googleからの連絡を受けるためのメールアドレス
  5. 保存して次へを選択
  6. スコープを追加または削除を選択
  7. 以下にチェック
    1. .../auth/userinfo.email
    2. .../auth/userinfo.profile
    3. openid
  8. 更新を選択
  9. 保存して次へを選択
  10. 公開ステータスのアプリを公開を選択
  11. 確認を選択

認証情報(OAuthクライアントID)の作成

  1. 左メニューの認証情報を選択
  2. +認証情報を作成から、OAuthクライアントIDを選択
  3. 以下の通りに入力
    1. アプリケーションの種類ウェブアプリケーション
    2. 名前mesh-id-prod
    3. 承認済みのJavaScript生成元
      1. URI1https://smesh.jp.auth0.com
      2. URI2https://login.smesh.jp
    4. 承認済みのリダイレクトURI
      1. URI1https://smesh.jp.auth0.com/login/callback
      2. URI2https://login.smesh.jp/login/callback
  4. 保存を選択
  5. JSONをダウンロードを選択
  6. OKを選択

参考

サポート用のメールアドレス

サポート用のメールアドレスは、プロジェクトに招待されたアカウントのメールアドレスから選択する必要があります。そのため、別途サポート用のメールアドレスでGoogleアカウントを作成し、プロジェクトに招待する必要があります。

なお、サポート用のメールアドレスは、Googleログインを利用するユーザーに公開されます。

Auth0のデフォルトドメインの設定要否

本手順では、カスタムドメインの設定前に動作確認を行う目的で、Auth0のデフォルトドメインを入力しています。デフォルトドメインを利用しない場合は、設定を削除してください。

アプリケーションのホームページとは

Googleログインを行うユーザーが、サービスの概要を知るためのページが望ましいです。共通IDの場合は、IDサービスの概要が分かるLPや、ユーザーのプロフィールを管理するポータルサイトを作成していると思いますので、そちらのURLを設定するのが適切です。

関連ドキュメント

Auth0公式のGoogle連携手順

スタジオメッシュ

Discussion