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

@@ -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
 

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

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>

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