Universal Login で Google One Tap を使用する

Universal Login ページで Google One Tap を有効にし、ユーザーがアクティブな Google セッションを使ってワンタップで認証できるようにする方法を説明します。

Auth0 は、Universal Login での Google One Tap によるユーザー認証をサポートしています。Google One Tap を使用すると、ブラウザーで有効な Google セッションを利用して、Universal Login ページを離れることなく、ワンタップでログインまたはサインアップできます。有効な Google アカウントを持つユーザーがログインページにアクセスすると、そのアクティブなアカウントが表示された Google One Tap プロンプトがオーバーレイとして表示されます。ユーザーがそのアカウントを選択すると、Auth0 が認証情報を検証してセッションを作成します。Google へのリダイレクトは不要です。

​

仕組み

Google One Tap は、サードパーティ Cookie やページリダイレクトに依存しない、ブラウザネイティブの認証標準である Federated Credential Management (FedCM) API を使用します。

1. ユーザーが、ブラウザーで有効な Google セッションを保持した状態で Universal Login ページにアクセスします。
2. Universal Login が有効な Google セッションを検出し、Google One Tap のオーバーレイを表示します。
3. ユーザーがプロンプトで Google アカウントを選択します。
4. Google が署名付き ID トークンを Universal Login に返します。
5. Auth0 が、tenant に設定されている Google ソーシャル接続に対して ID トークンを検証します。
6. Auth0 がユーザープロファイルを作成または更新し、Auth0 トークンを発行します。
7. Auth0 がユーザーをアプリケーションにリダイレクトします。

ユーザーのブラウザーが FedCM をサポートしていない場合や、ユーザーがプロンプトを閉じた場合でも、ログインページでは標準の Google で続行 オプションを引き続き利用できます。ユーザーがプロンプトを閉じるたびに、Google は 指数関数的なクールダウン期間を適用します。

開始する前に

• tenant で Universal Login を有効化して設定する必要があります。Google One Tap はクラシックログインエクスペリエンスではサポートされていません。詳細については、Universal Login と Classic Loginを参照してください。
• tenant で Google ソーシャル接続 (google-oauth2) を作成して設定する必要があります。詳細については、アプリに Google Login を追加するを参照してください。

​

Google One Tap を有効にする

Auth0 Dashboard、Management API、または Auth0 SDK を使用して、個々のアプリケーションで Google One Tap を有効にします。

Auth0 の Google One Tap 連携は、Token Vault および Connected Accounts for Token Vault に対応していません。Token Vault が有効な状態で Google One Tap を有効にすると、Google One Tap のプロンプトは表示されません。

Auth0 Dashboard

1. Auth0 Dashboard > アプリケーションに移動します。
2. 新しいアプリケーションを作成するか、Google One Tap で使用する既存のアプリケーションを選択します。
3. ［設定］で「Social Login」を検索し、Allow Google One Tap をオンにします。
   
4. Save を選択します。
5. Auth0 Dashboard > Authentication > Socialに移動します。
6. 新しい Google ソーシャル接続を作成するか、既存の google-oauth2 接続を選択します。
7. 接続の設定で、次を確認します。
   • ［設定］タブで、Google Client ID と Client Secret を確認します。One Tap 連携では、Auth0 developer keysは使用できません。
   • ［アプリケーション］タブで、One Tap に使用するアプリケーションがオンになっていることを確認します。
8. Save を選択します。

Management API

Update a client エンドポイントを呼び出し、fedcm_login.google.is_enabled を true に設定します。

PATCH /api/v2/clients/{id}

{
  "fedcm_login": {
    "google": {
      "is_enabled": true
    }
  }
}

特定のアプリケーションで Google One Tap を無効にするには、is_enabled を false に設定します。

Auth0 SDK

以下の例を使用して、Auth0 SDK で Universal Login に Google One Tap を追加します。最適なエクスペリエンスを得るため、最新バージョンの Auth0 SDK を使用することをお勧めします。

C#

using Auth0.ManagementApi;
using Auth0.ManagementApi.Types;
using System.Threading.Tasks;

public partial class Examples
{
    public async Task Example() {
        var client = new ManagementClient(
            token: "<token>"
        );

        await client.Clients.UpdateAsync(
            id: "id",
            request: new UpdateClientRequestContent {
                FedcmLogin = new FedCmLoginPatch {
                    Google = new FedCmLoginGooglePatch {
                        IsEnabled = true
                    }
                }
            }
        );
    }

}

