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

Question

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

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

我使用的是"@angular/fire": "6.0.3"，使用重定向方法登录。

我的解决方案。当我登录用户时，accessToken存储在本地存储器中。这是因为getRedirectResult()方法只在用户登录时返回凭据。当用户已经登录时，方法不返回凭据。

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的DB中获取用户数据：

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