警告: このデータは 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 に設定します。セッション ストレージにもログするには、必要に応じて、コロンの後に 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>

レンダリング

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

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