Question

使用Keycloak-js（版本：4.0.0）在Angular4中创建会话时，SSO无法正常工作

以下是重新创建

的步骤

将Keycloak与Angular 4应用程序集成（例如：https://github.com/mauriciovigolo/keycloak-angular或https://github.com/cternes/slackspace-angular2-spring-keycloak/tree/master/frontend）
当用户尝试登录时，他会自动重定向到Keycloak登录页面
创建会话后，尝试使用Keycloak或Jenkins登录其他应用程序，如Grafana
太多重定向（Keycloak在端口8081中运行，Grafana在3000中运行）

请求网址：

http://localhost:8081/auth/realms/angular_keycloak/protocol/openid-connect/auth?access_type=online&client_id=client-ui&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Flogin%2Fgeneric_oauth&response_type=code&scope=read+write&state=wWXu1iyWXtSevSxwCFzWHPZ7oPM63Dbu5AoMBTMdjHE%3D

回复网址：

http://localhost:3000/login/generic_oauth#state=wWXu1iyWXtSevSxwCFzWHPZ7oPM63Dbu5AoMBTMdjHE%3D&session_state=6ec8255b-ed4c-4399-951c-0241ce7bebad&code=eyJhbGciOiJkaXIiLCJlbmMiOiJBMTI4Q0JDLUhTMjU2In0..lvjHquloACY0fTMxmOLeYQ.82mSmzkn4HJBSnokMEpqnZw-xkhUrKy9icZAUwVOrh8b4MP9F-8qmH42rrg0O_axTZVJYlozwWA4x9V2dQAIbi2cUgKJlsiNfJllcN8luK4PSwqOe2bp6WtMszvIeU30UW8RXVqf46hstf1dTxWZp-wocChwLaqATNqZD61u-AURLz6ItY8DQxd3hwScR1kJhfu8bJBR_Pcnbt8LIGl_nKOdaGfceoDFpBfOqGuy1AtQ-3QUwvNkBMZCSGVBYQLB.fSMESQYQKVWZfpbR1Rw47A

尝试了选项：

Angular4＆amp;詹金斯
Angular4＆amp; Grafana

以下步骤适用

直接登录Grafana或Jenkins或KeyCloak
然后登录Angular 4，它可以正常工作

由于我可以单独登录这些应用程序，因此SSO可以在Grafana＆amp;詹金斯，我倾向于相信这个问题可能与Keycloak-Js适配器有关。

以下是我用来创建会话

  const keycloakAuth: any = Keycloak({
            url: environment.KEYCLOAK_URL,
            realm: environment.KEYCLOAK_REALM,
            clientId: environment.KEYCLOAK_CLIENTID,
            'ssl-required': 'external',
            'public-client': true,
        });

Answer 1

最终，我使用Angular-OIDC库（隐式流）https://github.com/manfredsteyer/angular-oauth2-oidc

实现了SSO功能

 private configureWithNewConfigApi() {
 // URL of the SPA to redirect the user to after login
    this.oauthService.redirectUri = window.location.origin + "/index.html";

    // set the scope for the permissions the client should request
    this.oauthService.scope = "openid profile email";

    // set to true, to receive also an id_token via OpenId Connect (OIDC) in addition to the
    // OAuth2-based access_token
    this.oauthService.oidc = true;

    // Use setStorage to use sessionStorage or another implementation of the TS-type Storage
    // instead of localStorage
    this.oauthService.setStorage(sessionStorage);

    this.oauthService.clientId = "<<clientId>>";
    let url = 'https://<<keycloakhost>>:<<port>>/auth/realms/<<realmsname>>/.well-known/openid-configuration';
    this.oauthService.loadDiscoveryDocument(url).then((doc) => {
        // This method just tries to parse the token within the url when
        // the auth-server redirects the user back to the web-app
        // It dosn't initiate the login
        this.oauthService.tryLogin({});      
        console.debug('discovery succeeded', doc);

    });

感谢Jan Garag的suggestion

Keycloak SSO - 重定向太多

1 个答案: