Question

我有一个AngularJS应用程序和一个带有ASP.NET Identity 2.0的WebApi2。我正在尝试使用Facebook帐户登录用户。

我正在使用this answer来执行此操作。

获取身份验证提供程序很简单，我对下一步有疑问。它说，我应该使用之前提供的Url向我的WebApi服务器发出GET请求。所以我拨打电话，将HTTP 302 Location标题设置为Facebook的登录页面。

但是，浏览器不会重定向。在开发人员工具中，我看到对此地址的GET请求已生成，但随后在控制台中有

XMLHttpRequest cannot load [url here]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' therefore not allowed access.

我知道这与CORS有关，但是就像它期望在Facebook上启用CORS一样？

根据我的理解：在登录Facebook之后，它将我重定向回我的WebApi方法注册ExternalLogin，而不是回到我的AngularApp。这是对的吗？

这是我登录功能的代码：

function facebookLogin() {
    getExternalLogins().then(function (data) {
        var providerData = null;
        for (var i = 0; i < data.length; i++){
            if(data[i].Name == 'Facebook'){
                providerData = data[i];
                break;
            }
        }

        if(providerData != null) {
             window.location.href = serverBaseUrl + providerData.Url;
        }

    },
    function (error, status) {

    });
}

更新

由于CBroe的评论，我已设法重定向到Facebook的登录页面。下一个问题是登录后，Facebook会将我重定向到我的WebApi。如何将用户重定向回Angular应用程序？ WebApi可以从各个地方调用，不仅来自example.com，还来自example1.com或example2.com。

使用Facebook API执行此登录客户端可能更好一点，然后通知服务器吗？但是如何使用FB authResponse在WebApi上执行登录？

Answer 1

尝试以下步骤，他们为我解决了问题（针对不同的登录提供商）：

删除内置登录页面和控制器，以及要使用的选项来自Web应用程序的ASP.Net标识;见this article。
在$http：

 xhrFields: {
              withCredentials: true
            },

将以下内容添加到您的web.config以启用CORS：

<add name="Access-Control-Allow-Origin" value="FACEBOOK_APP_URL" />
<add name="Access-Control-Allow-Credentials" value="true"/>

处理服务器重定向到AngularJS中的Facebook登录页面

更新

1 个答案: