Vue2 路由器与 Facebook Javascript SDK：重定向 URI

Question

我有一个 vue2 单页应用程序。在一个 vue 组件中，我尝试使用 Facebook Javascript SDK 来验证和使用 Graph API。

在一个方法中，我使用这段代码连接到 Facebook

window.fbAsyncInit = function () {
    FB.init({
        appId: 'xxx',
        cookie: true,
        xfbml: true,
        version: 'v2.10'
    });

    console.log(FB);


    FB.getLoginStatus(function (response) {
        statusChangeCallback(response);
    });

};

(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/de_DE/sdk.js";
    js.src = "https://connect.facebook.net/de_DE/sdk/debug.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

当应用程序执行方法 FB.getLoginStatus 时，我收到错误消息“URL 已阻止：此重定向失败，因为重定向 URI 未在应用程序的客户端 OAuth 中列入白名单设置。”。我知道我必须转到我的 Facebook 应用程序的设置并将重定向 url 输入 OAuth 重定向 URIs.

我的问题是，我已经这样做了。回调url是https://localhost/myapp/public/api/facebook/callback。所以我想我太笨了，找不到正确的回调 url...有什么想法可以找到这个回调吗？

Answer 1

我使用vue router history模式解决了这个问题。

在我的路由器 js 文件中，我添加了这一行：

const router = new VueRouter({
    mode: 'history', // that did the trick
    routes: [ ... ]
})

可能有更好的解决方案，但它适合我...

Vue2 路由器与 Facebook Javascript SDK：重定向 URI

Vue2 Router vs Facebook Javascript SDK: Redirect URI

facebook-javascript-sdk

vue-router

vuejs2