我的 Angular Keycloak 应用程序在登录时出现无限重定向

Question

我的应用程序在第一次成功登录后经历了无限重定向。

我在浏览器中看到的网址是：

http://localhost:4200/#state=04e2f6b5-4998-473b-91fc-bc77c8482796&session_state=3ffbf15e-464a-4a6a-afe7-d82a8be58797&code=eyJhbGciOiJkaXIiLCJlbmMiOiJBMTI4Q0JDLUhTMjU2In0..abvyusExa2W6OSNnGosqpw.bKGSzVqZtc9ZxOgVEwmACOJ_zXdmdNsnzU1rbHOSlEhPVkqiJuQUjOHk2LHny7zC0qFqKI5BgdAeQjBJOyar-tkf2Jy-aYO4EBbZ1kkA2CPdqzJOmf3Y740LaqGP_GvaEuiTNRA50El3L9laVYmyEmEGbFXs9t5p7rr-juDG7itTTExoW92Dx4WuLwR_ocsrOG8U74ARpj_CuF6wXxOty3XoDHbKpddFTbLH48gOAdHK1Fj0FTh5rPk9kXCVVUlX.uxT-1uwvGKpBF1bLBi5BvA

使用Keycloak管理控制台，我创建了：

- a demo realm with the `demo-keycloak` id
- a demo-frontend client (openid-connect, public, root url http://localhost:4200, valid redirect uris /*, web origins http://localhost:4200)
- a demo-backend client (openid-connect, bearer-only)

我的应用程序正在使用 https://github.com/mauriciovigolo/keycloak-angular 依赖项。

我将其配置为：

export async function keycloakInitializer(keycloak: KeycloakService) {
  await keycloak.init({
    config: {
        url: 'http://localhost:8180/auth/',
        realm: 'demo',
        clientId: 'demo-frontend'
    },
    initOptions: {
        onLoad: 'login-required',
        checkLoginIframe: false
    },
    bearerExcludedUrls: [
      '/login',
    ]
  });
}

@NgModule({
  imports: [
    KeycloakAngularModule,
    HttpClientModule
  ],
  providers: [
    KeycloakClientService,
    AuthService,
    AuthGuardService,
    {
      provide: APP_INITIALIZER,
      useFactory: keycloakInitializer,
      multi: true,
      deps: [KeycloakService]
    }
  ]
})

我想知道在哪里配置demo-backend客户端。另外，如果需要两个客户端而不是一个，该怎么办...

编辑：我可以看到调试工具的网络选项卡显示了一个失败的请求，显示无法加载响应数据。

Request URL: http://localhost:8180/auth/realms/demo/protocol/openid-connect/token
Referrer Policy: no-referrer-when-downgrade
Request Headers
Provisional headers are shown
Content-type: application/x-www-form-urlencoded
Origin: http://localhost:4200
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36
Form Data
view source
view URL encoded
code: eyJhbGciOiJkaXIiLCJlbmMiOiJBMTI4Q0JDLUhTMjU2In0..Mn0FpnSHx-BYZm_8jNZAQQ.DI3Ph2nz6b43mHGWHFTvsL1414CpYC6eQK6E3rzK1D6t5eQ08IKTP2x57-cUnR9PNwLXPJbLeR1h_yqHp4hfE75TSBUrztu9Rg0PXqHh-S2FcHnTldUWLVnsJ57w-5eOGhlpMq1vUM9sUMxKmRksZi3eveGTQLZI2YDGhlGMO-gOELeyC1tbRMoejUxqU3qCZ48TME5VZjzcN0vkA9ifg482STg5sUdRePBpdxjAw07xCT855KnNVsOf7M2atqHU.HdVXW57ZeDtUEdS8XbR-Pg
grant_type: authorization_code
client_id: demo-frontend
redirect_uri: http://localhost:4200/?redirect_fragment=state%3D6d989fa7-30bd-4dd6-8834-d09ac5e3c1c1%26session_state%3D3710ad77-29f5-4e38-af47-083b7f318ace%26code%3DeyJhbGciOiJkaXIiLCJlbmMiOiJBMTI4Q0JDLUhTMjU2In0..U4fPpqwk4wg7a3AKAbiffA.yVZbYwQMJPAtsgvnvMVpc8zNwyBsPnl9XvX2WzDEmDZdYJGjUVpCRBWPn1OwY0xWpWUK3DsbD5n9ATeGVkwLNRt42pTuH0dgmhEMvSeuZ_nY4E2_MV_30Z9ElmsaaOmmuXm1AcrAKRl6uX1OjKwQAj4Rjqo0r6v6Cmv5FBrz3q3nsiUxXeUZpdDtkBuuUU-JFTOgD5taowQwxHjovpOJYMmddjq9RFwR-IhX3NnHl-Mh2smYoyjEMFhPYkKSNr-n.TkfNegnxHwKz62U_jAuOiQ

- Stephane

---

打开你的浏览器开发者工具（通常是F12）。你能在控制台或网络选项卡中看到正在发生的事情吗？ - Aritz

控制台显示 core.js:1448 ERROR TypeError: this.appInits[i] is not a function，网络显示一个失败的请求到 http://localhost:8180/auth/realms/demo/protocol/openid-connect/token，表示无法加载响应数据。 - Stephane

那么问题似乎是您的应用程序无法检索令牌。继续调试，您会发现缺少什么。 - Aritz

Answer 1

将你的初始化函数从以下代码改为：

export async function keycloakInitializer(keycloak: KeycloakService) {
  await keycloak.init({
   config: {
    url: 'http://localhost:8180/auth/',
    realm: 'demo',
    clientId: 'demo-frontend'
},
initOptions: {
    onLoad: 'login-required',
    checkLoginIframe: false
},
bearerExcludedUrls: [
  '/login',
]
  });
}

将它改成这样

export function keycloakInitializer(keycloak: KeycloakService): () => 
Promise<any> {
return () => 

             keycloak.init({
                config: {
                          url: 'http://localhost:8180/auth/',
                         realm: 'demo',
                         clientId: 'demo-frontend'
                  },
                     initOptions: {
                           onLoad: 'login-required',
                           checkLoginIframe: false
                         },
                    bearerExcludedUrls: [
                           '/login',
                           ]
                        }).catch((e) => {
                           console.log("Error thrown in init "+e)
                        });
              }

- Ricardo Thompson