API 的 Auth0 React SPA 访问令牌不正确

Question

所以我已经阅读了几个关于这个的 SO 问题，并阅读了许多关于这个的 Auth0 教程，但我仍然无法让访问令牌与我的自定义一起工作 API。

我已遵循 React 的 Auth0 SPA 教程。然后我按照 "Call Your API from Your Single-Page App" 教程进行操作。我创建了一个 "auth0-authorization-extension-api"。我允许 API 访问我的自定义 API。

我觉得我已经完成了必要的步骤，但我觉得我不知道如何从我的 React 客户端请求正确的访问令牌。

我的 Axios 自定义挂钩在 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 的访问令牌不是完整的 jwt，而是一串数字和字母，长度约为 35 位。

每次我从自定义 API.

中收到错误 UnauthorizedError: jwt malformed

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

我是不是漏掉了一些简单的东西，还是找错了地方？

Answer 1

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

API 的 Auth0 React SPA 访问令牌不正确

Auth0 React SPA incorrect access token for API

jwt

reactjs

auth0