Facebook Firebase Auth 和 Facebook Graph API 与 React

Question

我正在尝试使用 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 应用程序的应用程序域设置中。

为什么我会收到 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>"
}

Answer 1

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

加载 Facebook SDK 时请求有效。方法如下：

加载 Facebook SDK

添加useEffect函数加载fb sdk，从而定义window.FB （这可以是 copy/paste，你只需要更改你的 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");
}, []);

使用 Firebase FB 身份验证功能获取您的访问令牌

使用 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);
        }
};

一切就绪，您可以使用通过 Firebase 验证的 Facebook 用户访问 Facebook Graph Api。

Firefox 问题

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

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

Facebook Firebase Auth 和 Facebook Graph API 与 React

Facebook Firebase Auth and Facebook Graph API with React

javascript

facebook-graph-api

reactjs

firebase-authentication

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