Firebase 在通过 FacebookAuthProvider.credential(access_token) 后抛出"Cannot parse ID Token"

Question

我正试图将Facebook身份验证集成到与firebase身份验证交互的应用程序中。我遵循了Facebook的expo.dev文档提供的指南，但我很难让它工作。我能够成功登录到Facebook，并返回一个access_token。我甚至用FacebookAuthProvider.credential(access_token)成功地生成了firebase凭证。但是当尝试使用firebase进行身份验证时，我得到一个不能解析ID令牌。我能够实现身份验证与谷歌没有问题遵循相同的方法，但Facebook只是不会工作。

下面是问题代码:

import React, { useEffect, useState } from "react";
import { View } from "react-native";
import { FontAwesome5 } from "@expo/vector-icons";
import { useDispatch, useSelector } from "react-redux";
import * as WebBrowser from 'expo-web-browser';
import { ResponseType } from 'expo-auth-session';
import * as Facebook from 'expo-auth-session/providers/facebook';
import { addError } from "../../redux/actions/error.actions";
import { firebaseLogin } from "../../redux/actions/firebase.actions";
import { auth, facebookProvider } from '../../config';

WebBrowser.maybeCompleteAuthSession();
export default function FacebookLogin() {
const dispatch = useDispatch();
const [ request, response, promptAsync] = Facebook.useAuthRequest({
responseType: ResponseType.Token,
clientId: 'XXXXXXXXXXXXXXX',
});

useEffect(() => {
if (response?.type === 'success') {
const {access_token} = response.params;
console.warn(`access_token type: ${typeof access_token}`);
const credential = facebookProvider.credential(access_token);
auth.signInWithCredential(credential).then(
(userCredential) => {
if (userCredential.additionalUserInfo.isNewUser) {
console.warn('New Facebook User.');
} else {
dispatch(firebaseLogin(userCredential.user));
}
},
(error) => {
let email = error.email;
let credential = error.credential;
// TODO: Handle linking of account if credential exists.
if (error.code === "auth/popup-closed-by-user") {
console.log('user closed popup');
}
}
)
.catch((error) => {
setError(true);
setErrorMessage({ type: "Facebook Login", message: error });
dispatch(addError({ type: "Facebook Login", message: error }));
});
}
}, [response]);
return (
<View style={{ marginBottom: 10 }}>
<FontAwesome5.Button
name="facebook-f"
backgroundColor="#3B5998"
onPress={promptAsync}
borderRadius={24}
size={18}
style={{ marginLeft: 7, marginRight: 7 }}
>
Sign In with Facebook
</FontAwesome5.Button>
</View>
)
}

这个组件中唯一不可见的是auth和facebookProvider是如何定义的。

import firebase from 'firebase/app';
import 'firebase/auth';
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
} else {
firebase.app();
}
export const auth = firebase.auth();
export const facebookProvider = new firebase.auth.FacebookAuthProvider();
export {firebase};

Answer 1

您必须启用'高级访问' for 'public_profile"。还有你在登录时请求的任何其他字段，在我的情况下，我正在抓取'电子邮件’领域也是如此。这是在App Review ->权限和特性在Facebook开发者控制台

FB Dev Console Location图片

如果您使用自定义按钮而不是默认的Facebook按钮，请确保您使用的功能没有nonce。这也是我遇到的一个问题。

let loginManager = LoginManager()
loginManager.logIn(permissions: ["public_profile", "email"],from: controller) { result, error in
if let error = error {
print(error.localizedDescription)
return
}
guard let idTokenString = result.token?.tokenString
else { throw NSError() }

let credential = OAuthProvider.credential(withProviderID: "facebook.com", 
accessToken: idTokenString)
Auth.auth().signIn(with: credential) { (authResult, error) in }
}