Google Plus 的 Ionic Angular Firebase 身份验证不起作用答案

【问题标题】：Ionic Angular Firebase authentication with Google Plus not workingGoogle Plus 的 Ionic Angular Firebase 身份验证不起作用
【发布时间】：2019-11-20 23:19:17
【问题描述】：

我花了很多时间尝试在我的 Ionic 应用中使用 Google 帐户在 Firebase 上对我的用户进行身份验证。我正在使用 Ionic 4 和 Angular。

我将这个问题和答案与我所做的研究一起发布，因为我无法在一个地方找到我需要的所有东西，我不得不进行大量搜索并尝试获得我想要的结果。

首先，我尝试了 2 种使用 firebase 软件包的方法，但这些方法让我无处可去：

拥有来自 firebase 的 google 提供商：

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

第一次尝试是弹出式登录（虽然我知道这不是推荐的方式）：

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

但我立即遇到了谷歌的障碍，告诉我我正在使用 dissallowed_useragent（因为 WebView）......所以这不是一个选项。

其次是使用同一个提供者的signInWithRedirect：

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

然后用户被重定向到 Chrome 并且登录工作良好但之后它被重定向到 localhost/login（他离开应用程序的 URL）。至此结束，登录未完成。

我的最后一个选择是 Ionic 的 Google Plus 插件：
https://ionicframework.com/docs/native/google-plus 但是在下面的代码之后：

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

什么都没有发生...甚至没有返回错误（也与 try - catch 一起使用）。

【问题讨论】：

你是否在 firebase 控制台中启用了 gmail
当然，忘了说了……这个是先启用的。
你有没有得到 eny 错误代码，例如 ->10
当我尝试使用 Google Plus 登录时，我没有收到任何错误。该功能默默地失败了。

标签： javascript angular firebase ionic-framework firebase-authentication

【解决方案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)
    }
  }
}

在环境文件夹中， environment.ts 文件，更改您的 api 密钥

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】：

问题是 android project.properties 一些使用旧版本的库。解决方案是在platforms/android/project.properties中重写它们。

我也在使用 Ionic Appflow 来构建，所以我必须在 config.xml 中执行此操作。所以..我安装了cordova-plugin-platform-replace并在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:+" />

现在一切都像魅力一样运作。

我在这篇文章中找到了答案： https://github.com/EddyVerbruggen/cordova-plugin-googleplus/issues/487#issuecomment-402683868

希望这可以帮助其他人节省一些时间。

【讨论】：