Firebase-Facebook認証

この章では、Firebase Facebook認証でユーザーを認証します。

ステップ1-Facebook認証を有効にする

Firebaseダッシュボードを開き、サイドメニューで[認証]をクリックする必要があります。次に、タブバーで SIGN-IN-METHOD を選択する必要があります。 Facebook認証を有効にし、ステップ2の完了時に App ID と App Secret を追加する必要があるため、これを開いたままにします。

ステップ2-Facebookアプリを作成する

Facebook認証を有効にするには、Facebookアプリを作成する必要があります。このリンクをクリックして開始します。アプリが作成されたら、 App ID と App Secret をFirebaseページにコピーする必要があります。Firebaseページはステップ1で開いたままにします。また、このウィンドウからFacebookアプリに OAuthリダイレクトURI をコピーする必要があります。 Facebookアプリダッシュボードのサイドメニュー内に + Add Product があります。

[* Facebookログイン*]を選択すると、サイドメニューに表示されます。 Firebaseから OAuth Redirect URI をコピーする必要がある入力フィールド Valid OAuth redirect URIs があります。

ステップ3-Facebook SDKへの接続

*indexl* の *body* タグの先頭に次のコードをコピーします。 FacebookダッシュボードのアプリIDに *'APP_ID'* を必ず置き換えてください。

例

次の例を考えてみましょう。

<script>
   window.fbAsyncInit = function() {
      FB.init ({
         appId      : 'APP_ID',
         xfbml      : true,
         version    : 'v2.6'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   } (document, 'script', 'facebook-jssdk'));

</script>

ステップ4-ボタンを作成する

最初の3つのステップですべてを設定しました。ログインとログアウト用の2つのボタンを作成できるようになりました。

インデックス

<button onclick = "facebookSignin()">Facebook Signin</button>
<button onclick = "facebookSignout()">Facebook Signout</button>

ステップ5-認証関数の作成

これが最後のステップです。 index.js を開き、次のコードをコピーします。

index.js

var provider = new firebase.auth.FacebookAuthProvider();

function facebookSignin() {
   firebase.auth().signInWithPopup(provider)

   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;

      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code);
      console.log(error.message);
   });
}

function facebookSignout() {
   firebase.auth().signOut()

   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

Firebase-facebook-authentication

目次