Skip to main content

Google Sign-In Application In Ionic



  • Introduction

  • Google API setup
    • To communicate with google api we want to require some tedious steps.
    • It is (strongly) recommended that you use the same project for both iOS and Android.
  • Android
    • To configure Android, generate a configuration file here. Once Google Sign-In is enabled Google will automatically create necessary credentials in Developer Console. There is no need to add the generated google-services.json file into your cordova project.
    • Make sure you execute the keytool steps as explained here or authentication will fail.
    • Login on Android will use the accounts signed in on the user's device.

    • Authenticating Your Client - Certain Google Play services (such as Google Sign-in and App Invites) require you to provide the SHA-1 of your signing certificate so we can create an OAuth2 client and API key for your app. To get your SHA-1, follow these instructions:

      • Open a terminal and run the keytool utility provided with Java to get the SHA-1 fingerprint of the certificate. You should get both the release and debug certificate fingerprints.
      • To get the release certificate fingerprint:
keytool -exportcert -list -v -alias <your-key-name>
-keystore <path-to-production-keystore>
      • To get the debug certificate fingerprint:
        • Windows
keytool -exportcert -list -v  
-alias androiddebugkey -keystore  %USERPROFILE%\.android\debug.keystore
        • MAC/Linux
keytool -exportcert -list -v -alias
androiddebugkey -keystore ~/.android/debug.keystore
      • The keytool utility prompts you to enter a password for the keystore. The default password for the debug keystore is android. The keytool then prints the fingerprint to the terminal.
      • For example: Certificate fingerprint: SHA1: DA:39:A3:EE:5E:6B:4B:0D:32:55:BF:EF:95:60:18:90:AF:D8:07:09





  • Install the Google Sign-In Cordova/PhoneGap Plugin
  $ cordova plugin add cordova-plugin-googleplus
--variable REVERSED_CLIENT_ID=myreversedclientid

  • REVERSED_CLIENT_ID  get from configuration file (client_id)  

  • For example :

cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=76066……..jei2108s.apps.googleusercontent.com

  • Implementation

    • Create the ionic  blank demo project for more help go to here.

  1. Login

  window.plugins.googleplus.login(
    {
     'scopes': '... ',
     'webClientId': 'client id of the web app/server side',
     'offline': true,
   },function (obj) {
      alert(JSON.stringify(obj));
 },
    function (msg) {
      alert('error: ' + msg);
    }
);
Output in object :
           obj.email          // 'eddyverbruggen@gmail.com'
            obj.userId         // user id
            obj.displayName    // 'Eddy Verbruggen'
            obj.imageUrl       // 'http://link-to-my-profilepic.google.com'
            obj.idToken        // idToken that can be exchanged to
                              //verify user identity.
            obj.serverAuthCode // Auth code that can be exchanged for an
                              //access token and refresh token for offline access

  1. Logout


window.plugins.googleplus.logout(
    function (msg) {
      alert(msg); // do something useful instead of alerting
    }
);

Comments

Post a Comment

Popular posts from this blog

What exactly means MVW design pattern ?

What is a MVW framework? The abbreviation stands for 'Model - View - Whatever'.  Well there are many different JavaScript frameworks available , all invented for the same purpose. They all try to separate the presentation logic from the business logic where JavaScript holds the model and logic, and html the presentation layer. Quick overview : You can change the model without changing the view and vice-versa Unit testing is easy These are the core benefits of using such a framework. By separating presentation and business logic changes to the code are easier to implement and take less time. Another benefit is that code can be reused from a controller thus saving more time. Angularjs makes the code also shorter in comparison to other frameworks, which improves code stability. Less code means minor potential for bugs. For several years +AngularJS was closer to MVC (or rather one of its client-side variants), but over time and thanks to many refactorings...
1 comment
Read more

File Upload & Download With ng-cordova File Transfer Plugin In Ionic Framework

Using the AngularJS extension set , ngCordova , with Ionic Framework and the Apache Cordova File Transfer plugin, you can easily upload files to a remote server and download files from a remote server. 1.Create the project ionic start Test blank cd Test ionic platform add android 2.Add Plugin org.apache.cordova.file-transfer https://github.com/apache/cordova-plugin-file-transfer This plugin allows you to upload and download files. This plugin defines global FileTransfer, FileUploadOptions Constructors. Although in the global scope, they are not available until after the deviceready event . Installation cordova plugin add cordova plugin add cordova-plugin-file-transfer     2.    org.apache.cordova.file             https://github.com/apache/cordova-plugin-file             This plugin implements a Fi...
20 comments
Read more

Steps To Create Cordova Plugin

Introduction A plugin is a package of injected code that allows the Cordova webview within which the app renders to communicate with the native platform on which it runs. Plugins comprise a single JavaScript interface along with corresponding native code libraries for each supported platform. Due to following reason, we will go for plugin development To get the native capabilities of the device in the cordova based app Build the common functionality across the number of Cordova application(Reusability) Prerequisites For the creation of plugin you need to install plugman . npm install -g plugman Plugin Structure Decide Plugin ID & Name The plugin ID should be unique Plugin name should follow the convention “cordova.plugin.[your.plugin.name]” Create the structure Use the following command to create the plugin with plugin ID “cordova.plugin.test” and name “Test”. plugman create --name Test --...
Post a Comment
Read more