How to implement social logins in MEAN stack?

user_1351505 0
Viewed 2247

I have successfully implemented multiple social logins in Node JS.

I'm stuck with the implementation in MEAN stack.

The flow I have implemented till now:

Step 1:

Button in Angular. On Click, I'm calling an API in Node which returns the OAuth URL to which the user has to be forwarded.

Step2:

Once the user enters his correct credentials, access_token is generated and sent to callback URL in Node.

Step3:

I need to send a callback to Angular, whether access_token has been generated or not. I'm not sure as to how I should pass data to Angular Page.

Is this the right approach?

angular node.js
4 Answers

so i myself am doing a mean-stack social media project and i used oauth.io,

https://github.com/oauth-io/oauth-js

its really easy to use and implementable only thing you need to know is how to import a npm package in angular.

linkedin HTML component

    <html>
<header>

</header>

<body>

<a (click)="linkedinConnector()" id="linkedin-button" class="btn btn-block btn-social btn-linkedin">
  <i class="fa fa-linkedin"></i> Sign in with Linkedin
</a>

</body>
</html>

linkendin TS component

import { Component, OnInit } from '@angular/core';
import 'oauthio-web';


declare var OAuth: any;
@Component({
  selector: 'app-linkedin-connector',
  templateUrl: './linkedin-connector.component.html',
  styleUrls: ['./linkedin-connector.component.css']
})

export class LinkedinConnectorComponent implements OnInit {

  constructor(private api: ApiService) { }

  ngOnInit() {}


  public linkedinConnector() {
    OAuth.initialize('OAUTH-IO PUBLIC KEY');

    // Use popup for oauth
    OAuth.popup('linkedin2').then(linkedin => {
      console.log('linkedin:', linkedin.access_token);

      linkedin.get('/v1/companies/[company-ID]/updates?format=json').then(data => {
       //do with the data what you want
      });
    });
  }

}

however im using pop-up instead of redirect. they have redirect too so you can implement it using there documentation
http://docs.oauth.io/

user_103857980
user_17494030

So when the auth token is generated. You will redirect user to some callback url along with auth token. Your node server will be listening to that url and will store user session using some node library for sessions. Along with it what you will do is you will do a res.redirect to url on which user will land if auth token is generated if not redirect him to some other url.

Say in your angular app you have two URLs login url, logged in url.

In case auth is success :

So if auth token is generated you will redirect user to logged in url and set a session cookie for the user.

In case auth fails :

If auth token is not generated you will redirect the user to login url with some error state as part of url query params. Something like /login?auth_error=true where you can handle auth_error appropriately and show on client.

From security perspective, write a middleware on your node layer that will validate all your api requests and check if users session cookie is valid or not else redirect him to login page.

Also in my opinion, there could be multiple approaches to do this but this is how I have implemented login in my applications. So this answer is from that perspective.

user_92507860

In Angular you can use already available libraries for that. No need to do it yourself. Here you have links to two such libraries that are also OIDC certified:

I add also the link to the Google instructions for OIDC authentication where you have all the necessary information to configure the libraries to use the OIDC authentication from Google.

Check also this library angular-6-social-login which provides login for Google, Facebook and LinkedIn.

This are all open source so you can still do it yourself and use the libraries as samples for how to do it.

user_62004140
Related