Reactでfacebookログインを実装

0. 開発者用facebookアカウントの用意

facebookアカウントでのログイン実装には、開発者用のFacebookアカウントが必要なのでご準備を！

1. moduleのインストール

moduleを使わない方法も検討しましたが、なんだかややこしそうだったので素直にmoduleを使った実装を採用しました。

yarn add react-facebook-login

or

npm install react-facebook-login

2. moduleのimport

ログインボタンを設置したいコンポーネント(hook)でimport！

import FacebookLogin from 'react-facebook-login';

3. ボタンの宣言

<FacebookLogin
  appId="Facebookから取得した固有のID"
  autoLoad={true}
  fields="name,email,picture"
  scope="public_profile,user_friends"
  callback={responseFacebook}
  cssClass="お好みのClas名"
  icon="fa-facebook" />

その他、カスタマイズする際のオプションリストみたいなのは下記のページのしたの方でまとまってましたのでご参考まで。

4. レスポンスが返ってきた時の処理

設置したボタンをタップすると、勝手にfacebookのウィンドウが開いて情報入力などするわけですが、
その後アプリ側に返ってきた時に呼ばれる関数を用意しておく必要があります。
実は、ボタン宣言時に"callback={responseFacebook}"というパラメータを渡しておいたので同じ名前の関数を宣言するだけでOK！

const responseFacebook = (response) => {
    console.log(response);
}

あとはとってきたログイン情報（名前、メアド、プロフ画像等）を必要な場所で活用していくだけ◎

最後は..

ローカル環境で試したいよね

httpsのURLじゃないと、Facebook側のフィルターにかかって認証を開始することすらできない。
→ ngrock を使ってみた。
↓使い方↓

注意： localhostではなく、IPアドレスを使って実行している場合、下のエラーが発生。

このエラーは、こちらのコマンドで解決しました。

ngrok http --host-header=rewrite IPアドレス:3000

参考: https://qiita.com/T-Com/items/7f1468167f80df00a87d

しかしfacebookアカウントの開発モードでできることには制限があるので要注意です。
（審査に通るまで結構時間かかるみたいなので早めのご準備を~~）