改进SPA在使用授权码流时初始页面加载速度慢

Question

我有一个用Angular编写的单页应用程序，它使用Keycloak和登录的授权码流。

该流程适用于登录，但它将初始页面加载时间从500ms左右增加到2500-4000ms左右，这对于大型Angular应用程序来说是很好的。我有用户关闭标签，并报告说，网站已关闭，因为它加载太慢。

查看network选项卡，增加的加载时间是由于在页面显示之前初始化keycloak而导致对我的keycloak服务器的6次调用。

我能做些什么来加快速度呢？在硬件方面，Keycloak运行在Google Compute上，Postgres DB托管在CloudSQL上。

// Init method in keycloak-js, called from the AppModule.
keycloak.init(options?: KeycloakOptions)

// Network traffic added by auth flow
step1.html
step2.html
login.status-iframe.html
init?....
auth?...
token
account

--

编辑:我已经将前端库切换为使用当前配置的angular-auth-oidc-client。

{
  stsServer: 'https://<server>',
  redirectUrl: window.location.origin,
  postLogoutRedirectUri: window.location.origin,
  clientId: '<client-id>',
  scope: 'openid offline_access profile email roles',
  responseType: 'code',
  silentRenew: true,
  useRefreshToken: true,
  renewTimeBeforeTokenExpiresInSeconds: 30,
};

Answer 1

1.)您需要提供https://stackoverflow.com/help/minimal-reproducible-example，目前还不清楚您使用的是哪个keycloakOptions。

2.)我可以假设(即使我没有看到keycloakOptions)，您没有使用SPA的最佳流程。我将在PKCE中使用授权码，因此选项可以是(当然，这些选项可能不适合您的用例，因为我不了解您的代码，但这是一个很好的起点)：

{ 
  url: <URL>,
  realm: <REALM>,
  clientId: <CLIENT_ID>,
  onLoad: 'login-required',
  promiseType: 'native', 
  checkLoginIframe: false, 
  pkceMethod: 'S256'
}

无论如何，我建议阅读二手库的文档，以了解它提供了什么：https://www.keycloak.org/docs/latest/securing_apps/#_javascript_adapter