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 でログイン] ボタンのサイズ、形状、色をカスタマイズします。ログイン率を向上させるために、パーソナライズされたボタンとともにワンタップ ポップアップを表示します。

[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 アカウントへのログインがトリガーされます。