expo, react native ,typescript, firebaseでfacebook loginを実装してみる
対象者
・firebaseでプロジェクトの作成をした後
・facebook for developpersページで APP_IDとAPP_SECRETを取得
・APP_IDとAPP_SECRETをfirebaseに登録ずみ
手順
expoの以下公式のドキュメントを参考にしています。
https://docs.expo.io/versions/latest/sdk/facebook/
まずはexpoから提供されているfacebookのAPIを取り込みます
expo install expo-facebook
そして実装を行います。ほぼExpo公式のものを変わりません。
async function logIn() {
try {
await Facebook.initializeAsync('<APP_ID>');
const res = await Facebook.logInWithReadPermissionsAsync({
permissions: ['public_profile'],
});
if (res.type === 'success') {
const credential = firebase.auth.FacebookAuthProvider.credential(token);
firebase.auth().signInWithCredential(credential).catch(error => console.log(error))
} else {
// type === 'cancel'
}
} catch ({ message }) {
alert(`Facebook Login Error: ${message}`);
}
}
基本的にはこちらの方法でログインまでできるかと思います。ただ一点注意があって、facebookログインは開発中はできない模様です。
開発中にfacebookログインを試すと、こんなエラーに遭遇します。
Possible Unhandled Promise Rejection (id: 0):
[Error: Unsuccessful debug_token response from Facebook: {"error":{"message":"(#100) The App_id in the input_token did not match the Viewing App","type":"OAuthException","code":100,"fbtrace_id":"********"}}]
一見APP_idが入力間違いかと思えますが、どっこい。仕様のようです。
https://github.com/expo/expo/issues/8226#issuecomment-639068957
こちらによると、開発中だと、デフォルトでFacobook独自のAPP_IDとして適用されてしまうのです。これを回避するには、スタンドアロンモードでビルドする必要があります。
しかし、ビルドの前にapp.jsonに記載事項があります。 https://developers.facebook.com/docs/facebook-login/ios （こちらのページで対象情報を取得できます）。以下3点です。
{
~省略~
"facebookAppId": "<APPID>",
"facebookDisplayName": "<displayName>",
"facebookScheme": "<Scheme>"
}
記載を終えたら、iosの場合、こちらのコマンドでビルドしましょう。(androidは公式で確認してみてください！)
expo buid:ios
あとはsimulatorで起動してみると、facebookでログインできるはず！！！
にしても、開発中にログインできないのはつらい。。。
Author And Source
この問題について(expo, react native ,typescript, firebaseでfacebook loginを実装してみる), 我々は、より多くの情報をここで見つけました https://qiita.com/YSTM_k/items/c3296ea02c30bb90c8be著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .