There is simple and great angular2-social-login plugin
https://www.npmjs.com/package/angular2-social-login
with Google, Facebook and Linkedin login options.
Complete example can be found here https://github.com/heresy/angular2-social-login-example
After installation, you just need to provide API_KEYS for your domain (in development mode it will probably be http://localhost:4200)
If you don't provide key for specific social network, you need to delete the appropriate item in the providers array. Otherwise, you will get an error
in the console.
let providers = {
"google": {
"clientId": "GOOGLE_CLIENT_ID"
},
"linkedin": {
"clientId": "LINKEDIN_CLIENT_ID"
},
"facebook": {
"clientId": "FACEBOOK_CLIENT_ID",
"apiVersion": "<version>" //like v2.4
}
};
Wire up Google, Facebook or Linkedin button to the signIn function.
<button (click)="signIn('google')">google</button>
If your API keys are valid, a new window will be opened with the Sign In form. You don't
need to worry about redirection, plugin handles it. Once you enter
valid username and password, user data object will be returned to the signIn function. This object will
contain fields like 'name', 'email', 'token', etc.. In the code below, it is just written to the console.
signIn(provider){
this.sub = this._auth.login(provider).subscribe(
(data) => {
console.log(data);
}
)
}
Now when you have this data, you can send it to your Back-end, to register or sign in the user.
You want to use JWT with ASP NET Web Api. Here you can find great solution for it:
https://github.com/cuongle/WebApi.Jwt
And for the Angular application, the best solution I've used so far is:
https://github.com/auth0/angular2-jwt
So the process would be:
- Try to login with Google, Facebook or Linkedin
- If login is successful, user data will be retrieved
- Send data to your API with the JWT implementation, perform checks and
then send JWT back to Angular application
- For all future requests, angular2-jwt plugin will use this token,
while it is valid and not expired.