启用 CORS 的 Web Api 2 facebook 身份验证答案

【问题标题】：Web Api 2 facebook authentication with CORS enabled启用 CORS 的 Web Api 2 facebook 身份验证
【发布时间】：2023-04-03 23:59:02
【问题描述】：

我正在尝试使用 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 重定向响应。这就是我认为的问题所在。请注意请求中的原始标题

任何帮助将不胜感激。我已经为此倾倒了很多小时。谢谢。

【问题讨论】：

标签： cors asp.net-web-api2

【解决方案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; 
}

【讨论】：