Merge branch 'feature-oidc-expiration' into develop

config/dev.env.js

@@ -4,12 +4,17 @@ const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
+  OIDC_CLIENT_ID: '"174626"',
   API_STEERING: '"http://127.0.0.1:8000/api/v1/"',
   API_STEERING_SHOWS: '"http://127.0.0.1:8000/api/v1/shows/"',
   // OIDC endpoint of the pv/steering module
   API_STEERING_OIDC_URI: '"http://localhost:8000/openid"',
-  // local callback handler that is called by the pv/steering OIDC module after login
+  // number of seconds before token gets invalid, when renewal should be started
+  API_STEERING_OIDC_EXPIRE_NOTIFICATION: '120',
+  // local callback handlers that are called by the pv/steering OIDC module after login/renwal
   API_STEERING_OIDC_REDIRECT_URI: '"http://localhost:8080/static/oidc_callback.html"',
+  API_STEERING_OIDC_REDIRECT_URI_SILENT: '"http://localhost:8080/static/oidc_callback_silentRenew.html"',
+  API_STEERING_OIDC_REDIRECT_URI_POPUP: '"http://localhost:8080/static/oidc_callback_popupRenew.html"',
   // address that is called by the pv/steering OIDC module after logout - should be the dashboard entry point
   API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT: '"http://localhost:8080"'
 })

src/App.vue

@@ -38,15 +38,19 @@ export default {
         name: '',
         email: '',
         access_token: '',
+        expires_at: 0,
         logged_in: false
       },
       userOIDC: null,
-      mgr: new oidc.UserManager({
+      oidcmgr: new oidc.UserManager({
         userStore: new oidc.WebStorageStateStore(),
         authority: process.env.API_STEERING_OIDC_URI,
-        client_id: '174626',
+        // the client id has to be a string, therefore we add the + ''
+        client_id: process.env.OIDC_CLIENT_ID,
         redirect_uri: process.env.API_STEERING_OIDC_REDIRECT_URI,
-        // redirect_uri: process.env.API_STEERING_OIDC_REDIRECT_URI,
+        silent_redirect_uri: 'http://localhost:8080/static/oidc_callback_silentRenew.html',
+        popup_redirect_uri: 'http://localhost:8080/static/oidc_callback_popupRenew.html',
+        accessTokenExpiringNotificationTime: process.env.API_STEERING_OIDC_EXPIRE_NOTIFICATION,
         response_type: 'id_token token',
         scope: 'openid profile email',
         post_logout_redirect_uri: process.env.API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT,
@@ -62,41 +66,67 @@ export default {
   },
   methods: {
     signIn () {
-      this.mgr.signinRedirect().catch(function (err) {
+      this.oidcmgr.signinRedirect().catch(function (err) {
         console.log(err)
       })
     },
     signOut () {
       let self = this
-      this.mgr.signoutRedirect().then(function (resp) {
+      this.oidcmgr.signoutRedirect().then(function (resp) {
         self.user.logged_in = false
         console.log('signed out', resp)
       }).catch(function (err) {
         console.log(err)
       })
     },
-    getUser () {
+    getOIDCUser () {
       let self = this
-      this.mgr.getUser().then(function (u) {
-        if (u == null) {
+      this.oidcmgr.getUser().then(function (user) {
+        if (user == null) {
           self.user.logged_in = false
           self.user.name = ''
           self.user.email = ''
           self.user.access_token = ''
         } else {
-          self.userOIDC = u
-          self.user.logged_in = true
-          self.user.name = u.profile.nickname
-          self.user.email = u.profile.email
-          self.user.access_token = u.access_token
+          // TODO: check user.expires_at
+          // if token already expired try to get a new one or mark the user as logged out
+          self.setUserProperties(user)
         }
       }).catch(function (err) {
         console.log(err)
       })
+    },
+    setUserProperties (user) {
+      this.userOIDC = user
+      this.user.logged_in = true
+      this.user.name = user.profile.nickname
+      this.user.email = user.profile.email
+      this.user.access_token = user.access_token
+      // TODO: remove debug info after thorough testing
+      console.log(new Date(user.expires_at * 1000).toString())
+      console.log(new Date(user.expires_at * 1000).toUTCString())
+      console.log(user.access_token)
     }
   },
   mounted () {
-    this.getUser()
+    // TODO: remove oidc logging after thorough testing
+    oidc.Log.logger = console
+    let self = this
+    this.oidcmgr.events.addAccessTokenExpiring(function () {
+      console.log('starting silent access_token renewal')
+      self.oidcmgr.signinSilent().then(function (user) {
+        self.user.access_token = user.access_token
+        console.log(self.user.access_token)
+      }).catch(function (err) {
+        console.log(err)
+        alert('Your OpenID access token could not be renewed automatically.\n' +
+          'You will be logged out in ' + process.env.API_STEERING_OIDC_EXPIRE_NOTIFICATION + ' seconds.')
+      })
+    })
+    this.oidcmgr.events.addAccessTokenExpired(function () {
+      console.log('expired!')
+    })
+    this.getOIDCUser()
   }
 }
 </script>

src/components/Header.vue

@@ -36,7 +36,7 @@
                 <b-dropdown-item href="#">Profile</b-dropdown-item>
                 <b-dropdown-item @click='$parent.signOut'>Signout</b-dropdown-item>
               </b-nav-item-dropdown>
-              <b-nav-item v-if="! user.logged_in" to="login"><img src="../assets/16x16/system-users.png" alt="log-in symbol" title="Log in"></b-nav-item>
+              <b-nav-item v-if="! user.logged_in" to="home"><img src="../assets/16x16/system-users.png" alt="log-in symbol" title="Log in"></b-nav-item>
               <div class="help-image-container">
                 <b-nav-item>
                   <router-link to="help"><img class="help-image" src="../assets/help-browser-32x32.png" alt="Help symbol" title="Go to help pages"></router-link>

static/oidc_callback_popupRenew.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Waiting...</title>
+</head>
+
+<body>
+  <script src="oidc-client.js"></script>
+  <script>
+    var mgr = new Oidc.UserManager()
+    mgr.signinPopupCallback()
+  </script>
+</body>
+
+</html>

static/oidc_callback_silentRenew.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Waiting...</title>
+</head>
+
+<body>
+  <script src="oidc-client.js"></script>
+  <script>
+    var mgr = new Oidc.UserManager()
+    mgr.signinSilentCallback()
+  </script>
+</body>
+
+</html>