Google Native Authentication

Setup

Create a Google Project

If you are migrating from the old Google Auth Provider, you can skip this segment.

The first step in setting up your Google authentication integration is to create a project on Google.

You’ll use these details in the next section.

Client ID & Secret

Now that you’ve got an app setup, you need to let us know about the Client ID and Client Secret. You can find both details listed in the dialog referenced above.

Device Configuration

iOS Setup

  1. Open the downloaded file and copy the REVERSED_CLIENT_ID, and use it in the Cordova Plugin step.

Android Setup

App Implementation

Setup

Cloud Configuration

The webClientId and REVERSED_CLIENT_ID are different IDs, and it’s important to not mix them up. The REVERSED_CLIENT_ID is used for iOS, and can be found in your project’s iOS credentials on the Google developer console (or in the downloaded .plist file). The webClientId is used for both iOS and Android, and is required.

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'APP_ID'
  },
  'auth': {
    'google': {
      'webClientId': 'WEB_CLIENT_ID',
      'scope': ['permission1', 'permission2']
    }
  }
}
$ionicCloudProvider.init({
  "core": {
    "app_id": "APP_ID"
  },
  "auth": {
    "google": {
      "webClientId": "WEB_CLIENT_ID",
      "scope": ["permission1", "permission2"]
    }
  }
});

Plugin Installation

cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID="myreversedclientid"

Injecting GoogleAuth and User

Import GoogleAuth and User from the Cloud Client and specify them as dependencies in your component constructor.

  • googleAuth is a service that deals with user authentication.
  • user is a reference to the current user, whether that user is anonymous or authenticated.
import { Component } from [email protected]/core';
import { GoogleAuth, User } from [email protected]/cloud-angular';

@Component( ... )
export class LoginPage {
  constructor(public googleAuth: GoogleAuth, public user: User) {
    ...
  }
}

Specify ionic.cloud as a dependency for your module. This gives you access to $ionicGoogleAuth and $ionicUser.

  • $ionicGoogleAuth is a service that deals with user authentication.
  • $ionicUser is a reference to the current user, whether that user is anonymous or authenticated.
angular.module('myapp.controllers', ['ionic.cloud'])

.controller('MyCtrl', function($scope, $ionicGoogleAuth, $ionicUser) {
  ...
})

Login

this.googleAuth.login().then( ... );
$ionicGoogleAuth.login().then( ... );

Logout

Logging out clears the current user context.

this.googleAuth.logout();
$ionicGoogleAuth.logout();

Additional Information

Social Data

We store social data in user.social.google. Unlike your custom data which uses user.get() and user.set(), user.social.google is just an object with the following properties.

uid Google user ID
data Google data object
data.profile_picture Google profile picture
data.email Google email
data.full_name The user’s full name
data.raw_data The data object straight from Google (see these docs)

Example:

const full_name = this.user.social.google.data.full_name;
const profile_picture = this.user.social.google.data.profile_picture;
const google_raw_data = this.user.social.google.data.raw_data;
var full_name = $ionicUser.social.google.data.full_name
var profile_picture = $ionicUser.social.google.data.profile_picture
var google_raw_data = $ionicUser.social.google.data.raw_data;

Errors

12501

If you get Error 12501 - User Cancelled, this means you used the wrong Bundle ID during your iOS/Android configuration steps. Make sure you are using the correct one, by setting your desired Bundle ID in your config.xml, and using that ID during the Device Setup

400 - Invalid Scheme on iOS

This likely means you provided the Cordova Plugin with the Client ID instead of the REVERSED_CLIENT_ID. You don’t need to go and generate and download the configuration file again. You can just go to your Google developer console and open up the iOS Credentials, and copy the iOS URL scheme. This is your REVERSED_CLIENT_ID.

Services

    API

      General