JavaScript で Facebook ログインを使用して認証する

Facebook ログインをアプリに統合して、ユーザーが Firebase での認証に Facebook アカウントを使用できるようにすることができます。Facebook ログインを統合するには、Firebase SDK を使用してログインフローを行うか、または Facebook ログインフローを手動で行って、取得したアクセストークンを Firebase に渡します。

準備

Firebase を JavaScript プロジェクトに追加します。
Facebook for Developers サイトで、アプリのアプリ ID と app secret を取得します。
Facebook ログインを有効にします。
1. Firebase コンソールで [Auth] セクションを開きます。
2. [ログイン方法] タブで [Facebook] を有効にし、Facebook から取得した [アプリケーション ID] と [アプリシークレット] を指定します。
3. 次に、Firebase コンソールで生成された OAuth リダイレクト URI（my-app-12345.firebaseapp.com/__/auth/handler など）を、Facebook for Developers サイトの [製品] > [Facebook ログイン] 設定にある Facebook アプリ設定ページの [OAuth リダイレクト URI] に追加します。

Firebase SDK を使用してログインフローを処理する

ウェブアプリをビルドする場合、Facebook アカウントを使用して Firebase によりユーザーを認証する最も簡単な方法は、Firebase JavaScript SDK でログインフローを処理することです（Node.js または他の非ブラウザ環境でユーザーを認証する場合、ログインフローを手動で処理する必要があります）。

Firebase JavaScript SDK でログインフローを処理する手順は次のとおりです。

Facebook プロバイダオブジェクトのインスタンスを作成します。
```
var provider = new firebase.auth.FacebookAuthProvider();
```
省略可: 認証プロバイダにリクエストする追加の OAuth 2.0 スコープを指定します。スコープを追加するには、addScope を呼び出します。次に例を示します。
```
provider.addScope('user_birthday');
```
認証プロバイダ向けドキュメントをご覧ください。
省略可: 関連するカスタム OAuth パラメータを明示的に渡すことなく、プロバイダの OAuth フローをローカライズしてユーザーの使用言語に設定するには、OAuth フローを開始する前に Auth インスタンスの言語コードを更新します。次に例を示します。
```
firebase.auth().languageCode = 'fr_FR';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
```
省略可: OAuth リクエストと一緒に送信したい追加のカスタム OAuth プロバイダパラメータを指定します。カスタムパラメータを追加するには、OAuth プロバイダのドキュメントで指定されたキーと対応する値を含むオブジェクトで初期化されたプロバイダで setCustomParameters を呼び出します。次に例を示します。
```
provider.setCustomParameters({
  'display': 'popup'
});
```
予約済みの必須 OAuth パラメータは許可されず、無視されます。詳細については、認証プロバイダのリファレンスを参照してください。
Firebase プロバイダオブジェクトを使用して Firebase での認証を行います。ユーザーに Facebook アカウントでログインするよう促すために、ポップアップウィンドウを表示するか、ログインページにリダイレクトします。モバイル端末ではリダイレクトすることをおすすめします。
- ポップアップウィンドウでログインを行う場合は、signInWithPopup を呼び出します。
```
firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Facebook Access Token. You can use it to access the Facebook 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;
  // ...
});
```
  また、Facebook プロバイダの OAuth トークンを取得することもできます。このトークンによって、Facebook API を使用して追加データをフェッチできます。
  ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンスドキュメントをご覧ください。
- ログインページにリダイレクトしてログインを行う場合は、signInWithRedirect を呼び出します。
```
firebase.auth().signInWithRedirect(provider);
```
  次に、ページが読み込まれたときに getRedirectResult を呼び出すことによって、Facebook プロバイダの OAuth トークンを取得することもできます。
```
firebase.auth().getRedirectResult().then(function(result) {
  if (result.credential) {
    // This gives you a Facebook Access Token. You can use it to access the Facebook 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;
  // ...
});
```
  ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンスドキュメントをご覧ください。

account-exists-with-different-credential エラーの処理

Firebase コンソールで [1 つのメールアドレスにつき 1 つのアカウント] 設定を有効にしている場合、Firebase ユーザーが、あるプロバイダ（Google など）用にすでに存在しているメールアドレスを使って別のプロバイダ（Facebook など）にログインしようとすると、AuthCredential オブジェクト（Facebook アクセストークン）とともにエラー auth/account-exists-with-different-credential がスローされます。目的のプロバイダにログインするには、まず既存のプロバイダ（Google）にログインしてから、目的のプロバイダの AuthCredential（Facebook アクセストークン）にリンクする必要があります。

ポップアップモード

signInWithPopup を使用する場合、次のようなコードを使用して auth/account-exists-with-different-credential エラーを処理することができます。

