Я пытаюсь аутентифицировать пользователя с помощью службы Auth0 с помощью SvelteKit на стороне сервера, но продолжаю получать сообщение об ошибке 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.info("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.info("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.info("inner", innerErr);
}
console.info(user);
});
});
return {
status: 200,
body: {
message: "OK"
}
};
};
Я могу успешно войти в систему и перенаправить пользователя на мой маршрут /login с токенами доступа и идентификатора в виде хэша в URL-адресе.
Затем я пытаюсь получить данные пользователя. Я хочу получить информацию о пользователе на сервере, поэтому я отправляю полный хэш на свою конечную точку /api/login.ts
с запросом POST
и вызываю функцию 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.info(response);
});
</script>
<div class = "content">
<p>Redirecting, please wait...</p>
</div>
Поэтому я думаю, что либо файл cookie каким-то образом изменяется во время его строковой обработки, либо в Sveltekit нет XmlHttpRequest, но есть ли у кого-нибудь дополнительные сведения?
хорошо, видимо XmlHttpRequest
это функция браузера, которой нет на сервере. ну спасибо за подсказки.
Благодаря комментариям Андреаса я понял, что 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.info(userData);
};
};
Я по-прежнему вызываю метод webAuth.parseHash
на стороне клиента, где работает auth0.js, потому что этот метод также автоматически проверяет токены. После проверки я POST
отправляю токен доступа к конечной точке.
Если у вас есть токен JWT в файлах cookie, вы можете расшифровать файл cookie JWT, чтобы получить информацию о пользователе. Вы можете сделать это следующим образом:
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,
}
};
}