Facebook Firebase Auth 和 Facebook 圖 ZDB974238714CA8DE634A7CE1D083A1 與 React4

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 時，請求有效。 這是如何做到的：

1. 負載 Facebook SDK

添加 useEffect function 以加載 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");
}, []);

2. 使用 Firebase FB Auth function 獲取您的訪問令牌

使用 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 圖表 Api 和 Facebook 用戶通過 Z41455489E4A8D3029 進行身份驗證。

3. Firefox 的問題

正如您在我的第一個片段的評論中看到的那樣，Firefox 不會加載 Facebook SDK 腳本。 Firefox 默認啟用跟蹤保護，Facebook SDK 腳本被識別為跟蹤器。 這就是為什么在我的第二個片段中我測試 window.FB 是否已初始化。 如果不是，那么我不會嘗試獲取有關用戶的更多信息。 我只是使用我們擁有的信息創建用戶：displayName 和 email。 這足以創建一個帳戶。

如果有人設法讓這個工作與 Firefox 我很高興知道如何。