3

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?

Community
  • 1
  • 1
wojciech_rak
  • 2,276
  • 2
  • 21
  • 30
  • 1
    You are not supposed to make that call in the background – you have to redirect the user to the login URL. – CBroe Apr 04 '14 at 06:24
  • OK, but how to do it? Server sends 302 which should redirect, but that doesn't happen. Perhaps there is another way, instead of `$http` ? – wojciech_rak Apr 04 '14 at 06:44
  • 2
    It does not happen because you are using AJAX where you should _not_ be using it. Simply “load” the URL (the original, before the redirect) in the browser, f.e. by assigning it to `location.href`. – CBroe Apr 04 '14 at 06:46
  • Fabebook allows you a callback url which it can redirect to after login completes, you should set this to a url that will simply handle whatever info facebook passes back to you – Obi Apr 04 '14 at 21:42
  • I'm afraid that's not possible in my case. WebApi could handle the response and authenticate user, but my Angular app is on different host - what's more it could be on any number of hosts. I wouldn't know where to redirect from WebApi to my Angular app. That's why I opted for JS SDK instead of server-side authentication. – wojciech_rak Apr 05 '14 at 07:19
  • Did you ever come up with a solution to this @rakoczyn? I'm facing something similar – Braydie Jan 27 '17 at 19:36

1 Answers1

1

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
            },
  1. 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"/>
Community
  • 1
  • 1
Daniel P
  • 36
  • 5