Google ログインから移行する

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

クライアントが 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 ログイン プラットフォーム ライブラリ（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 の認証情報を引き続き使用できます。移行の一環として、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 ログイン

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 でログイン] ボタンのサイズ、形、色をカスタマイズします。ワンタップ ポップアップをパーソナライズ ボタンと一緒に表示して、ログイン率を高めます。

[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 と JavaScript API をサイト全体で組み合わせることもできます。

ボタンのカスタマイズ オプション（コールバック タイプなど）や属性（色、サイズ、形状、テキスト、テーマなど）をインタラクティブに表示するには、コード生成ツールをご覧ください。このツールを使うと、さまざまなオプションをすばやく比較したり、サイトで使用する HTML スニペットを生成したりできます。

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

ワンタップは、ユーザーが簡単にサイトに登録またはログインできる新しい方法です。 サイトの任意のページから直接ログインできるようになるため、ユーザーが専用のログインページにアクセスする必要がなくなります。つまり、ログインページ以外のページから柔軟に登録やログインができるようになるため、登録やログインをスムーズに行えるからです。

どのページからでもログインできるようにするには、サイト全体で共有されるヘッダー、フッター、その他のオブジェクトに g_id_onload を含めることをおすすめします。

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

トークン レスポンス

ユーザー ログインで、OAuth 2.0 認可コード、アクセス トークン、更新トークンについて理解したり、処理したりする必要がなくなりました。代わりに、JSON Web Token（JWT）ID トークンを使用してログイン ステータスとユーザー プロフィールを共有します。さらに簡素化するために、ユーザー プロファイル データを操作するために「getter」スタイルのアクセサ メソッドを使用する必要がなくなりました。

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 でログイン、ワンタップ、自動ログインの機能がある場合、ユーザーはまず 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 を現在のページの URI に設定することもできます。次の場合、これらの条件でログイン エンドポイントが呼び出される可能性があります。

    • data-ux_mode=redirect を使用している場合、または data-login_uri が設定されている場合の HTML API、または

    • 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?hl=ja 古いものを新しいものに置き換えます。
apis.google.com/js/api.js accounts.google.com/gsi/client?hl=ja 古いものを新しいものに置き換えます。
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 アカウントへのログインがトリガーされます。