diff --git a/package.json b/package.json index b06679991bd11fcf25dbb7e0f1ef5986e2a2a1bf..45da5415fb864aa887bee48076a1964c8e6be4ee 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ }, "scripts": { "start": "react-scripts start", + "startHTTPS": "HTTPS=true react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", diff --git a/public/index.html b/public/index.html index dd172158746c1c6a64bd030dc00ee0ab7f45c857..7f0865ce4253fcf744735fc958f2c41579992d56 100644 --- a/public/index.html +++ b/public/index.html @@ -28,6 +28,7 @@ <title>Neurorobotics Platform</title> </head> <body> + <script src="https://iam.ebrains.eu/auth/js/keycloak.js"></script> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <!-- diff --git a/src/App.js b/src/App.js index 912bb6f62b55a93a3bbc93a71f6582b87a5f7817..9ccfbf3c09cc13b824852c617cfbb4620423426b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ import React from 'react'; -import { HashRouter, Switch, Route } from 'react-router-dom'; +import { BrowserRouter, Switch, Route } from 'react-router-dom'; import EntryPage from './components/entry-page/entry-page'; import ErrorDialog from './components/dialog/error-dialog.js'; @@ -14,13 +14,13 @@ class App extends React.Component { <div> <ErrorDialog /> <NotificationDialog/> - <HashRouter> + <BrowserRouter> <Switch> <Route path='/experiments-overview' component={ExperimentOverview} /> <Route path='/simulation-view/:serverIP/:simulationID' component={SimulationView} /> <Route path='/' component={EntryPage} /> </Switch> - </HashRouter> + </BrowserRouter> </div> ); } diff --git a/src/services/authentication-service.js b/src/services/authentication-service.js index 53eaf6864fa63b584c1159094f85265b92fca023..11e40694d38385f3a4a47f10a68226b51527fe20 100644 --- a/src/services/authentication-service.js +++ b/src/services/authentication-service.js @@ -1,5 +1,12 @@ import config from '../config.json'; +/* global Keycloak */ + +let keycloakClient = undefined; + +const INIT_CHECK_INTERVAL_MS = 100; +const INIT_CHECK_MAX_RETRIES = 10; + let _instance = null; const SINGLETON_ENFORCER = Symbol(); @@ -12,11 +19,13 @@ class AuthenticationService { throw new Error('Use ' + this.constructor.name + '.instance'); } - this.CLIENT_ID = config.auth.clientId; - this.STORAGE_KEY = `tokens-${this.CLIENT_ID}@https://services.humanbrainproject.eu/oidc`; - this.PROXY_URL = config.api.proxy.url; + this.proxyURL = config.api.proxy.url; + this.oidcEnabled = config.auth.enableOIDC; + this.clientId = config.auth.clientId; + this.authURL = config.auth.url; + this.STORAGE_KEY = `tokens-${this.clientId}@https://iam.ebrains.eu/auth/realms/hbp`; - this.checkForNewTokenToStore(); + this.init(); } static get instance() { @@ -27,44 +36,122 @@ class AuthenticationService { return _instance; } - /** - * Checks if the current page URL contains access tokens. - * This happens when the successfully logging in at the proxy login page and - * being redirected back with the token info. - * Will automatically remove additional access info and present a clean URL after being redirected. - */ - checkForNewTokenToStore() { - const path = window.location.href; - const accessTokenMatch = /&access_token=([^&]*)/.exec(path); + init() { + this.initialized = false; + if (this.oidcEnabled) { + this.authCollab().then(() => { + this.initialized = true; + }); + } + else { + this.checkForNewLocalTokenToStore(); + this.initialized = true; + } + + this.promiseInitialized = new Promise((resolve, reject) => { + let numChecks = 0; + let checkInterval = setInterval(() => { + numChecks++; + if (numChecks > INIT_CHECK_MAX_RETRIES) { + clearInterval(checkInterval); + reject(); + } + if (this.initialized) { + clearInterval(checkInterval); + resolve(); + } + }, INIT_CHECK_INTERVAL_MS); + }); + } + + authenticate(config) { + if (this.oidcEnabled) { + this.authCollab(config); + } + else { + this.authLocal(config); + } + } + + getToken() { + if (this.oidcEnabled) { + if (keycloakClient && keycloakClient.authenticated) { + keycloakClient + .updateToken(30) + .then(function() {}) + .catch(function() { + console.error('Failed to refresh token'); + }); + return keycloakClient.token; + } + else { + console.error('getToken() - Client is not authenticated'); + } + } + else { + return this.getStoredLocalToken(); + } + } + + logout() { + if (this.oidcEnabled) { + if (keycloakClient && keycloakClient.authenticated) { + keycloakClient.logout(); + keycloakClient.clearStoredLocalToken(); + } + else { + console.error('Client is not authenticated'); + } + } + else { + return this.clearStoredLocalToken(); + } + } + + authLocal(config) { + if (this.authenticating) { + return; + } + this.authenticating = true; + + this.authURL = this.authURL || config.url; + this.clientId = this.clientId || config.clientId; + + let absoluteUrl = /^https?:\/\//i; + if (!absoluteUrl.test(this.authURL)) { + this.authURL = `${this.proxyURL}${this.authURL}`; + } + + this.clearStoredLocalToken(); + window.location.href = `${this.authURL}&client_id=${this + .clientId}&redirect_uri=${encodeURIComponent(window.location.href)}`; + } + checkForNewLocalTokenToStore() { + const path = window.location.pathname; + + const accessTokenMatch = /&access_token=([^&]*)/.exec(path); if (!accessTokenMatch || !accessTokenMatch[1]) { return; } let accessToken = accessTokenMatch[1]; - localStorage.setItem( this.STORAGE_KEY, //eslint-disable-next-line camelcase JSON.stringify([{ access_token: accessToken }]) ); - const pathMinusAccessToken = path.substr(0, path.indexOf('&access_token=')); - window.location.href = pathMinusAccessToken; + + // navigate to clean url + let cleanedPath = path.substr(0, path.indexOf('&')); + window.location = cleanedPath; } - /** - * Clear currently stored access token. - */ - clearStoredToken() { + clearStoredLocalToken() { localStorage.removeItem(this.STORAGE_KEY); } - /** - * Get the stored access token. - * - * @return token The stored access token. Or strings identifying 'no-token' / 'malformed-token'. - */ - getStoredToken() { + getStoredLocalToken() { let storedItem = localStorage.getItem(this.STORAGE_KEY); if (!storedItem) { // this token will be rejected by the server and the client will get a proper auth error @@ -77,31 +164,63 @@ class AuthenticationService { } catch (e) { // this token will be rejected by the server and the client will get a proper auth error - return AuthenticationService.CONSTANTS.MALFORMED_TOKEN; + return 'malformed-token'; } } - /** - * Opens the proxy's authentication page. - * - * @param {*} url The URL of the authentication page. - * If not an absolute URL it is assumed to be a subpage of the proxy. - */ - openAuthenticationPage(url) { - this.clearStoredToken(); - - let absoluteUrl = /^https?:\/\//i; - if (!absoluteUrl.test(url)) { - url = `${this.PROXY_URL}${url}`; + authCollab(config) { + if (this.authenticating) { + return; } - window.location.href = `${url}&client_id=${ - this.CLIENT_ID - }&redirect_uri=${encodeURIComponent(window.location.href)}`; + this.authenticating = true; + + return new Promise(resolve => { + this.authURL = this.authURL || config.url; + + this.initKeycloakClient().then(() => { + if (!keycloakClient.authenticated) { + // User is not authenticated, run login + keycloakClient + .login({ scope: 'openid profile email group' }) + .then(() => { + resolve(true); + }); + } + else { + keycloakClient.loadUserInfo().then(userInfo => { + this.userInfo = userInfo; + resolve(true); + }); + } + }); + }); + } + + initKeycloakClient() { + return new Promise(resolve => { + keycloakClient = Keycloak({ + realm: 'hbp', + clientId: this.clientId, + //'public-client': true, + 'confidential-port': 0, + url: this.authURL, + redirectUri: window.location.href // 'http://localhost:9001/#/esv-private' // + }); + + keycloakClient + .init({ + flow: 'hybrid' /*, responseMode: 'fragment'*/ + }) + .then(() => { + resolve(keycloakClient); + }); + }); } } AuthenticationService.CONSTANTS = Object.freeze({ - MALFORMED_TOKEN: 'malformed-token' + MALFORMED_TOKEN: 'malformed-token', + NO_TOKEN: 'no-token' }); export default AuthenticationService; diff --git a/src/services/experiments/files/experiment-storage-service.js b/src/services/experiments/files/experiment-storage-service.js index 8d6326388acea05cc17ed61d00daeb35c439b230..ac20e1a442fb67f751a645406d7390bc3425e2f0 100644 --- a/src/services/experiments/files/experiment-storage-service.js +++ b/src/services/experiments/files/experiment-storage-service.js @@ -253,13 +253,11 @@ class ExperimentStorageService extends HttpService { async setFile(directoryPath, filename, data, byname = true, contentType = 'text/plain') { let directory = directoryPath.replaceAll('/', '%2F'); const url = new URL(`${config.api.proxy.url}${endpoints.proxy.storage.url}/${directory}/${filename}`); - //console.info(url); url.searchParams.append('byname', byname); let requestOptions = { ...this.POSTOptions, ...{ headers: { 'Content-Type': contentType } } }; - //console.info(requestOptions); if (contentType === 'text/plain') { return this.httpRequestPOST(url, data, requestOptions); diff --git a/src/services/http-service.js b/src/services/http-service.js index 28c898193548fb623208b338982bc385f825650c..56ae7299cdd552ebf80e5fb2dbbf002cdf7efdf2 100644 --- a/src/services/http-service.js +++ b/src/services/http-service.js @@ -1,7 +1,7 @@ import { EventEmitter } from 'events'; -import AuthenticationService from './authentication-service.js'; +import AuthenticationService from './authentication-service'; /** * Base class that performs http requests with default request options. @@ -44,7 +44,9 @@ export class HttpService extends EventEmitter { */ performRequest = async (url, options, data) => { // Add authorization header - options.headers.Authorization = `Bearer ${AuthenticationService.instance.getStoredToken()}`; + await AuthenticationService.instance.promiseInitialized; + let token = AuthenticationService.instance.getToken(); + options.headers.Authorization = 'Bearer ' + token; if (data) { options.body = data; } @@ -54,8 +56,7 @@ export class HttpService extends EventEmitter { // error handling if (!response.ok) { if (response.status === 477) { - const responseText = await response.text(); - AuthenticationService.instance.openAuthenticationPage(responseText); + AuthenticationService.instance.authenticate(); } else if (response.status === 478) { //TODO: redirect to maintenance page diff --git a/src/services/proxy/nrp-user-service.js b/src/services/proxy/nrp-user-service.js index 9801ef00e73d8fb9f06f8a02e86b0c82d1abb9b6..08b6af6c3a631eea8eb8aea64c04705c05230553 100644 --- a/src/services/proxy/nrp-user-service.js +++ b/src/services/proxy/nrp-user-service.js @@ -61,7 +61,10 @@ class NrpUserService extends HttpService { */ async getCurrentUser() { if (!this.currentUser) { - this.currentUser = await (await this.httpRequestGET(IDENTITY_ME_URL)).json(); + let responseIdentity = await this.httpRequestGET(IDENTITY_ME_URL); + if (responseIdentity.ok) { + this.currentUser = await responseIdentity.json(); + } } return this.currentUser; diff --git a/src/services/roslib-service.js b/src/services/roslib-service.js index ad6c36403074c73ea426d46077f1c4a87a7679c2..fb47207692ae0a73d3fb7cd02a291a6e988ebdac 100644 --- a/src/services/roslib-service.js +++ b/src/services/roslib-service.js @@ -1,7 +1,7 @@ import * as ROSLIB from 'roslib'; import _ from 'lodash'; -import AuthenticationService from './authentication-service.js'; +import AuthenticationService from './authentication-service'; let _instance = null; const SINGLETON_ENFORCER = Symbol(); @@ -32,7 +32,7 @@ class RoslibService { */ getConnection(url) { if (!this.connections.has(url)) { - let urlWithAuth = url + '?token=' + AuthenticationService.instance.getStoredToken(); + let urlWithAuth = url + '?token=' + AuthenticationService.instance.getToken(); this.connections.set(url, new ROSLIB.Ros({ url: urlWithAuth })); }