Ion2FullApp Ionic Template
Buy Ion2FullAppLive PreviewComments
  • What is Ion2FullApp?
  • About Ion2FullApp
  • Set up
  • Code Structure
  • Customize it
  • Data Integration
  • Nifty Stuff
  • Functionalities
    • Wordpress Integration
    • Firebase Integration
    • AdMob
    • App Rate
    • Multi Language
    • Video Playlist
    • Image Picker
    • Twitter Connect
    • Facebook Connect
    • Google Connect
    • Social Sharing
    • Google Maps
    • Call Number
    • Send email
    • Native Storage
  • Troubleshooting
  • Common Questions
Powered by GitBook
On this page
  1. Functionalities

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.

PreviousFacebook ConnectNextSocial Sharing

Last updated 6 years ago

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.

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

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 documentation for info on valid scopes that can be requested.

For example, 'scope': '' 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 , 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

Follow the STEP 1 form this link
Developer's Console.
Google Scopes
https://www.googleapis.com/auth/youtube
NativeStorage
Adding Google Login to your Ionic App.