在 Auth0 中检索用户配置文件信息答案

【问题标题】：Retrieving User Profile Information in Auth0在 Auth0 中检索用户配置文件信息
【发布时间】：2023-03-22 15:12:01
【问题描述】：

我正在开发一个 Angular 8 SPA 并成功集成了 Auth0 身份验证。每个用户的配置文件信息显示就像 Auth0 教程所示。请参阅下面的屏幕输出。用户登录后如何访问 email 属性？

{
  "nickname": "user,
  "name": "user@email.com",
  "picture": "https://s.gravatar.com/user_image.png",
  "updated_at": "2020-01-15T17:39:10.467Z",
  "email": "user@email.com",
  "email_verified": true,
  "sub": "auth0|000000000000000000000000"
}

在 app.module.ts 中，我尝试使用以下内容进行订阅：

currentUser: string;
this.auth.userProfile$.subscribe(userProfile => {this.currentUser = userProfile});
console.log(this.currentUser);

但是，在控制台中我只得到：null。据我所知，auth.service.ts 提供了必要的 observable：

private userProfileSubject$ = new BehaviorSubject<any>(null);
userProfile$ = this.userProfileSubject$.asObservable();

感谢任何方向。

【问题讨论】：

标签： angular typescript observable auth0

【解决方案1】：

问题是您的 console.log(this.currentUser) 在值被发送到您的订阅之前被执行。

如果您按以下方式更改代码，它应该可以工作：

this.auth.userProfile$.subscribe(userProfile => {
    this.currentUser = userProfile;
    console.log(this.currentUser);
});

【讨论】：

【解决方案2】：

我不知道您为什么要订阅app.module.ts，因为auth.service.ts 提供了连接任何其他组件的可能性。

我尝试来自 Auth0 official page 的教程并修改 home-content.component.ts 添加

// import section
import { AuthService } from 'src/app/auth/auth.service';

getSessionScope(){
    this.auth.userProfile$.subscribe(data => this.currentUser = data);
    console.log(this.currentUser);

  }

并在home-content.component.html 中添加

<button
      id="testButton"
      class="btn btn-primary btn-margin"
      (click)="getSessionScope()"
    >
      log session
    </button>

一旦通过 auth.service 触发点击事件，您就可以获取会话数据。因此，如果您需要电子邮件，请尝试this.currentUser.email

【讨论】：