From e6b94f1fdee7447c56e9a0b17b8691596d2afded Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Wed, 24 Jun 2020 16:23:07 +0200
Subject: [PATCH] Add separate attributes for the keycloak config
Now that we have a separate component for keyclaok we can move those
keycloak specific settings into their own attributes.
---
packages/auth/README.md | 16 ++++-----
packages/auth/src/auth-keycloak.js | 52 +++++++++++++-----------------
packages/auth/src/vpu-auth-demo.js | 2 +-
packages/auth/test/unit.js | 8 ++---
4 files changed, 33 insertions(+), 45 deletions(-)
diff --git a/packages/auth/README.md b/packages/auth/README.md
index cf45241f..67c756ae 100644
--- a/packages/auth/README.md
+++ b/packages/auth/README.md
@@ -7,7 +7,7 @@
### Usage
```html
-<vpu-auth-keycloak></vpu-auth-keycloak>
+<vpu-auth-keycloak url="https://auth.tugraz.at/auth" realm="tugraz" client-id="some-id"></vpu-auth-keycloak>
```
### Attributes
@@ -22,16 +22,14 @@
- `try-login` (optional, default: off): if enabled the a login will happen if the user is already logged in
and finishing the login process would not result in a page location change (reload/redirect).
- example `<vpu-auth-keycloak try-login></vpu-auth-keycloak>`
-- `keycloak-config`: An object which can contain the following keys: url, realm, clientId, silentCheckSsoRedirectUri
- - example `<vpu-auth-keycloak keycloak-config='{"url": "https://auth.tugraz.at/auth", "realm": "tugraz", "clientId": "some-id", "silentCheckSsoRedirectUri": "", "scope": ""}'></vpu-auth-keycloak>`
-### Keycloak Config
+### Keycloak Specific Attributes
-- `url`: The base URL of the Keycloak server
-- `realm`: The Keycloak realm
-- `clientId`: The Keycloak client to use
-- `silentCheckSsoRedirectUri`: URI or path to a separate page for checking the login session in an iframe, see https://www.keycloak.org/docs/latest/securing_apps/#_javascript_adapter
-- `scope`: Space separated list of scopes to request. These scopes get added in addition to the default ones, assuming the scope is in the optional scopes list of the Keycloak client in use.
+- `url` (required): The base URL of the Keycloak server
+- `realm` (required): The Keycloak realm
+- `client-id` (required): The Keycloak client to use
+- `silent-check-sso-redirect-uri` (optional): URI or path to a separate page for checking the login session in an iframe, see https://www.keycloak.org/docs/latest/securing_apps/#_javascript_adapter
+- `scope` (optional): Space separated list of scopes to request. These scopes get added in addition to the default ones, assuming the scope is in the optional scopes list of the Keycloak client in use.
### Events to listen to
diff --git a/packages/auth/src/auth-keycloak.js b/packages/auth/src/auth-keycloak.js
index 526d5125..85749938 100644
--- a/packages/auth/src/auth-keycloak.js
+++ b/packages/auth/src/auth-keycloak.js
@@ -34,9 +34,15 @@ export class AuthKeycloak extends LitElement {
this.tryLogin = false;
this.person = null;
this.entryPointUrl = commonUtils.getAPiUrl();
- this.keycloakConfig = null;
this._loginStatus = LoginStatus.UNKNOWN;
+ // Keycloak config
+ this.keycloakUrl = null;
+ this.realm = null;
+ this.clientId = null;
+ this.silentCheckSsoRedirectUri = null;
+ this.scope = null;
+
// Create the events
this.initEvent = new CustomEvent("vpu-auth-init", { "detail": "KeyCloak init event", bubbles: true, composed: true });
this.personInitEvent = new CustomEvent("vpu-auth-person-init", { "detail": "KeyCloak person init event", bubbles: true, composed: true });
@@ -157,50 +163,36 @@ export class AuthKeycloak extends LitElement {
tryLogin: { type: Boolean, attribute: 'try-login' },
loadPerson: { type: Boolean, attribute: 'load-person' },
entryPointUrl: { type: String, attribute: 'entry-point-url' },
- keycloakConfig: { type: Object, attribute: 'keycloak-config' },
name: { type: String, attribute: false },
token: { type: String, attribute: false },
subject: { type: String, attribute: false },
personId: { type: String, attribute: false },
person: { type: Object, attribute: false },
_loginStatus: { type: String, attribute: false },
+ keycloakUrl: { type: String, attribute: 'url' },
+ realm: { type: String },
+ clientId: { type: String, attribute: 'client-id' },
+ silentCheckSsoRedirectUri: { type: String, attribute: 'silent-check-sso-redirect-uri' },
+ scope: { type: String },
};
}
- _getScope() {
- if (this.keycloakConfig !== null) {
- return this.keycloakConfig.scope || "";
- }
- return "";
- }
-
connectedCallback() {
super.connectedCallback();
- this._bus = new EventBus();
+ if (!this.keycloakUrl)
+ throw Error("url not set");
+ if (!this.realm)
+ throw Error("realm not set");
+ if (!this.clientId)
+ throw Error("client-id not set");
- // Keycloak config
- let baseURL = '';
- let realm = '';
- let clientId = '';
- let silentCheckSsoRedirectUri = '';
- if (this.keycloakConfig !== null) {
- baseURL = this.keycloakConfig.url || baseURL;
- realm = this.keycloakConfig.realm || realm;
- clientId = this.keycloakConfig.clientId || clientId;
- silentCheckSsoRedirectUri = this.keycloakConfig.silentCheckSsoRedirectUri || silentCheckSsoRedirectUri;
- }
- if (!baseURL || !realm || !clientId) {
- throw Error("Keycloak config not set");
- }
-
- this._kcwrapper = new KeycloakWrapper(baseURL, realm, clientId, silentCheckSsoRedirectUri);
+ this._bus = new EventBus();
+ this._kcwrapper = new KeycloakWrapper(this.keycloakUrl, this.realm, this.clientId, this.silentCheckSsoRedirectUri);
this._kcwrapper.addEventListener('changed', this._onKCChanged);
-
-
this._bus.subscribe('auth-login', () => {
- this._kcwrapper.login({lang: this.lang, scope: this._getScope()});
+ this._kcwrapper.login({lang: this.lang, scope: this.scope || ''});
});
this._bus.subscribe('auth-logout', () => {
@@ -220,7 +212,7 @@ export class AuthKeycloak extends LitElement {
const handleLogin = async () => {
if (this.forceLogin || this._kcwrapper.isLoggingIn()) {
this._setLoginStatus(LoginStatus.LOGGING_IN);
- await this._kcwrapper.login({lang: this.lang, scope: this._getScope()});
+ await this._kcwrapper.login({lang: this.lang, scope: this.scope || ''});
} else if (this.tryLogin) {
this._setLoginStatus(LoginStatus.LOGGING_IN);
await this._kcwrapper.tryLogin();
diff --git a/packages/auth/src/vpu-auth-demo.js b/packages/auth/src/vpu-auth-demo.js
index 7184a5c2..a99e9187 100644
--- a/packages/auth/src/vpu-auth-demo.js
+++ b/packages/auth/src/vpu-auth-demo.js
@@ -90,7 +90,7 @@ class AuthDemo extends ScopedElementsMixin(LitElement) {
<h1 class="title">Auth-Demo</h1>
</div>
<div class="container">
- <vpu-auth-keycloak lang="${this.lang}" keycloak-config='{"url": "https://auth-dev.tugraz.at/auth", "realm": "tugraz", "clientId": "auth-dev-mw-frontend-local", "silentCheckSsoRedirectUri": "${silentCheckSsoUri}", "scope": "optional-test-scope"}' load-person try-login></vpu-auth-keycloak>
+ <vpu-auth-keycloak lang="${this.lang}" url="https://auth-dev.tugraz.at/auth" realm="tugraz" client-id="auth-dev-mw-frontend-local" silent-check-sso-redirect-uri="${silentCheckSsoUri}" scope="optional-test-scope" load-person try-login></vpu-auth-keycloak>
<vpu-login-button lang="${this.lang}" show-image></vpu-login-button>
</div>
diff --git a/packages/auth/test/unit.js b/packages/auth/test/unit.js
index 66066214..1ccba94d 100644
--- a/packages/auth/test/unit.js
+++ b/packages/auth/test/unit.js
@@ -8,11 +8,9 @@ suite('vpu-auth basics', () => {
suiteSetup(async () => {
node = document.createElement('vpu-auth-keycloak');
- node.setAttribute('keycloak-config', JSON.stringify({
- url: 'url',
- realm: 'realm',
- clientId: 'clientId',
- }));
+ node.setAttribute('url', 'someurl');
+ node.setAttribute('realm', 'somerealm');
+ node.setAttribute('client-id', 'someId');
document.body.appendChild(node);
await node.updateComplete;
});
--
GitLab