Google でのユーザーのログイン

このドキュメントでは、Identity Platform を使用して Google でユーザーのログインを行う方法について説明します。

始める前に

このチュートリアルは、すでに Identity Platform が有効であり、HTML と JavaScript を使用して作成された基本的なウェブアプリがあることを前提としています。その方法については、クイックスタートをご覧ください。

Google をプロバイダとして構成する

Google を ID プロバイダとして構成するには:

Cloud Console で [ID プロバイダ] ページに移動します。

[ID プロバイダ] ページに移動
[プロバイダを追加] をクリックします。
リストから [Google] を選択します。
Google ウェブクライアント ID とウェブシークレットを入力します。ID とシークレットをまだ持っていない場合は、API とサービスページから取得できます。
[Google の構成] に表示されている URI を、Google アプリケーションの有効な OAuth リダイレクト URI として構成します。
[承認済みドメイン] で [ドメインを追加] をクリックして、アプリのドメインを登録します。開発目的の場合は、localhost はデフォルトですでに有効になっています。
[アプリケーションの構成] で [設定の詳細] をクリックします。このスニペットをアプリのコードにコピーして、Identity Platform Client SDK を初期化します。
[保存] をクリックします。

Client SDK を使用したユーザーのログイン

Google プロバイダオブジェクトのインスタンスを作成します。
JavaScript
```
var provider = new firebase.auth.GoogleAuthProvider();google-popup.html
```

省略可: OAuth スコープを追加します。スコープとは、Google からどんなデータを要求するかを指定します。より機密性の高いデータには、特定のスコープが必要になる場合があります。アプリが必要とするスコープを判断するには、プロバイダのドキュメントをご覧ください。
JaveScript
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
```

省略可: 認証フローをローカライズします。言語を指定するか、デバイスのデフォルトの言語を使用できます。

JaveScript

firebase.auth().languageCode = 'fr_FR';
// To apply the default browser preference instead of
// explicitly setting it.
// firebase.auth().useDeviceLanguage();

省略可: その他のカスタム OAuth パラメータを指定します。これらは Google 特有であり、通常は認証エクスペリエンスのカスタマイズに使用されます。
JaveScript
```
provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
```
OAuth または Identity Platform で予約されているパラメータを渡すことはできません。

Google プロバイダオブジェクトを使用して、ユーザーのログインを行います。ポップアップウィンドウを開く、または現在のページをリダイレクトできます。モバイルデバイスでは、リダイレクトの方がユーザーにとってより簡単な方法です。

ポップアップを表示するには、signInWithPopup() を呼び出します。

JaveScript

firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Google Access Token. You can use it to access the Google API.
  var token = result.credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});google-popup.html

ページをリダイレクトするには、まず signInWithRedirect() を呼び出します。

JaveScript

firebase.auth().signInWithRedirect(provider);google-redirect.html

次に、ページが読み込まれるときに getRedirectResult() を呼び出すことによって、Google トークンを取得します。

JaveScript

firebase.auth().getRedirectResult().then(function(result) {
  if (result.credential) {
    // This gives you a Google Access Token. You can use it to access the Google API.
    var token = result.credential.accessToken;
    // ...
  }
  // The signed-in user info.
  var user = result.user;
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});google-redirect.html

アクセストークンを取得したら、それを使用して Google API を呼び出すことができます。例:

REST

curl -H "Authorization: Bearer [TOKEN]" https://www.googleapis.com/oauth2/v2/userinfo

手動でのユーザーのログイン

Client SDK を使用しない場合は、次の手順でログインフローを手動で処理することもできます。

デベロッパー向けドキュメントの手順に沿って、Google 認証をアプリに統合します。
前の手順で実装したフローを使用して、Google でユーザーのログインを行います。
Google から受け取ったトークンを Identity Platform の認証情報と交換します。
```
firebase.auth.GoogleAuthProvider.credential(id_token);
```

認証情報を使用して、Identity Platform でユーザーのログインを行います。

firebase.auth().signInWithCredential(credential).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});

次のステップ

Identity Platform ユーザーの詳細について確認する。
他の ID プロバイダでユーザーのログインを行う。