【Firebase】Facebook Graph APIで色んなプロフィール情報を取得する方法

どーも、ぐるたか@guru_takaです。

VueとFirebaseでFacebookの情報を取得する機会があったので、方法をメモしておきます。

手順

STEP.1：欲しい情報のアクセス許可

ユーザーのメールアドレスや名前以外の情報(例えば、誕生日など)を取得したい場合、予めログインする時にアクセス許可を申請する必要があります。

具体的なコードは以下の通りです。

 const provider = new firebase.auth.FacebookAuthProvider()
provider.addScope('user_birthday')

const response = await firebase.auth().signInWithPopup(provider);

provider.addScopeが情報取得の許可をとっているコードです。ここでは誕生日でしたが、他にも性別や投稿記事もとれたりします！

詳細は公式ページをご確認ください。
参考 アクセス許可のリファレンス - Facebookログインfacebook for developers

STEP.2：Facebook Graph APIで色んな情報を取得

以下のURLから情報をゲットできます。

curl -i -X GET \
 "https://graph.facebook.com/{your-user-id}
   ?fields=id,name
   &access_token={your-user-access-token}"

fields=id,nameが得られる情報です。もし誕生日や性別、投稿記事の情報も取得したければ、fields=id,name,gender,birthday,postsになります。

your-user-idとyour-user-access-tokenはfirebase.auth().signInWithPopup(provider)の返り値responseのデータを活用すればOK！

あとはaxiosなど使って、urlを叩きましょう。
参考 グラフAPIの利用facebook for developers

取得できない情報も多々あるので、要注意！

Facebook Graph APIを使ったとしても、全てのデータが取得できるわけではないので注意してください！

2018年に破壊的変更があったので、公式で欲しいデータが取れるかどうか確認すると良いでしょう。