Google Identity Services は FedCM API に移行します。移行ガイドに沿って潜在的な変更を確認し、ウェブサイトへのログインに悪影響が及ばないようにします。

このページは Cloud Translation API によって翻訳されました。

Google ログインから移行する

このガイドでは、移行に必要な変更と手順について説明します。以前の Google ログインプラットフォームライブラリを新しい Google Identity Services ライブラリに認証。

クライアントが JavaScript などの Google API クライアントライブラリを以前のライブラリauthorizationについては、Google Identity への移行に関する記事を参照してください。サービスをご覧ください。

認証と認可

認証は、ユーザーが誰であるかを設定するもので、一般にユーザー登録やログインなどのユーザー登録やログインといった操作です認可とは、Google Cloud リソースに拒否することを意味しますたとえば、アプリがユーザーの Google ドライブへのアクセスに対する同意。

以前の Google ログインプラットフォームライブラリと同様に、新しい Google Identity 認証と認可の両方をサポートするように構築されているサービスライブラリプロセスです。

ただし、新しいライブラリでは複雑さを軽減するために 2 つのプロセスを分離しています。を使用すると、デベロッパーが Google アカウントをアプリに統合できます。

認証のみに関するユースケースの場合は、引き続きこのページをお読みください。

ユースケースに承認が含まれている場合は、ユーザー承認の仕組みをご覧ください。 Google Identity Services に移行して、アプリケーションが改善された新しい API を使用します。

変更内容

新しい Google Identity Services ライブラリには、ユーザー向けのさまざまな機能が用意されています。ユーザビリティの向上。ハイライトは以下のとおりです。

より少ないユーザーでスムーズな新しいワンタップと自動ログインフローを実現歩数、
刷新されたログインボタン
ウェブ全体での一貫したブランディングと一貫したログイン動作により、理解と信頼、
コンテンツにすばやくアクセスするユーザーがどこからでも直接登録、ログインできるサイトにアクセスする必要はありません。

開発者にとって Google は複雑さを軽減し、セキュリティを強化し、短時間で統合できますたとえば、次のような点が改善されます。

サイトの静的コンテンツにユーザーログインを追加する場合、 HTML、
ログイン認証と認可の分離や、認証情報の共有を OAuth 2.0 統合の複雑さはなくなり、サイトにログインしたり
ポップアップモードとリダイレクトモードは引き続きサポートされますが、Google の OAuth 2.0 は 2.0 インフラストラクチャがバックエンドサーバーのログインエンドポイントにリダイレクトされるようになりました。
以前の Google Identity Platform と Google API JavaScript ライブラリを 1 つの新しいライブラリに統合し、
使用するかどうかを指定できますゲッタースタイル関数による Promise と間接的な処理には、わかりやすくするために削除しました。

ログインによる移行の例

既存の Google ログインボタンから移行する場合、サイトのログインに興味がある場合はを新しいパーソナライズボタンに更新します。これを行うには、サーバーをスワップ新しいログインオブジェクトを使用するようにコードベースを更新します。

ライブラリと構成

以前の Google ログインプラットフォームライブラリ: apis.google.com/js/platform.js および JavaScript 用の Google API クライアントライブラリ（gapi.client）は、ユーザー認証と認可に必要な時間が長くなります。攻撃者は、単一の新しい Google Identity Services JavaScript ライブラリに置き換えられました。 accounts.google.com/gsi/client。

前述の 3 つの JavaScript モジュール（api、client、platform）は、ログインはすべて apis.google.com から読み込まれます。地域の特定に役立つ以前のライブラリがサイトに含まれている可能性がある場合、通常は次のようなコードになります。

デフォルトのログインボタンで apis.google.com/js/platform.js が読み込まれ、
カスタムボタングラフィックが apis.google.com/js/api:client.js を読み込み、かつ
gapi.client を直接使用すると、apis.google.com/js/api.js が読み込まれます。

ほとんどの場合、既存のウェブアプリケーションのクライアント ID を引き続き使用できます認証情報を取得できます。移行の一環として、Google Cloud の OAuth 2.0 ポリシーと Google API Console の使用で確認し、必要に応じて次のクライアント設定を更新します。

