reactjs - Auth0 React SPA API 的访问 token 不正确

Question

因此，我已经阅读了几个关于此的 SO 问题，并阅读了许多关于此的 Auth0 教程，但我仍然无法让访问 token 与我的自定义 API 一起使用。

我遵循了 React 的 Auth0 SPA 教程。
然后我按照“从您的单页应用程序调用您的 API”教程进行操作。
我创建了一个“auth0-authorization-extension-api”。
我启用了对我的自定义 API 的 API 访问。

我觉得我已经完成了必要的步骤，但我觉得我错过了如何从我的 React 客户端请求正确的访问 token 。

我的 Axios 自定义 Hook 在 useEffect 中包含以下代码:

const send = async () => {
  try {
    await getTokenSilently().then(async (token: string) => {
      const config = {
        method: method as "GET" | "POST",
        withCredentials: true,
        data: providedData,
        headers: {
          Authorization: "Bearer " + token
        }
      };
      const result = await axios(address + uri, config);
    });
  } catch (error) {
    if (!canceled) {
      dispatch({ type: "FETCH_FAILURE" });
    }
  }
};

发送到我的 API 的访问 token 不是完整的 jwt，而是一串长度约为 35 位的数字和字母。

每次我收到错误 UnauthorizedError: jwt malformed来自我的自定义 API。

我的 React SPA 受众是 http://localhost:3000 ，API 受众是 http://localhost:8080 .

我在这里遗漏了一些简单的东西还是我找错了地方？

Answer 1

您获得的访问 token 只是一个纯随机字符串。
使用 Auth0，如果您想将 JWT 作为访问 token ，则必须 indicate the audience即 API 标识符。