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

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

始める前に

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

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

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

  1. Google Cloud コンソールで [ID プロバイダ] ページに移動します。

    [ID プロバイダ] ページに移動

  2. [プロバイダを追加] をクリックします。

  3. リストから [Facebook] を選択します。

  4. Facebook のアプリ ID と App Secret を入力します。ID とシークレットをまだ持っていない場合は、デベロッパー向け Facebook ページから取得できます。

  5. [Facebook を構成する] に表示されている URI を、Facebook アプリの有効な OAuth リダイレクト URI として構成します。Identity Platform でカスタム ドメインを構成した場合、デフォルト ドメインではなくカスタム ドメインを使用するように、Facebook アプリの構成でリダイレクト URI を更新します。たとえば、https://myproject.firebaseapp.com/__/auth/handler を https://auth.myownpersonaldomain.com/__/auth/handler に変更します。

  6. [承認済みドメイン] で [ドメインを追加] をクリックして、アプリのドメインを登録します。開発目的の場合は、localhost はデフォルトですでに有効になっています。

  7. [アプリケーションの構成] で [設定の詳細] をクリックします。このスニペットをアプリのコードにコピーして、Identity Platform クライアント SDK を初期化します。

  8. [保存] をクリックします。

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

  1. Facebook プロバイダ オブジェクトのインスタンスを作成します。

    JavaScript 

    var provider = new firebase.auth.FacebookAuthProvider();

  2. 省略可: OAuth スコープを追加します。スコープでは、Facebook からどんなデータをリクエストするかを指定します。より機密性の高いデータには、特定のスコープが必要になる場合があります。アプリが必要とするスコープを判断するには、プロバイダのドキュメントをご覧ください。

    JavaScript 

    provider.addScope('user_birthday');

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

    JavaScript 

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

  4. 省略可: その他のカスタム OAuth パラメータを指定します。これらは Facebook 特有であり、通常は認証エクスペリエンのカスタマイズに使用されます。OAuth または Identity Platform で予約されているパラメータを渡すことはできません。

    JavaScript 

    provider.setCustomParameters({
'display': 'popup'
});

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

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

    JavaScript 

    firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;

    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    var accessToken = credential.accessToken;

    // ...
  })
  .catch((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;

    // ...
  });

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

    signInWithRedirect、linkWithRedirect、reauthenticateWithRedirect を使用する場合は、ベスト プラクティスに従ってください。

    JavaScript 

    firebase.auth().signInWithRedirect(provider);

    次に、ページの読み込み時に getRedirectResult() を呼び出して Facebook トークンを取得します。

    JavaScript 

    firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a Facebook Access Token. You can use it to access the Facebook API.
      var token = credential.accessToken;
      // ...
    }
    // The signed-in user info.
    var user = result.user;
  }).catch((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;
    // ...
  });

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

REST

curl "https://graph.facebook.com/me?fields=id,name&access_token=[TOKEN]"

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

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

このログイン方法では、IdP としてゲーム用 Facebook ログインもサポートされています。Identity Platform では、ゲーム用 Facebook ログインを手動で実装することはできません。Identity Platform は Identity Platform の認証情報を交換するためのトークンのみを受け入れます。

  1. デベロッパー向けドキュメントの手順に沿って、Facebook または Facebook ログインをアプリに統合します。

  2. 前の手順で実装したフローを使用して、Facebook またはゲーム用 Facebook ログインでユーザーのログインを行います。

  3. Facebook またはゲーム用 Facebook ログインから受け取ったトークンを Identity Platform の認証情報と交換します。

    JavaScript 

    var credential = firebase.auth.FacebookAuthProvider.credential(accessToken);

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

    JavaScript 

    // Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });

次のステップ