为什么我的函数不会打开 React Native (Expo) 的 Facebook 登录页面? [英] Why won't my function open up the Facebook Login page for React Native (Expo)?

问题描述

我对使用 Expo 进行 React Native 开发相当陌生，我想知道我在这个 Facebook 登录功能上做错了什么.

I am fairly new to developing in React Native with Expo and I am wondering what I am doing wrong for this Facebook login functionality.

单击登录按钮时，我目前收到以下警告:

I am currently getting the following warning when clicking the login button:

可能的未处理承诺拒绝 (id:4):错误:使用参数(My Facebook App ID)"调用ExponentFacebook.loginWithReadPermissionsAsync"时引发异常:-[_NSCFString objectForKeyedSubscript:]: 无法识别的选择器发送到实例...

Possible Unhandled Promise Rejection (id:4): Error: An exception was thrown while calling 'ExponentFacebook.loginWithReadPermissionsAsync' with arguments '(My Facebook App ID)':-[_NSCFString objectForKeyedSubscript:]: unrecognized selector sent to instance...

我已经能够解决弹出的其他错误，但我不确定这个错误意味着什么，所以我不知道如何继续前进.

I have been able to solve other errors which have popped up, but I am not sure what this error means so I am stumped on how to move forward.

这是我的 app.json 文件:

Here is my app.json file:

{
  "expo": {
    "name": "XXXXXXX",
    "slug": "XXXXXXX",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./app/assets/icon.png",
    "extra": {
      "firebase": {
        "apiKey": "XXXXXXX",
        "authDomain": "XXXXXXX",
        "databaseURL": "XXXXXXX",
        "projectId": "XXXXXXX",
        "storageBucket": "XXXXXXX",
        "messagingSenderId": "XXXXXXX"
      },
      "facebook": {
        "appId": "XXXXXXX"
      }
    },
    "splash": {
      "image": "./app/assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "host.exp.exponent"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./app/assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./app/assets/favicon.png"
    }
  }
}

这是我的 auth.js 文件:

Here is my auth.js file:

import firebase from './firebase.js';
import * as Facebook from 'expo-facebook';

const appId = Expo.Constants.manifest.extra.facebook.appId;

Facebook.initializeAsync({appId: appId, appName: "XXXXXXX"});

export async function FacebookLogin() {

  Facebook.initializeAsync({appId: appId, appName: "XXXXXXX"});

  const appId = Expo.Constants.manifest.extra.facebook.appId;
  const permissions = ['public_profile', 'email'];
  
  const { type, token } = await
  Facebook.logInWithReadPermissionsAsync(
         appId,{
                permission: permissions
      } 
  );

  if (type == "success") {
    const credential =   
      firebase
        .auth
        .FacebookAuthProvider
        .credential(token);
  }
  firebase
   .auth().signInWithCredential(credential).catch(error => {
       console.log(error);
   });
}

这是带有我的 Facebook 按钮的 welcomeScreen.js 文件:

And here is my welcomeScreen.js file with my Facebook button:

import React from "react";
import { Image, ImageBackground } from "react-native";

import Disclaimer from "../components/Welcome/Disclaimer";
import LoginButton from "../components/Welcome/LoginButton";
import BusinessLink from "../components/Welcome/BusinessLink";
import {FacebookLogin} from "../../utils/auth.js";

import defaultStyles from "../config/styles";


function WelcomeScreen() {
      return (
        <ImageBackground
          style={defaultStyles.welcomebackground}
          source={require("../assets/appbg.png")}
        >
          <Image style={defaultStyles.welcomelogo} source={require("../assets/logo.png")} />
          <Disclaimer />
          <LoginButton text="Login with Instagram" source={require("../assets/instagram.png")} press={} />
          <LoginButton text="Login with Google" source={require("../assets/google.png")}  press={} />
          <LoginButton text="Login with Facebook" source={require("../assets/facebook.png")}  press={ () => FacebookLogin() } />

          <BusinessLink />
        </ImageBackground>
    );
}
export default WelcomeScreen;

如果您发现任何明显的问题或需要我提供更多信息，请告诉我.我也试过让谷歌登录按钮也没有任何运气.

Please let me know if you can see any glaring issues or if you need any more information from me. I have also tried getting a google login button working without any luck as well.

推荐答案

如果您通过 Firebase 使用 Facebook 登录，请确保在 Firebase 身份验证下的登录方法中启用它.另外，我觉得根据 expo doc，您添加 facebook id 的方式不正确.让我分享一下我是如何在我的项目中编写的

If you are using Facebook login via Firebase, make sure it is enabled from Sign-in Methods under Authentication of Firebase. Also I feel the way you have added facebook id is not correct as per expo doc. Let me share how I have written it in my project

这篇关于为什么我的函数不会打开 React Native (Expo) 的 Facebook 登录页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！