Facebook認証の実装方法 – Firebase + React

Firebase上のAuthenticationには様々な方法が提供されていますが、本稿ではやや設定の面倒なFacebook認証の方法をご紹介します。Webアプリを前提に、フロントエンドはReact(Next.jsでも可)を使用します。Facebook認証はgmail認証やgithub認証との比較では使用要件が厳しく、認証の設定のためには下記4点が済んでいることが前提になります。

  1. FirebaseにWebアプリが登録済み
  2. Webアプリが仮の形であれ、既にデプロイされている
  3. プライバシーポリシーのページあり
  4. データ削除に関するページあり

1.Firebaseでのアプリの登録は、私が別の記事で記載した「Firebaseのサイト上での初期設定」と、「Firebaseプロジェクト内でのアプリの登録方法」をご覧ください。また、Facebook認証以前のFirebase上のAuthentication画面の表示方法については、こちら「Authenticationの設定」をご覧ください。

2.ホスティングにつき、Reactの方は「FirebaseでWebアプリをデプロイする方法」のうち、「ローカルPC側の初期設定」から「デプロイ完了」までを、Next.jsの方は「VercelにNext.jsアプリをデプロイする方法」を参考にしてください(もちろん他の場所でも可能)。3-4.Reactでのプライバシーポリシー及びデータ削除のページ(すなわち、複数ページ)の作成方法については、「Reactで複数のページを作る方法 – Router v6.0準拠」を参考にしてください。

Firebase Authenticationの設定 – 1

Firebaseでアプリを立てた後、サイドバーのAuthenticationからAdd new providerを選択します。Facebookが選択できますのでFacebookを選択します。


Facebook authentication - Add new provider

次の画面でFacebook Authを有効にしようとすると(右上のEnableのトグルをクリック)、下記画面のようにApp IDとApp secretを求められます。



Facebook(Meta)上での設定で両者を取得する必要がありますので、https://developers.facebook.comに行き、右上のMyAppsをクリックいたします(以下2022年4月現在の表示)。Facebook / Instagramのアカウントがない場合はサインインを求められると思いますので、アカウントを作成ください。

Facebook Developersの設定 – 1 : アプリの登録


Meta for developers - Top

続く画面で右上のCreate Appを選択します。下記画面の中央にあるReventsCourseは私が過去に作成したアプリ(認証用)ですので、初めて開く方は何も表示がないと思います。



次にアプリの種類を選択する画面になりますので、認証のために用意されたConsumerを選択します。



画面の案内に従い、任意の認証用アプリの名称と管理者用のemailを入力します。最後に右下のCreate Appを入力します。Create Appを選択した後に、Facebookのパスワードを求められれば、パスワードを入力してください。



無事アプリの立ち上げができると、下記のような機能を選択する画面になります。ユーザーのInstagramのプロフィールを表示する機能などもありますが、ここではFacebook Loginを選択します(Set upをクリックします)。


Facebook - Add products to your app

Set up選択後は、下記のようにログインを実装するアプリの種類を求める画面になります。本件ではWebですので、Webを選択します。



次にWebアプリのURLを求められます。独自ドメインを取得済みの場合はここで同ドメインを入力します。ここでは、Firebaseのデフォルトのドメインを調べる方法(Firebase Hostingを立ち上げる方法)をご紹介します。独自ドメインがある方、既にFirebase Hostingが済んでいる方、又は、他のホスティングサービスをご利用で既にドメインのある方は、次の章はスキップし私の以前の記事のこちらの章「Authorizedドメインの設定」に従ってAuthorized DomainをFirebaseで登録してください。なおNext.jsの方は、Firebaseでホスティングするのが容易ではないため、ホスティングにはVercelを使うことを推奨いたします。

Firebase Hostingを立ち上げURLを取得する方法

本章ではFirebaseでURL(ドメイン)を取得する方法だけを紹介します。Firebaseでホスティングをするためには本章以外にもローカル開発環境での設定が必要です。詳細は冒頭でも紹介した私の別の記事「FirebaseでWebアプリをデプロイする方法」をご覧ください。

まずFirebaseのアプリでHostingを設定します。Firebaseの画面上部に現在のアプリ名(本事例ではauth-demo)が表示されていることを確認の上、サイドバーのHostingをクリック、続いて画面中央表示されるGet startedをクリックします。

そうすると、下記のような画面になります。Firebase CLIのインストール方法が記載されていますが、ローカル開発環境での処理ですので、いったんNextをクリックしてください(下記は画面上のコード)。

npm install -g firebase-tools


Nextを押すと、ローカルのプロジェクトからfirebaseにサインインするコード”firebase login”と、ローカルプロジェクトでfirebaseを立ち上げるためのコード”firebase init”が記載されています。こちらもローカル開発環境での処理ですので、いったんNextを押します。

firebase login
firebase init


3番目も同様です。下記のFirebaseへのデプロイするコマンドが案内されていますが、こちらもローカル開発環境での処理ですので飛ばし、Continue to consoleをクリックします。

firebase deploy

