设备上的 Ionic Firebase 身份验证

Question

我希望使用 Firebase 身份验证。我正在使用FirebaseUI-Angular，并且在浏览器中一切正常。但是，社交媒体登录不适用于设备。当我点击使用 google 登录时，设备浏览器会出现，然后……什么也没有发生。

所以我的问题是：是否有任何可行的方法可以让 Firebase 身份验证在使用 Ionic 的设备上工作？

Answer 1

我不熟悉FirebaseUI-Angular。它似乎是为支持基于 Web 的应用程序而构建的。 Ionic 需要用于 Facebook 和 Google 登录功能的 Cordova 插件。这些插件可以与 Firebase 身份验证一起使用。

我有一个使用 Firebase 进行身份验证的 ionic-firebase-auth-starter 存储库。它没有内置 Facebook 或 Google 登录，但确实提供了一种工作方法，让 Firebase 身份验证在使用 Ionic 的设备上工作。

如果您决定克隆我的项目...请按照 Firebase 的网络设置 doc 的第 1 步和第 2 步进行操作。然后使用these 说明复制您的网络应用的配置对象并将其粘贴到 src\environments\environment.ts（替换现有的 Firebase 配置对象）。

export const environment = {
   production: false,
   firebaseConfig: {
   apiKey: "AXXXXXBILN60aW-XXXXXXXXIZWeHkMDUVT-AQ7Y",
   authDomain: "fir-auth-test-XXXXX.firebaseapp.com",
   databaseURL: "https://fir-auth-test-XXXXX.firebaseio.com",
   projectId: "fir-auth-test-XXXXX",
   storageBucket: "fir-auth-test-XXXXX.appspot.com",
   messagingSenderId: "106XXXXXXX396",
   appId: "1:106XXXX87396:web:d384fXXXXXXXXd647bed31",
   measurementId: "G-XNXXXXXXB0"
  }

设置 Firebase 电子邮件身份验证后，您可以按照 this 教程设置 Facebook 应用并使用 Cordova 插件将其注册到您的 Ionic 应用。

正确设置 Facebook 插件后，您就可以使用它登录 Firebase。您的代码将类似于下面的代码示例（注意：这不是整个 AuthenticationService 类，它只是 Facebook 特定的代码）：

import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFireDatabase, AngularFireObject } from "@angular/fire/database";
import * as firebase from "firebase/app";

import { Facebook, FacebookLoginResponse } from "@ionic-native/facebook/ngx";

@Injectable({
  providedIn: "root"
})
export class AuthenticationService {
  constructor(private afAuth: AngularFireAuth, private facebook: Facebook) {}

  loginWithFacebook(): void {
    this.facebook
      .login(["public_profile", "email"])
      .then(
        (res: FacebookLoginResponse) => {
          const facebookCredential_1 = firebase.auth.FacebookAuthProvider.credential(
            res.authResponse.accessToken
          );
          this.loginWithFirebase(facebookCredential_1).then(
            console.log('success');
          );
        },
        error => {
          console.log( JSON.stringify(error));
        }
      )
      .catch(error_1 => {
        console.log("Error ", error_1);
      });
   }

   async loginWithFirebase(credential: firebase.auth.AuthCredential) {
     return firebase.auth()
       .signInAndRetrieveDataWithCredential(credential)
       .then(response => {
          return response;
     })
    .catch(error => {
      console.log(JSON.stringify(error));
    });
}

希望对你有帮助