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 ライブラリでは、さまざまなユーザビリティの改善が行われています。ハイライトは以下のとおりです。

  • 手間のかからない新しいワンタップおよび自動ログインフロー
  • ユーザーのパーソナライズを含む新しいログインボタン
  • ウェブでの一貫したブランディングとログイン動作により 理解と信頼性が向上します
  • ユーザーはログイン後やアカウント ページにアクセスしなくても、サイトのどこからでも簡単に登録とログインを行うことができます。

デベロッパーの皆様には、複雑さを軽減し、セキュリティを高め、統合を可能な限り迅速かつ容易に進めることに重点を置いてきました。主な改良点は以下のとおりです。

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

ログイン移行の例

既存の Google ログインボタンから移行し、サイトへのログインのみに関心がある場合は、新しいパーソナライズされたボタンに更新するだけで最も簡単に変更できます。これを行うには、JavaScript ライブラリを入れ替え、コードベースを更新して、新しいログイン オブジェクトを使用します。

ライブラリと構成

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

ログインに使用される古い 3 つの JavaScript モジュール apiclientplatform はすべて 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 のタイプが「ウェブ アプリケーション」
  • 承認済みの JavaScript 生成元とリダイレクト URI には、HTTPS が使用されます。

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

デバッグ 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 オペレーションとパラメータ名を担当していました。新しいライブラリは、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 でログイン」ボタンのサイズ、形状、色をカスタマイズします。ログイン率を改善するために、One Tap のポップアップをカスタマイズしたボタンとともに表示します。

「Google でログイン」ボタン ワンタップのポップアップ

ユーザーのログイン状態によって、ボタンテキストが「ログイン」から「ログイン済み」に更新されません。同意ボタンを表示すると、再度アクセスすると、パーソナライズされたボタンにユーザーの名前、メールアドレス、プロフィール写真が表示されます。

このシンプルな認証のみの例では、新しい accounts.google.com/gsi/client ライブラリ、g_id_signin クラス、g_id_onload オブジェクトが、古い apis.google.com/js/platform.js ライブラリと g-signin2 オブジェクトに代わるものです。

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

ログインの煩雑さが増すことから、この方法は推奨されません。ただし、新しいパーソナライズされたボタンは、ワンタップ ダイアログを同時に表示することなく、単独で表示できます。これを行うには、data-auto_prompt 属性を false に設定します。

HTML API と JavaScript API

上記の例は、新しい HTML API を使用してログインをウェブサイトに追加する方法を示しています。あるいは、機能的に同等の JavaScript API を使用するか、サイト全体で HTML API と JavaScript API を組み合わせます。

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

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

ワンタップは、ユーザーがサイトへ簡単にログインできるようにするための、新しいスムーズな方法です。 サイトの任意のページから直接ログインできるようにするもので、ユーザーが専用のログインページにアクセスする必要がなくなります。言い換えると、ユーザーがログインページ以外のページから柔軟に登録、ログインできるようにすることで、登録とログインの手間が削減されます。

任意のページからのログインを有効にする場合は、サイト全体の共有ヘッダーやフッターなどのオブジェクトに g_id_onload を含めることをおすすめします。

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

トークンのレスポンス

ユーザーのログインのために、OAuth2 認証コード、アクセス トークン、更新トークンの理解や操作を行う必要はなくなりました。代わりに、JSON ウェブトークン(JWT)ID トークンを使用してログイン ステータスとユーザー プロフィールを共有します。簡単にするため、ユーザー プロフィール データを処理するために「ゲッター」スタイルのアクセサー メソッドを使用する必要はなくなりました。

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

  • ブラウザベースの JavaScript コールバック ハンドラをポップアップ モードで呼び出す。
  • 「Google でログイン」ボタン ux_moderedirect に設定されている場合、Google はログイン エンドポイントにリダイレクトします。

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

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

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

また、リダイレクト モードの場合のみ、クロスサイト リクエスト フォージェリ(CSRF)を防ぎ、バックエンド サーバーで Google ID トークンを検証するようにしてください。

ユーザーによるサイトの利用状況をより的確に把握するには、CredentialResponse の select_by フィールドを使用して、ユーザーの同意の結果と使用するログインフローを決定します。

ユーザーが初めてウェブサイトにログインしたとき、アカウント プロフィールをアプリと共有することへの同意を Google が求めます。同意が得られている場合にのみ、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.currentUserauth2.isSignedIn への参照をすべて削除します。

Cookie

「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 または data-login_uri が設定されている場合、HTML API

    • ux_mode=redirect を使用し、google.accounts.id.prompt() を使用してワンタップまたは自動ログインを表示する JavaScript API

Cookie を管理するサービスを使用している場合は、移行が完了したら必ず、2 つの新しい Cookie を追加し、古い 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() JS と HTML の data-callback に使用する IdConfiguration.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 要素または google.accounts.id.renderButton に対する JS 呼び出しを HTML DOM で読み込むと、ユーザーの 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.authorization() 削除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 要素または google.accounts.id.renderButton に対する JS 呼び出しを HTML DOM で読み込むと、ユーザーの Google アカウントへのログインがトリガーされます。