All Projects → heresy → Angular2 Social Login

heresy / Angular2 Social Login

Simple client side social authentication for Angular2 application.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Angular2 Social Login

Aws Cognito Angular Quickstart
An Angular(v5)-based QuickStart single-page app utilizing Amazon Cognito, S3, and DynamoDB (Serverless architecture)
Stars: ✭ 685 (+1914.71%)
Mutual labels:  angular2, angular4
Ngvas
An Angular2/Angular4 library for HTML Canvas.
Stars: ✭ 31 (-8.82%)
Mutual labels:  angular2, angular4
Angular Froala Wysiwyg
Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
Stars: ✭ 696 (+1947.06%)
Mutual labels:  angular2, angular4
Angular Commerce
Angular components for scaffolding online store
Stars: ✭ 526 (+1447.06%)
Mutual labels:  angular2, angular4
Ng Sticky
Angular 4 sticky, have header or any component sticky easy to use.
Stars: ✭ 25 (-26.47%)
Mutual labels:  angular2, angular4
Ion2 Calendar
📅 A date picker components for ionic2 /ionic3 / ionic4
Stars: ✭ 537 (+1479.41%)
Mutual labels:  angular2, angular4
Ng2 Dnd
Angular 2 Drag-and-Drop without dependencies
Stars: ✭ 861 (+2432.35%)
Mutual labels:  angular2, angular4
Bootstraping Ngx Admin Lte
Angular2,4,6 project with AdminLTE dashboard template (using angular, angular-cli and ngx-admin-lte ) Formerly called 'ng2-admin-lte'.
Stars: ✭ 479 (+1308.82%)
Mutual labels:  angular2, angular4
Angular Select2
select2 in angular(>=2.0-release).
Stars: ✭ 16 (-52.94%)
Mutual labels:  angular2, angular4
Angular Prest
pREST component for Angular
Stars: ✭ 16 (-52.94%)
Mutual labels:  angular2, angular4
Bootstrap
Open Source JS plugins
Stars: ✭ 13 (-61.76%)
Mutual labels:  angular2, angular4
Angulartics2
Vendor-agnostic analytics for Angular2 applications.
Stars: ✭ 963 (+2732.35%)
Mutual labels:  angular2, angular4
Angular Material App
基于最新Angular 9框架与Material 2技术的web中后台前端应用框架。
Stars: ✭ 509 (+1397.06%)
Mutual labels:  angular2, angular4
Angular2 Mdl
Angular 2, 4, 5, 6, 7, 8, 9, 10, 11 components, directives and styles based on material design lite (npm: @angular-mdl/core)
Stars: ✭ 562 (+1552.94%)
Mutual labels:  angular2, angular4
Angular Hmr
🔥 Angular Hot Module Replacement for Hot Module Reloading
Stars: ✭ 490 (+1341.18%)
Mutual labels:  angular2, angular4
Ngx Permissions
Permission and roles based access control for your angular(angular 2,4,5,6,7,9+) applications(AOT, lazy modules compatible
Stars: ✭ 749 (+2102.94%)
Mutual labels:  angular2, angular4
Rebirth
GreenGerong(破狼) blog with Angular4.
Stars: ✭ 380 (+1017.65%)
Mutual labels:  angular2, angular4
Ngx Datatable
✨ A feature-rich yet lightweight data-table crafted for Angular
Stars: ✭ 4,415 (+12885.29%)
Mutual labels:  angular2, angular4
Material Dashboard Angular2
Material Dashboard Angular
Stars: ✭ 814 (+2294.12%)
Mutual labels:  angular2, angular4
Angular2 Carousel
An lightweight , touchable and responsive library to create a carousel for angular 2 / 4 / 5
Stars: ✭ 26 (-23.53%)
Mutual labels:  angular2, angular4

angular2-social-login

Simple client side social authentication for Angular2 application based on our previous angular1's angularjs-social-login plugin.

Supported sites:

  • Google
  • Facebook
  • LinkedIN

Getting started

Installation

via npm

npm install angular2-social-login --save

Adding angular2-social-login to your project

Add map for angular2-social-login in your systemjs.config

'angular2-social-login': 'node_modules/angular2-social-login/dist/bundles/angular2-social-login.min.js'

Main module configuration

import { NgModule }      from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { Angular2SocialLoginModule } from "angular2-social-login";

let providers = {
    "google": {
      "clientId": "GOOGLE_CLIENT_ID"
    },
    "linkedin": {
      "clientId": "LINKEDIN_CLIENT_ID"
    },
    "facebook": {
      "clientId": "FACEBOOK_CLIENT_ID",
      "apiVersion": "<version>" //like v2.4
    }
  };

@NgModule({
  imports: [ 
              BrowserModule,
              Angular2SocialLoginModule
          ],
  declarations: [AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule { 
  constructor(){}
}

Angular2SocialLoginModule.loadProvidersScripts(providers);

Component configuration for login() and logout():

For login(provider: string) provider is required it should be anyone(case-sensitive) "facebook", "google", "linkedin" .

...
import { AuthService } from "angular2-social-login";
...
@Component({
    ...
})
export class AppComponent implements OnDestroy {
  ...
  constructor(public _auth: AuthService){ }
  
  signIn(provider){
    this.sub = this._auth.login(provider).subscribe(
      (data) => {
                  console.log(data);
                  //user data
                  //name, image, uid, provider, uid, email, token (accessToken for Facebook & google, no token for linkedIn), idToken(only for google)
                }
    )
  }

  logout(){
    this._auth.logout().subscribe(
      (data)=>{//return a boolean value.}
    )
  }

  ...

}

For example please visit https://github.com/heresy/angular2-social-login-example

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].