// Step 1.
// User tries to sign in to Facebook.
auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Facebook credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get registered providers for this email.
    auth.fetchProvidersForEmail(email).then(function(providers) {
      // Step 3.
      // If the user has several providers,
      // the first provider in the list will be the "recommended" provider to use.
      if (providers[0] === 'password') {
        // Asks the user his password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(user) {
          // Step 4a.
          return user.link(pendingCred);
        }).then(function() {
          // Facebook account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(providers[0]);
      // At this point, you should let the user know that he already has an account
      // but with a different provider, and let him validate the fact he wants to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account he owns.
        // Step 4b.
        // Link to Facebook credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.link(pendingCred).then(function() {
          // Facebook account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

リダイレクトモード

このエラーはリダイレクトモードでも同様の方法で処理されますが、ページをリダイレクトする間、保留された認証情報をキャッシュする必要がある点が異なります（セッションストレージなどを使用します）。

高度: 手動でログインフローを処理する

Facebook アカウントを使用して Firebase での認証を行うために、Facebook ログイン JavaScript SDK を使用してログインフローを処理することもできます。

デベロッパー向けドキュメントに沿って、アプリに Facebook ログインを統合します。必ず Facebook アプリ ID を使用して Facebook ログインを設定します。

<script src="//connect.facebook.net/en_US/sdk.js"></script>
<script>
  FB.init({
    /**********************************************************************
     * TODO(Developer): Change the value below with your Facebook app ID. *
     **********************************************************************/
    appId      : '<YOUR_FACEBOOK_APP_ID>',
    status     : true,
    xfbml      : true,
    version    : 'v2.6'
  });
</script>

Facebook の認証状態に対するリスナーも設定します。
```
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
```
Facebook ログインを統合したら、Facebook ログインボタンをウェブページに追加します。
```
<fb:login-button data-auto-logout-link="true" scope="public_profile,email" size="large"></fb:login-button>
```

Facebook の認証状態のコールバックで、Facebook の認証応答から取得した認証トークンを Firebase 認証情報と交換して、Firebase にログインします。

function checkLoginState(event) {
  if (event.authResponse) {
    // User is signed-in Facebook.
    var unsubscribe = firebase.auth().onAuthStateChanged(function(firebaseUser) {
      unsubscribe();
      // Check if we are already signed-in Firebase with the correct user.
      if (!isUserEqual(event.authResponse, firebaseUser)) {
        // Build Firebase credential with the Facebook auth token.
        var credential = firebase.auth.FacebookAuthProvider.credential(
            event.authResponse.accessToken);
        // Sign in with the credential from the Facebook user.
        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;
          // ...
        });
      } else {
        // User is already signed-in Firebase with the correct user.
      }
    });
  } else {
    // User is signed-out of Facebook.
    firebase.auth().signOut();
  }
}

ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンスドキュメントをご覧ください。

また、不要な再認証を避けるために、Facebook ユーザーが既に Firebase にログインしていないかをチェックする必要があります。

function isUserEqual(facebookAuthResponse, firebaseUser) {
  if (firebaseUser) {
    var providerData = firebaseUser.providerData;
    for (var i = 0; i < providerData.length; i++) {
      if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}

高度: Node.js 内で Firebase で認証する

Node.js アプリケーションで Firebase により認証する手順は、次のとおりです。

Facebook アカウントを持つユーザーでログインし、そのユーザーの Facebook アクセストークンを取得します。たとえば、手動でログインフローを処理するセクションの説明に沿ってブラウザでユーザーをログインします。ただしクライアントアプリでアクセストークンを使用するのではなく、Node.js アプリケーションにアクセストークンを送信します。

ユーザーの Facebook アクセストークンを取得した後、アクセストークンを使用して認証情報オブジェクトをビルドし、その認証情報でユーザーにログインします。

// Build Firebase credential with the Facebook access token.
var credential = firebase.auth.FacebookAuthProvider.credential(access_token);

// Sign in with credential from the Google user.
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;
  // ...
});

Chrome 拡張機能で Firebase 認証を行う

Chrome 拡張アプリを作成する場合は、Chrome 拡張 ID をホワイトリストに登録する必要があります。

Firebase コンソールでプロジェクトを開きます。
[Authentication] セクションで、[ログイン方法] ページを開きます。
OAuth リダイレクトドメインのリストに次のような URI を追加します。
```
chrome-extension://CHROME_EXTENSION_ID
```

Chrome 拡張機能では HTTP リダイレクトを使用できないため、Chrome 拡張機能ではポップアップオペレーション（signInWithPopup と linkWithPopup）のみを使用できます。認証ポップアップはブラウザのアクションポップアップをキャンセルするため、ブラウザのアクションポップアップではなくバックグラウンドスクリプトからこれらのメソッドを呼び出す必要があります。

次のステップ

ユーザーが初めてログインすると、新しいユーザーアカウントが作成され、ユーザーがログインに使用した認証情報（ユーザー名とパスワード、電話番号、または認証プロバイダ情報）にアカウントがリンクされます。この新しいアカウントは Firebase プロジェクトの一部として保存され、ユーザーのログイン方法にかかわらず、プロジェクトのすべてのアプリでユーザーを識別するために使用できます。

アプリでユーザーの認証ステータスを把握するには、Auth オブジェクトにオブザーバーを設定することをおすすめします。これによって、ユーザーの基本的なプロフィール情報を User オブジェクトから取得できます。ユーザーの管理についての記事をご覧ください。
Firebase Realtime Database と Cloud Storage のセキュリティルールでは、ログイン済みユーザーの一意のユーザー ID を auth 変数から取得し、それを使用してユーザーがアクセスできるデータを制御できます。

既存のユーザーアカウントに認証プロバイダの認証情報をリンクすることで、ユーザーが複数の認証プロバイダを使用してアプリにログインできるようになります。

ユーザーのログアウトを行うには signOut を呼び出します。

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 10月 11, 2017.