{"id":19407594,"url":"https://github.com/damienbod/bff-aspnetcore-oidc-vuejs","last_synced_at":"2025-04-24T09:31:41.114Z","repository":{"id":261682229,"uuid":"884356499","full_name":"damienbod/bff-aspnetcore-oidc-vuejs","owner":"damienbod","description":"Backend for frontend security architecture (BFF) OpenID Connect client using Vue.JS and ASP.NET Core","archived":false,"fork":false,"pushed_at":"2024-12-31T15:43:32.000Z","size":2401,"stargazers_count":16,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T03:06:01.033Z","etag":null,"topics":["aspnetcore","bff","dotnet","oauth","openid-connect","openiddict","vuejs"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/damienbod.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-06T15:51:22.000Z","updated_at":"2025-03-01T21:46:02.000Z","dependencies_parsed_at":"2024-11-07T21:36:55.579Z","dependency_job_id":"76600dbe-6735-4ef9-9b38-c9ee9d4be41b","html_url":"https://github.com/damienbod/bff-aspnetcore-oidc-vuejs","commit_stats":null,"previous_names":["damienbod/bff-aspnetcore-oidc-vuejs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienbod%2Fbff-aspnetcore-oidc-vuejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienbod%2Fbff-aspnetcore-oidc-vuejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienbod%2Fbff-aspnetcore-oidc-vuejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienbod%2Fbff-aspnetcore-oidc-vuejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damienbod","download_url":"https://codeload.github.com/damienbod/bff-aspnetcore-oidc-vuejs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250600712,"owners_count":21457015,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aspnetcore","bff","dotnet","oauth","openid-connect","openiddict","vuejs"],"created_at":"2024-11-10T12:03:07.498Z","updated_at":"2025-04-24T09:31:40.044Z","avatar_url":"https://github.com/damienbod.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Backend for frontend security architecture (BFF) using Vue.JS and ASP.NET Core\n\nImplements an OpenID Connect confidential client client using Vue.JS and a UI and ASP.NET Core to implement the API. The application is secured using an OpenID Connect confidential client using OAuth PKCE. The Vue.js application is served from the ASP.NET Core application using the YARP reverse proxy in development. The Vue.js application is built into the wwwroot of the ASP.NET Core application in production. OpenIddict is used to implement the identity server.\n\n[![.NET and npm build](https://github.com/damienbod/bff-aspnetcore-oidc-vuejs/actions/workflows/dotnet.yml/badge.svg)](https://github.com/damienbod/bff-aspnetcore-oidc-vuejs/actions/workflows/dotnet.yml) [![License](https://img.shields.io/badge/license-Apache%20License%202.0-blue.svg)](https://github.com/damienbod/bff-aspnetcore-oidc-vuejs/blob/main/LICENSE)\n\n## Setup Server \n\nThe ASP.NET Core project is setup to run in development and production. In production, it uses the Vue.js production build deployed to the wwwroot. In development, it uses MS YARP reverse proxy to forward requests.\n\n\u003e [!IMPORTANT]  \n\u003e In production, the Vue.js project is built into the **wwwroot** of the .NET project.\n\n![BFF production](https://github.com/damienbod/bff-aspnetcore-oidc-vuejs/blob/main/images/vue-aspnetcore-bff.drawio.png)\n\nConfigure the YARP reverse proxy to match the Vue.js URL. This is only required in development. I always use HTTPS in development and the port needs to match the Vue.js developement env (vite.config.js).\n\n```json\n \"UiDevServerUrl\": \"https://localhost:4202\",\n  \"ReverseProxy\": {\n    \"Routes\": {\n      \"route1\": {\n        \"ClusterId\": \"cluster1\",\n        \"Match\": {\n          \"Path\": \"{**catch-all}\"\n        }\n      }\n    },\n    \"Clusters\": {\n      \"cluster1\": {\n        \"HttpClient\": {\n          \"SslProtocols\": [\n            \"Tls12\"\n          ]\n        },\n        \"Destinations\": {\n          \"cluster1/destination1\": {\n            \"Address\": \"https://localhost:4202/\"\n          }\n        }\n      }\n    }\n  }\n```\n\n\n## Setup Vue.js Vite project\n\nAdd the certificates to the nx project for example in the **/certs** folder\n\nUpdate the vite.config.ts file:\n\n```typescipt\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport fs from 'fs';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [vue()],\n  server: {\n    https: {\n      key: fs.readFileSync('./certs/dev_localhost.key'),\n      cert: fs.readFileSync('./certs/dev_localhost.pem'),\n\t},\n    port: 4202,\n    strictPort: true, // exit if port is in use\n    hmr: {\n      clientPort: 4202, // point vite websocket connection to vite directly, circumventing .net proxy\n    },\n  },\n  optimizeDeps: {\n    force: true,\n  },\n  build: {\n    outDir: \"../server/wwwroot\",\n    emptyOutDir: true\n  },\n})\n```\n\n\n\u003e [!NOTE]  \n\u003e The ASP.NET Core project setup uses port 4202, this needs to match the YARP reverse proxy settings for development.\n\n\n## Setup development\n\nThe development environment is setup to use the default tools for each of the tech stacks. Vue.js is used like recommended. I use Visual Studio code. A YARP reverse proxy is used to integrate the Vue.js development into the backend application.\n\n![BFF development](https://github.com/damienbod/bff-aspnetcore-oidc-vuejs/blob/main/images/vue-aspnetcore-bff-yarp-dev.drawio.png)\n\n\u003e [!NOTE]  \n\u003e Always run in HTTPS, both in development and production\n\n```\nnpm start\n```\n\nThe OpenID Connect client is setup using the default ASP.NET Core OpenID connect handler.\n\n```csharp\nservices.AddAuthentication(options =\u003e\n{\n    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;\n    options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;\n})\n.AddCookie()\n.AddOpenIdConnect(options =\u003e\n{\n    builder.Configuration.GetSection(\"OpenIDConnectSettings\").Bind(options);\n    options.Authority = builder.Configuration[\"OpenIDConnectSettings:Authority\"];\n    options.ClientId = builder.Configuration[\"OpenIDConnectSettings:ClientId\"];\n    options.ClientSecret = builder.Configuration[\"OpenIDConnectSettings:ClientSecret\"];\n\n    options.SignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;\n    options.ResponseType = OpenIdConnectResponseType.Code;\n\n    options.SaveTokens = true;\n    options.GetClaimsFromUserInfoEndpoint = true;\n    options.TokenValidationParameters = new TokenValidationParameters\n    {\n        NameClaimType = \"name\"\n    };\n});\n\nservices.AddControllersWithViews(options =\u003e\n    options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute()));\n\nservices.AddRazorPages().AddMvcOptions(options =\u003e\n{\n    var policy = new AuthorizationPolicyBuilder()\n        .RequireAuthenticatedUser()\n        .Build();\n    options.Filters.Add(new AuthorizeFilter(policy));\n});\n```\n\nAdd the Azure App registration settings to the **appsettings.Development.json** and the **ClientSecret** to the user secrets.\n\n```json\n\"OpenIDConnectSettings\": {\n    \"Authority\": \"https://localhost:44318\",\n    \"ClientId\": \"oidc-pkce-confidential\",\n    \"ClientSecret\": \"oidc-pkce-confidential_secret\"\n},\n```\n\n## Debugging\n\nStart the Vue.js project from the **ui** folder\n\n```\nnpm start\n```\n\nStart the ASP.NET Core project from the **server** folder\n\n```\ndotnet run\n```\n\nOr just open Visual Studio and run the solution.\n\n## Github actions build\n\nGithub actions is used for the DevOps. The build pipeline builds both the .NET project and the Vue.js project using npm. The two projects are built in the same step because the UI project is built into the wwwroot of the server project.\n\n```yaml\n\nname: .NET and npm build\n\non:\n  push:\n    branches: [ \"main\" ]\n  pull_request:\n    branches: [ \"main\" ]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    steps:\n\n      - uses: actions/checkout@v4\n      - name: Setup .NET\n        uses: actions/setup-dotnet@v4\n        with:\n          dotnet-version: 9.0.x\n\n      - name: Restore dependencies\n        run: dotnet restore\n\n      - name: npm setup\n        working-directory: ui\n        run: npm install\n\n      - name: ui-build\n        working-directory: ui\n        run: npm run build\n\n      - name: Build\n        run: dotnet build --no-restore\n      - name: Test\n        run: dotnet test --no-build --verbosity normal\n```\n\n## Credits and used libraries\n\n- NetEscapades.AspNetCore.SecurityHeaders\n- Yarp.ReverseProxy\n- Microsoft.Identity.Web\n- ASP.NET Core\n- Vue.js\n- Vite\n- OpenIddict\n\n## Links\n\nhttps://vuejs.org/\n\nhttps://vitejs.dev/\n\nhttps://github.com/vuejs/create-vue\n\nhttps://documentation.openiddict.com/\n\nhttps://www.koderhq.com/tutorial/vue/vite/\n\nhttps://github.com/damienbod/bff-aspnetcore-angular\n\nhttps://github.com/damienbod/bff-openiddict-aspnetcore-angular\n\nhttps://github.com/damienbod/bff-aspnetcore-vuejs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamienbod%2Fbff-aspnetcore-oidc-vuejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamienbod%2Fbff-aspnetcore-oidc-vuejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamienbod%2Fbff-aspnetcore-oidc-vuejs/lists"}