Разобрать userProfile $ observable для получения имени и изображения из аутентификации Auth0

Question

Я создаю платформу с Angular и использую Auth0 для обеспечения аутентификации. Я использовал демонстрационный код, который предоставляет Auth0, чтобы внедрить его в мою программу. Все работает нормально, но я хочу получить имя пользователя и изображение после входа в систему, чтобы я мог его отобразить. На сайте Auth0 я нашел этот фрагмент кода, который я могу реализовать. Это работает, но когда я хочу вызвать определенный элемент c, скажем, имя, он отображает его в кавычках ".

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

Этот код дает мне в качестве вывода:

{
  "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 }}

Труба json фактически противоположна тому, что тебе нужно. Он используется для преобразования значения в строковый формат JSON перед его отображением.