我目前正在开发 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回调将访问令牌添加到会话中。但是,就我而言,此回调不包含访问令牌,并且帐户和用户对象始终未定义。
问题:
任何有关解决这些问题的指导或见解将不胜感激。
使用以下配置将 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();