私たちはされているウェブのためのGoogleのサインインのJavaScriptプラットフォームライブラリを中止します。認証とユーザーのサインインの場合は、両方のために新しいGoogleアイデンティティサービスSDKを使用したWebおよびAndroidの代わりに。

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メタ要素を使用して、Google DevelopersConsoleでアプリ用に作成したクライアントIDを指定します。

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

Googleサインインボタンを追加する

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

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

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

以下は、デフォルトのGoogleサインインボタンの例です。

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

デフォルトのスコープを使用して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>