Social registration in SPA (Angular 2) with ASP.NET Core REST API

Question

I have implemented simple Angular 2 application which uses ASP.NET Core WebApi as backend. For authentication I added '/login' route that generates JWT access and refresh tokens that in turn stored by SPA in localStorage and used in HTTP requests.

Now I want to integrate social registration function so users can login using ie Facebook button. From users's point of view I want to perform it into 3 steps:

1. Click Register by Facebook button and redirected to Facebook website (to login and confirm my app request).
2. Clicked confirm and redirected to my SPA where /registration page where his name already filled from Facebook profile
3. Fills the remaining fields (like his favorite toy) and clicks "Finish registration"

After this registration if user clicks register via facebook again he will be redirected to facebook (if he already logged in) he automatically redirected to server route that checks if such a user has been already registered and if it is then redirect him to SPA homepage

How to correctly integrate such a workflow in my app? Note: I want to perform authentication and registration inside my Angular2 app, not on different auth server.

Answer 1

I want to perform authentication and registration inside my Angular2 app.

What you're looking for is the Implicit Grant, with Facebook as the authorization server and as the resource server. The Implicit Grant supports authorization for single page applications (such as your Angular2 App), and the Facebook Graph API supports requests for user info.

How to correctly integrate such a workflow in my app?

Since Facebook does not support OpenID Connect, you will need to use OAuth2 pseudo-authentication (which has traps to avoid). This will involve a four step process:

1. redirect the user to Facebook for login,
2. validate the redirect back from Facebook's login page and store the access token,
3. call Facebook's Graph API to request user info for the associated access token, and
4. use that user info to fill the fields in your app.

Calling the API in step three could look something like this:

FB.api('/me', (user) => { 
    console.log(user.id); // 101540562372987329832845483
    console.log(user.email); // [email protected]
    console.log(user.first_name); // Bob
});

/me is a special Graph API endpoint that "translates to the user_id of the person whose access token is currently being used to make the API calls." The endpoint then returns related user info.

Your app can use that Facebook user info to populate its client-side fields and/or its server-side database. The id is unique to your app and is NOT equivalent to the Facebook user_id; the id is a reasonable way to uniquely identify users of your app.

Four options for correctly integrating this flow into your app.

• It's probably best to follow Facebook's best practices. That is:
• use their Login with Facebook button and/or
• use their Login for the Web JavaScript SDK.
• Alternatively, use an existing OAuth2 library, e.g. satellizer.
• Or, if you want to do a lot of work, manually build your own login flow.

Aside: What do you mean by OAuth2 pseudo-authentication?

OAuth2 is a pseudo-authentication scheme, because OAuth2 is NOT an authentication protocol. That is, after the user logs in, your client app receives an access token, which it uses to make a request of a protected API. In order to avoid the pitfalls, it's good to be aware of them:

1. Access tokens are NOT proof of authentication.
2. Access to a protected API is NOT proof of authentication.
3. Attackers can inject access tokens.
4. Access tokens do NOT have an audience restriction.
5. Attackers can inject invalid user info.
6. Each identity provider may have its own identity protocol.