テストアプリと本番環境アプリで別々のプロジェクトを使用し、クライアント ID、
OAuth 2.0 クライアント ID のタイプが「ウェブアプリケーション」で、
HTTPS は、承認済みの JavaScript 生成元とリダイレクト URI に使用されます。

影響を受けるコードを特定してテストする

デバッグ Cookie は、影響を受けるコードの特定やサポート終了後のテストに役立ちます。確認します。

大規模または複雑なアプリでは、影響を受けるすべてのコードを gapi.auth2 モジュールのサポート終了。近日中にリリースされる予定非推奨の機能をコンソールに追加する場合は、G_AUTH2_MIGRATION Cookie を informational にマッピング。必要に応じて、コロンの後に Key-Value を追加しますセッションストレージにも記録されます。ログインしてメールを受け取ったら、収集したログをバックエンドに送信して後で分析できます。対象 informational:showauth2use は、オリジンと URL をセッションストレージに保存します。名前は「showauth2use」です。

gapi.auth2 モジュールが読み込まれなくなったときのアプリの動作を確認するには、 G_AUTH2_MIGRATION Cookie の値を enforced に設定します。これにより必要があります。

G_AUTH2_MIGRATION Cookie に指定できる値は次のとおりです。

enforced gapi.auth2 モジュールをロードしない。
informational 非推奨の機能の使用を JS コンソールに記録します。さらに記録するオプションのキー名が設定されている場合は、 informational:key-name。

ユーザーへの影響を最小限に抑えるため、この Cookie は最初にローカルに設定することをおすすめします。を使用することです。

HTML と JavaScript

この認証のみのログインのシナリオでは、サンプルコードとデバイスのレンダリング既存の Google ログインボタンが表示されます。ポップアップまたはリダイレクトから選択認証レスポンスがどのように処理されるかを JavaScript コールバック、またはバックエンドサーバーログインへの安全なリダイレクトによって提供します

以前の方法

Google ログインボタンをレンダリングし、コールバックを使用してログインを処理する直接リクエストできます。

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
  </body>
</html>

リダイレクトモード

Google ログインボタンをレンダリングし、ユーザーの AJAX 呼び出しで終了するバックエンドサーバーのログインエンドポイントに接続します。

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
    <script>
      function handleCredentialResponse(googleUser) {
        ...
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://yourbackend.example.com/tokensignin');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
          console.log('Signed in as: ' + xhr.responseText);
        };
        xhr.send('idtoken=' + id_token);
      }
    </script>
  </body>
</html>

レンダリング

新しいビジュアル属性により、カスタマイズしたカスタムパスワードを作成する以前の方法が簡素化されます。ボタンにより、gapi.signin2.render() の呼び出しが不要になります。また、サイトで画像やビジュアルアセットをホストして維持できます。

Google ログイン

ユーザーのログインステータスを更新するボタンテキスト。

新しい方法

認証のみのログインのシナリオで新しいライブラリを使用するには、次を選択します。ポップアップモードまたはリダイレクトモードから移動し、コードサンプルを使用してログインページの既存の実装を確認できます

コールバックを使用して、ユーザーのブラウザからのログインを直接処理します。

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-callback="handleCredentialResponse">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

リダイレクトモード

Google は、data-login_url で指定されたログインエンドポイントを呼び出します。属性です。これまでは、ユーザーが POST オペレーションを実行し、パラメータ名を指定します。新しいライブラリは、作成したエンドポイントに ID トークンを credential パラメータ。最後に、バックエンドで ID トークンを確認します。あります。

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-ux_mode="redirect"
         data-login_uri="https://www.example.com/your_login_endpoint">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

レンダリング

visual-attributes を使用して「Google でログイン」ボタンをカスタマイズするサイズ、形状、色です。カスタマイズされた通知とともにワンタップポップアップを表示するログイン率を向上できます。

ワンタップ
ポップアップ

ユーザーのログイン状態によって [ログイン] のボタンテキストが更新されないから「ログインしています」。同意の後、または再訪問時に、パーソナライズされたボタンにユーザーの名前、メールアドレス、プロフィール写真が表示されます。

