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 と クライアントシークレット を取得します。
コネクターを設定する
clientId と clientSecret フィールドに、前のセクションで言及した OAuth アプリ詳細ページから取得した クライアント ID と クライアントシークレット を入力します。
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 ユーザーエクスペリエンスを有効にします。詳細については このページ を参照してください。
ウェブサイトで Google One Tap を有効にするには（Logto サインイン体験を超えて）、この機能は開発中です。更新をお待ちください。