使用 Sidebase Nuxt-Auth 和 Keycloak 的 Nuxt 3 应用程序中的访问令牌检索和验证问题

Question

我目前正在开发 Nuxt 3 应用程序，并使用 Sidebase 的 Nuxt-Auth 模块和 Keycloak 作为身份提供者集成了身份验证。身份验证流程按预期工作，用户可以毫无问题地登录/注销。但是，在尝试使用颁发的访问令牌向 Spring Boot 后端发出经过身份验证的请求时，我遇到了问题。

问题描述：

身份验证成功后，我尝试使用 Nuxt-Auth getToken 方法检索访问令牌，以便将此令牌用于后续 API 请求。不幸的是，我收到的令牌似乎无效或不是预期的访问令牌。此外，我怀疑检索到的令牌是 Nuxt-Auth 会话令牌，而不是我后端请求所需的 Keycloak 访问令牌。

这是我尝试检索令牌的片段：

// Token retrieval endpoint in Nuxt
import { getToken } from "#auth"

export default eventHandler(async (event) => {
    const token = await getToken({ event, raw: true, secret: process.env.NEXTAUTH_SECRET });
    console.log(token);
    return token || 'no token present';
});

这就是我配置 Nuxt-Auth 处理程序的方式：

// NuxtAuthHandler configuration
import KeycloakProvider from 'next-auth/providers/keycloak';
import { NuxtAuthHandler } from '#auth';

export default NuxtAuthHandler({
    secret: process.env.NEXTAUTH_SECRET,
    providers: [
        KeycloakProvider.default({
            clientId: process.env.KEYCLOAK_CLIENT_ID,
            clientSecret: process.env.KEYCLOAK_CLIENT_SECRET,
            issuer: process.env.KEYCLOAK_ISSUER_URL,
            idToken: true,
            wellKnown: process.env.KEYCLOAK_WELLKNOWN,
            authorization: {
                params: {
                    redirect_uri: `${process.env.NEXTAUTH_URL}/api/auth/callback/keycloak`,
                },
            }
        }),
    ],
    callbacks: {
        jwt({ token, account, user }) {
            console.log(token, account, user);
            return token;
        },
        session: (data) => {
            return data.session;
        }
    },
});

根据官方文档，应使用jwt回调将访问令牌添加到会话中。但是，就我而言，此回调不包含访问令牌，并且帐户和用户对象始终未定义。

问题：

• 如何确保 Keycloak 颁发的访问令牌被正确检索并有效用于我的 Spring Boot 后端？
• 是否有我可能缺少的步骤或配置来将访问令牌正确集成到会话对象中以供后续使用？
• 是否可能是 Keycloak 中的错误配置导致回调中未包含访问令牌？

任何有关解决这些问题的指导或见解将不胜感激。

Answer 1

使用以下配置将 access_token 添加到会话中

callbacks: {

jwt: async ({ token, user, account }) => {
  if (account && account.access_token) {                
    token.accessToken = account.access_token; // <-- adding the access_token here
    token.refreshToken =account.refresh_token;
  }

  const userResponse = await $fetch("http://localhost:8000/api/v1/me/");

  token.data = userResponse;

  return token;
},
async redirect({ url, baseUrl }) {
  return baseUrl + "/dashboard";
},
async session({ session, user, token }) {
  session.token = token;
  
  return session;
},

}

并创建一个可组合的 composables/useUserData.vue

export const useUserData = async () => {
const { getSession} = useAuth();
const userData = await getSession();
return userData.token|| null
};

现在您可以通过调用组件中的可组合项来访问 access_token 和用户数据

const user = await useUserData();