angular-social-auth
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    angular-social-auth-module

    An angular module which provides social(facebook and google) authentication services for ionic and cordova hybrid mobile applications

    Installation

    npm install angular-social-auth --save

    See npm package for versions - https://www.npmjs.com/package/angular-socialAuth

    Installing the cordova plugins

    Cordova facebook plugin

    Make sure you've registered your app with Facebook and have an APP_ID https://developers.facebook.com/apps.

    For cordova apps

    $ cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="123456789" --variable APP_NAME="myApplication"

    For ionic apps

    $ ionic cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="123456789" --variable APP_NAME="myApplication"

    If you need to change your APP_ID after installation, it's recommended that you remove and then re-add the plugin as above. Note that changes to the APP_ID value in your config.xml file will not be propagated to the individual platform builds.

    Refer Cordova facebook plugin help page for guidance.
    android issues : There are some issues with the facebook framework included in the plugin cordova-plugin-facebook4 in android installation. To avoid these issues, make sure the latest version of 'Android Support Library' and 'Android Support Repository' are installed using Android SDK Manager. It seems there are some issues with the Android facebook SDK version 4.24.0. The plugin.xml is written in a way to pick the latest sdk. To change this, edit the framework tag in plugin.xml (under plugins/cordova-plugin-facebook4) to
    <framework src="com.facebook.android:facebook-android-sdk:4.23.+"/>

    Cordova googleplus plugin

    cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid

    For ionic apps

    ionic cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid

    refer this for detail

    Usage

    Import the SocialAuthModule in the main module (usually named app.module.ts).
    import { SocialAuthModule } from 'angular-social-auth';
    For the @NgModule decorator input object, SocialAuthModule should be mentioned in the imports array
    If AuthServices to be used in a component, import it before using it.
    import { AuthServices } from 'angular-social-auth';

    API

    Before calling any of the methods, please ensure that cordova deviceready event is fired (in ionic Platform.ready() is fulfilled).
    The login methods(both fbLogin and googleLogin) return a promise, that will resolve to an object of type UserInfo.
    The structure of UserInfo is

    class UserInfo {
      readonly first_name: string;  
      readonly last_name: string;
      readonly email: string;
      readonly pictureUrl: string;
      readonly socialType: SocialTypes;
      readonly facebook: {
        readonly id: string;
        readonly access_token: string;
      }
      readonly google: {
        readonly displayName: string;
        readonly idToken: string;
        readonly serverAuthCode: string;
        readonly userId:string;
      }
    }
    

    SocialTypes is an enum defined as following.
    export const enum SocialTypes {facebook, google};

    Users can import UserInfo and Socialtypes as following.
    import { UserInfo } from 'angular-social-auth';
    import { SocialTypes } from 'angular-social-auth';

    fbLogin

    authServices.fbLogin()
    fbLogin is the public method for facebook login
    parameters: none
    return: a Promise - resolves to an object of type UserInfo. rejects the error returned from the facebook plugin

    fbLogout

    authServices.fbLogout()
    fbLogout is the public method for facebook logout
    parameters: nil
    return: a Promise - resolves to the string 'logout successful'. rejects the string 'logout failed'

    googleRegister(webClientId)

    authServices.googleRegister(webClientId)
    call googleRegister to register a webClientId for google app.
    for android, a webClientId is required to get the idToken and serverAuthCode from google.
    for ios, a webClientId is required to get the serverAuthCode from google. idToken will be provided without webClientId.
    parameters: 1 (webClientId: required. string).

    googleLogin

    authServices.googleLogin()
    googleLogin is the public method for google login
    If no webClientId is registered,

    • Android apps won't be getting the idToken and serverAuthCode from google
    • ios apps won't get the serverAuthCode (google will provide the idToken without webClientId)

    parameters: None
    returns: a Promise - resolves to an object of type UserInfo. rejects the error returned from the googleplus plugin.

    googleLogout

    authServices.googleLogout()
    googleLogout is the public method for google logout
    parameters:None
    returns: a Promise - resolves to the string 'logout successful'. rejects the string 'logout failed'

    Demo Apps

    Check this app to see how this npm package is used. It is an ionic hybrid mobile app. If you are going to run this app, please don't forget to install cordova plugins for facebook and googleplus.

    Changelog

    1.2.0


    1. Introduced an enum SocialTypes export const enum SocialTypes {facebook, google};
      The enumerable values are facebook and google. When other social logins are introduced, this will be amended.
      Users can import SocialType as following
      import { SocialTypes } from 'angular-social-auth';
    2. Added the member socialType (of type SocialTypes) to the class UserInfo. This new member will the social type used for login (currently either SocialTypes.facebook or SocialTypes.google).
      The UserInfo class has the following structure now
    class UserInfo {
      readonly first_name: string;
      readonly last_name: string;
      readonly email: string;
      readonly pictureUrl: string;
      readonly socialType: SocialTypes;
      readonly facebook: {
        readonly id: string;
        readonly access_token: string;
      }
      readonly google: {
        readonly displayName: string;
        readonly idToken: string;
        readonly serverAuthCode: string;
        readonly userId:string;
      }
    
    1. Added reference to the demo app (in Demo Apps section) in this readme file.

    1.1.1


    1. UserInfo class is available for import.
      Users can import UserInfo as following.
      import { UserInfo } from 'angular-social-auth';
      Both fbLogin and googleLogin (upon successful login) return an object of type
      UserInfo.
      The structure of the UserInfo is
      class UserInfo {
        readonly first_name: string;  
        readonly last_name: string;
        readonly email: string;
        readonly pictureUrl: string;
        readonly facebook: {
          readonly id: string;
          readonly access_token: string;
        }
        readonly google: {
          readonly displayName: string;
          readonly idToken: string;
          readonly serverAuthCode: string;
          readonly userId:string;
        }
      }
      

    1.1.0


    1. No need to register webClientId, before calling googleLogin. But if webClientId is not registered, google won't return the tokenId and serverAuthCode for android. For iOS, serverAuthCode won't be returned (google will provide idToken without webClientId for iOS).

    Install

    npm i angular-social-auth

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • kukkuraghu