updates to readme

Author: karpikpl

README.md

@@ -142,6 +142,49 @@ docker run -p 8080:80 --env-file ./.env copilot-metrics-viewer
 ```
 The application will be accessible at http://localhost:8080
 
+## Running with API Proxy
+
+Project can run with an API proxy which hides GitHub tokens and is secure enough to be deployed.
+Api Proxy project is in `\api` directory. Vue app makes the calls to `/api/github` which then are proxied to `https://api.github.com` with appropriate bearer token.
+
+Proxy can authenticate user using GitHub App. In order to do that, following environment variables are required:
+
+* `GITHUB_CLIENT_ID` - client Id of the GitHub App registered and installed in the enterprise/org with permissions listed above.
+* `GITHUB_CLIENT_SECRET` - client secret of the GitHub App
+* `SESSION_SECRET` - random string for securing session state
+
+For local development register `http://localhost:3000/callback` as GH App callback Uri.
+For deployed version use the Uri of your app.
+
+To build and run the app with API proxy:
+
+```
+docker build -t copilot-metrics-viewer-with-api -f api.Dockerfile .
+```
+
+To run:
+
+```
+docker run -p 8080:3000 --env-file ./.env copilot-metrics-viewer-api
+```
+
+## Azure Deployment 
+
+Application can be deployed using [Azure Developer CLI](https://aka.ms/azd) (azd).
+
+Before running `azd up` configure GitHub variables:
+
+```bash
+azd env set VUE_APP_SCOPE <organization/enterprise>
+# when using organization
+azd env set VUE_APP_GITHUB_ORG <org name>
+# when using enterprise
+azd env set VUE_APP_GITHUB_ENT <ent name>
+azd env set VUE_APP_GITHUB_API_URL /api/github
+azd env set GITHUB_CLIENT_ID <client id>
+azd env set GITHUB_CLIENT_SECRET <client secret>
+```
+
 ## License 
 
 This project is licensed under the terms of the MIT open source license. Please refer to [MIT](./LICENSE.txt) for the full terms.

api/.env

@@ -1,8 +1,8 @@
 # Client Id from GitHub App installed on the organization
-CLIENT_ID=
+GITHUB_CLIENT_ID=
 
 # Client Secret from GitHub App installed on the organization
-CLIENT_SECRET=
+GITHUB_CLIENT_SECRET=
 
 # Secret for the session
 SESSION_SECRET=

api/server.mjs

@@ -4,7 +4,7 @@ import path from 'path';
 import axios from 'axios';
 import { fileURLToPath } from 'url';
 import session from 'express-session';
-import {createProxyMiddleware} from 'http-proxy-middleware';
+import { createProxyMiddleware } from 'http-proxy-middleware';
 
 // Construct __dirname equivalent in ES module scope
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -22,10 +22,17 @@ app.use(session({
 
 // Middleware to add Authorization header
 const authMiddleware = (req, res, next) => {
-  if (!req.session.token) {
+  // not ideal but if someone wanted to use hardcoded token on the backend
+  if (!req.session.token && !process.env.VUE_APP_GITHUB_TOKEN) {
     res.status(401).send('Unauthorized');
     return;
   }
+
+  if (process.env.VUE_APP_GITHUB_TOKEN) {
+    // Use the hardcoded token if it's available
+    req.session.token = process.env.VUE_APP_GITHUB_TOKEN;
+  }
+
   req.headers['Authorization'] = `Bearer ${req.session.token}`;
   console.log('Added Authorization to:', req.url);
   next();
@@ -48,8 +55,8 @@ app.use('/api/github', authMiddleware, githubProxy);
 
 const exchangeCode = async (code) => {
   const params = new URLSearchParams({
-    client_id: process.env.CLIENT_ID,
-    client_secret: process.env.CLIENT_SECRET,
+    client_id: process.env.GITHUB_CLIENT_ID,
+    client_secret: process.env.GITHUB_CLIENT_SECRET,
     code: code,
   });
 
@@ -80,7 +87,7 @@ app.get('/login', (req, res) => {
   // store the state in the session
   req.session.state = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
 
-  res.redirect(`https://github.com/login/oauth/authorize?client_id=${process.env.CLIENT_ID}&redirect_uri=${redirectUrl}&state=${req.session.state}`);
+  res.redirect(`https://github.com/login/oauth/authorize?client_id=${process.env.GITHUB_CLIENT_ID}&redirect_uri=${redirectUrl}&state=${req.session.state}`);
 });
 
 app.get('/callback', async (req, res) => {

infra/main.parameters.json

@@ -11,32 +11,17 @@
       "copilotMetricsViewerExists": {
         "value": "${SERVICE_COPILOT_METRICS_VIEWER_RESOURCE_EXISTS=false}"
       },
-      "gitHubClientId" : {
-        "value": "${GITHUB_CLIENT_ID}"
-      },
-      "gitHubClientSecret" : {
-        "value": "${GITHUB_CLIENT_SECRET}"
-      },
-      "appScope" : {
-        "value": "${APP_SCOPE}"
-      },
-      "gitHubOrg" : {
-        "value": "${GITHUB_ORG}"
-      },
-      "gitHubEnt" : {
-        "value": "${GITHUB_ENT}"
-      },
       "copilotMetricsViewerDefinition": {
         "value": {
           "settings": [
             {
-              "name": "CLIENT_ID",
+              "name": "GITHUB_CLIENT_ID",
               "value": "${GITHUB_CLIENT_ID}",
               "secret": true,
               "_comment_name": "GitHub App Client id - The name of the environment variable when running in Azure."
             },
             {
-              "name": "CLIENT_SECRET",
+              "name": "GITHUB_CLIENT_SECRET",
               "value": "${GITHUB_CLIENT_SECRET}",
               "secret": true,
               "_comment_name": "GitHub App Client Secret - The name of the environment variable when running in Azure."