离子2谷歌登录与firebase [英] Ionic 2 google signin with firebase

问题描述

即时通讯使用Firebase身份验证和谷歌提供商的一些麻烦。我尝试登录与谷歌提供商（这工作正常），但然后我想重定向到我的主页，但即时通讯出错。

我有一个身份验证提供程序： p>

 从'@ angular / core'导入{Injectable}; 
从firebase导入firebase; 
 
 
 @Injectable（）
导出类AuthData {
 //在这里我们声明我们将要使用的变量。 
 public fireAuth：any; 
 googleProvider：any; 
 
构造函数（）{
 this.fireAuth = firebase.auth（）; //我们正在创建一个auth引用。 
 
 // Google提供者Google Auth 
 this.googleProvider = new firebase.auth.GoogleAuthProvider（）; 
} 
 
 / ** 
 *这个函数不带任何参数，它只是将当前用户从应用程序中注销。 
 * / 
 logoutUser（）：any {
 return this.fireAuth.signOut（）; 
 
 $ b / ** 
 *这个函数不带任何参数，只是使用google提供商登录当前用户
 *。 
 * / 
 googleSignin（）：任何{
返回this.fireAuth.signInWithRedirect（this.googleProvider）; 
 
 
 
 
 $ b $ p $这是我的app.component：
  [所有进口都在这里] 
 
 @Component（{
 templateUrl：'app.html'
 $）
 export class MyApp {
 @ViewChild（Nav）nav：Nav; 
 
 rootPage：any = Home; 
构造函数（公共平台：平台）{
 this.initializeApp（）; 
 
 
 initializeApp（）{
 firebase.initializeApp（FirebaseConfig）; （$ user）
 
 firebase.auth（）。onAuthStateChanged（（user）=> {
 if（！user）{
 this.nav.setRoot（Home）; 
 } else {
 this.nav.setRoot（Menu）; 
} 
}）; 
 
 this.platform.ready（）。then（（）=> {
 StatusBar.styleDefault（）; 
}）; 
 
 
 
 
 $ p $这是我的home.ts： > 
 
 
  [some some here here] 
 
 @Component（{
 templateUrl：'home.html'， $ {
}} 
导出类首页{
 
构造函数（public navCtrl：NavController，public authData：AuthData）{} 
 
 registerUserWithGoogle（）{
 this.authData.googleSignin（）; 
 
 
 
 
 
 
 $ b因此，当我尝试在家中用Google登录时.html（它在app.html上的一个视图）menu.html我有一些奇怪的行为。  
 
 
 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.pngalt => 
< / div> 
< / div> （click）=registerUserWithGoogle（）> 
<按钮离子按钮块颜色=危险class =google-btn 
使用Google登入
< / button> 
< / ion-content> 
  
这就是我登录时得到的结果：
 
 
   
 
 $ b  b 
   
 
谢谢 
 
解决方案
现在是一个2部分的问题：
 $ b <1>对于Google Auth， signInWithRedirect（）和 signInWithPopUp（）方法在cordova / ionic apps中不起作用 。
使用Google本机插件获取登录凭据，然后可以将它们传递给 firebase.au th.signInWithCredentials（） 
 
 
 
 2）关于将您发送到主页的错误：
 
 
  firebase 
 
 .auth（）。onAuthStateChanged（（user）=> {
 if（！user）{
 this.nav.setRoot（Home）; 
} else {
 this.nav.setRoot（Menu）; 
} 
}）; 
  
通过简单地声明 rootPage：any = Menu; code>然后这样做： 
 
 
  firebase.auth（）。onAuthStateChanged（（user）=> { 
 if（！user）{
 this.nav.setRoot（Home）; 
} 
}）; 
  
 
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);
  }
}
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();
    });
  }
}
And this is my home.ts:
[some imports here]

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

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

  registerUserWithGoogle() {
    this.authData.googleSignin();
  }
}
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>
This is what i get when i log in:



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.

Thank you
解决方案
I read the comments so this is now a 2 part question:

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

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) About the bug sending you to the HomePage:

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


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