使用 AngularFire 显示 Facebook 头像的正确方法是什么

Question

在我的应用程序中，我想显示已登录 Facebook 用户的头像。我还没有找到任何优雅的解决方案。

要显示用户的头像，您需要提供两件事：user_id 和 accessToken。 user_id 可通过 AngularFireAuth 服务在任何地方使用，但除了在日志记录方法中，我没有在任何地方找到 accessToken。

我正在使用 "@angular/fire": "6.0.3"，并使用重定向方法登录。

我的解决方案。当我登录用户时，accessToken 存储在本地存储中。这是因为 getRedirectResult() 方法 returns 凭据仅在用户登录时使用。当用户已经登录时，方法不会 return 凭据。

ngOnInit(): void {
  this.progress.show();
  this.angularFireAuth.getRedirectResult()
    .then((uc: any) => {
      const token = uc?.credential?.accessToken;
      if (token) {
        localStorage.setItem('fbuser', token);
        this.router.navigateByUrl('/');
      }
      this.progress.hide();
    });
}

loginFacebook(): void {
  const provider = new auth.FacebookAuthProvider();  
  this.angularFireAuth.signInWithRedirect(provider);
}

以及当我需要显示图像时：

constructor(private auth: AngularFireAuth) { }

this.user$ = this.auth.user;
this.avatarSrc$ = this.user$.pipe(
  map(u => u.providerData[0].uid),
  map(uid => {
    const accessToken = localStorage.getItem('fbuser');
    return `http://graph.facebook.com/${uid}/picture?type=square&access_token=${accessToken}}`
  }),
);

我不确定这是最好的解决方案，尤其是使用本地存储。

有没有人遇到类似的问题并找到更好的方法？

Answer 1

我们在应用中使用 firestore 来存储头像。
在使用提供商登录时，我们在 firestore 中设置了一个用户文档（当它是新用户时），我们将提供商头像 url 复制到用户数据中：

ngOnInit(): void {
  this.progress.show();
  this.angularFireAuth.getRedirectResult()
    .then((uc: any) => {
      // skip data creation if user is not new
      if (!uc.additionalUserInfo.isNewUser) { return Promise.resolve(); }
      const user = uc.user;
      return this.angularFirestore.collection('user_collection').doc(user.uid).set({
          avatarURL: user.photoURL || '',
          email: user.email || '',
          displayName: user.displayName || ''
      });
    })
    .then(() => {
        this.progress.hide();
        this.router.navigateByUrl('/');
    });
}

loginFacebook(): void {
  const provider = new auth.FacebookAuthProvider();  
  this.angularFireAuth.signInWithRedirect(provider);
}

然后在应用程序中，使用 authState，我们在包含头像的数据库中获取用户数据 url:

constructor(private auth: AngularFireAuth) { }

this.authState$ = this.auth.authState;
this.user$ = this.authState$.pipe(
  switchMap(state => {
    return (!!state) ? 
      this.angularFirestore.collection('user_collection').doc(state.uid).valueChanges() : 
      of(null);
  })
);
this.avatarSrc$ = this.user$.pipe(
  map(user => user.avatarURL)
);

使用 AngularFire 显示 Facebook 头像的正确方法是什么

What is proper way to show Facebook avatar using AngularFire

facebook-graph-api

angularfire2

angular