Merge pull request #3 from orchestracities/container-test

v0.1

Author: chicco785

.gitignore

@@ -1,3 +1,9 @@
+.env
+#automatic setup
+keycloak-connect-graphql/examples/config/config/*
+keycloak-connect-graphql/examples/config/realm-export
+keycloak
+
 # Logs
 logs
 *.log
@@ -102,3 +108,26 @@ dist
 
 # TernJS port file
 .tern-port
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1 +1,56 @@
-# auth-management-ui
+# auth management ui
+
+This Webapp is to provide an intuitive UI for [Anubis policy-api](https://github.com/orchestracities/anubis) using the language of [Material for you](https://m3.material.io/) (or Material v3) and the help of [MUI](https://mui.com/) in order to have an intuitive and a familiar look and feel for the end user.
+
+![Interface](https://user-images.githubusercontent.com/34061179/161280350-a7a9fa46-9176-447c-b031-050f9e17f6a7.png)
+
+## How to setup Docker
+
+To start the docker compose and populate keycloack use the script:
+
+```
+start.sh
+```
+The default user/password inside keycloack is admin/admin
+
+## How to setup the Webapp
+
+### The Webapp
+
+To setup the webapp first of all let's create a .env file inside the main folder, the file should contain the string:
+
+```
+REACT_APP_ANUBIS_API_URL=http://localhost:8085/
+```
+
+Then let's start the package required with
+
+```
+npm install
+```
+
+after that we can start our application with
+
+```
+npm start
+```
+
+###  Keycloack and graphql
+
+To setup the connection between keycloack and graphql open a new window and move to the keycloak-connect-graphql folder
+
+```
+cd keycloak-connect-graphql
+```
+
+Then let's start the package required with
+
+```
+npm install
+```
+
+To run a simple example use:
+
+```
+node examples/advancedAuth.js
+```

docker-compose.yml

@@ -0,0 +1,34 @@
+version: "3.7"
+services:
+  policy-api:
+    image: orchestracities/anubis-management-api:master
+    networks:
+      - envoymesh
+    environment:
+      - CORS_ALLOWED_ORIGINS=*
+      - CORS_ALLOWED_METHODS=*
+      - CORS_ALLOWED_HEADERS=*
+    ports:
+      - "8085:8000"
+
+  keycloak:
+    image: jboss/keycloak:${KEYCLOAK_VERSION:-16.1.1}
+    # if your platform is linux/arm64 use the following image
+    # image: koolwithk/keycloak-arm:16.0.0
+    ports:
+      - "8080:8080"
+    volumes:
+      - ./keycloak/oc-custom.jar:/opt/jboss/keycloak/standalone/deployments/oc-custom.jar
+      - ./keycloak/realm-export.json:/opt/jboss/realm-export.json
+    environment:
+      - KEYCLOAK_USER=admin
+      - KEYCLOAK_PASSWORD=password
+      - JAVA_TOOL_OPTIONS=-Dkeycloak.profile.feature.scripts=enabled -Dkeycloak.migration.action=import -Dkeycloak.migration.provider=singleFile -Dkeycloak.migration.file=/opt/jboss/realm-export.json -Dkeycloak.migration.strategy=OVERWRITE_EXISTING
+    networks:
+      - envoymesh
+
+volumes:
+  mongodata:
+
+networks:
+  envoymesh: {}

keycloak-connect-graphql/examples/advancedAuth.js

@@ -0,0 +1,63 @@
+const express = require('express')
+const { ApolloServer, gql } = require('apollo-server-express')
+const { configureKeycloak } = require('./lib/common')
+
+const {
+  KeycloakContext,
+  KeycloakTypeDefs,
+  KeycloakSchemaDirectives
+} = require('../')
+
+const app = express()
+
+const graphqlPath = '/graphql'
+
+// perform the standard keycloak-connect middleware setup on our app
+configureKeycloak(app, graphqlPath)
+
+const typeDefs = gql`
+  type Query {
+    greetings: [String] @hasRole(role: "developer")
+  }
+
+  type Mutation {
+    addGreeting(greeting: String!): String! @auth
+  }
+`
+
+const greetings = [
+  'hello world!'
+]
+
+const resolvers = {
+  Query: {
+    greetings: () => greetings
+  },
+  Mutation: {
+    addGreeting: (obj, { greeting }, context, info) => {
+      greetings.push(greeting)
+      return greeting
+    }
+  }
+}
+
+const options ={
+  typeDefs: [KeycloakTypeDefs, typeDefs],
+  schemaDirectives: KeycloakSchemaDirectives,
+  resolvers,
+  context: ({ req }) => {
+    return {
+      kauth: new KeycloakContext({ req })
+    }
+  }
+}
+
+const server = new ApolloServer(options)
+
+server.applyMiddleware({ app })
+
+const port = 4000
+
+app.listen({ port }, () =>
+  console.log(`🚀 Server ready at http://localhost:${port}${server.graphqlPath}`)
+) 

keycloak-connect-graphql/examples/config/keycloak.json

@@ -0,0 +1,9 @@
+{
+  "realm": "master",
+  "auth-server-url": "http://localhost:8080/auth",
+  "ssl-required": "none",
+  "resource": "keycloak-connect-graphql-public",
+  "public-client": true,
+  "use-resource-role-mappings": true,
+  "confidential-port": 0
+}

keycloak-connect-graphql/examples/lib/common.js

@@ -0,0 +1,37 @@
+const fs = require('fs')
+const path = require('path')
+const session = require('express-session')
+const Keycloak = require('keycloak-connect')
+
+function configureKeycloak(app, graphqlPath) {
+
+  const keycloakConfig = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../config/keycloak.json')))
+
+  const memoryStore = new session.MemoryStore()
+
+  app.use(session({
+    secret: process.env.SESSION_SECRET_STRING || 'this should be a long secret',
+    resave: false,
+    saveUninitialized: true,
+    store: memoryStore
+  }))
+
+  const keycloak = new Keycloak({
+    store: memoryStore
+  }, keycloakConfig)
+
+  // Install general keycloak middleware
+  app.use(keycloak.middleware({
+    admin: graphqlPath
+  }))
+
+  // Protect the main route for all graphql services
+  // Disable unauthenticated access
+  app.use(graphqlPath, keycloak.middleware())
+
+  return { keycloak }
+}
+
+module.exports = {
+  configureKeycloak
+}

keycloak-connect-graphql/examples/ts/basic.ts

@@ -0,0 +1,58 @@
+import express from 'express'
+import { ApolloServer, gql } from 'apollo-server-express'
+import { configureKeycloak } from '../lib/common'
+import cors from "cors"
+import {
+  KeycloakContext,
+  KeycloakTypeDefs,
+  KeycloakSchemaDirectives
+} from '../../dist/index'
+
+const app = express()
+
+const graphqlPath = '/graphql'
+
+// perform the standard keycloak-connect middleware setup on our app
+const { keycloak } = configureKeycloak(app, graphqlPath)
+
+// Ensure entire GraphQL Api can only be accessed by authenticated users
+app.use(graphqlPath, keycloak.protect())
+app.use(cors());
+const typeDefs = `
+  type Query {
+    hello: String @hasRole(role: "developer")
+  }
+`
+
+const resolvers = {
+  Query: {
+    hello: (obj, args, context, info) => {
+      // log some of the auth related info added to the context
+      console.log(context.kauth.isAuthenticated())
+      console.log(context.kauth.accessToken.content.preferred_username)
+
+      const name = context.kauth.accessToken.content.preferred_username || 'world'
+      return `Hello ${name}`
+    }
+  }
+}
+
+const server = new ApolloServer({
+  typeDefs: [KeycloakTypeDefs, typeDefs],
+  // See  https://github.com/ardatan/graphql-tools/issues/1581
+  schemaDirectives: KeycloakSchemaDirectives,
+  resolvers,
+  context: ({ req }) => {
+    return {
+      kauth: new KeycloakContext({ req : req as any })
+    }
+  }
+})
+
+server.applyMiddleware({ app })
+
+const port = 4000
+
+app.listen({ port }, () =>
+  console.log(`🚀 Server ready at http://localhost:${port}${server.graphqlPath}`)
+)

keycloak-connect-graphql/examples/ts/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "target": "ES2017",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    "noImplicitAny": false,   
+    "allowJs": true,                    
+    "types": ["node"],                           /* Type declaration files to be included in compilation. */
+    "esModuleInterop": true,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+  },
+  "include": ["./*.ts"],
+  "exclude": []
+}