以上でFireabseのHostingの設定が終わり、Authorized DomainのURLが表示されます。上下に2つ表示されますが、web.appドメインのURLをコピーします。なお、「auth-demo-14acf」の部分は私のこの記事を書いているときの仮のURLです。皆様はそれぞれが登録されたアプリ名に、任意の文字列が付されたURLが表示されるはずです。


Firebase - Authorized Domain URL

Facebook Developersの設定 – 2: URLの設定

Facebook(Meta) Developersの管理画面に戻り、アプリのドメイン(URL)を入力、右下のSaveを押します。Continueの色が変わりクリック可能となったらContinueを押します。


Facebook Meta developers - Set URL

続く「2.Set Up the Facebook SDF for Javascript」の画面では、JavaScriptでFacebook SDKをロード(インポート)するためのコードが表示されますが、Firebaseのhooksを使用予定なので、右下のNextを押します。あるいは、Nextを押しても新たな設定がされるわけではないのでNextを押さずに作業を終えても問題ありません。「3.Check Login Status」と「4.Add the Facebook Login Button」も同様にフロントエンドでの実装可能なそれぞれのJavaScriptコードが表示されますが、2と同様の理由で、右下のNextを押すか、押さずに作業を終えます。

次にサイドバーのFacebook LoginのSettingsを押して表示される、下記OAuthのRedirect URLs(callback URL)を設定する必要がありますが、その前に冒頭のFirebaseの設定で入力を求められたApp IDとApp secretをFacebook(Meta) Developersから取得します。OAuthのRedirect URLs(callback URL)は、App IDとApp secretを設定すると得られます。


Facebook Meta developers - Valid OAuth Redirect URLs

App IDとApp secretの取得

サイドバーのSettings内にあるBasicをクリックすると、画面中央にApp IDとApp secretが表示されているのでそれぞれコピーします。


Facebook Meta developers - App ID and APP secret

Firebase Authenticationの設定 – 2 : App ID/secretsの設定

コピーしたApp IDとApp secretをFirebaseのFacebook設定画面に戻ってペーストします。Hostingを設定したところで、冒頭の画面は既に消えている方は、もう一度サイドバーからAuthentication、Sign-in-methodタブの画面中央右上のAdd new provider、最後にFacebookを選択し、右上のEnableをクリックします。App IDとApp secretをペーストの後(App secretは表示させてからコピー)、下段にOAuth redirect URL(callback URL)があるのでこれをコピーします。コピー後は、右下のSaveを押します。なお、Saveを押した後からでもかcallback URLは確認できます。


Firebase - authentication, OAuth Redirect URLs

Facebook Developersの設定 – 3 : callback URLの設定

Facebook(Meta) Developersに戻り、Facebook Login – Settingsにてに先ほどコピーしたOAuth redirect URL(callback URL)を該当箇所に貼り付け、右下のSave changesを押します。


Facebook Meta developers - authentication, OAuth Redirect URLs

ページ上部にApp Modeのトグルがあります。Developmentとすると、ローカル環境からでもアクセスが可能ですが、ここをLiveとするとlocalhost:3000などのローカル環境からはアクセスが出来なくなります。


Firebase - authentication, App Mode Development

以上で、FirebaseとFacebook(Meta) 上の最低限の初期設定は完了です。念のため、FirebaseのAuthenticationの画面に戻ると、FacebookがEnabledになっていると思います。


Firebase - authentication providers

Facebook Developersの設定 – 4 : Privacy Policy URLの設定

Facebookのログインを利用するためには、アプリ中にプライバシーポリシーのページと、ユーザーがサインインに関連するデータの削除を請求することができるページが必要です。それぞれのURLをFacebook Login – Settings画面の中段にある該当部分に記載し、Save changesを押します。


Facebook Meta developers - Privacy Policy URL

Facebook Developersの設定 – 5 : Advanced Accessの取得

3のFacebook Login – Settingsの画面で下記のような表示が出ると思います。記載の通りで、ログイン機能を使うためには、public_profileのstandard accessをAdvaned Accessに変更する必要があります。


Facebook Meta developers - Get Advanced Access

上の赤いアラートに表示される「Get Advanced Access」を押すと、下記のようなポップアップが出ます。Tourはいりませんので、ここではNot Nowを押します。


Facebook Meta developers - App requests take a tour

次の画面では様々なアクセス権の設定画面が表示sれますので、中段にあるpublic_profileを探し、右側にあるGet Advanced accessを押します。


Facebook Meta developers - Get Advanced Access of public_profile

次のようなポップアップが表示された場合は、Privacy PolicyのURLが正しくないので、Settings内のBasic Settingsに戻ってPrivacy Policy URLを記入します。


Facebook Meta developers - Private Policy URL

Privacy Policy URLの記載が正しければ、下記のようなユーザーの情報取り扱いに関するConfirmの画面が出ると思います。I agreeのチェックボックスを押して、右下のConfirmを押します。Confirmを押した後、Faccebookのパスワードの入力を求められると思います。

