链接AngularFire2中的帐户

时间:2016-12-11 14:56:55

标签: firebase firebase-authentication angularfire2

我使用AngularFire2处理匿名和Google帐户。如果用户使用Google帐户登录,我希望将其匿名帐户转换为其永久(Google)帐户,以便他们可以无缝使用该应用。

使用Firebase API似乎很容易,但我没有看到在AngularFire2中执行此操作的能力。

对于Firebase,您将获得新身份验证提供程序的AuthCredential,然后使用链接方法转换帐户:

var credential = firebase.auth.GoogleAuthProvider.credential(
  googleUser.getAuthResponse().id_token);

auth.currentUser.link(credential).then(function(user) {
  console.log("Anonymous account successfully upgraded", user);
}, function(error) {
  console.log("Error upgrading anonymous account", error);
});

这是否可以在AngularFire2中使用?

3 个答案:

答案 0 :(得分:3)

没有理由不能使用基础Firebase API,因为AngularFire2创建的Firebase App可用于注入。

您可以使用注入的应用访问AngularFire2未公开的auth()(或storage())个实例的任何方法。

出于示例的目的,您可以将其注入应用程序组件,如下所示:

import { Component, Inject } from "@angular/core";
import { AngularFire, FirebaseApp } from "angularfire2";
import * as firebase from "firebase";

@Component({
  selector: "app",
  template: ...
})
export class AppComponent {

  constructor(
    // Inject AngularFire2:
    private angularFire: AngularFire,
    // Inject the Firebase App instance:
    @Inject(FirebaseApp) private firebaseApp: firebase.app.App
  ) {

    // Perform some sort of login.

    ...

    angularFire.auth.subscribe((state) => {

      // AngularFire2's auth observable will emit when the authentication
      // state changes and if the state is non-null, there will be a
      // current user. At this point, you should be able to do with the
      // injected app what it was you were doing with the SDK.

      if (state) {

        var credential = firebase.auth
          .GoogleAuthProvider
          .credential(googleUser.getAuthResponse().id_token);

        firebaseApp.auth()
          .currentUser
          .link(credential)
          .then((user) => {
            console.log("Anonymous account successfully upgraded", user);
          })
          .catch((error) => {
            console.log("Error upgrading anonymous account", error);
          });
      }
    });
  }
}

您不必使用auth观察者;您还可以使用AngularFire2的auth.login方法返回的promise将代码放入promise链中。

如下面的评论中所述,GoogleAuthProvider类位于firebase.app命名空间(不是应用实例)中。此外,由于AngularFire2在auth的(容易命名的)FirebaseAuthState属性中提供了当前用户,因此您无需注入应用程序实例来执行您想要执行的操作Google提供商。您只需要firebase导入:

this.angularFire.auth.login({
  email: "some@address.com",
  password: "password",
})
.then((authState: FirebaseAuthState) => {
  authState.auth.linkWithRedirect(new firebase.auth.GoogleAuthProvider());
});

答案 1 :(得分:1)

AngularFire2 v4中的完整示例。它会将匿名用户升级为Google提供商,并保留相同的身份验证UID。

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

  user: Observable<firebase.User>;

  constructor(private afAuth: AngularFireAuth) { }

  ngOnInit() {
    this.user = this.afAuth.authState;
  }

  anonymousLogin() {
    return this.afAuth.auth.signInAnonymously()
  }

  anonymousUpgrade() {
    const provider = new firebase.auth.GoogleAuthProvider()
    firebase.auth().currentUser.linkWithPopup(provider)
  }


}

答案 2 :(得分:0)

这是一个有效的例子;

import * as firebase from 'firebase':


upgradeAnonymous() {

    let credential = new firebase.auth.GoogleAuthProvider();

    firebase.auth().currentUser.linkWithPopup(credential).then(function(user) {
       console.log("Anonymous account successfully upgraded", user);
      }, function(error) {
        console.log("Error upgrading anonymous account", error);
      })
}