angular-google-auth2
v1.0.8
This angular js directive plugin helps one to implement the google auth2 sign-in and sign-out features in web apps, mobile apps developed using angular js
0/weekUpdated 3 years agoMIT
Published by Sreenesh Ramesh Kini Bindu
npm install angular-google-auth2angular-google-auth2
Table of contents
- About
- Installation
- Documentation
- License
About
This angular js directive plugin helps one to implement the google auth2 sign-in and sign-out features in web apps, mobile apps developed using angular js.
Installation
This plugin requires AngularJS to be used in your application.
* bower install angular-google-auth2 -
``
bower install --save angular-google-auth2
* npm install angular-google-auth2 -
`
npm install --save angular-google-auth2
Documentation
Follow the steps below to use the plugin:
* Include the following Google API link, JS and CSS files for the plugin:
`
`
* Add the module dependency in your AngularJS app:
`javascript`
var auth2Demo = angular.module('myApp', ['angular-google-auth2','ngRoute']);
* This plugin provides 2 directives -
1) Sign In directive - s-sign-in
2) Sign Out directive - s-sign-out
* Perform the following to use s-sign-in directive inside your login.html page (This will create a sign in button along with it's functionality) - * To use s-sign-out directive, include the following inside your home.html page[or any page you like the logout button to be] (This will create sign out button along with it's functionality) - * Your login.html will be having corresponding controller, say, 'LoginController'. Include the following line of code in your html page and controller - login.html * isLogin - Used to check whether the user is logged-in or not. It has two values, namely, yes or no. 2) For all pages in your app, you need to check whether the user is logged in or not. For this, you should write if (S_PersonalData.s_getPersonalData().isLogin == 'yes') as shown in above demo code. If the user is already logged-in, you can redirect user to required page. * Your home.html will be having corresponding controller, say, 'HomeController'. Include the following line of code in your html and controller - home.html Name : {{name}} Email : {{email}} Profile Pic: * As mentioned before, if you are using any third party for handling the logout, then you need to manditorily use plugin's S_GeneralData.s_flush() method, which will flush out the plugin's initializations on sign-out. For this you need to use S_GeneralData service in your controller as follows - HomeController * This plugin provides following custom CSS classes that you can use to change the color and size of sign-in and sign-out buttons - - signInBlueSmall * Login Page Demo * Home Page Demo The MIT License
`
`
- class - This plugin provides with a set of custom css classes for sign-in button
- s-sign-in - Directive name to be used for sign-in
- client - The client id that you will get from Google's Developer account when you will create your project credentials there
- hd - List of the domains that specify which domain users are allowed to use your application. Users that don't belong to the listed domains will have no access to your application
- redirect - Name of the page that you want your user to redirect on sign-in
- thirdparty (optional) - This attribute takes two values.
- yes - If this value is set to 'yes', it specifies that you are using a third party to 'logout' from your app, and so this plugin will provide you a custom method S_GeneralData.s_flush(), which you need to use manditorily along with your own logout procedure
- no - If this value is set to 'no', plugin will handle the 'logout', you don't need to worry
- emailvalidate (optional) - You need to provide an array of objects containing email ids as value to this attribute. It checks if the user belongs to the list of given emails from the array. It must be array of objects where the key should be 'email' and value must be the email ids. Here, 'emails' is the name of the array of objects.
- class - This plugin provides with a set of custom css classes for sign-out button
- s-sign-out - Directive name to be used for sign outhtml
{{displayLogin}}
`
LoginControllerjavascript`
auth2Demo.controller('LoginController', ['$scope','S_PersonalData','$location', function($scope, S_PersonalData, $location){
if(S_PersonalData.s_getPersonalData().isLogin == 'yes'){
$location.path("/home");
}else{
$scope.displayLogin = "This is login page";
$scope.emails = [
{
'email' : 'kinisreenesh202@gmail.com',
},
{
'email' : 'sreeneshkini202@gmail.com'
}
];
}
}]);
1) This plugin provides a service called S_PersonalData. This service provides you with the s_getPersonalData() method, that in turn provides you with following values -
* token - Used to get the token of the logged-in user
* name - Used to get the name of the logged-in user
* email - Used to get the email id of the logged-in user
* profile - Used to get the user profile url of logged-in user
3) List of allowed users can be provided as an array of objects like $scope.emails. However, this is optionalhtml`
HomeControllerjavascript`
auth2Demo.controller('HomeController', ['$scope', 'S_PersonalData', '$location', function($scope, S_PersonalData, $location){
if(S_PersonalData.s_getPersonalData().isLogin == 'yes'){
$scope.name = S_PersonalData.s_getPersonalData().name;
$scope.email = S_PersonalData.s_getPersonalData().email;
$scope.profileURL = S_PersonalData.s_getPersonalData().profile;
}else{
$location.path("/");
}
}]);
1) home.html page will be the page that will be accessible after successful login. The controller checks the same whether the user is logged-in or not. If user is logged-in, then you can fetch the required values to display or store in database.javascript``
auth2Demo.controller('HomeController', ['$scope', 'S_PersonalData','S_GeneralData', '$location', function($scope, S_PersonalData, S_GeneralData, $location){
if(S_PersonalData.s_getPersonalData().isLogin == 'yes'){
$scope.name = S_PersonalData.s_getPersonalData().name;
$scope.email = S_PersonalData.s_getPersonalData().email;
$scope.profileURL = S_PersonalData.s_getPersonalData().profile;
var your_logout_method = function(){
// your code if any
S_GeneralData.s_flush();
// your code if any
};
}else{
$location.path("/");
}
}]);
- signInBlueMedium
- signInBlueLarge
- signInGreenSmall
- signInGreenMedium
- signInGreenLarge
- signInRedSmall
- signInRedMedium
- signInRedLarge
- signInLightBlueSmall
- signInLightBlueMedium
- signInLightBlueLarge
- signInLightGreenSmall
- signInLightGreenMedium
- signInLightGreenLarge
- signInLightRedSmall
- signInLightRedMedium
- signInLightRedLarge
- signOutBlue
- signOutGreen
- signOutRed
- signOutLightBlue
- signOutLightGreen
- signOutLightRedLicense