どーも、ぐるたか@guru_takaです。
VueとFirebaseでFacebookの情報を取得する機会があったので、方法をメモしておきます。
手順
STEP.1
欲しい情報のアクセス許可
STEP.2
Facebook Graph APIで色んな情報を取得
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!
URL内の変数 | responseで対応するデータ |
your-user-id | response.user.providerData[0].uid |
your-user-access-token | response.credential.accessToken |
あとはaxios
など使って、urlを叩きましょう。
参考
グラフAPIの利用facebook for developers
取得できない情報も多々あるので、要注意!
Facebook Graph APIを使ったとしても、全てのデータが取得できるわけではないので注意してください!
2018年に破壊的変更があったので、公式で欲しいデータが取れるかどうか確認すると良いでしょう。
参考 Breaking Changesfacebook for developers
コメントを残す