如何使用服务器端的SvelteKit在Auth0中获取用户详细信息

Question

我试图在服务器端使用SveltKit使用Auth0服务对用户进行身份验证，但一直收到错误invalid_token、cannot read properties of undefined:

outer {
error: 'invalid_token',
errorDescription: "Cannot read properties of undefined (reading 'XMLHttpRequest')"
}

登录端点：

import * as auth0 from "auth0-js";
/** @type {import('@sveltejs/kit').RequestHandler} */
export async function post({ request }) {
const body = await request.json();
const hash = body.hash;
console.log("Sign-in.ts", hash);
// Initialize the Auth0 application
var webAuth = new auth0.WebAuth({
domain: '<domain>',
clientID: '>clientid>'
});
// Parse the URL and extract the Access Token
webAuth.parseHash({hash: hash, state: "rtre4", nonce: "er324"}, function (err, authResult) {
if (err) {
return console.log("outer", err);
}

webAuth.client.userInfo(authResult.accessToken, function (innerErr, user) {
// This method will make a request to the /userinfo endpoint
// and return the user object, which contains the user's information,
// similar to the response below.
if (innerErr) {
return console.log("inner", innerErr);

}
console.log(user);
});
});
return {
status: 200,
body: {
message: "OK"
}
};
};

我可以成功地让用户登录，并将用户重定向到我的/login路由，访问和id令牌在url中作为散列。接下来我将尝试获取用户详细信息。我想在服务器中获取用户详细信息，所以我用POST请求将完整的哈希发送到我的/api/login.ts端点，并在服务器端点中调用auth0-js函数parseHash，但失败了。不过，同样的代码也适用于客户端。

登录页：

<script lang="ts">
import { onMount } from 'svelte';
onMount(async () => {
const hash = window.location.hash;
const response = await fetch("/api/sign-in", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
hash: hash
})
});
console.log(response);
});
</script>
<div class="content">
<p>Redirecting, please wait...</p>
</div>

因此，我认为要么cookie在字符串化过程中发生了某种变化，要么Sveltekit没有XmlHttpRequest，但有人有进一步的了解吗？

Answer 1

如果您的cookie中有JWT令牌，您可以解码JWT cookie以获取用户信息你可以这样做：

import * as cookie from 'cookie';
import Buffer from 'buffer';
export const handle = async ({ event, resolve }) => {
const cookies = cookie.parse(event.request.headers.get('cookie') || '');
if(!cookies.id_token) {

return await resolve(event);
}

const base64Payload = cookies.id_token.split('.')[1];
const decodedJWTToken = base64Payload ? Buffer.Buffer.from(base64Payload, 'base64') : '';
event.locals.user = decodedJWTToken ? JSON.parse(decodedJWTToken.toString()) : null
const response =  await resolve(event);
return response
};
export function getSession({ locals }) {
return {
user: locals.user && {
nickname: locals.user.nickname ? locals.user.nickname : null,
email: locals.user.email ? locals.user.email : null,
sub: locals.user.sub ? locals.user.sub : null,
email_verified: locals.user.email_verified ? locals.user.email_verified : null,
picture: locals.user.picture ? locals.user.picture : null,
}
};
}

Answer 2

感谢Andreas的评论，我意识到XmlHttpRequest是服务器中不存在的浏览器功能。出于这个原因，我使用从页面中获得的令牌实现了对Auth0端点的手动请求，以获取用户详细信息：

/** @type {import('@sveltejs/kit').RequestHandler} */
export async function post({ request }) {
/**
* auth0.WebAuth does not work on server side because it uses XmlHttpRequest, which is unavailable on server
*/
const body = await request.json();
const token = body.accessToken;
const response = await fetch("https://<app Auth0 address>/userinfo", {
method: "GET",
headers: { 
"Content-Type":"application/json",
"Authorization": `Bearer ${token}`},
});
const userData = await response.json();
console.log(userData);
};
};

我仍然在auth0.js工作的客户端调用方法webAuth.parseHash，因为该方法还自动验证令牌。验证后，我正在POST向端点发送访问令牌。