Add Authentication via OpenID Connect

.gitignore

@@ -3,3 +3,4 @@ __pycache__
 *.pyc
 .nuxt
 node_modules
+package-lock.json

frontend/README.md

@@ -18,3 +18,12 @@ Build and run the application for production use with
 npm run build
 npm run start
 ```
+
+
+### Configuration
+
+Configuration has to be specified in `nuxt.config.js`. Setting the OpenID Connect paramaters
+correctly is essential for the login process to work
+
+For details on how to configure authentication for external providers like GitHub or Facebook
+please refer to [the nuxt-oauth documentation](https://auth.nuxtjs.org/schemes/oauth2.html)

frontend/assets/loading.svg

+<!-- https://codepen.io/aurer/pen/jEGbA -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+    width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+  <rect x="0" y="0" width="4" height="7" fill="#41b883">
+    <animateTransform  attributeType="xml"
+      attributeName="transform" type="scale"
+      values="1,1; 1,3; 1,1"
+      begin="0s" dur="0.6s" repeatCount="indefinite" />
+  </rect>
+
+  <rect x="10" y="0" width="4" height="7" fill="#41b883">
+    <animateTransform  attributeType="xml"
+      attributeName="transform" type="scale"
+      values="1,1; 1,3; 1,1"
+      begin="0.2s" dur="0.6s" repeatCount="indefinite" />
+  </rect>
+  <rect x="20" y="0" width="4" height="7" fill="#41b883">
+    <animateTransform  attributeType="xml"
+      attributeName="transform" type="scale"
+      values="1,1; 1,3; 1,1"
+      begin="0.4s" dur="0.6s" repeatCount="indefinite" />
+  </rect>
+</svg>

frontend/layouts/default.vue

@@ -6,6 +6,17 @@
       <b-collapse is-nav id="nav_collapse">
         <b-navbar-nav>
           <b-nav-item to="/" exact>Home</b-nav-item>
+          <b-nav-item v-if="$auth.$state.loggedIn" to="/oidc">OIDC</b-nav-item>
+        </b-navbar-nav>
+        <b-navbar-nav class="ml-auto">
+          <template v-if="$auth.$state.loggedIn">
+            <b-nav-item-dropdown :text="$auth.user.name" right>
+              <b-dropdown-item @click="$auth.logout()">Logout</b-dropdown-item>
+            </b-nav-item-dropdown>
+          </template>
+          <template v-else>
+            <b-dropdown-item to="/login">Login</b-dropdown-item>
+          </template>
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>

frontend/layouts/plain.vue

+<template>
+  <b-container fluid class="text-centered">
+      <nuxt />
+  </b-container >
+</template>

frontend/nuxt.config.js

@@ -6,7 +6,27 @@ module.exports = {
     { charset: 'utf-8' },
     { name: 'viewport', content: 'width=device-width, initial-scale=1' }
   ],
-  modules: ['bootstrap-vue/nuxt', '@nuxtjs/axios'],
+  modules: ['bootstrap-vue/nuxt', '@nuxtjs/axios', '@nuxtjs/auth'],
+  auth: {
+    redirect: {
+      callback: '/callback'
+    },
+    strategies: {
+      oas: {
+      _scheme: 'oauth2',
+      authorization_endpoint: 'http://oas.alumnicloud.net:4444/oauth2/auth',
+      userinfo_endpoint: 'http://oas.alumnicloud.net:4444/userinfo',
+      scope: ['openid', 'profile', 'email', 'openappstack_roles'],
+      access_token_endpoint: 'http://oas.alumnicloud.net:4444/oauth2/token',
+      response_type: 'token',
+      token_type: 'Bearer',
+      redirect_uri: 'http://oas.alumnicloud.net:3000/callback',
+      client_id: 'user-panel',
+      client_secret: 'secret_secret',
+      }
+    },
+    scopeKey: "openappstack_roles"
+  }
 }
 
 

frontend/package.json

 {
   "name": "user-panel",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "nuxt.config.js",
   "scripts": {
@@ -14,6 +14,7 @@
   "license": "ISC",
   "dependencies": {
     "@nuxtjs/axios": "^5.6.0",
+    "@nuxtjs/auth": "^4.8.4",
     "bootstrap-vue": "^2.0.3",
     "nuxt": "latest"
   }

frontend/pages/callback.vue

+<template>
+<div class="container d-flex align-items-center justify-content-center flex-column">
+  <img src="~/assets/loading.svg" alt="Loading..." width="80px" />
+  Logging in...
+</div>
+</template>
+
+<style scoped>
+.container {
+  min-height: 70vh;
+}
+</style>

frontend/pages/index.vue

@@ -2,6 +2,15 @@
   <div>
     <b-jumbotron class="text-center">
       <h3>Welcome to OpenAppStack</h3>
+      <div class="mt-1">
+        <template v-if="$auth.$state.loggedIn">
+          <b-btn class="ml-3" variant="info" to="/oidc">OpenID Connect Info</b-btn>
+          <b-btn class="ml-3" variant="danger" @click="$auth.logout()">Logout</b-btn>
+        </template>
+        <b-btn variant="success" v-else to="/login">
+            Login
+        </b-btn>
+      </div>
     </b-jumbotron>
   </div>
 </template>

frontend/pages/login.vue

+<template>
+<div class="login-panel">
+    <b-alert show v-if="$auth.$state.redirect">
+        You have to login before accessing to <strong>{{ $auth.$state.redirect }}</strong>
+    </b-alert>
+  <b-row align-h="center" align-v="center">
+    <b-col md="4" class="text-center">
+        <b-card
+            title="Login"
+            bg-variant="light">
+          <b-btn @click="$auth.loginWith('oas')" block class="login-button">Login with OAS</b-btn>
+        </b-card>
+    </b-col>
+  </b-row>
+</div>
+</template>
+
+<style scoped>
+.login-button {
+  border: 0;
+};
+.login-panel {
+    margin: 15pt;
+}
+</style>
+
+<script>
+export default {
+  layout: 'plain',
+  middleware: ['auth'],
+}
+</script>

frontend/pages/oidc.vue

+<template>
+    <div>
+    <b-alert show variant="warning">OpenID Connect Overview</b-alert>
+    <b-row>
+      <b-col md="8">
+        <b-card title="State">
+          <pre>{{ state }}</pre>
+        </b-card>
+      </b-col>
+      <b-col md="4">
+        <b-card title="Scopes" class="mb-2">
+          User: <b-badge>{{ $auth.hasScope('user') }}</b-badge>
+          Test: <b-badge>{{ $auth.hasScope('guest') }}</b-badge>
+          Admin: <b-badge>{{ $auth.hasScope('admin') }}</b-badge>
+        </b-card>
+        <b-card title="token">
+          {{ $auth.token || '-' }}
+        </b-card>
+      </b-col>
+    </b-row>
+    <hr>
+    <b-btn-group>
+      <b-button @click="$auth.fetchUser()">Fetch User</b-button>
+      <b-button @click="$auth.logout()">Logout</b-button>
+    </b-btn-group>
+  </div>
+</template>
+
+<script>
+export default {
+  middleware: ['auth'],
+  computed: {
+    state() {
+      return JSON.stringify(this.$auth.$state, undefined, 2)
+    }
+  }
+}
+</script>