Nihilist Postmodern Mistake
    Wondering what’s next for npm?Check out our public roadmap! »

    @maidplus/angular-6-social-login-maidplus-fork
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.11 • Public • Published

    This is a fork of

    Original project : high54 https://github.com/high54/angular-6-social-login

    Updated dependencies for angular 6, adding all google scopes and also return expiration time of the google token

    Social login api for Angular 6. Includes Facebook, Google login and Linkedin.

    Generic badge Generic badge AOT Compatible.

    Getting started

    Install via npm

    npm install --save angular-6-social-login

    Import the module

    In app.module.ts,

    ...
     
    import {
        SocialLoginModule,
        AuthServiceConfig,
        GoogleLoginProvider,
        FacebookLoginProvider,
        LinkedinLoginProvider,
    } from "angular-6-social-login";
     
     
    // Configs 
    export function getAuthServiceConfigs() {
      let config = new AuthServiceConfig(
          [
            {
              id: FacebookLoginProvider.PROVIDER_ID,
              provider: new FacebookLoginProvider("Your-Facebook-app-id")
            },
            {
              id: GoogleLoginProvider.PROVIDER_ID,
              provider: new GoogleLoginProvider("Your-Google-Client-Id")
            },
              {
                id: LinkedinLoginProvider.PROVIDER_ID,
                provider: new LinkedinLoginProvider("1098828800522-m2ig6bieilc3tpqvmlcpdvrpvn86q4ks.apps.googleusercontent.com")
              },
          ];
      );
      return config;
    }
     
    @NgModule({
      imports: [
        ...
        SocialLoginModule
      ],
      providers: [
        ...
        {
          provide: AuthServiceConfig,
          useFactory: getAuthServiceConfigs
        }
      ],
      bootstrap: [...]
    })
     
    export class AppModule { }
     

    Usage :

    In signin.component.ts,

    import {Component, OnInit} from '@angular/core';
    import {
        AuthService,
        FacebookLoginProvider,
        GoogleLoginProvider
    } from 'angular-6-social-login';
     
    @Component({
      selector: 'app-signin',
      templateUrl: './signin.component.html',
      styleUrls: ['./signin.component.css']
    })
     
     
    export class SigninComponent implements OnInit {
     
      constructor( private socialAuthService: AuthService ) {}
      
      public socialSignIn(socialPlatform : string) {
        let socialPlatformProvider;
        if(socialPlatform == "facebook"){
          socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;
        }else if(socialPlatform == "google"){
          socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;
        } else if (socialPlatform == "linkedin") {
          socialPlatformProvider = LinkedinLoginProvider.PROVIDER_ID;
        }
        
        this.socialAuthService.signIn(socialPlatformProvider).then(
          (userData) => {
            console.log(socialPlatform+" sign in data : " , userData);
            // Now sign-in with userData
            // ...
                
          }
        );
      }
      
    }

    In signin.component.html,

    <h1>
         Sign in
    </h1>
     
    <button (click)="socialSignIn('facebook')">Sign in with Facebook</button>
    <button (click)="socialSignIn('google')">Sign in with Google</button>              

    Facebook App Id :

    You need to create your own app by going to Facebook Developers page. Add Facebook login under products and configure Valid OAuth redirect URIs.

    Google Client Id :

    Follow this official documentation on how to Create a Google API Console project and client ID.

    Install

    npm i @maidplus/angular-6-social-login-maidplus-fork

    DownloadsWeekly Downloads

    10

    Version

    1.1.11

    License

    MIT

    Unpacked Size

    44.1 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar