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

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

Google ログインから移行する

このガイドでは、以前の Google Sign-In プラットフォームライブラリから新しい Google Identity Services ライブラリに JavaScript ライブラリを正常に移行するために必要な変更と手順について説明します。認証

クライアントが JavaScript 用 Google API クライアントライブラリまたはその他の以前のライブラリを認可に使用している場合は、Google Identity Services に移行するをご覧ください。

認証と認可

認証とは、ユーザーを識別するもので、一般に「ユーザーの登録」または「ログイン」と呼ばれます。認可とは、データまたはリソースへのアクセスを許可または拒否するプロセスです。たとえば、アプリがユーザーの Google ドライブにアクセスする際にユーザーの同意をリクエストします。

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

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

ユースケースが認証のみに関連する場合は、このページを読み進めてください。

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

変更内容

ユーザーにとって、新しい Google Identity Services ライブラリは、使い勝手の面で多くの改善をもたらします。ハイライトは以下のとおりです。

手順を減らした、簡単なワンタップログインと自動ログインのフロー
刷新されたログインボタン
ウェブ全体で一貫したブランディングと統一されたログイン動作により、理解と信頼を高めることができます。
コンテンツにすぐにアクセスできる: ユーザーは、ログインページやアカウントページにアクセスしなくても、サイトのどこからでも直接登録してログインできます。

Google はデベロッパーにとって、複雑さを軽減し、セキュリティを向上させ、統合をできる限り迅速にすることに重点を置いています。主な改善点は次のとおりです。

HTML のみを使用してサイトの静的コンテンツにユーザーログインを追加するオプション、
ログイン認証と承認、ユーザーデータの共有を分離することで、ユーザーをサイトにログインさせるために OAuth 2.0 統合の複雑さが必要なくなり、
ポップアップモードとリダイレクトモードの両方が引き続きサポートされますが、Google の OAuth 2.0 インフラストラクチャは、バックエンドサーバーのログインエンドポイントにリダイレクトされるようになりました。
以前の Google Identity ライブラリと Google API JavaScript ライブラリの両方の機能が 1 つの新しいライブラリに統合されました。
ログインレスポンスでは、Promise を使用するかどうかを決定できるようになりました。また、簡素化のため、ゲッタースタイルの関数による間接参照が削除されました。

ログイン移行の例

既存の Google ログインボタンから移行し、サイトへのユーザーのログインのみを目的としている場合は、新しいパーソナライズされたボタンに更新するのが最も簡単な変更方法です。これは、JavaScript ライブラリを交換し、新しいログインオブジェクトを使用するようにコードベースを更新することで実現できます。

ライブラリと構成

以前の Google Sign-in プラットフォームライブラリ（apis.google.com/js/platform.js）と JavaScript の Google API クライアントライブラリ（gapi.client）は、ユーザー認証と認可に必要なくなり、これらは、単一の新しい Google Identity Services JavaScript ライブラリ accounts.google.com/gsi/client に置き換えられました。

ログインに使用される api、client、platform の 3 つの JavaScript モジュールはすべて、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 認証情報を引き続き使用できます。移行の一環として、OAuth 2.0 ポリシーを確認し、Google API Console を使用して、次のクライアント設定を確認して、必要に応じて更新することをおすすめします。

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

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

デバッグクッキーは、影響を受けるコードを見つけて、非推奨後の動作をテストするのに役立ちます。

大規模なアプリや複雑なアプリでは、gapi.auth2 モジュールのサポート終了の影響を受けるコードをすべて見つけるのが難しくなることがあります。まもなく非推奨になる機能の既存の使用状況をコンソールに記録するには、G_AUTH2_MIGRATION クッキーの値を 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 ログイン

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 オペレーションとパラメータ名を指定する必要がありました。新しいライブラリは、credential パラメータで ID トークンをエンドポイントに投稿します。最後に、バックエンドサーバーで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 でログイン] ボタンのサイズ、形状、色をカスタマイズします。ログイン率を向上させるために、パーソナライズされたボタンとともにワンタップポップアップを表示します。

ワンタップポップアップ

ユーザーのログイン状態が [ログイン] から [ログイン済み] に更新されません。同意した後、または再訪問したときに、パーソナライズされたボタンにユーザーの名前、メールアドレス、プロフィール写真が表示されます。

