使用 expo - React Native (Android) 登录 Facebook 时出现问题

问题描述 投票:0回答:0

我正在尝试使用 facebook 登录我的应用程序,并且我已按照提供 expo 的文档网络上的步骤操作https://docs.expo.dev/guides/facebook-authentication/。当我在嵌入式浏览器中识别我的 Facebook 邮件和密码后,我得到一个空白页面,并且再也没有返回到应用程序来显示我请求的信息。 blank page

App.js 文件是这样的:

import { useState, useEffect } from "react";
import { Button, Image, StyleSheet, Text, View } from "react-native";
import * as Facebook from "expo-auth-session/providers/facebook";
import * as WebBrowser from "expo-web-browser";

WebBrowser.maybeCompleteAuthSession();

export default function App() {
  const [user, setUser] = useState(null);
  const [request, response, promptAsync] = Facebook.useAuthRequest({
    clientId: "xxxxxxxxxxxx", // change this for yours
  });

  useEffect(() => {
    if (response && response.type === "success" && response.authentication) {
      (async () => {
        const userInfoResponse = await fetch(
          `https://graph.facebook.com/me?access_token=${response.authentication.accessToken}&fields=id,birthday,hometown,gender,location,last_name,first_name,short_name,picture.type(large)`
        );
        const userInfo = await userInfoResponse.json();
        setUser(userInfo);
        console.log(JSON.stringify(response, null, 2));
      })();
    }
  }, [response]);

  const handlePressAsync = async () => {
    const result = await promptAsync();
    if (result.type !== "success") {
      alert("Uh oh, something went wrong");
      return;
    }
  };

  return (
    <View style={styles.container}>
      {user ? (
        <Profile user={user} />
      ) : (
        <Button
          disabled={!request}
          title="Sign in with Facebook"
          onPress={handlePressAsync}
        />
      )}
    </View>
  );
}

function Profile({ user }) {
  console.log('user',user)
  return (
    <View style={styles.profile}>
      <Image source={{ uri: user.picture.data.url }} style={styles.image} />
      <Text style={styles.name}>{user.name}</Text>
      <Text>ID: {user.id}</Text>
      <Text>Fecha de nacimiento:{user.birthday}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  profile: {
    alignItems: "center",
  },
  name: {
    fontSize: 20,
  },
  image: {
    width: 100,
    height: 100,
    borderRadius: 50,
  },
});

app.json:

{
  "expo": {
    "name": "login",
    "slug": "login",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.anonymous.login"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "scheme":["login","fbxxxxxxxxxxxx"]
  }
}

我将我的 Facebook ID 更改为 xxxxxxxxx

有人知道这是否是 facebook 应用程序配置或代码的问题吗?

react-native expo facebook-login
© www.soinside.com 2019 - 2024. All rights reserved.