且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

离子2谷歌登录与firebase

更新时间:2023-12-03 15:43:52

现在是一个2部分的问题:
$ b 对于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);
  }
});