この認証専用の例では、以前の apis.google.com/js/platform.js ライブラリと g-signin2 オブジェクトに代わって、新しい accounts.google.com/gsi/client ライブラリ、g_id_signin クラス、g_id_onload オブジェクトが使用されています。

サンプルコードでは、新しいパーソナライズされたボタンをレンダリングするだけでなく、新しいワンタップポップアップも表示します。パーソナライズされたボタンを表示する場所には、ワンタップポップアップも表示して、登録とログイン時のユーザーの負担を最小限に抑えることを強くおすすめします。

ログイン時の負荷が高くなるため、おすすめしませんが、新しいパーソナライズされたボタンは、ワンタップダイアログを同時に表示せずに単独で表示することもできます。これを行うには、data-auto_prompt 属性を false に設定します。

HTML と 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 トークンを使用して、ログインステータスとユーザープロファイルを共有します。さらに簡素化され、ユーザープロフィールデータの処理にゲッタースタイルのアクセサメソッドを使用する必要がなくなりました。

安全な Google 署名付き JWT ID トークン認証情報が返されます。

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

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

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

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

さらに、リダイレクトモードに限り、クロスサイトリクエストフォージェリ（CSRF）を防止し、バックエンドサーバーで Google ID トークンを検証するようにします。

ユーザーがサイトをどのように操作しているかを詳しく把握するには、CredentialResponse の select_by フィールドを使用して、ユーザーの同意結果と使用された特定のログインフローを確認します。

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

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

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

ユーザーがプラットフォームでアカウントを削除した場合は、revoke を使用してアプリと Google アカウントとの接続を解除することをおすすめします。

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

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

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

Google アカウントのログインステータスと、アプリのセッション状態とログインステータスは、明確に区別される概念です。

Google アカウントとアプリへのユーザーのログインステータスは、ユーザーが正常に認証され、Google アカウントにログインしていることが判明したログイン時を除き、互いに独立しています。

サイトに「Google でログイン」、「One Tap」、「自動ログイン」が含まれている場合、ユーザーはまず Google アカウントにログインする必要があります。

サイトに初めて登録またはログインする際に、ユーザープロフィールの共有に同意する
後でサイトに再アクセスしたときにログインするために使用します。

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

今後、ウェブアプリのユーザーのログインステータスを直接管理する必要があります。以前は、Google ログインはユーザーのセッション状態のモニタリングに役立ちました。

auth2.attachClickHandler() とその登録済みコールバックハンドラへの参照をすべて削除します。

以前は、リスナーを使用して、ユーザーの Google アカウントのログインステータスの変更を共有していました。リスナーはサポートされなくなりました。

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

クッキー

「Google でログイン」では Cookie が限定的に使用されます。これらの Cookie の説明は次のとおりです。Google が使用するその他の種類の Cookie について詳しくは、Google による Cookie の使用方法をご覧ください。

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

新しい Google Identity Services ライブラリは、構成オプションに基づいて、これらのクロスドメイン Cookie を設定できます。

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

クッキーを管理するサービスがある場合は、2 つの新しいクッキーを追加し、移行が完了したら以前のクッキーを削除してください。

複数のドメインまたはサブドメインを管理している場合、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 にログインしている必要があります。 CredentialResponse の select_by フィールドを使用すると、使用されたログイン方法とともにユーザーの同意の結果を判断できます。
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()		削除g_id_signin 要素の HTML DOM 読み込み、または google.accounts.id.renderButton への JS 呼び出しにより、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()		削除g_id_signin 要素の HTML DOM の読み込み、または google.accounts.id.renderButton の JS 呼び出しによって、ユーザーの Google アカウントへのログインがトリガーされます。

Google ログインから移行する

認証と認可

変更内容

ログイン移行の例

ライブラリと構成

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

HTML と JavaScript

以前の方法

ポップアップ モード

リダイレクト モード

レンダリング

新しい方法

ポップアップ モード

リダイレクト モード

レンダリング

HTML と JavaScript API

任意のページからワンタップによるログイン

トークン レスポンス

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

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

クッキー

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

ポップアップモード

リダイレクトモード

ポップアップモード

リダイレクトモード

トークンレスポンス