在firebase中使用facebook登录以响应本机无法正常工作，但收到令牌

时间：2019-03-11 18:19:25

标签： firebase react-native firebase-authentication facebook-authentication

我正在尝试在firenative项目中的Firebase中使用fb-auth进行身份验证。

使用async，我先呼叫Firebase，然后再呼叫Facebook。

async loginWithFacebook() {
    const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync(
      "830893840610100",
      {
        permissions: ["public_profile"]
      }
    );

    if (type === "success") {
      console.log("success \n", token);
      // if yes, then take credentials from fb_auth_provider and pass to firebase
      const credentials = f.auth().FacebookAuthProvider.credential(token);
      try {
        f.auth()
          .signInWithCredential(credentials)
          .catch(err => {
            console.log("error occured \n", err);
          });
      } catch {
        console.log("Can't login with facebook");
      }
    }

通过单击按钮登录后，它将调用上面的功能

<TouchableHighlight
          onPress={() => this.loginWithFacebook()}
          style={{ backgroundColor: "green" }}
        >
          <Text style={{ color: "white", padding: 10 }}>
            Login with Facebook
          </Text>
        </TouchableHighlight>

但我收到错误消息

[23:31:05] [Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_config.f.auth().FacebookAuthProvider.credential')]
* App.js:30:56 in loginWithFacebook$
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:62:44 in tryCatch
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:288:30 in invoke

screenshot

它返回令牌，该令牌输出到终端。

App.js文件包含

import React from "react";
import { StyleSheet, Text, View, TouchableHighlight } from "react-native";
import { f, auth, database, storage } from "./config/config";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    // this.registerUser("testing@gmail.com", "password@123");

    f.auth().onAuthStateChanged(function(user) {
      if (user) {
        console.log("Logged In ", user);
      } else {
        console.log("Logged Out");
      }
    });
  }
  // Facebook-login
  async loginWithFacebook() {
    const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync(
      "830893840610100",
      {
        permissions: ["public_profile"]
      }
    );

    if (type === "success") {
      console.log("success \n", token);
      // if yes, then take credentials from fb_auth_provider and pass to firebase
      const credentials = f.auth().FacebookAuthProvider.credential(token);
      try {
        f.auth()
          .signInWithCredential(credentials)
          .catch(err => {
            console.log("error occured \n", err);
          });
      } catch {
        console.log("Can't login with facebook");
      }
    }
  }

  // to Sign-Out User
  //   auth
  //     .signOut()
  //     .then(() => {
  //       console.log("Signing Out User");
  //     })
  //     .catch(e => {
  //       console.log(e);
  //     });
  // }

  registerUser = (email, password) => {
    console.log(email, password);
    auth
      .createUserWithEmailAndPassword(email, password)
      .then(userObj => {
        console.log(email, password, userObj);
        alert(email, password, userObj);
      })
      .catch(error => {
        console.log("Error is occured", error);
      });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>App.js Component </Text>

        <TouchableHighlight
          onPress={() => this.loginWithFacebook()}
          style={{ backgroundColor: "green" }}
        >
          <Text style={{ color: "white", padding: 10 }}>
            Login with Facebook
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

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

控制台的输出是

Logged Out
[23:32:44] success 
[23:32:44]  EAALzsYw3MzQBAOLG5h46PqNsnuZCjokCdE4O5CVA8pQcrDI1ZCWKYySaYqHrSs1LcaTLlZBQXWZBjDl1RnoPzyFnsVxi1ZBIcPryIHeJlCzQrDgLWnOc3LGHmKzujphQDMI2X10bHFkPPNEN0bHEZCJEDXTrzD1GPKeJXWAzZAycOZA5eFt2ZAUq2b4RUDagIwkiNWChltv7eA5ZAF4y8TXIth

[23:32:48] [Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_config.f.auth().FacebookAuthProvider.credential')]
* App.js:31:56 in loginWithFacebook$
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:62:44 in tryCatch
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:288:30 in invoke
- ... 13 more stack frames from framework internals

[23:33:15] Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info.
(Saw setTimeout with duration 287771ms)
- node_modules/expo/build/environment/logging.js:25:23 in warn
- ... 10 more stack frames from framework internals

[23:38:48] Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info.
(Saw setTimeout with duration 238715ms)
- node_modules/expo/build/environment/logging.js:25:23 in warn
- ... 10 more stack frames from framework internals

[23:42:47] Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info.
(Saw setTimeout with duration 541868ms)
- node_modules/expo/build/environment/logging.js:25:23 in warn
- ... 10 more stack frames from framework internals

我的Github project。

编辑1：

关于api密钥的安全性问题，我将Github-repo设为私有，因为我错误地推了我的api密钥，它很容易受到攻击。

1 个答案:

答案 0 :(得分：0)

在firebase.auth()之后删除括号（）

之前 

const credentials = f.auth().FacebookAuthProvider.credential(token);

之后 

const credentials = f.auth.FacebookAuthProvider.credential(token);

github-changes

由于config.js默认导出，因此不需要() 

export const f = firebase;
export const database = firebase.database();
export const auth = firebase.auth();
export const storage = firebase.storage();

因此，我们只能使用auth()来使用auth。

相关问题
最新问题