登录我的angular keycloak应用程序时无限重定向

时间:2018-04-22 20:21:05

标签: angular keycloak

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

我在浏览器中可以看到的网址是:

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

1 个答案:

答案 0 :(得分:0)

从以下位置更改您的init函数

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)
                        });
              }