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 Developers Console で google-signin-client_id
メタ要素を使用してアプリ用に作成したクライアント 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>