Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement social logins in MEAN stack?

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?

like image 466
Anirudh Avatar asked Sep 19 '18 08:09

Anirudh


1 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/

like image 166
Lars Hendriks Avatar answered Nov 15 '22 23:11

Lars Hendriks