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

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

準備

  1. Firebase を JavaScript プロジェクトに追加します。
  2. Facebook for Developers サイトで、アプリのアプリ ID とアプリ シークレットを取得します。
  3. Facebook ログインを有効にします。
    1. Firebase コンソールで [Authentication] セクションを開きます。
    2. [ログイン方法] タブで [Facebook] を有効にし、Facebook から取得した [アプリ ID] と [app secret] を指定します。
    3. 次に、Facebook for Developers サイトの [Product Settings] > [Facebook Login] 構成にある Facebook アプリ設定ページで、OAuth リダイレクト URI（my-app-12345.firebaseapp.com/__/auth/handler など）が [OAuth redirect URIs] のうちの 1 つとしてリストされていることを確認します。

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

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

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

  1. Facebook プロバイダ オブジェクトのインスタンスを作成します。 
    var provider = new firebase.auth.FacebookAuthProvider();
  2. 省略可: 認証プロバイダにリクエストする追加の OAuth 2.0 スコープを指定します。スコープを追加するには、addScope を呼び出します。次に例を示します。 
    provider.addScope('user_birthday');
    認証プロバイダ向けドキュメントをご覧ください。
  3. 省略可: 関連するカスタム OAuth パラメータを明示的に渡すことなく、プロバイダの OAuth フローをローカライズしてユーザーの使用言語にするには、OAuth フローを開始する前に Auth インスタンスの言語コードを更新します。次に例を示します。 
    firebase.auth().languageCode = 'fr_FR';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
  4. 省略可: OAuth リクエストと一緒に送信する追加のカスタム OAuth プロバイダ パラメータを指定します。カスタム パラメータを追加するには、OAuth プロバイダのドキュメントで指定されたキーと、対応する値を含むオブジェクトで初期化されたプロバイダで setCustomParameters を呼び出します。次に例を示します。 
    provider.setCustomParameters({
  'display': 'popup'
});
    予約済みの必須 OAuth パラメータは許可されず、無視されます。詳細については、認証プロバイダのリファレンスを参照してください。
  5. 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 のリファレンス ドキュメントをご覧ください。

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

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

  1. Firebase コンソールでプロジェクトを開きます。
  2. [Authentication] セクションで、[ログイン方法] ページを開きます。
  3. 承認済みドメインのリストに URI を次のように追加します。
    chrome-extension://CHROME_EXTENSION_ID

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

Chrome 拡張機能のマニフェスト ファイルで、https://apis.google.com URL を content_security_policy ホワイトリストに必ず追加してください。

次のステップ

ユーザーが初めてログインすると、新しいユーザー アカウントが作成され、ユーザーがログインに使用した認証情報（ユーザー名とパスワード、電話番号、または認証プロバイダ情報）にアカウントがリンクされます。この新しいアカウントは 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.
});