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

Question

我有一个AngularJS应用程序，以及使用ASP.NET Identity 2.0的WebApi2。 我正在尝试使用Facebook账户登录用户。

我正在使用这个答案来实现它。

获取认证提供程序很容易，但我在下一步遇到了问题。 它说，我应该使用之前提供的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之后，它会将我重定向回到注册ExternalLogin的WebApi方法，然后再返回我的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上执行登录呢？

- wojciech_rak

---

你不应该在后台进行那个调用 - 你必须将用户重定向到登录URL。 - CBroe

好的，但是怎么做呢？服务器发送了302重定向，但是没有重定向。也许有另一种方法，而不是使用$http？ - wojciech_rak

这并不是因为你在使用 AJAX，而是你不应该使用它。只需在浏览器中“加载” URL（重定向之前的原始 URL），例如通过将其分配给 location.href。 - CBroe

Facebook允许您设置回调URL，以便在登录完成后重定向到该URL。您应该将其设置为处理Facebook传递给您的任何信息的简单URL。 - Obi

很抱歉，在我的情况下这是不可能的。WebApi可以处理响应并验证用户，但我的Angular应用程序位于不同的主机上 - 更重要的是它可以位于任意数量的主机上。我不知道从WebApi重定向到我的Angular应用程序的位置。这就是为什么我选择JS SDK而不是服务器端身份验证的原因。 - wojciech_rak

你有没有想出解决方法，@rakoczyn？我也遇到了类似的问题。 - Braydie

Answer 1

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

1. 从Web应用程序中删除内置的登录页面和控制器，并删除使用ASP.Net身份验证的选项；请参见this article。
2. 在$.ajax调用（如下所示）或$http中添加凭据：

 xhrFields: {
              withCredentials: true
            },

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

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

- Daniel P