この認証のみの例では、新しい accounts.google.com/gsi/client ライブラリ、g_id_signin クラス、g_id_onload オブジェクトが以前の apis.google.com/js/platform.js ライブラリと g-signin2 オブジェクト。

新しいパーソナライズされたボタンのレンダリングに加えて、サンプルコードも新しいワンタップポップアップを表示します。パーソナライズされたボタンを表示する場所にはユーザーを最小限に抑えるため、ワンタップのポップアップも表示することを強く推奨します。煩わしさを感じることはありません。

ログイン時の手間が増えるためおすすめしませんが、新しい Google Chat の各ボタンを同時に表示するのではなく、単体で表示できます。ワンタップダイアログ。これを行うには、data-auto_prompt 属性を false に設定します。

HTML API と JavaScript API

上記の例は、新しい HTML API を使用してログインを追加する方法を示しています。測定しますまたは、同等の機能を持つ JavaScript API を使用するか、すべてのページで HTML API と JavaScript API を組み合わせてサイトをご覧ください。

ボタンのカスタマイズオプション（コールバックタイプや色、サイズ、シェイプ、テキスト、テーマなどの属性を生成します。これを使用すると、さまざまなオプションをすばやく比較し、サイトで使用する HTML スニペット。

どのページからでもワンタップでログイン

ワンタップは、ユーザーがサイトへの登録やログインをスムーズに行える新しい方法です。サイトの任意のページからユーザーが直接ログインできるようになり、ユーザーが専用のログインページにアクセスする必要がなくなります。言い換えると登録やログインの手間が省けます。ログインページ以外のページから登録およびログインする。

どのページからでもログインできるように、g_id_onload をサイト全体に共通のヘッダーやフッター、その他のオブジェクトを追加できます。

また、パーソナライズされたログインを表示する g_id_signin を追加することもおすすめします。 ] ボタンは、ログインページまたはユーザーアカウント管理ページでのみ表示できます。ユーザーに選択肢を与える他の連携機能とともにボタンを表示することで、登録やログインの ID プロバイダのボタンとユーザー名とパスワードの入力フィールド。

トークンレスポンス

OAuth 2.0 を理解したり使用したりしなくても、ユーザーのログインが可能に認証コード、アクセストークン、更新トークンなどです。代わりに JSON Web Token が、（JWT）ID トークンは、ログインステータスとユーザープロファイルを共有するために使用されます。たとえば、さらに簡素化されるため、"getter" を使用する必要はもうありません。スタイルアクセサメソッドを使ってユーザープロファイルデータを操作します。

Google によって署名された安全な JWT ID トークン認証情報が、以下のいずれかで返されます。

ユーザーのブラウザベースの JavaScript コールバックハンドラにポップアップモードで呼び出します。
バックエンドサーバーへの通信が途絶えると、Google がログインエンドポイントにリダイレクトします。 [Google でログイン] ボタン ux_mode が redirect に設定されている。

どちらの場合も、以下を削除して既存のコールバックハンドラを更新します。

googleUser.getBasicProfile() の呼び出し
BasicProfile への参照と、関連する getId() の呼び出し getName()、getGivenName()、getFamilyName()、getImageUrl()、 getEmail() メソッド
AuthResponse オブジェクトの使用方法。

代わりに、新しい JWT では credential サブフィールドへの直接参照を使用してください。 CredentialResponse オブジェクトを使用してユーザープロフィールデータを操作します。

また、リダイレクトモードに限り、クロスサイトリクエストを防止偽造（CSRF）とバックエンドサーバーでの Google ID トークンの検証

サイトでのユーザーの行動を詳しく把握するには、 CredentialResponse の select_by フィールドを使用して、同意の結果、使用された特定のログインフローなどです。

ユーザーの同意と権限の取り消し

ユーザーがウェブサイトに初めてログインしたときに、同意を求めるメッセージが Google に表示されますを使用してユーザーのアカウントプロファイルをアプリと共有します。同意した後にのみ ID トークンの認証情報ペイロードで、アプリに共有されるユーザーのプロフィール。このプロファイルへのアクセス権を取り消すことは、以前のログインライブラリを使用します。

ユーザーは権限を取り消して、Google アカウントとアプリの接続を解除できます https://myaccount.google.com/permissions にアクセスする。または、API をトリガーしてアプリから直接接続を解除することもできます。呼び出すことができます。以前の disconnect メソッドは、新しい revoke メソッドに置き換えられています。

ユーザーがプラットフォームでアカウントを削除した場合は、 revokeして、Google アカウントとアプリの接続を解除してください。

以前は、auth2.signOut() を使用してユーザーのログアウトを管理できました。管理できます。auth2.signOut() の使用をすべて削除し、アプリユーザーごとのセッション状態とログインステータスを直接管理します。

セッション状態とリスナー

新しいライブラリでは、ウェブのログインステータスやセッション状態が維持されません。。

Google アカウントのログインステータス、アプリのセッション状態、ログインステータスはそれぞれ異なる概念です。

Google アカウントとアプリに対するユーザーのログインステータスをステータスごとに表示ただし、ユーザーがログインしたことがわかっている場合は除きます。認証に成功し、Google アカウントにログインします。

Google でログインする場合、ワンタップまたは自動ログインがサイトユーザーが次のことを行うには、まず Google アカウントにログインする必要があります。

最初の登録時にユーザープロファイルの共有に同意する、またはサイトへのログイン、
サイトに再度アクセスしたときにログインできます。

ユーザーはログインしたままにしたり、ログアウトしたり、別の Google アカウントに切り替えたりできますウェブサイトでのアクティブなログインセッションを維持できます。

次のユーザーのログインステータスを直接管理する責任は、あなたにあります。説明します。これまで、Google ログインはユーザーのログインセッション状態をご覧ください。

auth2.attachClickHandler() への参照とその登録済みデータをすべて削除します呼び出すことができます。

これまでは、リスナーを使用して、メッセージのログインステータスの変更を共有することで、関連付けられます。リスナーのサポートは終了しました。

listen()、auth2.currentUser への参照をすべて削除します。 auth2.isSignedIn。

クッキー

「Google でログイン」では、Cookie の使用が制限されます（これらの Cookie の説明）。できます。Google による Cookie の使用についてをご覧ください。をご覧ください。

以前の Google ログインプラットフォームライブラリによって設定された G_ENABLED_IDPS Cookie 使用されなくなりました。

新しい Google Identity Services ライブラリでは、必要に応じてこれらのクロスドメイン設定オプションに応じて異なります。

g_state にはユーザーのログアウトステータスが保存され、ワンタップの使用時に設定されます。ポップアップ表示や自動ログインが
g_csrf_token は、CSRF 攻撃の防止に使用される二重送信 Cookie です。ログインエンドポイントが呼び出されたときに設定されます。ログイン URI の値は、明示的に設定することも、デフォルトで現在のページの URI に設定することもできます。お客様のログインエンドポイントが呼び出される可能性がある状況は次のとおりです。
- HTML API（data-ux_mode=redirect あり、または data-login_uri がある場合）セット
- JavaScript API（ux_mode=redirect と google.accounts.id.prompt() は、ワンタップや自動ログイン。

Cookie を管理するサービスをご利用の場合は、2 つの新しい Cookie を必ず追加してください。移行が完了したら、以前の Cookie を削除します。

複数のドメインまたはサブドメインを管理している場合は、ディスプレイネットワークのサブドメインをご覧ください。g_state Cookie の使用方法について詳しくは、以下をご覧ください。

ユーザーログインのオブジェクト移行リファレンス

