Hybrid-10 : Google+ Login Integration

Google+ login one of the most used login integration used by all most all applications and websites. To know how to integrate Google+ login in your Cordova based app follow this tutorial step by step.

Plugins id- “cordova-plugin-googleplus”

Plugins Version- “5.1.1”

Click Here For Plugins Doc.

See The Demo.

#index.html

<div class="views"> <div class="view view-main"> <div class="pages navbar-fixed toolbar-fixed"> <!-- Now we need additional "navbar-fixed" and "toolbar-fixed" classes on Page --> <div data-page="index" class="page"> <!-- Top Navbar--> <div class="navbar theme-teal"> <div class="navbar-inner"> <div class="left"> <a href="#" class="back link"><i class="icon icon-back"></i></a> </div> <div class="center"> <i class="fa fa-book" aria-hidden="true" style="font-size:18px;color:black;">  <span style="font-weight:bold;color:white">Login with Facebook Demo</span></i></div> <div class="right"> <a href="#" class="link" style="margin-right:5px"><i class="fa fa-share" aria-hidden="true"></i></a> </div> </div> </div> <!-- /End of Top Navbar--> <div class="page-content" > <div class="content-block" style="margin-top:-10px"> <center> <img id="image" src="" /></center> <br> <center> <div id="profile_name"> </div> </center> <p id="login_button" class="button active" onclick="trySilentLogin()"> Login with Google+</p> <p id="logout_button" class="button active" onclick="G_logout();"> Logout with Google+</p> </div> </div> <!-- Bottom Toolbar--> <!-- /End of Bottom Toolbar--> </div> </div> </div> </div>

#my-app.js

//Google+ Login function trySilentLogin() { window.plugins.googleplus.trySilentLogin( { 'scopes':'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email', 'webClientId':'144505542324-0hvt349as9vhe553m59gapv4bk8alrpq.apps.googleusercontent.com', 'offline': true, }, function (obj) { myApp.alert("Your have successfully login!"); $$("#login_button").hide(); document.querySelector("#image").src = obj.imageUrl; document.querySelector("#image").style.visibility = 'visible'; document.querySelector("#profile_name").innerHTML = "Welcome, " + obj.displayName + ", " + obj.email; $$("#logout_button").show(); }, function (msg) { alert('error: ' + msg); } ); } //Google+ Logout function G_logout() { window.plugins.googleplus.logout( function (msg) { myApp.alert("You have successfully log out!"); document.querySelector("#image").style.visibility = 'hidden'; $$("#logout_button").hide(); $$("#login_button").show(); }, function (msg) { myApp.alert("Error" +msg); } ); }

Remember:  To communicate with Google+ you need to do some tedious setup. To configure your setup and discover your REVERSED_CLIENT_ID Click Here.
To know the complete setup watch the below video.


Video coming soon...