Auth0 "JWT 字符串必须包含两个点"

Question

我目前正在使用 Vue3 并集成了来自https://github.com/auth0/auth0-spa-js的 Auth0-spa-js。 这很好用。

我正在通过 Axios 向 PHP API 后端发送请求，将访问令牌作为称为令牌的 GET 参数传递。

服务器端在设置来自https://github.com/auth0/auth0-PHP的步骤后，我得到一个异常“JWT 字符串必须包含两个点”。 我已经安装了要求、guzzle 和 dotenv 等。目前在 PHP 7.4.2。

// useAuth0.js
// to login and maintain Auth state

import createAuth0Client from "@auth0/auth0-spa-js";
import { reactive } from "vue";

export const AuthState = reactive({
  user: null,
  loading: false,
  isAuthenticated: null,
  auth0: null,
});

const config = {
  domain: import.meta.env.VITE_AUTH0_DOMAIN,
  client_id: import.meta.env.VITE_AUTH0_CLIENT_ID,
};

export const useAuth0 = (state) => {
  const handleStateChange = async () => {
    state.isAuthenticated = !!(await state.auth0.isAuthenticated());
    state.user = await state.auth0.getUser();
    state.loading = false;
  };

  const initAuth = () => {
    state.loading = true;
    createAuth0Client({
      domain: config.domain,
      client_id: config.client_id,
      cacheLocation: "localstorage",
      redirect_uri: window.location.origin,
    }).then(async (auth) => {
      state.auth0 = auth;
      await handleStateChange();
    });
  };

  const login = async () => {
    await state.auth0.loginWithPopup();
    await handleStateChange();
  };

  const logout = async () => {
    state.auth0.logout({
      returnTo: window.location.origin,
    });
  };

  return {
    login,
    logout,
    initAuth,
  };
};

// and I use this on a button click event

AuthState.auth0.getTokenSilently().then(accessToken => {
   // AXIOS REQUEST
})

// PHP
// Auth0 SDK is 8.1.0

use Auth0\SDK\Auth0;
use Auth0\SDK\Utility\HttpResponse;
use Auth0\SDK\Token;

$env = (Dotenv\Dotenv::createImmutable(FCPATH))->load();
// I've checked that $env does contain correct .env values

$token = filter_var($_GET['token'] ?? null, FILTER_UNSAFE_RAW, FILTER_NULL_ON_FAILURE);
// Actual token I logged
eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIiwiaXNzIjoiaHR0cHM6Ly9kZXYtd2kxeGRtbDcudXMuYXV0aDAuY29tLyJ9..V50FRJnBnpBnHJjA.e3PZuESoGaPCjp0kO9vlijGMIfhXWQHlbvsslWtbAvFAQ5hef9_PXLD_W282Cba9D6k-FAwhro9i3e5ukzXouGWYfoYHHQ5WQJ-vpLISrRANxFvNVPsCZSkg1sAIbL0Qk3Gir82ds1G919uEPc6vB3Y2qbARAd9nlMJBpLqWUq9VcIrzHtsJN7Q8j36vTCRXyu0f5-TeOr-dU3-gaIUvur37YQD0xICr4sENFktPU3s-uqCSCopVi6MoZMGvfYcVlO3nv1Sb2owGX_S_PSG7fug4Et-pMw1cVYgfNtLQf8XViI-l19sgXAf2eQShmLPvcdBdXVPA0g.S9vyktmK7rPoM_F3nUSEvg

$auth0 = new Auth0([
   'domain' => $env['AUTH0_DOMAIN'],
   'clientId' => $env['AUTH0_CLIENT_ID'],
   'clientSecret' => $env['AUTH0_CLIENT_SECRET'],
   'tokenAlgorithm' => 'RS256'
]);

// Exception thrown here with decode
$token = $auth0->decode($token, null, null, null, null, null, null, Token::TYPE_ID_TOKEN);

$token->verify();

$token->validate();

在创建与 Auth0 PHP SDK 不兼容的令牌时，auth0-spa-js 是否存在问题，或者未传递我需要添加的配置设置？ 我已经按照这两个文档的说明配置了很多东西，仔细检查了预期的变量。

Answer 1

结果我需要将受众参数添加到 createAuth0Client、getTokenSilently() 和 PHP SDK 解码方法，用于我的 Auth0 自定义 API。一切都经过验证。

我一定是错过了文档中的某些内容，或者 audience 参数似乎比可选值更像是必需的。

Answer 2

添加到Brian Barton 上面的回答， GetTokenSilentlyOptions接口解释说选项应该按如下方式传递：

// ✅ Like this!
const token = await this.$auth.getTokenSilently({
  authorizationParams: {
    audience: 'https://api.example.com/',
  },
})

// ❌ NOT like this (where I got stuck for a while)
const token = await this.$auth.getTokenSilently({
  audience: 'https://api.example.com/',
})

额外的外部 object 结构对我来说不是很明显，所以我无法弄清楚为什么我不能让他们的解决方案工作。

附加上下文

这与您在服务器端拥有的内容无关，也与您的 SPA 如何按照带有代码交换证明密钥的授权代码流 (PKCE)检索您的 884645589888 令牌有关（如果您'正在从 SPA 访问 API）。

我最终找到了这个答案，因为当我未能正确设置audience参数时，Auth0 没有发出任何错误的信号。 它返回了一个不是格式正确的 JWT 的“令牌”。在我的例子中，它始终有四个或五个点（句点），而本应恰好有两个。