Add option to pass a list of optional scopes to vpu-auth

These scopes get used for the keycloak login and in case they are registered
as optional scopes for that client get added to the access token.

See #7

packages/auth/README.md

@@ -21,7 +21,15 @@
   and finishing the login process would not result in a page location change (reload/redirect).
     - example `<vpu-auth try-login></vpu-auth>`
 - `keycloak-config`: An object which can contain the following keys: url, realm, clientId, silentCheckSsoRedirectUri
-    - example `<vpu-auth  keycloak-config='{"url": "https://auth.tugraz.at/auth", "realm": "tugraz", "clientId": "some-id", "silentCheckSsoRedirectUri": ""}'></vpu-auth>`
+    - example `<vpu-auth  keycloak-config='{"url": "https://auth.tugraz.at/auth", "realm": "tugraz", "clientId": "some-id", "silentCheckSsoRedirectUri": "", "scope": ""}'></vpu-auth>`
+
+## Keycloak Config
+
+- `url`: The base URL of the Keycloak server
+- `realm`: The Keycloak realm
+- `clientId`: The Keycloak client to use
+- `silentCheckSsoRedirectUri`: URI 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.
 
 ## Events to listen to
 

packages/auth/src/keycloak.js

@@ -143,11 +143,13 @@ export class KeycloakWrapper extends EventTarget {
 
         options = options || {};
         const language = options['lang'] || 'en';
+        const scope = options['scope'] || '';
 
         if (!this._keycloak.authenticated) {
             await this._keycloak.login({
                 kcLocale: language,  // Keycloak < 9.0
                 locale: language,
+                scope: scope,
             });
         }
     }

packages/auth/src/vpu-auth-demo.js

@@ -78,7 +78,7 @@ class AuthDemo extends LitElement {
                     <h1 class="title">Auth-Demo</h1>
                 </div>
                 <div class="container">
-                    <vpu-auth lang="${this.lang}" keycloak-config='{"silentCheckSsoRedirectUri": "${silentCheckSsoUri}"}' load-person try-login></vpu-auth>
+                    <vpu-auth lang="${this.lang}" keycloak-config='{"silentCheckSsoRedirectUri": "${silentCheckSsoUri}", "scope": "optional-test-scope"}' load-person try-login></vpu-auth>
                 </div>
             </section>
 

packages/auth/src/vpu-auth.js

@@ -178,6 +178,13 @@ class VPUAuth extends VPULitElement {
         };
     }
 
+    _getScope() {
+        if (this.keycloakConfig !== null) {
+            return this.keycloakConfig.scope || "";
+        }
+        return "";
+    }
+
     connectedCallback() {
         super.connectedCallback();
 
@@ -202,7 +209,7 @@ class VPUAuth extends VPULitElement {
         const handleLogin = async () => {
             if (this.forceLogin || this._kcwrapper.isLoggingIn()) {
                 this._setLoginStatus(LoginStatus.LOGGING_IN);
-                await this._kcwrapper.login({lang: this.lang});
+                await this._kcwrapper.login({lang: this.lang, scope: this._getScope()});
             } else if (this.tryLogin) {
                 this._setLoginStatus(LoginStatus.LOGGING_IN);
                 await this._kcwrapper.tryLogin();
@@ -245,7 +252,7 @@ class VPUAuth extends VPULitElement {
     }
 
     onLoginClicked(e) {
-        this._kcwrapper.login({lang: this.lang});
+        this._kcwrapper.login({lang: this.lang, scope: this._getScope()});
         e.preventDefault();
     }