Google ログインから移行する

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

クライアントが JavaScript などの Google API クライアント ライブラリを 以前のライブラリauthorizationについては、Google Identity への移行に関する記事を参照してください。 サービスをご覧ください。

<ph type="x-smartling-placeholder">

認証と認可

認証は、ユーザーが誰であるかを設定するもので、一般に ユーザー登録やログインなどの ユーザー登録やログインといった操作です認可とは、Google Cloud リソースに 拒否することを意味しますたとえば、アプリが ユーザーの Google ドライブへのアクセスに対する同意。

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

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

認証のみに関するユースケースの場合は、引き続きこのページをお読みください。

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

変更内容

新しい Google Identity Services ライブラリには、ユーザー向けのさまざまな機能が用意されています。 ユーザビリティの向上。ハイライトは以下のとおりです。

  • より少ないユーザーでスムーズな新しいワンタップと自動ログインフローを実現 歩数、
  • 刷新されたログインボタン
  • ウェブ全体での一貫したブランディングと一貫したログイン動作により、 理解と信頼、
  • コンテンツにすばやくアクセスするユーザーがどこからでも直接登録、ログインできる サイトにアクセスする必要はありません。

開発者にとって Google は複雑さを軽減し、セキュリティを強化し、 短時間で統合できますたとえば、次のような点が改善されます。

  • サイトの静的コンテンツにユーザー ログインを追加する場合、 HTML、
  • ログイン認証と認可の分離や、認証情報の共有を OAuth 2.0 統合の複雑さはなくなり、 サイトにログインしたり
  • ポップアップ モードとリダイレクト モードは引き続きサポートされますが、Google の OAuth 2.0 は 2.0 インフラストラクチャがバックエンド サーバーのログイン エンドポイントにリダイレクトされるようになりました。
  • 以前の Google Identity Platform と Google API JavaScript ライブラリを 1 つの新しいライブラリに統合し、
  • 使用するかどうかを指定できます ゲッター スタイル関数による Promise と間接的な処理には、 わかりやすくするために削除しました。

ログインによる移行の例

既存の Google ログインボタンから移行する場合、 サイトのログインに興味がある場合は を新しいパーソナライズボタンに更新します。これを行うには、サーバーをスワップ 新しいログイン オブジェクトを使用するようにコードベースを更新します。

ライブラリと構成

以前の Google ログイン プラットフォーム ライブラリ: apis.google.com/js/platform.js および JavaScript 用の 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 を引き続き使用できます 認証情報を取得できます。移行の一環として、Google Cloud の 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 でログイン
ボタン ワンタップ
ポップアップ

ユーザーのログイン状態によって [ログイン] のボタンテキストが更新されないから 「ログインしています」。同意の後、または再訪問時に、パーソナライズされた ボタンにユーザーの名前、メールアドレス、プロフィール写真が表示されます。

この認証のみの例では、新しい accounts.google.com/gsi/client ライブラリ、g_id_signin クラス、g_id_onload オブジェクトが以前の apis.google.com/js/platform.js ライブラリと g-signin2 オブジェクト。

新しいパーソナライズされたボタンのレンダリングに加えて、サンプルコードも 新しいワンタップ ポップアップを表示します。パーソナライズされたボタンを表示する場所には ユーザーを最小限に抑えるため、ワンタップのポップアップも表示することを強く推奨します。 煩わしさを感じることはありません。

ログイン時の手間が増えるためおすすめしませんが、新しい Google Chat の 各ボタンを同時に表示するのではなく、単体で表示できます。 ワンタップ ダイアログ。これを行うには、data-auto_prompt 属性を false に設定します。

HTML API と 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 トークンは、ログイン ステータスとユーザー プロファイルを共有するために使用されます。たとえば、 さらに簡素化されるため、"getter" を使用する必要はもうありません。スタイル アクセサ メソッドを使ってユーザー プロファイル データを操作します。

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

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

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

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

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

また、リダイレクト モードに限り、クロスサイト リクエストを防止 偽造(CSRF)とバックエンド サーバーでの Google ID トークンの検証

サイトでのユーザーの行動を詳しく把握するには、 CredentialResponse の select_by フィールドを使用して、 同意の結果、使用された特定のログインフローなどです。

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

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

ユーザーがプラットフォームでアカウントを削除した場合は、 revokeして、Google アカウントとアプリの接続を解除してください。

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

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

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

Google アカウントのログイン ステータス、アプリのセッション状態、 ログイン ステータスはそれぞれ異なる概念です。

Google アカウントとアプリに対するユーザーのログイン ステータスをステータスごとに表示 ただし、ユーザーがログインしたことがわかっている場合は除きます。 認証に成功し、Google アカウントにログインします。

Google でログインする場合、ワンタップまたは自動ログインが サイトユーザーが次のことを行うには、まず Google アカウントにログインする必要があります。

  • 最初の登録時にユーザー プロファイルの共有に同意する、または サイトへのログイン、
  • サイトに再度アクセスしたときにログインできます。

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

次のユーザーのログイン ステータスを直接管理する責任は、あなたにあります。 説明します。これまで、Google ログインはユーザーのログイン セッション状態をご覧ください。

auth2.attachClickHandler() への参照とその登録済みデータをすべて削除します 呼び出すことができます。

これまでは、リスナーを使用して、メッセージのログイン ステータスの変更を共有することで、 関連付けられます。リスナーのサポートは終了しました。

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

クッキー

「Google でログイン」では、Cookie の使用が制限されます(これらの Cookie の説明)。 できます。Google による Cookie の使用についてをご覧ください。 をご覧ください。

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

新しい Google Identity Services ライブラリでは、必要に応じてこれらのクロスドメイン 設定オプションに応じて異なります。

  • g_state にはユーザーのログアウト ステータスが保存され、ワンタップの使用時に設定されます。 ポップアップ表示や自動ログインが
  • g_csrf_token は、CSRF 攻撃の防止に使用される二重送信 Cookie です。 ログイン エンドポイントが呼び出されたときに設定されます。ログイン URI の値 は、明示的に設定することも、デフォルトで現在のページの URI に設定することもできます。お客様の ログイン エンドポイントが呼び出される可能性がある状況は次のとおりです。

    • HTML APIdata-ux_mode=redirect あり、または data-login_uri がある場合) セット

    • JavaScript APIux_mode=redirectgoogle.accounts.id.prompt() は、ワンタップや 自動ログイン。

Cookie を管理するサービスをご利用の場合は、2 つの新しい 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() IdConfiguration.callback (JS と HTML の場合の data-callback 古いデータを新しいものに差し替えます。
GoogleAuth.currentUser.get() CredentialResponse 代わりに、不要になった CredentialResponse を使用してください。
GoogleAuth.currentUser.listen() 削除ユーザーの現在の Google ログイン ステータスを確認できません。 同意とログインを確かめるには、ユーザーが Google にログインする必要があります。 「 select_by CredentialResponse のフィールドを使用して、 同意ステータスと、使用するログイン方法が表示されます。
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() 削除HTML DOM の読み込み g_id_signin 要素または JS 呼び出しで google.accounts.id.renderButton ユーザーの 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() 削除HTML DOM の読み込み g_id_signin 要素または JS 呼び出しで google.accounts.id.renderButton ユーザーの Google アカウントへのログインをトリガーする。