离子应用程序的Keycloak:带有cordova-native的keycloak-js不起作用

我将解决方案发布在这里，因为我浪费了大量时间来获取适用于我的环境的可用插件. keycloak-js提供的实现已经过时了.因此，如果您尝试将其用于ionic-3应用程序，则它将无法正常工作.

I am posting my solution here, since I wasted a lot of time getting available plugin working for my environments. The implementation provided by keycloak-js is fairly outdated. So if you try to use it for an ionic-3 app, it just doesn't work.

我要使用此方法的解决方案是使用InAppBrowser插件(类似于keycloak-js的cordova方法)并遵循标准的Oauth2 authorization_code过程.我查看了keycloak-js的代码，并基于该代码实现了解决方案.还要感谢keycloak-js.

My solution to get this working is using InAppBrowser plugin (similar to cordova approach of keycloak-js) and follow standard Oauth2 authorization_code procedure. I had a look into the code of keycloak-js and implemented solution based on it. Thanks to keycloak-js too.

是的. 步骤1:安装[cordova-inapp-browser][1].

Here it is. Step1: Install [cordova-inapp-browser][1].

Step2:示例keycloak-auth.service.ts可能如下所示.这可能会替换keycloak-js，但仅用于cordova选项.

Step2: A sample keycloak-auth.service.ts could look like below. This could potentially replace keycloak-js, but only for cordova option.

import 'rxjs/add/operator/toPromise'

import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http'
import {Injectable} from '@angular/core'
import {JwtHelperService} from '@auth0/angular-jwt'
import {StorageService} from '../../../core/services/storage.service'
import {StorageKeys} from '../../../shared/enums/storage'
import {InAppBrowser, InAppBrowserOptions} from '@ionic-native/in-app-browser';


const uuidv4 = require('uuid/v4');

@Injectable()
export class AuthService {
  URI_base: 'https://my-server-location/auth';
  keycloakConfig: any;

  constructor(
    public http: HttpClient,
    public storage: StorageService,
    private jwtHelper: JwtHelperService,
    private inAppBrowser: InAppBrowser,
  ) {
      this.keycloakConfig = {
        authServerUrl: 'https://my-server-location/auth/', //keycloak-url
        realm: 'myrealmmName', //realm-id
        clientId: 'clientId', // client-id
        redirectUri: 'http://my-demo-app/callback/',  //callback-url registered for client.
                                                      // This can be anything, but should be a valid URL
      };
  }

  public keycloakLogin(login: boolean): Promise<any> {
    return new Promise((resolve, reject) => {
      const url = this.createLoginUrl(this.keycloakConfig, login);

      const options: InAppBrowserOptions = {
        zoom: 'no',
        location: 'no',
        clearsessioncache: 'yes',
        clearcache: 'yes'
      }
      const browser = this.inAppBrowser.create(url, '_blank', options);

      const listener = browser.on('loadstart').subscribe((event: any) => {
        const callback = encodeURI(event.url);
        //Check the redirect uri
        if (callback.indexOf(this.keycloakConfig.redirectUri) > -1) {
          listener.unsubscribe();
          browser.close();
          const code = this.parseUrlParamsToObject(event.url);
          this.getAccessToken(this.keycloakConfig, code).then(
            () => {
              const token = this.storage.get(StorageKeys.OAUTH_TOKENS);
              resolve(token);
            },
            () => reject("Count not login in to keycloak")
          );
        }
      });

    });
  }

  parseUrlParamsToObject(url: any) {
    const hashes = url.slice(url.indexOf('?') + 1).split('&');
    return hashes.reduce((params, hash) => {
      const [key, val] = hash.split('=');
      return Object.assign(params, {[key]: decodeURIComponent(val)})
    }, {});
  }

  createLoginUrl(keycloakConfig: any, isLogin: boolean) {
    const state = uuidv4();
    const nonce = uuidv4();
    const responseMode = 'query';
    const responseType = 'code';
    const scope = 'openid';
    return this.getUrlForAction(keycloakConfig, isLogin) +
      '?client_id=' + encodeURIComponent(keycloakConfig.clientId) +
      '&state=' + encodeURIComponent(state) +
      '&redirect_uri=' + encodeURIComponent(keycloakConfig.redirectUri) +
      '&response_mode=' + encodeURIComponent(responseMode) +
      '&response_type=' + encodeURIComponent(responseType) +
      '&scope=' + encodeURIComponent(scope) +
      '&nonce=' + encodeURIComponent(nonce);
  }

