Ionic Angular Firebase authentication with Google Plus not working

问题

I've spent a lot of time trying to authenticate my users on Firebase with a Google account in my Ionic app. I'm using Ionic 4 with Angular.

I'm posting this question and answer with the research I've made because I could not find everything I needed in one place and I had to go through a lot of searches and tries to get the result I wanted.

First of all I've tried 2 ways with the firebase packages that lead me nowhere:

Having a google provider from firebase:

import * as firebase from 'firebase';
import { auth } from 'firebase/app';
import { AngularFireAuth } from '@angular/fire/auth';
...
const provider = new auth.GoogleAuthProvider();

First try was the popup sign in (although I know that is not the recommended way):

firebase.auth().signInWithPopup(provider).then(function(result) {

But I immediately ran into google's barrier that tell me that I'm using a dissallowed_useragent (because of WebView) ... so this is not an option.

Second is signInWithRedirect using the same provider:

firebase.auth().signInWithRedirect(provider).then(function(result) {

The user is then redirected to Chrome and the login works good BUT after that it gets redirected to localhost/login (the URL that he left the app with). So it ends there and the login is not completed.

My last option was the Google Plus plugin from Ionic:
https://ionicframework.com/docs/native/google-plus But after the following code:

this.googlePlus.login({
  'webClientId': 'webclientid',
  'offline': true,
  'scopes': 'profile email'
}).then(res => {
  ...
});

Nothing happened ... not even an error was returned (used with try - catch as well).

回答1:

import { GooglePlus } from '@ionic-native/google-plus/ngx';
import { LoadingController, AlertController, Platform } from '@ionic/angular';
import { Router } from '@angular/router';
import { environment } from '../../environments/environment';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage {

  constructor(
    private afAuth: AngularFireAuth,
    private googlePlus: GooglePlus,
    public loadingController: LoadingController,
    private router: Router,
    private platform: Platform,
    public alertController: AlertController,

  ) {
  }

  async nativeGoogleLogin(): Promise<void> {
    try {
      const user = await this.googlePlus.login({
        'scopes': '', // optional - space-separated list of scopes, If not included or empty, defaults to `profile` and `email`.
        'webClientId': environment.googleWebClientId, // optional - clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
        'offline': true, // Optional, but requires the webClientId - if set to true the plugin will also return a serverAuthCode, which can be used to grant offline access to a non-Google server
      })
      const firebaseUser = await this.afAuth.auth.signInWithCredential(firebase.auth.GoogleAuthProvider.credential(user.idToken));
      this.updateUserData(firebaseUser);
      this.router.navigate(["/tabs/profile"]);
    } catch (err) {
      // console.log(err)
    }
  }
}

In environments folder, environment.ts file, change your api key

export const environment = {
  production: false,
  googleWebClientId: "78565xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
  firebase : { 
      apiKey: "AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxTn-0",
      authDomain: "xxxxxxxxxx.firebaseapp.com",
      databaseURL: "https://xxxxxxxxxx.firebaseio.com",
      projectId: "xxxxxxxxxx",
      storageBucket: "xxxxxxxxxx.appspot.com",
      messagingSenderId: "725xxxxxxxx765"
}};

回答2:

The problem is that the android project.properties some libraries where using old versions. The solution is to rewrite them in platforms/android/project.properties.

I am also using Ionic Appflow to build so I had to do this in config.xml. So .. I installed cordova-plugin-platform-replace and added the following lines in config.xml:

    <platform name="android">
        <replace-string file="project.properties" find="com.google.android.gms:play-services-auth:11.8.0" replace="com.google.android.gms:play-services-auth:+" />
        <replace-string file="project.properties" find="com.google.android.gms:play-services-identity:11.8.0" replace="com.google.android.gms:play-services-identity:+" />

Now everything works like a charm.

I found the answer at this post: https://github.com/EddyVerbruggen/cordova-plugin-googleplus/issues/487#issuecomment-402683868

Hope this helps others save some time.

来源：https://stackoverflow.com/questions/56985794/ionic-angular-firebase-authentication-with-google-plus-not-working

标签

javascript