Google を使用してソーシャルログインを設定する
Google コネクターは、アプリケーションが Google の OAuth 2.0 認証 (Authentication) システムを使用するための簡潔な方法を提供します。
このガイドは、Logto コネクターについての基本的な理解があることを前提としています。未経験の方は、コネクター ガイドを参照して始めてください。
Google API Console でプロジェクトを設定する
- Google API Console にアクセスし、Google アカウントでサインインします。
- 上部メニューバーの プロジェクトを選択 ボタンをクリックし、新しいプロジェクト ボタンをクリックしてプロジェクトを作成します。
- 新しく作成したプロジェクトで、API とサービス をクリックして API とサービス メニューに入ります。
同意画面を設定する
アプリケーションを設定して登録する
- 左側の API とサービス メニューで、OAuth 同意画面 ボタンをクリックします。
- 希望する ユーザータイプ を選択し、作成 ボタンをクリックします。（注：ユーザータイプ として 外部 を選択した場合、後でテストユーザーを追加する必要があります。）
これで アプリ登録の編集 ページに移動します。
アプリ登録の編集
OAuth 同意画面の設定
- 指示に従って OAuth 同意画面 フォームに記入します。
- 保存して続行 をクリックして続行します。
スコープの設定
- スコープを追加または削除 をクリックし、ポップアップドロワーで
../auth/userinfo.email、../auth/userinfo.profile、openidを選択し、更新 をクリックして完了します。使用する可能性のあるすべてのスコープを追加することをお勧めします。そうしないと、設定で追加した一部のスコープが機能しない場合があります。 - 必要に応じてフォームに記入します。
- 保存して続行 をクリックして続行します。
テストユーザーの追加（外部ユーザータイプのみ）
- ユーザーを追加 をクリックし、テストユーザーを追加して、これらのユーザーがテスト中にアプリケーションにアクセスできるようにします。
- 保存して続行 をクリックして続行します。
これで Google OAuth 2.0 同意画面が設定されました。
OAuth 2.0 資格情報を取得する
- 左側の API とサービス メニューで、資格情報 ボタンをクリックします。
- 資格情報 ページで、上部メニューバーの + 資格情報を作成 ボタンをクリックし、OAuth クライアント ID を選択します。
- OAuth クライアント ID の作成 ページで、アプリケーションタイプとして ウェブアプリケーション を選択します。
- アプリケーションの基本情報を入力します。
- + URI を追加 をクリックして、承認済みの JavaScript オリジン セクションに承認済みドメインを追加します。これは、Logto 認可ページが提供されるドメインです。私たちの場合、これは
${your_logto_origin}になります。例：https://logto.dev。 - 承認済みリダイレクト URI セクションで + URI を追加 をクリックして、承認済みリダイレクト URI を設定します。これは、ログイン後にユーザーをアプリケーションにリダイレクトするものです。私たちの場合、これは
${your_logto_endpoint}/callback/${connector_id}になります。例：https://logto.dev/callback/${connector_id}。connector_idは Logto 管理コンソールのコネクター詳細ページの上部バーにあります。 - 作成 をクリックして完了し、クライアント ID と クライアントシークレット を取得します。
コネクターを設定する
前のセクションで言及した OAuth アプリ詳細ページから取得した クライアント ID と クライアントシークレット を clientId と clientSecret フィールドに入力します。
scope は、スペースで区切られた スコープ のリストです。指定しない場合、スコープはデフォルトで openid profile email になります。
prompts は、必要なユーザーインタラクションのタイプを指定する文字列の配列です。文字列は次のいずれかの値になります：
none: 認可サーバーは認証またはユーザー同意画面を表示しません。ユーザーが既に認証されておらず、要求されたスコープに対する事前設定された同意がない場合、エラーを返します。既存の認証および / または同意を確認するために none を使用できます。consent: 認可サーバーは、クライアントに情報を返す前にユーザーに同意を求めます。select_account: 認可サーバーは、ユーザーにユーザーアカウントを選択するよう促します。これにより、認可サーバーに複数のアカウントを持つユーザーが、現在セッションを持つ複数のアカウントの中から選択できるようになります。
設定タイプ
| 名前 | タイプ |
|---|---|
| clientId | string |
| clientSecret | string |
| scope | string |
| prompts | string[] |
Google One Tap を有効にする
Google One Tap は、ユーザーが Google アカウントでウェブサイトやアプリにサインインするための安全で簡単な方法です。
Google コネクターを設定すると、コネクター詳細ページに Google One Tap のカードが表示されます。スイッチを切り替えることで、サインアップおよびサインインページで Google One Tap を有効にできます。
Google One Tap を有効にすると、次のオプションを設定できます：
- 可能であれば資格情報を自動選択： 特定の条件が満たされた場合、Google アカウントで自動的にユーザーをサインインします。
- ユーザーが外側をクリック / タップした場合、プロンプトをキャンセル：ユーザーがプロンプトの外側をクリックまたはタップした場合、Google One Tap プロンプトを閉じます。無効にすると、ユーザーはプロンプトを閉じるために閉じるボタンをクリックする必要があります。
- ITP ブラウザでのアップグレードされた One Tap UX を有効にする：インテリジェントトラッキング防止 (ITP) ブラウザでアップグレードされた Google One Tap ユーザーエクスペリエンスを有効にします。詳細については このページ を参照してください。
サーバーのオリジンを OAuth 同意画面設定の 承認済みの JavaScript オリジン セクションに追加してください。そうしないと、Google One Tap を表示できません。
ウェブサイトで Google One Tap を有効にするには（Logto サインイン体験を超えて）、この機能は開発中です。更新情報をお待ちください。
参考文献
Google Identity: OAuth 2.0 の設定