Saturday 1 April 2017

       INTEGRATING GOOGLE USING ANGULARJS



Google+ Platform now enables easy, efficient and powerful multi-platform integration of it’s services with almost everything you can imagine.

This blog is going to be all about Google authentication for apps, or simply said: “How to integrate Google+ Sign In into your app”. Although, 
Google Documentation is very good and reading through it will give you not only a clue, but good insights about the functionality of API with some nice examples, it does’t cover some specific details when it comes to AngularJS integration.

Firstly, we have to install angularGAPI (using bower install angular-GAPI --save) on our app and add 'angularGAPI' as dependency to app.js , also add below three on the main html page.

<script src="bower_components/angular-GAPI/lib/angular-GAPI.js"></script>
<script src="bower_components/angular-GAPI/lib/plugin/gapi.calendar.factory.js"></script>
<script src="bower_components/angular-GAPI/lib/plugin/gapi.user.factory.js"></script>

After installing Angular GAPI we need to follow below steps to get API key:

1.Login to google developer console(
https://console.developers.google.com).

2.Create a project as shown below:




3.In API library as shown below, enable Gmail API,Google+ API, Google People API:

4.Click on credentials on to the left and the click on OAuth consent screen as shown below:

5.In OAuth consent screen add email address and product name and click on save as shown below:



6.Click on credentials and create credentials as shown below :


7.Select OAuth client ID to create client id and secret key as shown below:


8.Provide the domain details as for javascript origins and redirect URI's for oauth client id and click on save as shown below:



9.Now click on API Key under create credentials and provide name and under key restriction select HTTP referrers, also provide domain name under accept request from these http domains and click on save as shown below:





10.Now add the below link in the main html page :
<meta name="google-signin-client_id" content="Google Client ID">

11. Now add the JavaScript code in the main html page to call the onload function
<script type="text/javascript">(function(){
var p= document.createElement('script');
p.type="text/javascript";
p.async=true;
p.src='https://apis.google.com/js/client.js?onload=onLoadFunction';
var s= document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(p,s);
})();
</script>

12. In  app.js file add the below on-load function code:
function onLoadFunction(){
gapi.client.setApiKey('XXX');
gapi.client.load('plus','v1',function(){
});
}

13.Now add the below angular code to login using google in LoginController.js:
$scope.onGoogleLogin=function(){
var params={
'clientid':'XXXXX',
'cookiepolicy':'single_host_origin',
'callback':function(){
var request=gapi.client.plus.people.get({'userId':'me'});
request.execute(function(resp){
console.log(resp);
$rootScope.myUserObject.displayName = resp.displayName;
$location.path("/details");
$scope.$apply();
});
},
'approvalprompt':'force',
'scope':'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'
};
gapi.auth.signIn(params);
};

For google SignOut use the below code:
window.location = "https://mail.google.com/mail/u/0/?logout&hl=en";

14. In login.html page add the button and ng-controller="LoginController"as shown below:
<a class="btn btn-block btn-social btn-lg btn-google" ng-click="onGoogleLogin();"><i class="fa fa-google"></i>Login</a>

15.Add css for the button as shown below:
.btn-social.btn-sm {
padding-left: 30px;
}
.btn-block + .btn-block {
margin-top: 5px;
}
.btn-google {
color: #fff;
background-color: #dd4b39;
border-color: rgba(0,0,0,0.2);
}
.btn-social {
position: relative;
padding-left: 44px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-block {
display: block;
width: 20%;
}
.btn-sm, .btn-group-sm > .btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
margin-left:20px;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

Thanks,
Lakshmi Alekhya Vaddi
alekhya4c4@gmail.com

1 comment: