Ionic 2 谷歌使用 Firebase 登录 [英] Ionic 2 google signin with firebase

问题描述

我在使用 Firebase 身份验证和 Google 提供商时遇到了一些问题.我试图用谷歌提供商登录(这很好)，但我想重定向到我的主页，但我出错了.

im getting some troubles with firebase authentication and google provider. Im trying to signin with google provider (this works fine) but then i want to redirect to my homepage but im getting something wrong.

我有一个身份验证提供程序:

I have an auth provider:

import { Injectable } from '@angular/core';
import firebase from 'firebase';


@Injectable()
export class AuthData {
  // Here we declare the variables we'll be using.
  public fireAuth: any;
  googleProvider: any;

  constructor() {
    this.fireAuth = firebase.auth(); // We are creating an auth reference.

    // Google Provider for Google Auth
    this.googleProvider = new firebase.auth.GoogleAuthProvider();
  }

  /**
   * This function doesn't take any params, it just logs the current user out of the app.
   */
  logoutUser(): any {
    return this.fireAuth.signOut();
  }

  /**
   * This function doesn't take any params, it just signin the current user
   * using google provider.
   */
  googleSignin(): any {
    return this.fireAuth.signInWithRedirect(this.googleProvider);
  }
}

这是我的 app.component:

This is my app.component:

[all imports here]

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Home;
  constructor(public platform: Platform) {
    this.initializeApp();
  }

  initializeApp() {
    firebase.initializeApp(FirebaseConfig);

    firebase.auth().onAuthStateChanged((user) => {
      if (!user) {
        this.nav.setRoot(Home);
      } else {
        this.nav.setRoot(Menu);
      }
    });

    this.platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }
}

这是我的家.ts:

[some imports here]

@Component({
  templateUrl: 'home.html',
})
export class Home {

  constructor(public navCtrl: NavController, public authData: AuthData) {}

  registerUserWithGoogle() {
    this.authData.googleSignin();
  }
}

因此，当我尝试从 home.html(它是 app.html 上的视图)到 menu.html 使用 Google 登录时，我遇到了一些奇怪的行为.我有一些截图.

So when i try to sign in with Google from home.html (that its a view on app.html) to menu.html i got some weird behaviour. I have some screenshots.

app.html:

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

home.html:

<ion-content class="home">
  <div class="logo">
    <div class="logo-icon">
      <img src="assets/img/logotipo.png" alt="">
    </div>
  </div>
  <button ion-button block color="danger" class="google-btn" (click)="registerUserWithGoogle()">
    Log In with Google
  </button>
</ion-content>

这是我登录时得到的:

如果我点击箭头，我会得到这个:

And if i click on the arrow i get this:

但现在我无法点击侧边菜单，我不知道它是用于嵌套两个离子视图还是其他.

but now im not able to click on sidemenu and i dont know if its for nesting two ion view or something else.

谢谢

推荐答案

我看了评论，所以现在这是一个两部分的问题:

I read the comments so this is now a 2 part question:

1) 对于 Google Auth，signInWithRedirect() 和 signInWithPopUp() 方法在 cordova/ionic 应用程序中尚不起作用.

1) For Google Auth, the signInWithRedirect() and signInWithPopUp() methods don't work in cordova/ionic apps yet.

您需要使用 Google 原生插件来获取登录凭据，然后您可以将它们传递给 firebase.auth.signInWithCredentials()

You'll need to use the Google native plugin to get the login credentials and then you can pass them to firebase.auth.signInWithCredentials()

2) 关于将您发送到主页的错误:

2) About the bug sending you to the HomePage:

Ionic 的 navCtrl 中存在一个奇怪的错误，即在与用户一起返回后没有推送页面:

There's a weird bug in Ionic's navCtrl that isn't pushing the page after it returns with the user in:

firebase.auth().onAuthStateChanged((user) => {
  if (!user) {
    this.nav.setRoot(Home);
  } else {
    this.nav.setRoot(Menu);
  }
});

我通过简单地声明 rootPage: any = Menu; 然后改为这样做:

I got that working by simply declaring rootPage: any = Menu; and then doing this instead:

firebase.auth().onAuthStateChanged((user) => {
  if (!user) {
    this.nav.setRoot(Home);
  }
});

这篇关于Ionic 2 谷歌使用 Firebase 登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！