Angular上的Keycloak - 加载时没有得到正确的状态答案

【问题标题】：Keycloak on Angular - not getting correct status on loadAngular上的Keycloak - 加载时没有得到正确的状态
【发布时间】：2021-05-29 11:13:02
【问题描述】：

使用最新的 angular (11)、最新的 keycloak-angular 和 keycloak-js。

在页面加载时，当我初始化 keycloak 时，我想获得登录状态。即使会话处于活动状态，我总是会出错。

这是我的初始化代码：

import { KeycloakService } from 'keycloak-angular';
import { AppService } from 'src/app/app.service';
import { environment } from '../environments/environment';
 
export function initializer(keycloak: KeycloakService, appService: AppService): () => Promise<any> {
    return (): Promise<any> => {
        return new Promise<void>(async (resolve, reject) => {
          try {
            await keycloak.init({
                config: {
                    url: environment.keycloak.issuer,
                    realm: environment.keycloak.realm,
                    clientId: environment.keycloak.clientId
                },
              loadUserProfileAtStartUp: true,
              initOptions: {
                checkLoginIframe: true
              },
              bearerExcludedUrls: []
            }).then((a) => {
              console.log(a); // this returns always false
            });
            resolve();
          } catch (error) {
            reject(error);
          }
        });
      };
}

即使在以下情况下也会返回 false：

【问题讨论】：

标签： angular authentication keycloak keycloak-angular

【解决方案1】：

正如我在 cmets 中所写，我发现我必须拥有 onLoad 属性。我不想有onLoad: 'login-required'，因为大多数页面不需要用户登录，所以我不得不添加onLoad: 'check-sso'。

【讨论】：

【解决方案2】：

请尝试使用这种初始化方法：

export function initializer(keycloak: KeycloakService): () => Promise<any> {
return (): Promise<any> => {
  return new Promise(async (resolve, reject) => {
    try {
      await keycloak.init({
        config: {
                url: environment.keycloak.issuer,
                realm: environment.keycloak.realm,
                clientId: environment.keycloak.clientId
            },
        initOptions: {
          onLoad: 'check-sso',
          checkLoginIframe: false
        },
        enableBearerInterceptor: true,
        bearerPrefix: 'Bearer',
        bearerExcludedUrls: [
          'main.js',
        ]
      });
      resolve();
    } catch (error) {
      reject(error);
    }
  }
    )
    .catch((e) => {
      console.log('Error thrown in init ' + e);
    });
};
}

【讨论】：

解决方案是添加：onLoad: 'check-sso'。谢谢你的帮助。

【解决方案3】：

我会说它首先需要带有 pkce 流的授权代码，因为它是 SPA（当然使用的 OIDC 客户端必须是公共的）：

initOptions: {
  onLoad: 'login-required',
  checkLoginIframe: false,
  pkceMethod: 'S256'
},

async/await 语法也可能是个问题（但 Angular/JS 不是我的菜，所以我可能是错的）。我会将其重写为：

keycloak.init(
  ...
).then(async authenticated => {
  if (!authenticated) {
    // unauthenticated
    console.log(a)
    window.location.reload()
    return
  } else {
    // authenticated
    console.log(a)
    ...
  }

【讨论】：

这行不通。它现在一直在重新加载窗口。
@FilipWitkowski 当然，有一百万个变量，您的问题中没有提到，始终提供stackoverflow.com/help/minimal-reproducible-example 以获得最佳答案。我强调了一些我可以看到的问题，但您还有其他问题。
我通过添加 onLoad: 'check-sso' 来修复它。我不确定这是否是正确的解决方案，但它现在有效。我不想使用“需要登录”，因为用户无需登录即可访问大部分页面。