Facebook Meta developers - Advanced Access to public_profile

public profileに対するAdvanced Accessの設定が完了しました。サイドバーのApp review – Permissions and Featuresを押すとAdvanced Accessが付与されたことを確認できると思います。


Facebook Meta developers - Advanced Access to public_profile

Next.js(React)でのFacebook Authentication設定

続いてローカル環境のNext.js/Reactで、Facebook認証のコンフィギュレーションに関する設定をします。Next.jsの場合はnpx create-next-app、Reactの場合はnpx create-react-appでプロジェクトを立ち上げた後、fireabaseをインストールします。npmの方は上段、yarnの方は下段です。

npm install firebase
yarn add firebase

続いてfirebaseaアプリの構成情報(コンフィギュレーション情報)を格納するためのファイル、firebase.jsを作成します。firebase.jsはpackage.jsonと同じ階層に直接配置するか、適当な名称のフォルダを作成し、その中に配置します。firebase.jsの作成方法はこちら「コンフィギュレーションファイル、firebase.jsの作成」をご覧ください。下記に結果を転記します(configの内容は仮の数字)。facebookのauthenticationに関わる部分は新たに追加します。また、firestoreを使わない場合はdbはなくてもよいです。

google(gmail)やgithubなどfacebook以外のAuthProviderを使用する場合は、const providerとある部分をconst FacebookProviderやconst FBProviderなどとしてください。

firebase.js

import { initializeApp, getApps } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { FacebookAuthProvider } from "firebase/auth";

const firebaseConfig = {
apiKey: "adfasfavnaAJFDKCnjkasjlkASJLFNKSA",
authDomain: "myapp-e44bc.firebaseapp.com",
projectId: "myapp-e44bc",
storageBucket: "myapp-e44bc.appspot.com",
messagingSenderId: "15645145781598",
appId: "1:15645145781598:web:1516532e652c54f45456f44",
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApps();
const auth = getAuth(app);
const db = getFirestore(app);
const provider = new FacebookAuthProvider();


export { auth, provider };
export default db;

次にログインのためのコンポーネントを作ります。下記コードの説明は次の通りです。

1. まず2行目で、先ほど作成したauthとproviderをインポートしています。

2. signInという関数ではログインの処理をしています。サインインの方法は、signInWIthRedirectとsignInWithPopupの2通りの方法があります。singInWithRedirectを選ぶとfacebookログインのためにfacebookのページに一度飛んで、サインイン後に戻ってきます(リダイレクト)。signInWithPopupの場合は文字通りポップアップが表示されてサインインします。人によってはブラウザの設定でポップアップをブロックしているので、リダイレクトの方が無難ですが、facebookのページに一度飛ぶ煩わしさはあります。本件では、singInWithRedirectを選択します。関数の引数にはインポートしたproviderを渡します。

3. singInWithRedirectからはレスポンスとエラーが返ってくるので、.thenと.catchにてそれぞれ適当に処理をします。

その中に設置します。

Login.js

import React from "react";
import { auth ,provider } from "./components/firebase";
import { signInWithRedirect, signOut } from "firebase/auth";
import { useAuthState } from "react-firebase-hooks/auth";

function Login() {
const [user, loading, error] = useAuthState(auth);

const signIn = () => {
}
return (
< div>
< button
onClick={( ) => {
setCenter("Pressed Center");
})
>
Press here
</ button>
< p>{center}</ p>
</ div>
);
};

export default Login;

上記のコードでボタンを押したとき、下記のようなfaebookのログイン画面(上段はFacebookにログイン済みの場合、下段はFacebookにログインをしていないとき)が表示されれば成功です。2回目以降はこの画面は一瞬で開いて閉じるので見ることはありません。


facebook app login

facebook app login

サインイン(ログイン)済みのユーザーとそうでないユーザーに対して表示を分ける方法、及び、サインアウトの機能の実装方法については、私の別の記事「React + Firebaseを使ったユーザー認証の実装方法」の5.4章「JSX内のユーザーの状態に応じた表示部分」と6章「サインアウト機能」で解説しております。

サインイン済みユーザーの確認方法

Firebaseのサイドバーから、Authentication – Usersをクリックするとサインイン済ユーザーの一覧が確認できます。Providersの部分にFacebookのロゴがあればサインインは成功してます。


Firebase Authentication Users

追記 – auth/account-exists-with-different-credentialエラー

email認証、gmail認証、facebook認証など複数の認証方法を併用する場合、同一のメールアドレスを持つ1人のユーザーが複数の認証方法を利用することが考えられます。この場合の処理はFirebaseでは2通りあります。一つ目は同一のアドレスに対して複数の認証方法を認める方法、二つ目は同じメールアドレスを利用した複数のサインインがある場合には2回目以降を認めない方法です。デフォルトでは後者に設定されており、この場合はauth/account-exists-with-different-credentialエラーによりサインインができません。同エラーへの対応方法については、こちらのFirebaseの公式サイトをご覧ください。

今日も最後まで読んで頂きありがとうございました。