启用 CORS 的 Web Api 2 facebook 身份验证
Posted
技术标签:
【中文标题】启用 CORS 的 Web Api 2 facebook 身份验证【英文标题】:Web Api 2 facebook authentication with CORS enabled 【发布时间】:2014-06-03 23:39:53 【问题描述】:我正在尝试使用 Angular JS 为我的前端实现内置外部身份验证的 Web Api 2。我通过以下行启用了 owin cors:
app.UseCors(CorsOptions.AllowAll);
我已成功加载外部登录,就像它们在 SPA 模板中一样,使用此 api 调用 - api/Account/ExternalLogins?returnUrl=%2F&generateState=true
当用户单击调用此 api 的按钮时,我使用响应中的 URL
htp://localhost:31683/api/Account/ExternalLogin?>provider=Facebook&response_type=token&client_id=self&redirect_uri=http%3A%2F%2Flocalhost%3A>31683%2F&state=EqHaUDzzuXZcVSk7IC_gWkgF5P_TNTdIHn1Tqbv18CM1
正如预期的那样,User.Identity.IsAuthenticated 尚未经过身份验证,因此它返回应将用户重定向到 facebook 登录页面的 ChallengeResults(完全像 SPA 模板)。这就是我的问题所在。Fiddler 中的响应看起来不错,它具有用于重定向到 facebook 登录页面的位置响应标头。但是,当它尝试进行重定向时,我收到以下 CORS 错误:
请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,Origin 'null' 不允许访问。
似乎我对 facebook 登录的重定向请求有一个带有空值的 Origin 标头。我相信这个 Origin 标头是它寻找 Facebook 没有给出的 AllowCors 响应的原因。我不确定为什么 Origin 标头出现在重定向请求中,或者这是否是问题所在。
下面是 chrome 对我的 api/Account/ExternalLogin api 调用以及重定向调用的响应的屏幕截图。
我的 ExternalLogin 回复:
facebook 重定向响应。这就是我认为的问题所在。请注意请求中的原始标题
任何帮助将不胜感激。我已经为此倾倒了很多小时。谢谢。
【问题讨论】:
【参考方案1】:这并不完全是您问题的答案,但是,我认为这可能会对您有所帮助。
我在尝试这样做但使用 ASP.NET MVC 5 时遇到了类似(或相同)的问题。
当使用 no CORS 时,您描述的过程就像一个魅力。我也在用它。这很棒!有用。当使用 CORS IS 时问题就开始了。
经过 2 天的痛苦和磨难,我从 W3C 找到了关于 CORS 的规范。阅读后,我的结论是,不幸的是这很简单,不可能做到这一点。看看section 6.2 和section 7.1。
我的解决方案
在这个特定的操作中,我使用的是 JSONP。无需进行服务器端修改,无需额外代码,不再痛苦!我只需要更改一些我的角度代码。
到这里
$http.jsonp('http://localhost:56278/register/appregister?provider=Facebook&?callback=JSON_CALLBACK');
从此
$http( url: 'http://localhost:56278/register/appregister', method: 'GET', params: provider: provider );
预期响应
【讨论】:
【参考方案2】:调用“api/Account/ExternalLogins?returnUrl=%2F&generateState=true”后,每个返回的提供程序对象都有一个您需要向其发出标准 GET 请求的 url。(不是 AJAX 请求)
//Iterate through result and pick the correct provider.name
results = results.filter(function(item)
return item.name === 'Facebook';
);
if(results && results[0])
var provider = results[0]
//INCORRECT
//$http(
//method:'GET',
//url: provider.url
//);
//CORRECT
window.location.href = provider.url;
【讨论】:
以上是关于启用 CORS 的 Web Api 2 facebook 身份验证的主要内容,如果未能解决你的问题,请参考以下文章
在 ASP .NET Core 2.1 Web Api 中启用 CORS
本地 Javascript Fetch Post 请求失败,调用 ASP.NET Core 2.2 Web API。 CORS 已启用