[Firebase] AuthenticationでFacebook認証 (Web編)

  • このエントリーをはてなブックマークに追加
  • LINEで送る

Firebaseへメールアドレス認証Twitter認証匿名認証と続き、今回はfacebookでの認証に挑戦します。

Authenticationでfacebookログイン

Facebookアプリを作成する際に、実際に本番で利用するためには「プライバシーポリシー」が掲載されたURLが必要になります。開発段階では不要ですが公開を考えている場合には早めに用意しておくことをおすすめします。

facebookでデベロッパー登録

Facebookにログインし、開発者サイトから登録を行います。
[blogcard url=”https://developers.facebook.com/”%5D

登録する手順も書こうと思ったのですが、10年以上前に登録を終えてしまっていたためここでは割愛します。FacebookはTwitterと違って複数のアカウントが作れない(作りづらい)のですよね(´・ω・`)

facebookアプリを作成

開発者サイトの右上のメニュー「マイアプリ」→「新しいアプリを追加する」をクリック

アプリの名称とメールアドレスを入力し「アプリIDを作成してください」をクリック

- Sponsored Link -

自分がロボットではないか、非常に哲学的な質問を受けますが、生身の人間であると確信を持っている方はチェックし「送信する」ボタンをクリック。

ダッシュボード的な画面になりますので、左側のメニュー「設定」→「ベーシック」にある赤枠で囲まれた項目を追加で入力していきます。アプリIDapp sercretはFirebaseへ入力しますのでどこかにメモします。secretは絶対に他の人には知られないよう取り扱いにはご注意を。現段階ではプライバシーポリシーのURLの入力は必須ではありませんが、すでに存在している場合は入れておきます。

以下の画面が表示された場合は「Facebookログインを統合します」をクリック。もしくはダッシュボード画面上に「製品を追加」という欄に「Facebookログイン」があれば「設定」ボタンをクリックします。

「有効なOAuthリダイレクトURI」を入力する必要がありますが、この画面まで来たらFirebaseのWebコンソールへ戻ります。

Firebase Webコンソールの設定

FirebaseのWebコンソールへログインしたら、メニュー「Authentication」→「ログイン方法」とたどります。

画面の真ん中あたりにある「Facebook」のアコーディオンメニューを開き、「有効にする」にチェックしたあと

  1. 「OAuthリダイレクトURI」をFacebookのアプリ作成画面にコピー
  2. Facebookの設定画面に表示されていたアプリIDapp sercretをこの画面に入力

最後に「保存」をクリックすれば作業完了です。

ソースコード

config.js

いつものやつです。FirebaseのWebコンソールに表示されたものをそのままコピペします。

// コンソールの内容をそのままコピペ
var config = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "test-f76bc.firebaseapp.com",
  databaseURL: "https://test-f76bc.firebaseio.com",
  projectId: "test-f76bc",
  storageBucket: "test-f76bc.appspot.com",
  messagingSenderId: "0000000000000"
};
firebase.initializeApp(config);

index.html

FirebaseUIを利用します。Twitterの時と同様にsignInOptionsfirebase.auth.FacebookAuthProvider.PROVIDER_IDを指定します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Firebase Auth for Facebook</title>
  <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
  <style>h1{text-align: center;}</style>
</head>
<body>
  <h1>Firebase Auth for Facebook</h1>
  <div id="firebaseui-auth-container"></div>

  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script>
  <script src="/js/config.js"></script>
  <script>
    //----------------------------------------------
    // Firebase UIの設定
    //----------------------------------------------
    var uiConfig = {
        // ログイン完了時のリダイレクト先
        signInSuccessUrl: '/auth/facebook/done.html',

        // 利用する認証機能
        signInOptions: [
          firebase.auth.FacebookAuthProvider.PROVIDER_ID
        ],

        // 利用規約のURL(任意で設定)
        tosUrl: 'http://example.com/kiyaku/',
        // プライバシーポリシーのURL(任意で設定)
        privacyPolicyUrl: 'https://miku3.net/privacy.html'
      };

      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      ui.start('#firebaseui-auth-container', uiConfig);
  </script>
</body>
</html>

done.html

ログイン完了時に表示される画面です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Firebase Auth for Facebook</title>
</head>
<body>
  <h1>...Please wait</h1>
  <div id="info"></div>

  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
  <script src="/js/config.js"></script>
  <script>
    firebase.auth().onAuthStateChanged( (user) => {
      let h1   = document.querySelector('h1');
      let info = document.querySelector('#info');

      if(user) {
        h1.innerText   = 'Login Complete!';
        info.innerHTML = `${user.displayName}さんがログインしました<br>` +
                         `(${user.uid})`;
        console.log(user);
      }
      else {
        h1.innerText = 'Not Login';
      }
    });
  </script>
</body>
</html>

実行結果

実際にログインを試せます。
[blogcard url=”https://miku3.net/auth/facebook/”%5D

Webコンソールでの表示は以下のようになります。

Facebookアプリを本番公開

現状のアプリは「開発モード」になっており、アプリを作成した本人か特定のユーザーしか利用することができません。そこで本番に公開する作業が必要になります。

ダッシュボードの画面右上にある以下の箇所の「オフ」をクリック

「承認」ボタンをクリック

以下のように「オン」となれば完了です。

参考ページ

[blogcard url=”https://firebase.google.com/docs/auth/web/facebook-login?hl=ja”%5D
[blogcard url=”https://github.com/firebase/firebaseui-web”%5D

- Sponsored Link -

同じカテゴリの記事

Donate

投げ銭お待ちしております!

BTC3A9nH1j7qQdKrSTrmnEdweo6zPqpHBmkxC
ETH0x1aE0541198D1F9f2908a25C35032A473e74D3731
XPXaQ9zv65F9ovfoMBrFGiPRG47aSHFhy8SX
MONAMTKgzSiS5BDueZkRCHySih24TGFwHThaDQ (MonaCoin)
ZNYZhnpf4RFYVQTAQiyoJg9dGoeC4bgT3BoSy (BitZeny)

ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください