处理服务器重定向至Facebook登录页面在AngularJS [英] Handling server redirect to Facebook login page in AngularJS

问题描述

我有一个AngularJS应用程序，并与ASP.NET身份2.0 WebApi2。
我想用Facebook帐户登录的用户。

我使用这个答案来做到这一点。

获得身份验证提供者是容易的，我有下一步的问题。
它说，我应该让GET请求，我的WebAPI的服务器，使用前提供的URL。
所以，我做我的电话，并获得 HTTP 302 与位置头设置为Facebook的登录页面。

浏览器不但是重定向。
在开发工具我看到GET请求到该地址而成，但随后控制台有

  XMLHtt prequest不能[这里URL]加载。无访问控制允许来源标头的请求的资源present。出身空，因此不允许访问。
 

我知道，这是关系到CORS，但像预计Facebook的一面启用CORS？

据我了解：洛至Facebook后，它重定向我回到我的WebAPI方法注册ExternalLogin，比回到我AngularApp。这是否正确？

下面是我的登录功能的code：

 函数facebookLogin（）{
    getExternalLogins（）。然后（功能（数据）{
        VAR providerData = NULL;
        对于（VAR I = 0; I＆LT; data.length;我++）{
            如果（数据[I] .Name点=='的Facebook'）{
                providerData =数据[I]
                打破;
            }
        }        如果（providerData！= NULL）{
             window.location.href = serverBaseUrl + providerData.Url;
        }    }，
    功能（错误状态）{    }）;
}
 

更新：

我已经成功地重定向到Facebook的登录页面，感谢CBroe的评论。
接下来的问题是，在登录后，Facebook的重定向我到我的WebAPI。
我如何可以重定向用户返回到角的应用程序？的WebAPI可以从不同的地方，不仅来自example.com而是从被称为example1.com或example2.com也

也许这将是执行使用Facebook的API此登录客户端的一个更好的主意，然后通知服务器呢？
但如何在使用的WebAPI FB authResponse进行登录？

解决方案

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

1. 删除内置的登录页面和控制器，并使用选项
   从Web应用程序ASP.Net身份;看到这篇文章。


2. 添加在$就调用凭证（见下文）在 $ HTTP ：

\r

\r

xhrFields：{\r
              withCredentials：真\r
            }

\r

\r

\r

<醇开始=3>

添加到你的web.config以下，使CORS：

\r

\r

＆LT;添加名称=访问控制允许来源VALUE = FACEBOOK_APP_URL/＆GT;\r
＆LT;添加名称=访问控制允许的凭据VALUE =真/＆GT;

\r

\r

\r

I have an AngularJS app, and a WebApi2 with ASP.NET Identity 2.0. I am trying to log user in using Facebook account.

I am using this answer to do it.

Getting auth providers is easy, I have problem with the next step. It says, I should make GET request to my WebApi server, using the Url provided before. So I make my call and get a HTTP 302 with Location header set to facebook's login page.

The browser doesn't redirect, however. In Developer Tools I see that GET request to this address is made, but then in console there is

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

I know this is related to CORS, but like it expects CORS enabled on Facebook's side?

From what I understand: after loggin to Facebook, it redirects me back to my WebApi method registering ExternalLogin, and than back to my AngularApp. Is that correct?

Here's code of my login function:

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) {

    });
}

Update:

I've managed to redirect to Facebook's login page, thanks to CBroe's comment. The next problem is that after logging in, Facebook redirects me to my WebApi. How can I redirect user back to Angular app? WebApi can be called from various places, not only from example.com but from example1.com or example2.com also.

Maybe it would be a better idea to perform this login client-side using Facebook API, and then notify the server about it? But how to perform login on WebApi using FB authResponse?

解决方案

Try the following steps, they solved the issue for me (for a different login provider):

1. Remove the built-in login page and controller, and the option to use ASP.Net identity from the web application; see this article.
2. Add credentials in the $.ajax call (see below) of in $http:

 xhrFields: {
              withCredentials: true
            },

3. Add to your web.config the following to enable CORS:
   

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

这篇关于处理服务器重定向至Facebook登录页面在AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！