Question

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

我正在用我所做的研究发布此问题和答案，因为我无法在一处找到我需要的所有东西，因此我不得不进行大量搜索并尝试获得想要的结果。

首先，我尝试使用Firebase软件包进行2种方法，使我无处可寻：

从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) {

但是我立即遇到了Google的障碍，告诉我我正在使用 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一起使用）。

Answer 1

问题是android project.properties一些使用旧版本的库。解决方案是在platform / 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

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

Answer 2

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"
}};

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

2 个答案: