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

Question

我正在关注这篇关于如何使用auth0-react 库的博客文章。

该帖子描述了使用getAccessTokenSilentlyfromuseAuth0钩子来获取用作不记名令牌的访问令牌

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

3. 无论您想在何处调用后端（例如 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();

4. 现在您可以通过Authorization标头传递 accessToken ：

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

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