旧	新規	メモ
JavaScript ライブラリ
apis.google.com/js/platform.js	accounts.google.com/gsi/client	古いデータを新しいものに差し替えます。
apis.google.com/js/api.js	accounts.google.com/gsi/client	古いデータを新しいものに差し替えます。
GoogleAuth オブジェクトおよび関連するメソッド:
GoogleAuth.attachClickHandler()	IdConfiguration.callback （JS と HTML の場合の data-callback）	古いデータを新しいものに差し替えます。
GoogleAuth.currentUser.get()	CredentialResponse	代わりに、不要になった CredentialResponse を使用してください。
GoogleAuth.currentUser.listen()		削除ユーザーの現在の Google ログインステータスを確認できません。同意とログインを確かめるには、ユーザーが Google にログインする必要があります。「 select_by CredentialResponse のフィールドを使用して、同意ステータスと、使用するログイン方法が表示されます。
GoogleAuth.disconnect()	google.accounts.id.revoke	古いデータを新しいものに差し替えます。取り消しは https://myaccount.google.com/permissions からも行われる場合があります。
GoogleAuth.grantOfflineAccess()		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
GoogleAuth.isSignedIn.get()		削除ユーザーの現在の Google ログインステータスを確認できません。同意とログインを確かめるには、ユーザーが Google にログインする必要があります。
GoogleAuth.isSignedIn.listen()		削除ユーザーの現在の Google ログインステータスを確認できません。同意とログインを確かめるには、ユーザーが Google にログインする必要があります。
GoogleAuth.signIn()		削除HTML DOM の読み込み g_id_signin 要素または JS 呼び出しで google.accounts.id.renderButton ユーザーの Google アカウントへのログインをトリガーする。
GoogleAuth.signOut()		削除アプリと Google アカウントに対するユーザーのログインステータスは、独立していますGoogle はアプリのセッション状態を管理しません。
GoogleAuth.then()		削除GoogleAuth は非推奨となりました。
GoogleUser オブジェクトと関連するメソッドの一覧を返します。
GoogleUser.disconnect()	google.accounts.id.revoke	古いデータを新しいものに差し替えます。取り消しは https://myaccount.google.com/permissions からも行われる場合があります。
GoogleUser.getAuthResponse()
GoogleUser.getBasicProfile()	CredentialResponse	`BasicProfile` メソッドではなく、`credential` とサブフィールドを直接使用します。
GoogleUser.getGrantedScopes()		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
GoogleUser.getHostedDomain()	CredentialResponse	代わりに、`credential.hd` を直接使用してください。
GoogleUser.getId()	CredentialResponse	代わりに、`credential.sub` を直接使用してください。
GoogleUser.grantOfflineAccess()		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
GoogleUser.grant()		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
GoogleUser.hasGrantedScopes()		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
GoogleUser.isSignedIn()		削除ユーザーの現在の Google ログインステータスを確認できません。同意とログインを確かめるには、ユーザーが Google にログインする必要があります。
GoogleUser.reloadAuthResponse()		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
gapi.auth2 オブジェクトと関連するメソッドの一覧を使用します。
gapi.auth2.AuthorizeConfig オブジェクト		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
gapi.auth2.AuthorizeResponse オブジェクト		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
gapi.auth2.AuthResponse オブジェクト		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
gapi.auth2.authorize()		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
gapi.auth2.ClientConfig()		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
gapi.auth2.getAuthInstance()		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
gapi.auth2.init()		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
gapi.auth2.OfflineAccessOptions オブジェクト		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
gapi.auth2.SignInOptions オブジェクト		削除OAuth 2.0 のアクセストークンとスコープは、ID トークンに置き換わりました。
gapi.signin2 オブジェクトおよび関連メソッド:
gapi.signin2.render()		削除HTML DOM の読み込み g_id_signin 要素または JS 呼び出しで google.accounts.id.renderButton ユーザーの Google アカウントへのログインをトリガーする。

Google ログインから移行する

認証と認可

変更内容

ログインによる移行の例

ライブラリと構成

影響を受けるコードを特定してテストする

HTML と JavaScript

以前の方法

ポップアップ モード

リダイレクト モード

レンダリング

新しい方法

ポップアップ モード

リダイレクト モード

レンダリング

HTML API と JavaScript API

どのページからでもワンタップでログイン

トークン レスポンス

ユーザーの同意と権限の取り消し

セッション状態とリスナー

クッキー

ユーザー ログインのオブジェクト移行リファレンス

ポップアップモード

リダイレクトモード

ポップアップモード

リダイレクトモード

トークンレスポンス

ユーザーログインのオブジェクト移行リファレンス