Google Connect

Add Google Login to your Ionic App. Learn how we integrated Google Authentication in Ion2FullApp Ionic Template to allow users to log in using their Google account.

We have integrated the possibility to login and signup with Google+.

You can find all the code needed for this in: src/pages/google-login

In order to provide your users with the possibility of log into your app with Google+, you need some configurations. Follow the STEP 1 form this link

After you have done the step 1 from above, you just need to install the plugin into your app. Follow these steps to get this done:

  • Execute the following command on the terminal changing the variable REVERSED_CLIENT_ID with your own values.

$ cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=com.googleusercontent.apps.your_reversed_clientid
$ npm install --save @ionic-native/google-plus

Then in src/pages/google-login/google-login.service.ts set your webClientId to the variable: webClientId

You can get your webClientId in your project Developer's Console.

webClientId: string = "yourID.apps.googleusercontent.com";

If you want to get more information from the user you need to have the correct scopes.

The default scopes requested are profile and email. To request other scopes, add them as a space-separated list to the scopes parameter. They will be requested exactly as passed in. Refer to the Google Scopes documentation for info on valid scopes that can be requested.

For example, 'scope': 'https://www.googleapis.com/auth/youtube' or 'https://www.googleapis.com/auth/tasks'.

Naturally, in order to use any additional scopes or APIs, they will need to be activated in your project Developer's Console.

We save the user data in the NativeStorage, but you may want to save it in your database.

When you go to Functionalities/Google Integration in the app you will see a screen with the data extracted from Google+. Please note that in this example the friends and photos lists are populated with dummy data.

Learn more about Adding Google Login to your Ionic App.