ウェブ向け Google ログイン JavaScript プラットフォーム ライブラリが廃止されます。このライブラリは、2023 年 3 月 31 日のサポート終了日以降にダウンロードできなくなります。代わりに、ウェブ向けの新しい Google Identity Services を使用してください。
新しく作成されたクライアント ID は、デフォルトで古いプラットフォーム ライブラリを使用できなくなり、既存のクライアント ID は影響を受けません。2022 年 7 月 29 日より前に作成された新しいクライアント ID では、"plugin_name" を設定して Google プラットフォーム ライブラリの使用を有効にすることができます。

GoogleサインインをWebアプリに統合する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

Googleサインインは、OAuth 2.0フローとトークンのライフサイクルを管理し、GoogleAPIとの統合を簡素化します。ユーザーには、いつでもアプリケーションへのアクセスを取り消すオプションがあります。

このドキュメントでは、基本的なGoogleログイン統合を完了する方法について説明します。

承認資格情報を作成する

OAuth2.0を使用してGoogleAPIにアクセスするアプリケーションには、GoogleのOAuth2.0サーバーに対してアプリケーションを識別する認証資格が必要です。次の手順では、プロジェクトのクレデンシャルを作成する方法について説明します。その後、アプリケーションは資格情報を使用して、そのプロジェクトで有効にしたAPIにアクセスできます。

  1. Go to the Credentials page.
  2. [資格情報の作成]>[OAuthクライアントID]をクリックします。
  3. Webアプリケーションのアプリケーションタイプを選択します。
  4. OAuth 2.0クライアントに名前を付けて、[作成]をクリックします

構成が完了したら、作成されたクライアントIDをメモします。次の手順を完了するには、クライアントIDが必要です。 (クライアントシークレットも作成されますが、サーバー側の操作にのみ必要です。)

GooglePlatformライブラリを読み込む

Googleログインを統合するウェブページにGooglePlatformLibraryを含める必要があります。

<script src="https://apis.google.com/js/platform.js" async defer></script>

アプリのクライアントIDを指定します

google-signin-client_idメタ要素を使用して、GoogleDevelopersConsoleでアプリ用に作成したクライアントIDを指定します。

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

Googleログインボタンを追加する

Googleのログインボタンをサイトに追加する最も簡単な方法は、自動的にレンダリングされたログインボタンを使用することです。ほんの数行のコードで、ユーザーのサインイン状態と要求するスコープに適したテキスト、ロゴ、および色を持つように自動的に構成するボタンを追加できます。

デフォルト設定を使用するGoogleサインインボタンを作成するには、クラスg-signin2div要素をサインインページに追加します。

<div class="g-signin2" data-onsuccess="onSignIn"></div>

プロファイル情報を取得する

デフォルトのスコープを使用してGoogleでユーザーにログインすると、ユーザーのGoogle ID、名前、プロファイルURL、および電子メールアドレスにアクセスできます。

ユーザーのプロファイル情報を取得するには、 getBasicProfile()メソッドを使用します。

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

ユーザーをサインアウトする

サインアウトボタンまたはサイトへのリンクを追加することで、ユーザーがGoogleからサインアウトせずにアプリからサインアウトできるようにすることができます。サインアウトリンクを作成するには、 GoogleAuth.signOut()メソッドを呼び出す関数をリンクのonclickイベントにアタッチします。

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>