警告: このデータは Google ユーザーデータに関するポリシーに基づいて提供されています。ポリシーを確認して遵守してください。実際の広告でテストすると、プロジェクトまたはアカウントが停止される場合があります。

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 ライブラリの両方の機能を単一の新しいライブラリに統合します。
  • ログイン レスポンスでは、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 タイプが「ウェブ アプリケーション」
  • HTTPS は、承認済みの JavaScript 生成元とリダイレクト URI に使用されます。

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

デバッグ Cookie は、影響を受けるコードの特定や、非推奨になった後の動作をテストする場合に役立ちます。

大規模で複雑なアプリでは、gapi.auth2 モジュールのサポート終了によって影響を受けるすべてのコードを見つけるのが難しい場合があります。サポート終了が予定されている機能をすでに使用している場合はコンソールにログ出力するには、G_AUTH2_MIGRATION Cookie の値を informational に設定します。必要に応じて、コロンの後にキー値を追加し、セッション ストレージにも記録するようにします。ログインと認証情報の受信後、収集したログをバックエンドに送って後で分析します。たとえば、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>

レンダリング

視覚属性を使用して、「Google でログイン」ボタンのサイズ、形状、色をカスタマイズします。One Tap ポップアップとカスタマイズされたボタンを表示して、ログイン率を向上させます。

[Google でログイン] ボタン ワンタップ ポップアップ

ユーザーのログイン状態では、ボタンのテキストが「ログイン」から「ログイン済み」に更新されません。同意を得た後、またはリピート アクセス時に、パーソナライズされたボタンにはユーザーの名前、メールアドレス、プロフィール写真が含まれます。

認証のみの簡単な例では、新しいaccounts.google.com/gsi/clientライブラリ、g_id_signinクラスg_id_onloadオブジェクトによって、古いapis.google.com/js/platform.jsライブラリと g-signin2

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

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

HTML API と JavaScript API

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

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

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

One Tap は、ユーザーがサイトに登録やログインを行うための負担の少ない新しい方法です。 サイトの任意のページからユーザー ログインを直接有効にすることができ、専用のログインページにアクセスする必要をなくすことができます。別の言い方をすれば、ユーザーがログインページ以外のページから登録とログインを柔軟に行うことができるため、登録とログインの手間が軽減されます。

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

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

トークンのレスポンス

ユーザーのログインで、OAuth2 認証コード、アクセス トークン、更新トークンについて理解したり操作したりする必要がなくなりました。代わりに、JSON Web Token(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 を含む JavaScript API。ワンタップまたは自動ログインの表示に google.accounts.id.prompt() は使用されません。

Cookie を管理するサービスを使用している場合は、新しい Cookie を 2 つ追加し、移行が完了したら古い Cookie を削除してください。

複数のドメインまたはサブドメインを管理する場合、g_state Cookie の操作方法について詳しくは、サブドメイン全体に 1 つのタップを表示するをご覧ください。

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

New 備考
JavaScript ライブラリ
apis.google.com/js/platform.js accounts.google.com/gsi/client?hl=ja 古い URL を new に置き換えます。
apis.google.com/js/api.js accounts.google.com/gsi/client?hl=ja 古い URL を new に置き換えます。
GoogleAuth オブジェクトと関連メソッド:
GoogleAuth.attachClickHandler() を使用する IdConfiguration.callback(JS および HTML のデータコールバック用) 古い URL を new に置き換えます。
GoogleAuth.currentUser.get() CredentialResponse をご覧ください。 代わりに CredentialResponse を使用してください。
GoogleAuth.currentUser.listen() 削除Google でのユーザーの現在のログイン ステータスを利用できません。 同意とログインのタイミングは、Google にログインする必要があります。 CredentialResponse の select_by フィールドを使用して、ユーザーのログイン結果と使用するログイン方法を特定できます。
GoogleAuth.disconnect() google.accounts.id.revoke 古い URL を new に置き換えます。権限の取り消しは https://myaccount.google.com/permissions から行うこともできます。
GoogleAuth.grantOfflineAccess() をご覧ください。 削除OAuth2 アクセス トークンとスコープは 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 古い URL を new に置き換えます。権限の取り消しは https://myaccount.google.com/permissions から行うこともできます。
GoogleUser.getAuthResponse()
GoogleUser.getBasicProfile() CredentialResponse をご覧ください。 BasicProfile メソッドの代わりに credential とサブフィールドを直接使用します。
GoogleUser.getGrantedScopes() 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
GoogleUser.getHostedDomain() CredentialResponse をご覧ください。 代わりに、credential.hd を直接使用してください。
GoogleUser.getId() CredentialResponse をご覧ください。 代わりに、credential.sub を直接使用してください。
GoogleUser.grantOfflineAccess() 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
GoogleUser.grant() 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
GoogleUser.hasGrantedScopes() 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
GoogleUser.isSignedIn() 削除Google でのユーザーの現在のログイン ステータスを利用できません。 同意とログインのタイミングは、Google にログインする必要があります。
GoogleUser.reloadAuthResponse() 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
gapi.auth2 オブジェクトと関連メソッド:
gapi.auth2.AuthorizeConfig オブジェクト 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
gapi.auth2.AuthorizeResponse オブジェクト 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
gapi.auth2.AuthResponse オブジェクト 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
gapi.auth2.authorization() 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
gapi.auth2.ClientConfig() 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
gapi.auth2.getAuthInstance() 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
gapi.auth2.init() 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
gapi.auth2.OfflineAccessOptions オブジェクト 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
gapi.auth2.SignInOptions オブジェクト 削除OAuth2 アクセス トークンとスコープは ID トークンに置き換わりました。
gapi.signin2 オブジェクトと関連メソッド:
gapi.signin2.render() 削除g_id_signin 要素の HTML DOM 読み込み、または google.accounts.id.renderButton に対する JS 呼び出しは、ユーザーによる Google アカウント。