为什么我的功能无法打开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;

如果您看到任何明显的问题，或者需要我提供更多信息，请告诉我.我还尝试过让Google登录按钮正常运行，而没有任何运气.

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身份验证"下的登录方法"中启用了Facebook登录.我也觉得根据世博文档，您添加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屋！