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

我正在使用 this answer去做。

获取身份验证提供程序很容易,我对下一步有疑问。 它说,我应该使用之前提供的 Url 向我的 WebApi 服务器发出 GET 请求。 因此,我调用电话并获得一个 HTTP 302,其中 Location header 设置为 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上进行登录呢?

请您参考如下方法:

尝试以下步骤,他们为我解决了这个问题(对于不同的登录提供商):

  1. 删除内置的登录页面和 Controller ,以及使用的选项 来自 Web 应用程序的 ASP.Net 标识;见this article .
  2. $http 的 $.ajax 调用(见下文)中添加凭证:

 xhrFields: { 
              withCredentials: true 
            },

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

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


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!