解析 userProfile$ observable 以从 Auth0 身份验证中获取名称和图片

Question

我正在使用 Angular 构建一个平台，我正在使用 Auth0 提供身份验证。我使用 Auth0 提供的演示代码将其实现到我的程序中。一切正常，但我想在他们登录后检索用户名和图片，以便我可以显示它。在Auth0的网站上，我找到了这段我可以实现的代码。它可以工作，但是当我想调用一个特定的项目时，比方说名称，它会用引号 " 显示它。

<pre *ngIf="auth.userProfile$ | async as profile">
<code>{{ profile | json }}</code>
</pre>

此代码将此作为输出：

{
  "iss": "http://YOUR_DOMAIN/",
  "sub": "auth0|123456",
  "aud": "YOUR_CLIENT_ID",
  "exp": 1311281970,
  "iat": 1311280970,
  "name": "Jane Doe",
  "given_name": "Jane",
  "family_name": "Doe",
  "gender": "female",
  "birthdate": "0000-10-31",
  "email": "janedoe@example.com",
  "picture": "http://example.com/janedoe/me.jpg" }

它的写法让我觉得以这种方式获取信息是不好的做法。我对名称和图片感兴趣，我需要它不带引号显示。有人可以给我更多关于如何实现这一目标的见解吗？

Answer 1

如果这是一种不好的做法，我无法发表评论。但是要删除引号，请删除 json 管道并直接访问属性。

<pre *ngIf="auth.userProfile$ | async as profile">
  <code>{{ profile.name }}</code>
  <code>{{ profile.picture }}</code>
</pre>

json 管道实际上与您需要的相反。它用于在显示之前将值转换为字符串化 JSON 格式。

解析 userProfile$ observable 以从 Auth0 身份验证中获取名称和图片

Parse userProfile$ observable to get name and picture from Auth0 authentication

angular

auth0

user-profile

jwt-auth