Add serverMiddleware that exposes backend API

frontend/README.md

@@ -27,3 +27,17 @@ 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)
+
+
+### Usage
+
+Navigate your browser to the `server` URL, that you specified in `nuxt.config.js`. The default port
+is 3000.
+
+As an administrator you can access the user backend API by accessing the api endpoint
+that is exposed by the userpanel at `/api/admin/graphql`. If you run your backend server in
+development mode, you can access the `GraphiQL` web interface of the backend by navigating
+your browser to the URL.
+Note that you need to manually provide a cookie containing the Baerer token in case you don't
+access the api with a browser that automatically includes your cookie in the request.
+Passing the token as a GET or POST variable is not supported.

frontend/api/index.js

+const express = require('express')
+const cookieParser = require('cookie-parser')
+
+// Create Express Server that is started by nuxt to process authenticated
+// requests on the serverside as a serverMiddleware. Can function as a proxy
+// that authenticates requests.
+const app = express()
+
+// Include authentication middleware
+const auth = require('./middleware/auth')
+const isAdmin = require('./middleware/admin')
+
+// Include routes that creare response transmitted to client
+const graphql = require('./routes/graphql')
+
+// Register authentication middleware
+app.use(cookieParser())
+app.use(auth)
+app.use('/admin/', isAdmin)
+
+// Register routes
+app.use('/admin/graphql', graphql)
+
+// Export the server middleware
+module.exports = {
+  path: '/api',
+  handler: app
+}

frontend/api/middleware/admin.js

+const isAdmin = function (req, res, next) {
+  const user = req.user;
+  if (user.roles.includes("admin") === false){
+    res.status(403).send("Not authorized")
+  }
+  next()
+}
+
+module.exports = isAdmin

frontend/api/middleware/auth.js

+const nuxtConfig = require('../../nuxt.config')
+const { Issuer, TokenSet } = require('openid-client')
+
+// Configure openID-Connect client to verify tokens
+// use the configuration that is supplied in ~/nuxt.config.js
+const authStrategy = nuxtConfig.auth.strategies["oas"]
+const openIdIssuer = new Issuer({
+    authorization_endpoint: authStrategy.authorization_endpoint,
+    token_endpoint: authStrategy.access_token_endpoint,
+    userinfo_endpoint: authStrategy.userinfo_endpoint
+});
+var openIdClient;
+(async () => {
+  const openIdIssuer2 = await Issuer.discover(authStrategy.base_url);
+  openIdClient = new openIdIssuer2.Client({
+    client_id: authStrategy.client_id,
+    client_secret: authStrategy.client_secret,
+    redirect_uris: [authStrategy.redirect_uri],
+    response_types: [authStrategy.response_type],
+    grant_types: ["implicit"]
+  })
+})()
+
+
+const authenticateWithToken = function (req, res, next) {
+  // Get the oAuth2.0 access token from the user request
+  // The User cookies are forwarded to this middleware
+  // by nuxt add parsed by the cookieParser module which
+  // makes the cookies accessible via req.cookies
+  const authToken = req.cookies['auth._token.oas']
+  const tokenSet = new TokenSet(
+    {
+      access_token: authToken.slice("Bearer ".length),
+      token_type: "Bearer"
+    })
+  // We don't trust the token beacuse we received it via
+  // the request object which is create by the client.
+  // In order to veryfi the token, we query the userinfo
+  // endpoint using the provided token. If the OpenID
+  // provider acceppts the token, we know it's valid and
+  // we will get the userinfo as at the same time
+  openIdClient.userinfo(tokenSet).then(function(userinfo){
+    // Safe our validated userinfo in the request object
+    // for use in other express functions
+    req.user = {
+      name: userinfo.name,
+      id: userinfo.sid,
+      roles: userinfo[nuxtConfig.auth.scopeKey]
+    }
+    if ( userinfo.hasOwnProperty('preferred_username')){
+      req.user.name = userinfo.preferred_username;
+    }
+    next()
+  }).catch(function(error){
+    res.status(403).send("Authentication failed: " + error)
+  });
+}
+
+module.exports = authenticateWithToken

frontend/api/routes/graphql.js

+const httpProxy = require('http-proxy')
+const proxy = httpProxy.createProxyServer()
+const nuxtConfig = require('../../nuxt.config')
+const API_URL = nuxtConfig.env.BACKEND_API_URL || 'http://localhost:5000/graphql'
+const { Router } = require('express')
+
+const router = Router()
+
+// Proxy all requests going to this route to the API URL.
+router.use(function(req, res, next) {
+  proxy.web(req, res, {
+    target: API_URL,
+    ignorePath: true // Don't add a trailing '/'
+  })
+})
+
+module.exports = router

frontend/nuxt.config.js

@@ -2,6 +2,12 @@ module.exports = {
   server: {
     host: '0.0.0.0'
   },
+  env: {
+    BACKEND_API_URL: 'http://localhost:5002/graphql'
+  },
+  serverMiddleware: [
+    '~/api/index.js'
+  ],
   meta: [
     { charset: 'utf-8' },
     { name: 'viewport', content: 'width=device-width, initial-scale=1' }
@@ -14,6 +20,7 @@ module.exports = {
     strategies: {
       oas: {
       _scheme: 'oauth2',
+      base_url: 'http://oas.alumnicloud.net:4444',
       authorization_endpoint: 'http://oas.alumnicloud.net:4444/oauth2/auth',
       userinfo_endpoint: 'http://oas.alumnicloud.net:4444/userinfo',
       scope: ['openid', 'profile', 'email', 'openappstack_roles'],

frontend/package.json

 {
   "name": "user-panel",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "main": "nuxt.config.js",
   "scripts": {
@@ -13,9 +13,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@nuxtjs/axios": "^5.6.0",
     "@nuxtjs/auth": "^4.8.4",
+    "@nuxtjs/axios": "^5.6.0",
     "bootstrap-vue": "^2.0.3",
-    "nuxt": "latest"
+    "cookie-parser": "^1.4.4",
+    "nuxt": "latest",
+    "openid-client": "^3.7.3"
   }
 }