このページは Cloud Translation API によって翻訳されました。

Google ログインをウェブアプリに統合する

Google ログインは OAuth 2.0 フローとトークンのライフサイクルを管理するため、Google API との統合が簡単になります。ユーザーはいつでもアプリケーションへのアクセス権を取り消すことができます。

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

承認認証情報を作成する

OAuth 2.0 を使用して Google API にアクセスするアプリケーションには、Google の OAuth 2.0 サーバーでそのアプリケーションを識別するための認証情報が必要です。次の手順では、プロジェクトの認証情報を作成する方法について説明します。アプリケーションはこの認証情報を使用して、そのプロジェクトで有効にした API にアクセスできます。

Go to the Credentials page.
[認証情報を作成] > [OAuth クライアント ID] をクリックします。
アプリケーションの種類として [ウェブアプリケーション] を選択します。
OAuth 2.0 クライアントの名前を入力して [作成] をクリックします。

構成が完了したら、作成されたクライアント ID をメモします。以降のステップを完了するには、このクライアント ID が必要になります。（クライアントシークレットも作成されますが、これはサーバー側の操作時にのみ必要です）。

Google プラットフォームライブラリを読み込む

Google ログインを統合するウェブページに Google プラットフォームライブラリを組み込む必要があります。

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

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

Google Cloud Console でアプリ用に作成したクライアント ID を、google-signin-client_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 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>