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

<ph type="x-smartling-placeholder">

Google ログインは OAuth 2.0 フローとトークンのライフサイクルを管理し、 Google API との統合が簡単になりますユーザーはいつでも アクセス権を取り消す いつでも適用できます。

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

承認認証情報を作成する

OAuth 2.0 を使用して Google API にアクセスするアプリケーションには、認証情報が必要です。 アプリケーションを識別する API を Google の OAuth 2.0 サーバーに提供します。次の手順では、 プロジェクトの認証情報を作成します。これにより、アプリケーションは認証情報を使用して API にアクセスできるようになります。 有効にする必要があります

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

構成が完了したら、作成されたクライアント ID をメモします。 次のステップを完了するには、クライアント ID が必要です。（クライアント シークレットも サーバーサイドの処理にのみ必要です）。

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

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

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

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

Google Developers Console でアプリ用に作成したクライアント ID を指定します。 google-signin-client_id メタ要素と置き換えます。

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

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

Google ログインボタンをサイトに追加する最も簡単な方法は、 自動的に表示されたログインボタンです。わずか数行のコードで、 適切なテキストが表示されるように自動的に構成するボタンを追加し、 ロゴ、ユーザーのログイン状態、リクエストするスコープの色などがあります。

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

<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>