Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Google ログインから移行する

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

クライアントが JavaScript 用 Google API クライアントライブラリまたは他の以前のライブラリを使用して認可を行っている場合は、Google Identity Services への移行をご覧ください。

認証と認可

認証とは、ユーザーが誰であるかを確認するプロセスで、通常はユーザー登録またはログインと呼ばれます。認可とは、データまたはリソースへのアクセス権を付与または拒否するプロセスです。たとえば、アプリがユーザーの Google ドライブにアクセスするための同意をユーザーに求める場合などです。

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

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

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

ユースケースに認可が含まれる場合は、ユーザー認可の仕組みと Google Identity Services への移行を読んで、アプリケーションが新しい改良された API を使用していることを確認してください。

変更内容

ユーザーにとって、新しい Google Identity Services library は使いやすさが大幅に向上しています。ハイライトは以下のとおりです。

個々の手順が少ない、新しい低摩擦のワンタップと自動ログインのフロー
ユーザーのパーソナライズに対応した、刷新されたログインボタン
ウェブ全体で一貫したブランディングと統一されたログイン動作により、理解と信頼が向上
コンテンツにすばやくアクセス。ユーザーは、ログインページやアカウントページにアクセスしなくても、サイトのどこからでも直接登録とログインが可能

デベロッパー向けには、複雑さを軽減し、セキュリティを強化し、統合をできるだけ迅速に行えるようにすることに重点を置いています。改善点の一部を以下に示します。

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

ログインの移行例

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

ライブラリと構成

以前の Google ログインプラットフォームライブラリ（apis.google.com/js/platform.js）と JavaScript 用 Google API クライアントライブラリ（gapi.client）は、ユーザー認証と認可には不要になりました。これらは、1 つの新しい 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 タイプが「ウェブアプリケーション」である
承認済みの JavaScript 生成元とリダイレクト URI に HTTPS が使用されている

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

デバッグ 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>

レンダリング

新しい visual-attributes により、カスタマイズ可能なボタンを作成する以前の方法が簡素化され、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 でログイン] ボタンのサイズ、形状、色をカスタマイズします。パーソナライズされたボタンとともにワンタップポップアップを表示して、ログイン率を向上させます。

ワンタップのポップアップ

ユーザーのログイン状態によって、ボタンのテキストが [ログイン] から [ログイン済み] に更新されることはありません。同意を提供した後、または再訪問時に、パーソナライズされたボタンにユーザーの名前、メールアドレス、プロフィール写真が表示されます。

この認証のみの例では、新しい 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 プロバイダのボタンやユーザー名とパスワードの入力フィールドとともにボタンを表示して、ユーザーが登録またはログインを選択できるようにします。

トークンレスポンス

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

安全な Google 署名付き JWT ID トークン認証情報は、次のいずれかに返されます。

ポップアップモードのユーザーのブラウザベースの JavaScript コールバックハンドラ
Google リダイレクトを介してログインエンドポイントに送信されるバックエンドサーバー [Google でログイン] ボタンux_mode が redirect に設定されている場合

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

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

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

また、リダイレクトモードの場合のみ、クロスサイトリクエストフォージェリ（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() とその登録済みコールバックハンドラへの参照をすべて削除します。

以前は、リスナーを使用して、ユーザーの 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 にデフォルト設定することもできます。ログインエンドポイントは、次の条件で呼び出されることがあります。
- HTML API と data-ux_mode=redirect または data-login_uri が設定されている場合、または
- 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	古いものを新しいものに置き換えます。
apis.google.com/js/api.js	accounts.google.com/gsi/client	古いものを新しいものに置き換えます。
GoogleAuth オブジェクトと関連メソッド:
GoogleAuth.attachClickHandler()	IdConfiguration.callback for JS and 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()		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
GoogleAuth.isSignedIn.get()		削除Google でのユーザーの現在のログインステータスは利用できません。同意とログインを行うには、ユーザーが Google にログインしている必要があります。
GoogleAuth.isSignedIn.listen()		削除Google でのユーザーの現在のログインステータスは利用できません。同意とログインを行うには、ユーザーが Google にログインしている必要があります。
GoogleAuth.signIn()		削除google.accounts.id.renderButton
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()		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
GoogleUser.getHostedDomain()	CredentialResponse	代わりに、`credential.hd` を直接使用します。
GoogleUser.getId()	CredentialResponse	代わりに、`credential.sub` を直接使用します。
GoogleUser.grantOfflineAccess()		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
GoogleUser.grant()		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
GoogleUser.hasGrantedScopes()		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
GoogleUser.isSignedIn()		削除Google でのユーザーの現在のログインステータスは利用できません。同意とログインを行うには、ユーザーが Google にログインしている必要があります。
GoogleUser.reloadAuthResponse()		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
gapi.auth2 オブジェクトと関連メソッド:
gapi.auth2.AuthorizeConfig オブジェクト		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
gapi.auth2.AuthorizeResponse オブジェクト		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
gapi.auth2.AuthResponse オブジェクト		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
gapi.auth2.authorize()		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
gapi.auth2.ClientConfig()		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
gapi.auth2.getAuthInstance()		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
gapi.auth2.init()		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
gapi.auth2.OfflineAccessOptions オブジェクト		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
gapi.auth2.SignInOptions オブジェクト		削除ID トークンが OAuth 2.0 アクセストークンとスコープに置き換わりました。
gapi.signin2 オブジェクトと関連メソッド:
gapi.signin2.render()		削除google.accounts.id.renderButton

Google ログインから移行する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

認証と認可

変更内容

ログインの移行例

ライブラリと構成

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

HTML と JavaScript

以前の方法

ポップアップ モード

リダイレクト モード

レンダリング

新しい方法

ポップアップ モード

リダイレクト モード

レンダリング

HTML API と JavaScript API

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

トークン レスポンス

ユーザーの同意と権限の取り消し

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

クッキー

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

Google ログインから移行する

ポップアップモード

リダイレクトモード

ポップアップモード

リダイレクトモード

トークンレスポンス

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