Токен доступа имеет неправильный формат с использованием библиотеки auth0-react

Question

Я слежу за этим сообщением в блоге о том, как использовать auth0-response library .

В сообщении описывается использование getAccessTokenSilently из useAuth0 крючок для получения токена доступа, который используется в качестве токена-носителя

  const callSecureApi = async () => {
    try {
      const token = await getAccessTokenSilently();

      const response = await fetch(`${apiUrl}/api/private-message`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });

      const responseData = await response.json();

      setMessage(responseData);
    } catch (error) {
      setMessage(error.message);
    }
  };

Проблема, с которой я столкнулся, заключается в том, что токен не является токеном JWT - это выглядит так:

RJq7USOcszn7rpyI5iDjbYAKp9pK60Ap

Кто-нибудь знает, почему getAccessTokenSilently не возвращает токен JWT?

Answer 1

Та же самая задача заняла у меня некоторое время, мне кажется, там не очень четкая и не актуальная документация. Вот что вам нужно сделать:

1. Для Auth0 вам потребуется как одностраничное приложение в разделе «Приложения», и API в разделе «API»
2. Ваше приложение React упаковано примерно так, как показано ниже. Обратите внимание на параметр аудитории из вашего API, это важная часть, без него я также получил бы тот же маленький и бесполезный токен доступа, который есть у вас!

<Auth0Provider
          domain={AUTH0_DOMAIN} // taken from the SPA application in Auth0
          clientId={AUTH0_CLIENT_ID} // taken from the SPA application in Auth0
          audience={AUTH0_AUDIENCE} // taken from your API in Auth0
          redirectUri={window.location.origin}
          useRefreshTokens={true}
          cacheLocation={"localstorage"}
      >

Везде, где вы хотите вызвать свой Backend (например, Spring Boot), вы добавляете в компонент следующее:

const {user, getAccessTokenSilently} = useAuth0();
...
// this will now be a JWT token, BUT ONLY if you specified the API audience in the Auth0Provider
// looks something like this:
/* eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlFqZEVNMEU1TnpWRE0wTkRSRVEzUkVFMFFVSkJOamMwUmtGRE1qZzNPVGxCTURNMk56UTJSZyJ9.eyJpc3MiOiJodHRwczovL3JhcGlkbWluZXIuYXV0aDAuY29tLyIsGnN1YiI6ImF1dGgwfDUzNDc5YzMwNmU5Yjc4YTU3MzAwMDVjNSIsImF1ZCI6WyJodHRwczovL2VuZ2luZWVyaW5nLXRvb2xzLnJhcGlkbWluZXIuY29tL2FwaSIsImh0dHBzOi8vcmFwaWRtaW5lci5hdXRoMC5jb20vdXNlcmluZm8iXSwiaWF0IjoxNTk2ODM2MDMyLCJleHAiOjE1OTY5MjI0MzIsImF6cCI6IllldWhoS29JV1lTV2FYUmExNU1sNTFMZUExYkp4bjVlIiwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCJ9.zI74HHd1pCzz-xBQEDDKby9z_Ue9_AIz-r05_my1wvLQ0U94u9WrwWmSxd9BQ-2XOHKa1KgnaaxsX2aiSHil7a4YjMnrYo9f0jgMmlxcllqZJgeb0AhLQNfYQEr6nAKP_8PgN0D7QFjIxiFTpDndTcD_2nG9DEsxbraT7dDy0pf1KTGmhQnNyBuyReAEUFhlxd1LAd63ED14nCPmEehl5rLNUwClTRFQ5q4ERLjM8cX0GLLy5F-I7UjpDOBnrL_qMqfuHyuChxs-k0fHhhEfV8xE2nEV00cXcAp3zvpJ_Ox9U0OBaVUbf1vi9v1Wl6jaMZpgqRZ1bZcfDXWjoEBVlQ */
const accessToken = await getAccessTokenSilently();

Теперь вы можете передать accessToken через Authorization заголовок:

headers: {
    "Authorization": `bearer ${accessToken}`
}

Теперь ваш BE может проверять обычный токен JWT.

Answer 2

From Auth0 docs :

id_token: содержит токен идентификатора и присутствует, если параметр запроса response_type включал значение id_token или параметр запроса области значение openid

От разных сотрудников Auth0 на форумах Auth0:

• Как получить токен доступа в формате JWT?

  , если вы обновите параметр области, указав openid ... тогда вы должны получить ответ, содержащий параметр id_token, который действительно будет подписанным JWT

• OID C Токен доступа (мой непрозрачный, но в документации говорится, что это должен быть JWT)

  В дополнение к указанию openid:

  Если вы укажете аудиторию, а аудитория - это созданный вами пользовательский API, то вы получите токен JWT

Итак, в параметры объект из getAccessTokenSilently, убедитесь, что:

• параметр scope включает openid
• параметр audience ref к вашему API