SvelteKit 1.0 与 keycloak-js 的集成答案

【问题标题】：Integration of SvelteKit 1.0 and keycloak-jsSvelteKit 1.0 与 keycloak-js 的集成
【发布时间】：2023-01-30 22:39:16
【问题描述】：

我在本地主机环境中设置了一个 keycloak 服务器，我可以通过邮递员手动获取 JWT 令牌，并希望在 sveltekit 中集成 auth。

我使用 this 作为参考，即使它来自 Svelte 并修改它以消除错误，我设法使其部分工作。

我的登录路由页面中有这段代码，它成功地将 UI 重定向到我的 keycloak 登录：

<script lang="typescript">
  import Keycloak from "keycloak-js";
  import type { KeycloakInitOptions } from "keycloak-js";
  // Keycloak
  let instance = {
    url: "http://localhost:8080",
    realm: "svelte-realm",
    clientId: "svelte-test",
  };
  let keycloak = new Keycloak(instance);  <---- error here.
  let initOptions: KeycloakInitOptions = { onLoad: "login-required" };
  keycloak
    .init(initOptions)
    .then(function (authenticated) {
      console.info("Authenticated");
    })
    .catch(function () {
      alert("failed to initialize");
    });
</script>

使用正确的凭据登录后，我在 keycloak.js 文件（来自 keycloak-js）中得到 document is undefined 错误，特别是这一行：

密钥斗篷.js

...

var scripts = document.getElementsByTagName('script')
...

错误信息

ReferenceError: document is not defined
  at new Keycloak(..../keycloak.js:718:20)
  at +page.svelte:... <--- line number of 'new Keycloak'
  at Object.$$render (/node_modules/svelte/internal/index.mjs:1876:22)
  at Object.default (root.svelte:41:38)
  at eval (/node_modules/@sveltejs/kit/src/runtime/components/layout.svelte:8:41)
  at Object.$$render (/node_modules/svelte/internal/index.mjs:1876:22)
  at root.svelte:40:37
  at $$render (/node_modules/svelte/internal/index.mjs:1876:22)
  at Object.render (/node_modules/svelte/internal/index.mjs:1884:26)

更新：

我将整个 keycloak 代码包含在 onMount() 中，我不再收到文档未定义错误，但现在我在控制台中收到未授权 (401) 错误：

http://domain/realms/my-realm/protocl/openid-connect/token

【问题讨论】：

标签： typescript keycloak sveltekit

【解决方案1】：

您收到的新错误可能是由于端口 svelte/sveltekit 正在运行，keycloack 为您设置了允许的域/url/端口

【讨论】：