时间戳

首页 > 解决方案 > Facebook Firebase Auth 和 Facebook Graph API 与 React

javascript - Facebook Firebase Auth 和 Facebook Graph API 与 React

问题描述

我正在尝试使用 Facebook Firebase Auth 向我的应用程序（前端）验证用户。我需要获取经过身份验证的用户的生日。

当我单击“使用 Facebook 登录”按钮时，我会执行以下操作：

const signUpWithFacebook = async () => {
    try {

        let provider = new firebase.auth.FacebookAuthProvider()
        provider.addScope("user_birthday");
        var result = await authAPI.signInWithProvider(provider)
        
        console.log(result.user); // user is printed and I have access to the access_token
        

        var graphUrl =
            "https://graph.facebook.com/me?fields=birthday&access_token=" +
            result.credential.accessToken;

        var user = await fetch(graphUrl); // Here I get a CORS error response
        
        console.log(user );

    } catch (e) {
        console.log("error");
        console.log(e);
    }
};

我正在使用通过我的 facebook 应用程序创建的 facebook 测试帐户进行测试。

我已将“localhost”放入我的 facebook 应用程序的 App Domains 设置中。

为什么我会收到 CORS 错误以及如何解决此问题？谢谢你。

更新：

我从这条线上得到这个回复await fetch(graphUrl)：

{
    body: ReadableStream
    bodyUsed: false
    headers: Headers {}
    ok: true
    redirected: false
    status: 200
    statusText: ""
    type: "cors"
    url: "https://graph.facebook.com/me?fields=birthday&access_token=<my-access-token>"
}

标签： javascriptreactjsfacebook-graph-apifirebase-authentication

解决方案

我想出了一个解决方案（部分）

这些请求在您加载 Facebook SDK 时有效。这是如何做到的：

  1. 加载 Facebook SDK

添加一个 useEffect 函数来加载 fb sdk，以便定义 window.FB （这可以是复制/粘贴，您只需更改您的 appId）：

useEffect(() => {
    window.fbAsyncInit = function () {
        window.FB.init({
            appId: "<your_app_id>",
            cookie: true,
            xfbml: true,
            version: "v9.0",
        });
    }.bind(this);

    // Load the SDK asynchronously --- DOESNT WORK WITH FIREFOX : https://bugzilla.mozilla.org/show_bug.cgi?id=1226498
    (function (d, s, id) {
        var js,
            fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    })(document, "script", "facebook-jssdk");
}, []);
  1. 使用 Firebase FB Auth 功能获取您的访问令牌

使用 firebase 内置功能将使 firebase 将用户存储在您的 firebase 应用程序中。

const signUpWithFacebook = async () => {
        try {
            let provider = new firebase.auth.FacebookAuthProvider();
            provider.addScope("user_birthday");
            var firebaseFBAuth = await authAPI.signInWithProvider(provider);

            if (window.FB) {
                window.FB.api(
                    "/me",
                    "get",
                    {
                        access_token: firebaseFBAuth.credential.accessToken,
                        fields: "birthday",
                    },
                    (resp) => {
                        console.log(resp.birthday); // Whe have the user birthday !
                    }
                );
            } else {
                // facebook sdk couldn't be loaded : authenticating with minimum infos
                console.log(firebaseFBAuth.user.displayName);
            }
        } catch (error) {
            console.log(error);
        }
};

一切准备就绪，您可以访问 Facebook Graph Api，其中 Facebook 用户已通过 Firebase 进行身份验证。

  1. 火狐的问题

正如您在我的第一个片段的评论中看到的那样，Firefox 不加载 Facebook SDK 脚本。Firefox 默认启用跟踪保护，Facebook SDK 脚本被识别为跟踪器。这就是为什么在我的第二个片段中我测试 window.FB 是否已初始化。如果不是，那么我不会尝试获取有关用户的更多信息。我只是使用我们拥有的信息创建用户：displayName 和电子邮件。这足以创建一个帐户。

如果有人设法让它与 Firefox 一起工作，我很乐意知道如何。

推荐阅读