0

I am using Ionic2 and GooglePlus Authentication.

I can sign in and it creates a User with a uid in the Firebase Authentication list as expected.

When I do this:

        GooglePlus.login({
            'webClientId': webClientId,
            'offline': true
        }).then(googleData => {

Where the webClientId matches the Client ID in the iOS Credential below.

Problem:

However, for iOS, the googleData does contain an emailAddress and uid, but the displayName and photoURL are null.

More Info:

I do have an iOS Credential set up with the Bundle ID matching the widget id in the config.xml:

enter image description here

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.XXXXXXX" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>theWhoZoo</name>

And it also has the REVERSED_CLIENT_ID matching the iOS URL scheme above.

<plugin name="cordova-plugin-googleplus" spec="~5.1.1">
    <variable name="REVERSED_CLIENT_ID" value="com.googleusercontent.apps.XXXXXX" />
</plugin>

I have also created a Firebase App for my Project that also has the matching Bundle ID (not sure if this has any effect):

enter image description here

Also, I am not sure if this makes any difference, but I add the the CLIENT_ID for iOS to the Google Firebase Authentication here:

enter image description here

Question

Are there any steps I am missing or doing something wrong to set this up for iOS?

Richard
  • 8,193
  • 28
  • 107
  • 228
  • Do I need to install Cocoa Pods? I would prefer to keep my app as simple and lightweight as possible. – Richard Mar 12 '17 at 21:19

2 Answers2

1

This should add the required scope for fetching profile data:

window.plugins.googleplus.login({
  'scopes': 'https://www.googleapis.com/auth/plus.me',
  // continue below...

See the official documentation and the plugin documentation for details.

The scope is described here.

Tatsuyuki Ishi
  • 3,883
  • 3
  • 29
  • 41
  • THANK YOU!!! You solved my problem. I was trying to fix this the whole weekend. – Richard Mar 13 '17 at 06:09
  • Strangest thing happend that I can't explain. I made the change as you suggested, then in `Xcode` built the project, and it was returning the `displayName` and `photoUrl`. So I thought it was fixed. However, I then did an `ionic build ios`, then built it again in `Xcode`, and now it doesn't return the `displayName` and `photoUrl`. – Richard Mar 13 '17 at 06:27
  • Please try doing a clean build. See [here](https://stackoverflow.com/questions/32197369/how-to-force-refresh-the-cached-source-files-upon-ionic-build-run). – Tatsuyuki Ishi Mar 13 '17 at 06:30
  • Thanks, I tried `ionic platform remove ios` then `ionic platform add ios` and then `ionic build ios`. Then ran the project in Xcode, an got the following: `keychain error` – Richard Mar 13 '17 at 06:35
  • There seems to be some crap with Ionic. See [1](https://github.com/EddyVerbruggen/cordova-plugin-googleplus/issues/313) [2](https://stackoverflow.com/questions/40955012/im-getting-keychain-error-when-login). – Tatsuyuki Ishi Mar 13 '17 at 06:37
  • I seem to have the reverse problem as the above. When I launch my project from `ionic serve` it works fine (but then I am not using the Cordova Plugin, but rather AngularFire2). But when I launch the project in `Xcode`, I get the `keychain error`. – Richard Mar 13 '17 at 06:43
  • Very strange, I had Facebook sign in working, but now it does not work either with an `undefined` error. I'm guessing when I removed the `iOS` platform and re added it, something that I need got deleted. – Richard Mar 13 '17 at 07:05
  • Fixed the keychain error by adding the capability: http://stackoverflow.com/questions/38689631/how-to-use-facebook-ios-sdk-on-ios-10/38799196#38799196 – Richard Mar 13 '17 at 07:46
  • I am getting inconsistencies. It was working perfectly, then it suddenly stopped returning the `displayName` again. I tried `ionic platform remove ios` then `ionic platform add ios` and then `ionic build ios` again, but still no `displayName`. – Richard Mar 13 '17 at 08:22
  • I'm not sure how awful Ionic CLI is, but please verify if you're running from the latest source. Otherwise, it's another question, so please ask or get support somewhere else. – Tatsuyuki Ishi Mar 13 '17 at 08:23
0

here is my code and this is working good with IOS.

Code

private nativeGoogleLogin(): Promise<firebase.User> {
    return new Promise(async (resolve, reject) => {
      const SCOPES = 'https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/gmail.send https://www.googleapis.com/auth/plus.me';
      await this.gPlus.login({
          'webClientId': 'XXXXXXXX.apps.googleusercontent.com',
          'offline': true,
          'scopes': SCOPES
        }).then(res => {
            const googleCredential = firebase.auth.GoogleAuthProvider.credential(res.idToken , res.access_token);
            this.afAuth.auth.signInWithCredential(googleCredential).then(odata => {
              resolve(odata);
            }).catch(err => {
              reject(err);
            });
        }).catch(err => {
          reject(err);
        });
    });
  }

How to get displayName name

async onGoogleLogin() {
    await this.goAuth.googleLogin().then(res => {
      alert(JSON.stringify(res));
      alert(res.providerData[0].displayName);
    }).catch(err => {
      console.log(err);
    });
  }

res.providerData[0].displayName

Note : Uninstall you app in emulator and clean your build folder before using this code.

Abhishek Tomar
  • 827
  • 1
  • 10
  • 20