  getUrlForAction(keycloakConfig: any, isLogin: boolean) {
    return isLogin ? this.getRealmUrl(keycloakConfig) + '/protocol/openid-connect/auth'
      : this.getRealmUrl(keycloakConfig) + '/protocol/openid-connect/registrations';
  }

  loadUserInfo() {
    return this.storage.get(StorageKeys.OAUTH_TOKENS).then( tokens => {
      const url = this.getRealmUrl(this.keycloakConfig) + '/protocol/openid-connect/userinfo';
      const headers = this.getAccessHeaders(tokens.access_token, 'application/json');
      return this.http.get(url, {headers: headers}).toPromise();
    })
  }

  getAccessToken(kc: any, authorizationResponse: any) {
    const URI = this.getTokenUrl();
    const body = this.getAccessTokenParams(authorizationResponse.code, kc.clientId, kc.redirectUri);
    const headers = this.getTokenRequestHeaders();

    return this.createPostRequest(URI,  body, {
      header: headers,
    }).then((newTokens: any) => {
      newTokens.iat = (new Date().getTime() / 1000) - 10; // reduce 10 sec to for delay
      this.storage.set(StorageKeys.OAUTH_TOKENS, newTokens);
    });
  }

  refresh() {
    return this.storage.get(StorageKeys.OAUTH_TOKENS)
      .then(tokens => {
        const decoded = this.jwtHelper.decodeToken(tokens.access_token)
        if (decoded.iat + tokens.expires_in < (new Date().getTime() /1000)) {
          const URI = this.getTokenUrl();
          const headers = this.getTokenRequestHeaders();
          const body = this.getRefreshParams(tokens.refresh_token, this.keycloakConfig.clientId);
          return this.createPostRequest(URI, body, {
            headers: headers
          })
        } else {
          return tokens
        }
      })
      .then(newTokens => {
        newTokens.iat = (new Date().getTime() / 1000) - 10;
        return this.storage.set(StorageKeys.OAUTH_TOKENS, newTokens)
      })
      .catch((reason) => console.log(reason))
  }

  createPostRequest(uri, body, headers) {
    return this.http.post(uri, body, headers).toPromise()
  }

  getAccessHeaders(accessToken, contentType) {
    return new HttpHeaders()
      .set('Authorization', 'Bearer ' + accessToken)
      .set('Content-Type', contentType);
  }

  getRefreshParams(refreshToken, clientId) {
    return new HttpParams()
      .set('grant_type', 'refresh_token')
      .set('refresh_token', refreshToken)
      .set('client_id', encodeURIComponent(clientId))
  }

  getAccessTokenParams(code , clientId, redirectUrl) {
    return new HttpParams()
      .set('grant_type', 'authorization_code')
      .set('code', code)
      .set('client_id', encodeURIComponent(clientId))
      .set('redirect_uri', redirectUrl);
  }

  getTokenUrl() {
    return this.getRealmUrl(this.keycloakConfig) + '/protocol/openid-connect/token';
  }

  getTokenRequestHeaders() {
    const headers = new HttpHeaders()
      .set('Content-Type', 'application/x-www-form-urlencoded');

    const clientSecret = (this.keycloakConfig.credentials || {}).secret;
    if (this.keycloakConfig.clientId && clientSecret) {
      headers.set('Authorization', 'Basic ' + btoa(this.keycloakConfig.clientId + ':' + clientSecret));
    }
    return headers;
  }

  getRealmUrl(kc: any) {
    if (kc && kc.authServerUrl) {
      if (kc.authServerUrl.charAt(kc.authServerUrl.length - 1) == '/') {
        return kc.authServerUrl + 'realms/' + encodeURIComponent(kc.realm);
      } else {
        return kc.authServerUrl + '/realms/' + encodeURIComponent(kc.realm);
      }
    } else {
      return undefined;
    }
  }
}

第3步:然后您就可以在组件中使用此服务了.

Step 3: Then you can use this service in your components to what is necessary.

@Component({
  selector: 'page-enrolment',
  templateUrl: 'enrolment-page.component.html'
})
export class EnrolmentPageComponent {
constructor(
    public storage: StorageService,
    private authService: AuthService,
  ) {}
  goToRegistration() {
    this.loading = true;
    this.authService.keycloakLogin(false)
      .then(() => {
        return this.authService.retrieveUserInformation(this.language)
      });
  }
}

注意:keycloakLogin(true)带您进入登录页面，或者keycloakLogin(false)带您进入keycloak的注册页面.

Note: keycloakLogin(true) takes you to login page or keycloakLogin(false) takes you to registration page of keycloak.

我希望这可以帮助您或多或少地解决它.

I hope this helps you solve it more or less.