ionic-google-plus-login

(Ionic login with google plus) explains about implementing google plus login using cordova-plugin-google-plus plugin with ionic native.

ionic-google-plus-login
ionic-google-plus-login

Login with Google Plus Video Lesson

Create Client Reversed Client Id: https://codesundar.com/tutorials/create-reverse-client-id-for-google-login/

Create New project & Change working directory

ionic start gplogin blank
cd gplogin

Add your platform

ionic cordova platform add android
npm install --save @ionic-native/googleplus

Change you working directory & Add plugin

ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=com.googleusercontent.apps.877300201036-6lp9u547lbqcsk7hk3qn4tt35iopqh5u
or
ionic cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=com.googleusercontent.apps.877300201036-6lp9u547lbqcsk7hk3qn4tt35iopqh5u

working with home.html

<ion-content padding>
<div *ngIf="isUserLoggedIn"style="text-align:center">
 <imgsrc="{{userInfo.imageUrl}}">
 <h3>{{userInfo.displayName}}</h3>
 <p>{{userInfo.email}}</p>
 <button ion-button clear (click)="logout()">Logout</button>
</div>
</ion-content>
<ion-footer *ngIf="!isUserLoggedIn">
 <button ion-button block (click)="loginWithGP()">Login with Google+</button>
</ion-footer>

Explanation: In above code we have created div content for displaying users information and footer for login, if user is not loggedin

working with home.ts

loginWithGP(){
 this.gp.login({}).then(res=>{
   this.userInfo=res;
   this.isUserLoggedIn=true;
   }).catch( err => console.log(err));
}
logout(){
 this.gp.logout().then( ()=>{
   this.isUserLoggedIn=false;
 });
}

Explanation: In above code we have created an object for a googlePlus module. Using that, we’re calling both login and logout operations.

Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - Google+