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:
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
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.
Thanks,
Fabulous information.
ReplyDeleteFull Stack Training in Chennai | Certification | Online Training Course | Full Stack Training in Bangalore | Certification | Online Training Course | Full Stack Training in Hyderabad | Certification | Online Training Course | Full Stack Training in Pune | Certification | Online Training Course | Full Stack Training | Certification | Full Stack Online Training Course