"Callback URL does not contain state" 来自 Firebase 的 Facebook 身份验证和 React Native 错误

Question

我正在尝试使用 Firebase 和 Facebook Auth 编写 React Native 应用程序。这是完整的应用程序代码：

import React from 'react';
import { StyleSheet, View } from 'react-native';

import { LoginManager, AccessToken, LoginButton } from 'react-native-fbsdk';

import * as f from './config/firebase';

export default class App extends React.Component {
  fbLoginHandler(error, result) {
    if (error) {
      alert('Login failed with error: ' + error);
    } else if (result && result.isCancelled) {
      alert('Login cancelled');
    } else {
      AccessToken.getCurrentAccessToken().then((accessTokenData) => {
        const credential = f.provider.credential(accessTokenData.accessToken);
        f.auth.signInAndRetrieveDataWithCredential(credential).then((s) => {
          alert('Success! ' + s);
        }, (signinError) => {
          console.log('Signin error', signinError);
          alert('Signin error' + signinError);
        });
      }, (tokenError) => {
        alert('Some error occurred' + tokenError);
      });
    }
  }

  render () {
    return (
      <View style={styles.container}>
        <LoginButton
          readPermissions={['public_profile', 'email']}
          onLoginFinished={(error, result) => this.fbLoginHandler(error, result)}
          onLogoutFinished={() => alert('logout.')}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
});

这是我的 Firebase 配置文件（上面片段中的 './config/firebase' 导入）：

import * as firebase from 'firebase';

const config = {
  apiKey: <api key>,
  authDomain: <auth domain>,
  databaseURL: <database URL>,
  projectId: <project ID>,
  storageBucket: <storage bucket>,
  messagingSenderId: <messaging sender ID>
};

firebase.initializeApp(config);

export const database = firebase.database();
export const auth = firebase.auth();
export const provider = new firebase.auth.FacebookAuthProvider();

我已按照 Firebase 文档中的说明在我的 Facebook 控制台上输入了所需的 OAuth 重定向 URI。我还根据其他 Stack Overflow 线程中的建议添加了一些其他内容。我授权的重定向 URI 是：

https://<MyAppID>.firebaseapp.com/__/auth/handler
https://auth.firebase.com/auth/facebook/callback
https://auth.firebase.com/v2/<MyAppID>/auth/facebook/callback
https://localhost/
http://localhost/

授权过程完成了一部分（我可以在我的 Facebook 控制台上看到用户已经过身份验证）但是 signInAndRetrieveDataWithCredential(credential) returns 一个错误：

{
  code: "auth/internal-error",
  message: {
    error:{
      code:400,
      message:"Callback URL does not contain state: http://localhost?id_token=<token>&providerId=facebook.com",
      errors:[{
        message:"Callback URL does not contain state: http://localhost?id_token=<token>&providerId=facebook.com",
        domain:"global",
        reason:"invalid"
      }]
    }}
  }
}

我搜索了互联网、Facebook 开发人员文档、Firebase 文档，当然还有 Stack Overflow，但我无法在任何地方找到任何关于此特定错误的参考。我相信该错误 - 尽管是从 Firebase 函数返回的 - 只是从 Facebook Auth API 传递过来的，但我什至不能 100% 确定这一点。

我的假设是我在 Facebook 或 Firebase 中的配置设置一定不正确，但我已经尝试更改明显的设置（例如重定向 URI、所有 OAuth 选项切换等），但没有任何更改在错误消息中。

任何见解将不胜感激！

Answer 1

虽然我仍然无法诊断出这个特定的错误，但我找到了一个有效的解决方案，使用第三方 react-native-firebase 包代替 Google 的 firebase 包：

import React from 'react';
import { StyleSheet, View } from 'react-native';

import { LoginManager, AccessToken, LoginButton } from 'react-native-fbsdk';

import firebase from 'react-native-firebase';

export default class App extends React.Component {
  fbLoginHandler(error, result) {
    if (error) {
      alert('Login failed with error: ' + error);
    } else if (result && result.isCancelled) {
      alert('Login cancelled');
    } else {
      AccessToken.getCurrentAccessToken().then((accessTokenData) => {
        const credential = firebase.auth.FacebookAuthProvider.credential(accessTokenData.accessToken);
        firebase.auth().signInAndRetrieveDataWithCredential(credential).then((s) => {
          alert('Success! ' + s);
        }, (signinError) => {
          console.log('Signin error', signinError);
          alert('Signin error' + signinError);
        });
      }, (tokenError) => {
        alert('Some error occurred' + tokenError);
      });
    }
  }

  render () {
    return (
      <View style={styles.container}>
        <LoginButton
          readPermissions={['public_profile', 'email']}
          onLoginFinished={(error, result) => this.fbLoginHandler(error, result)}
          onLogoutFinished={() => alert('logout.')}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
});

"Callback URL does not contain state" 来自 Firebase 的 Facebook 身份验证和 React Native 错误

"Callback URL does not contain state" error from Firebase with Facebook Auth and React Native

firebase

react-native

firebase-authentication

facebook-authentication