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

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

準備

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

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 プロバイダのドキュメントによって指定されたキーと、対応する値を含むオブジェクトを使用して、初期化されたプロバイダで setCustomParameters を呼び出します。次に例を示します。
    provider.setCustomParameters({
  'display': 'popup'
});
    保存された必須 OAuth パラメータは許可されず、無視されます。 詳細については、認証プロバイダのリファレンスを参照してください。
  4. 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 のリファレンス ドキュメントをご覧ください。

次のステップ

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

  • アプリでユーザーの認証ステータスを把握するには、Auth オブジェクトにオブザーバーを設定することをおすすめします。これによって、ユーザーの基本的なプロフィール情報を User オブジェクトから取得できます。ユーザーの管理についての記事をご覧ください。

  • Firebase Realtime Database と Firebase Storage のセキュリティ ルールで、ログイン済みユーザーに固有のユーザー ID を auth 変数から取得し、これを使用してユーザーがアクセスできるデータを制御できます。

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

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

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

フィードバックを送信...

このページ
ドキュメントのフィードバック
Firebase
Firebase
サービスのフィードバック