从扩展脚本使用 Facebook javascript SDK

Question

这是我的 background.js 来自 chrome 分机：

window.addEventListener("load", function() {
    const fbConnect = new Promise(function(resolve, reject) {
        const script = document.createElement("script");
        script.onload = resolve;
        script.onerror = reject;
        script.async = true;
        script.src = "https://connect.facebook.net/en_US/sdk.js";
        document.body.appendChild(script);
    });
});

window.fbAsyncInit = function() {
    FB.init({
        appId: null,
        version: 'v4.0'
    });

    FB.api("/me", {fields: "last_name"}, function(response) {
        console.log(response);
    });
};

它给我以下错误：

The method FB.api can no longer be called from http pages. https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/

现在怎么办？是否可以从扩展中使用这个东西？如果是这样，我如何告诉 Facebook 服务器这是一个 https 请求？

Answer 1

感谢 @misorude 和他链接的问题，我已经设法解决了这个问题，使用手动身份验证而不是 JS SDK。

把这些放在一起很麻烦，因为文档提供的示例很差，所以我希望它对其他人有用。

这是后台脚本中的一段代码：

const options = {
    url: "https://www.facebook.com/dialog/oauth?client_id=<app-id>&response_type=token&redirect_uri=" + browser.identity.getRedirectURL(),
    interactive: true
};
// <app-id> can be found on https://developers.facebook.com/apps/ once you create a new app.
// You must add the URL returned by getRedirectURL() to the app's domain on the page above, otherwise Facebook will return an error.
// getRedirectURL() creates a https:// alias from the extension's browser-extension:// URL.
// The "interactive" key has to be true, otherwise Facebook will return an error.

window.addEventListener("load", function(){
    // Launch the authentication process
    browser.identity.launchWebAuthFlow(options).then(function(url){
        // Mine the access token out of the URL returned by Facebook
        let token = new URL(url).hash.match(/(access\_token=)(.*)(&)/)[2];
        // I don't know why, but the whole query part is served as a hash, so URLSearchParams() won't work.
        // Anyway, the 2nd capture group gives back only the access token string, so we are good.

        // Now we are connected, time to ask some information from Facebook (for example id and name)
        window.fetch("https://graph.facebook.com/me?fields=id,name&access_token=" + token).then(function(response){
            // Parse the response body of the promise
            response.json().then(function(data){
                console.log(data);
                // -> {id: "<your-user-id>", name: "<your-name>"}
            });
        });
    }).catch(function(error){
        console.error(error);
    });
});

我已经使用了 webExtension 平台的 browser 命名空间，但 chrome 命名空间应该也能正常工作。

从扩展脚本使用 Facebook javascript SDK

Using Facebook javascript SDK from extension script

javascript

google-chrome-extension

facebook-javascript-sdk