Go

package example

import (
    context "context"

    management "github.com/auth0/go-auth0/management/management"
    client "github.com/auth0/go-auth0/management/management/client"
    option "github.com/auth0/go-auth0/management/management/option"
)

func do() {
    client := client.NewClient(
        option.WithToken(
            "<token>",
        ),
    )
    request := &management.UpdateClientRequestContent{
        FedcmLogin: &management.FedCmLoginPatch{
            Google: &management.FedCmLoginGooglePatch{
                IsEnabled: true,
            },
        },
    }
    client.Clients.Update(
        context.TODO(),
        "id",
        request,
    )
}

Java

package com.example.usage;

import com.auth0.client.mgmt.ManagementApi;
import com.auth0.client.mgmt.resources.clients.requests.UpdateClientRequestContent;
import com.auth0.client.mgmt.types.FedCmLoginPatch;
import com.auth0.client.mgmt.types.FedCmLoginGooglePatch;

public class Example {
    public static void main(String[] args) {
        ManagementApi client = ManagementApi
            .builder()
            .token("<token>")
            .build();

        client.clients().update(
            "id",
            UpdateClientRequestContent
                .builder()
                .fedcmLogin(
                    FedCmLoginPatch.builder()
                        .google(
                            FedCmLoginGooglePatch.builder()
                                .isEnabled(true)
                                .build()
                        )
                        .build()
                )
                .build()
        );
    }
}

PHP

<?php

namespace Example;

use Auth0\SDK\API\Management\Management;
use Auth0\SDK\API\Management\Clients\Requests\UpdateClientRequestContent;

$client = new Management(
    token: '<token>',
);
$client->clients->update(
    'id',
    new UpdateClientRequestContent([
        'fedcm_login' => [
            'google' => [
                'is_enabled' => true,
            ],
        ],
    ]),
);

Python

from auth0.management import ManagementClient
from auth0.management.types import FedCmLoginPatch, FedCmLoginGooglePatch

client = ManagementClient(
    token="<token>",
)

client.clients.update(
    id="id",
    fedcm_login=FedCmLoginPatch(
        google=FedCmLoginGooglePatch(is_enabled=True)
    ),
)

Ruby

require "auth0"

client = Auth0::Management.new(token: "<token>")

client.clients.update(
  id: "id",
  fedcm_login: {
    google: {
      is_enabled: true
    }
  }
)

Node.js

import { ManagementClient } from "auth0";

async function main() {
    const client = new ManagementClient({
        token: "<token>",
    });
    await client.clients.update("id", {
        fedcm_login: {
            google: {
                is_enabled: true,
            },
        },
    });
}
main();

​

考慮事項

​

Universal Login の高度なカスタマイズ (ACUL)

ACUL のカスタマイズは Google One Tap に適用されます。login、login-id、signup、または signup-id の画面をカスタマイズしている場合は、その設定が適用されます。ACUL の詳細については、ACUL の設定を参照してください。

​

多要素認証 (MFA)

tenant または接続ポリシーで多要素認証 (MFA) が必要な場合、Google One Tap は Google ID トークンを使用して最初の認証要素を完了します。次に Auth0 は、2 番目の認証要素として標準の Universal Login MFA チャレンジ画面を表示します。ユーザーは Universal Login フローの一環として MFA を完了します。

​

エンタープライズ接続

Google One Tap を使用できるのは、Google ソーシャル接続 (google-oauth2) を使用している場合のみです。Google Workspace のエンタープライズ接続には適用されません。tenant でホームレルムディスカバリーを使用し、企業の Google ドメインを持つユーザーをエンタープライズ接続にルーティングしている場合でも、そのルーティングには影響しません。

​

ブラウザのサポート

Google One Tap を利用するには、ブラウザが FedCM API をサポートしている必要があります。Auth0 はデフォルトで、One Tap ライブラリに "itp_support: true" を渡します。Chrome および Chromium ベースのブラウザでサポートされています。iOS や Firefox など、FedCM をサポートしていないブラウザでは、別の UX が提供されます。

​

詳細情報

• アプリに Google Login を追加する
• Native Android アプリに Sign In with Google を追加する
• Universal Login エクスペリエンス
• MFA を有効にする