使用 auth0-react 库访问令牌的格式似乎不正确

Question

我正在关注 this blog post on how to use the auth0-react library。

post 描述了使用 useAuth0 挂钩中的 getAccessTokenSilently 来获取用作不记名令牌的访问令牌

  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

同样的任务也花了我一段时间，文档既不清晰也不 up-to-date 我觉得。这是您需要做的：

对于 Auth0，您需要“应用程序”下的单页应用程序，和以及“APIs”下的API
你的 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"}
      >

无论您想在哪里调用后端（例如 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();

现在您可以通过 Authorization header:

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

您的 BE 现在可以验证常规 JWT 令牌。

Answer 2

来自 Auth0 docs:

id_token: contains an ID Token and is present if the request parameter response_type included the value id_token, or the scope request parameter the value openid

来自 Auth0 论坛中的各种 Auth0 员工：

How to get an access token in JWT format?

if you update the scope parameter to specify openid ... then you should receive a response containing an id_token parameter that would indeed be a signed JWT
OIDC Access Token (mine is opaque, but docs say it should be JWT)

除了指定 openid:

If you specify an audience, and the audience is a custom API you built, then you’ll get a JWT token

因此，在 getAccessTokenSilently 的 options 对象中，确保：

scope参数包括openid
audience参数指的是你的API

使用 auth0-react 库访问令牌的格式似乎不正确

Access token appears to be incorrect format using auth0-react library

jwt

reactjs

auth0