This is scenario where we just want to use FIDO as the MFA. The user register and logins with their username and password. For demo purposes, we trigger the MFA registering on sign up.
@ViewData["Title"]
19 |
20 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/IdentityProvider/Areas/Identity/Pages/Account/LoginFido2Mfa.cshtml.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Authorization;
2 | using Microsoft.AspNetCore.Mvc;
3 | using Microsoft.AspNetCore.Mvc.RazorPages;
4 |
5 | namespace OpeniddictServer.Areas.Identity.Pages.Account;
6 |
7 | [AllowAnonymous]
8 | public class MfaModel : PageModel
9 | {
10 | [BindProperty(SupportsGet = true)]
11 | public bool RememberMe { get; set; }
12 |
13 | [BindProperty(SupportsGet = true)]
14 | public string? ReturnUrl { get; set; } = string.Empty;
15 |
16 | public void OnGet()
17 | {
18 | }
19 |
20 | public void OnPost()
21 | {
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/IdentityProvider/Areas/Identity/Pages/Account/Manage/Disable2fa.cshtml:
--------------------------------------------------------------------------------
1 | @page
2 | @model Disable2faModel
3 | @{
4 | ViewData["Title"] = "Disable two-factor authentication (2FA)";
5 | ViewData["ActivePage"] = ManageNavPages.TwoFactorAuthentication;
6 | }
7 |
8 |
21 |
45 | 2FA/MFA
22 |
23 |
26 |
27 |
28 |
41 |
42 |
43 |
44 |
29 |
30 |
40 | Fido2 2FA
31 | 39 |@ViewData["Title"]
10 | 11 |
12 |
20 |
21 | 13 | This action only disables 2FA. 14 |
15 |16 | Disabling 2FA does not change the keys used in authenticator apps. If you wish to change the key 17 | used in an authenticator app you should reset your authenticator keys. 18 |
19 |
22 |
25 |
26 |
--------------------------------------------------------------------------------
/IdentityProvider/Areas/Identity/Pages/Account/Manage/Disable2fa.cshtml.cs:
--------------------------------------------------------------------------------
1 | // Licensed to the .NET Foundation under one or more agreements.
2 | // The .NET Foundation licenses this file to you under the MIT license.
3 | #nullable disable
4 |
5 | using Fido2Identity;
6 | using Microsoft.AspNetCore.Identity;
7 | using Microsoft.AspNetCore.Mvc;
8 | using Microsoft.AspNetCore.Mvc.RazorPages;
9 | using OpeniddictServer.Data;
10 |
11 | namespace OpeniddictServer.Areas.Identity.Pages.Account.Manage
12 | {
13 | public class Disable2faModel : PageModel
14 | {
15 | private readonly UserManager@ViewData["Title"]
20 |
21 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/IdentityProvider/Areas/Identity/Pages/Account/Manage/Fido2Mfa.cshtml.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Mvc.RazorPages;
2 |
3 | namespace OpeniddictServer.Areas.Identity.Pages.Account.Manage;
4 |
5 | public class MfaModel : PageModel
6 | {
7 | public void OnGet()
8 | {
9 | }
10 |
11 | public void OnPost()
12 | {
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/IdentityProvider/Areas/Identity/Pages/Account/Manage/ManageNavPages.cs:
--------------------------------------------------------------------------------
1 | // Licensed to the .NET Foundation under one or more agreements.
2 | // The .NET Foundation licenses this file to you under the MIT license.
3 | #nullable disable
4 |
5 | using Microsoft.AspNetCore.Mvc.Rendering;
6 |
7 | namespace OpeniddictServer.Areas.Identity.Pages.Account.Manage
8 | {
9 | ///
22 |
24 |
27 |
28 |
54 | 2FA/MFA
23 |This is scenario where we just want to use FIDO as the MFA. The user register and logins with their username and password. For demo purposes, we trigger the MFA registering on sign up.
29 |
49 |
50 |
51 |
52 |
53 |
30 |
31 |
48 | Add a Fido2 MFA
32 | 47 |@ViewData["Title"]
11 | @{ 12 | var consentFeature = HttpContext.Features.Get
20 | You have no recovery codes left.
21 |
23 | }
24 | else if (Model.RecoveryCodesLeft == 1)
25 | {
26 | You must generate a new set of recovery codes before you can log in with a recovery code.
22 |
27 | You have 1 recovery code left.
28 |
30 | }
31 | else if (Model.RecoveryCodesLeft <= 3)
32 | {
33 | You can generate a new set of recovery codes.
29 |
34 | You have @Model.RecoveryCodesLeft recovery codes left.
35 |
37 | }
38 |
39 | if (Model.IsMachineRemembered)
40 | {
41 |
44 | }
45 | Disable 2FA
46 | Reset recovery codes
47 | }
48 |
49 | You should generate a new set of recovery codes.
36 |Authenticator app
50 | @if (!Model.HasAuthenticator) 51 | { 52 | Add authenticator app 53 | } 54 | else 55 | { 56 | Set up authenticator app 57 | Reset authenticator app 58 | } 59 | } 60 | else 61 | { 62 |
63 | Privacy and cookie policy have not been accepted.
64 |
66 | }
67 | }
68 |
69 | Add Fido2 MFA
70 |
71 | @section Scripts {
72 |
73 |
74 | }
75 |
--------------------------------------------------------------------------------
/IdentityProvider/Areas/Identity/Pages/Account/Manage/TwoFactorAuthentication.cshtml.cs:
--------------------------------------------------------------------------------
1 | // Licensed to the .NET Foundation under one or more agreements.
2 | // The .NET Foundation licenses this file to you under the MIT license.
3 | #nullable disable
4 |
5 | using Microsoft.AspNetCore.Identity;
6 | using Microsoft.AspNetCore.Mvc;
7 | using Microsoft.AspNetCore.Mvc.RazorPages;
8 | using OpeniddictServer.Data;
9 |
10 | namespace OpeniddictServer.Areas.Identity.Pages.Account.Manage
11 | {
12 | public class TwoFactorAuthenticationModel : PageModel
13 | {
14 | private readonly UserManagerYou must accept the policy before you can enable two factor authentication.
65 |
5 |
21 |
--------------------------------------------------------------------------------
/IdentityProvider/Views/Authorization/Logout.cshtml:
--------------------------------------------------------------------------------
1 | @using Microsoft.Extensions.Primitives
2 |
3 | Authorization
6 | 7 |Do you want to grant @Model.ApplicationName access to your data? (scopes requested: @Model.Scope)
8 | 9 | 20 |
4 |
--------------------------------------------------------------------------------
/IdentityProvider/Views/Home/Index.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | ViewData["Title"] = "Home Page";
3 | }
4 |
5 | Log out
5 |Are you sure you want to sign out?
6 | 7 | 17 |
6 |
9 |
--------------------------------------------------------------------------------
/IdentityProvider/Views/Home/Privacy.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | ViewData["Title"] = "Privacy Policy";
3 | }
4 | Welcome
7 |Learn about building Web apps with ASP.NET Core.
8 |@ViewData["Title"]
5 | 6 |Use this page to detail your site's privacy policy.
7 | -------------------------------------------------------------------------------- /IdentityProvider/Views/Shared/Error.cshtml: -------------------------------------------------------------------------------- 1 | @model ErrorViewModel 2 | 3 |
4 |
--------------------------------------------------------------------------------
/IdentityProvider/Views/Shared/_Layout.cshtml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Ooooops, something went really bad! :(
5 |6 | @if (!string.IsNullOrEmpty(Model.Error)) { 7 | @Model.Error 8 | } 9 | 10 | @if (!string.IsNullOrEmpty(Model.ErrorDescription)) { 11 | @Model.ErrorDescription 12 | } 13 |
14 |
37 |
38 | @RenderBody()
39 |
40 |
41 |
42 |
47 |
48 |
49 |
50 |
51 |
52 | @await RenderSectionAsync("Scripts", required: false)
53 |
54 |
55 |
--------------------------------------------------------------------------------
/IdentityProvider/Views/Shared/_Layout.cshtml.css:
--------------------------------------------------------------------------------
1 | /* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
2 | for details on configuring this project to bundle and minify static web assets. */
3 |
4 | a.navbar-brand {
5 | white-space: normal;
6 | text-align: center;
7 | word-break: break-all;
8 | }
9 |
10 | a {
11 | color: #0077cc;
12 | }
13 |
14 | .btn-primary {
15 | color: #fff;
16 | background-color: #1b6ec2;
17 | border-color: #1861ac;
18 | }
19 |
20 | .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
21 | color: #fff;
22 | background-color: #1b6ec2;
23 | border-color: #1861ac;
24 | }
25 |
26 | .border-top {
27 | border-top: 1px solid #e5e5e5;
28 | }
29 | .border-bottom {
30 | border-bottom: 1px solid #e5e5e5;
31 | }
32 |
33 | .box-shadow {
34 | box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
35 | }
36 |
37 | button.accept-policy {
38 | font-size: 1rem;
39 | line-height: inherit;
40 | }
41 |
42 | .footer {
43 | position: absolute;
44 | bottom: 0;
45 | width: 100%;
46 | white-space: nowrap;
47 | line-height: 60px;
48 | }
49 |
--------------------------------------------------------------------------------
/IdentityProvider/Views/Shared/_LoginPartial.cshtml:
--------------------------------------------------------------------------------
1 | @using Microsoft.AspNetCore.Identity
2 | @inject SignInManager' + fido2TapKeyToLogin + '
';
60 |
61 | //Swal.fire({
62 | // title: 'Logging In...',
63 | // text: 'Tap your security key to login.',
64 | // imageUrl: "/images/securitykey.min.svg",
65 | // showCancelButton: true,
66 | // showConfirmButton: false,
67 | // focusConfirm: false,
68 | // focusCancel: false
69 | //});
70 |
71 | // ask browser for credentials (browser will ask connected authenticators)
72 | let credential;
73 | try {
74 | credential = await navigator.credentials.get({ publicKey: makeAssertionOptions });
75 | } catch (err) {
76 | document.getElementById('fido2logindisplay').innerHTML = '';
77 | showErrorAlert(err.message ? err.message : err);
78 | }
79 |
80 | //document.getElementById('fido2logindisplay').innerHTML = 'Processing
'; 81 | 82 | try { 83 | await verifyAssertionWithServer(credential); 84 | } catch (e) { 85 | document.getElementById('fido2logindisplay').innerHTML = ''; 86 | const fido2CouldNotVerifyAssertion = document.getElementById('fido2CouldNotVerifyAssertion').innerText; 87 | showErrorAlert(fido2CouldNotVerifyAssertion, e); 88 | } 89 | } 90 | 91 | async function verifyAssertionWithServer(assertedCredential) { 92 | // Move data into Arrays incase it is super long 93 | let authData = new Uint8Array(assertedCredential.response.authenticatorData); 94 | let clientDataJSON = new Uint8Array(assertedCredential.response.clientDataJSON); 95 | let rawId = new Uint8Array(assertedCredential.rawId); 96 | let sig = new Uint8Array(assertedCredential.response.signature); 97 | let userHandle = new Uint8Array(assertedCredential.response.userHandle); 98 | const data = { 99 | id: assertedCredential.id, 100 | rawId: coerceToBase64Url(rawId), 101 | type: assertedCredential.type, 102 | extensions: assertedCredential.getClientExtensionResults(), 103 | response: { 104 | authenticatorData: coerceToBase64Url(authData), 105 | clientDataJson: coerceToBase64Url(clientDataJSON), 106 | //userHandle: userHandle !== null ? coerceToBase64Url(userHandle) : null, 107 | signature: coerceToBase64Url(sig) 108 | } 109 | }; 110 | 111 | let response; 112 | try { 113 | let res = await fetch("/mfamakeAssertion", { 114 | method: 'POST', // or 'PUT' 115 | body: JSON.stringify(data), // data can be `string` or {object}! 116 | headers: { 117 | 'Accept': 'application/json', 118 | 'Content-Type': 'application/json', 119 | 'RequestVerificationToken': document.getElementById('RequestVerificationToken').value 120 | } 121 | }); 122 | 123 | response = await res.json(); 124 | } catch (e) { 125 | showErrorAlert("Request to server failed", e); 126 | throw e; 127 | } 128 | 129 | //console.log("Assertion Object", response); 130 | 131 | // show error 132 | if (response.status !== "ok") { 133 | console.log("Error doing assertion"); 134 | console.log(response.errorMessage); 135 | document.getElementById('fido2logindisplay').innerHTML = ''; 136 | showErrorAlert(response.errorMessage); 137 | return; 138 | } 139 | 140 | //document.getElementById('fido2logindisplay').innerHTML = 'Logged In!
'; 141 | 142 | // show success message 143 | //await Swal.fire({ 144 | // title: 'Logged In!', 145 | // text: 'You\'re logged in successfully.', 146 | // //type: 'success', 147 | // timer: 2000 148 | //}); 149 | let fido2ReturnUrl = document.getElementById('fido2ReturnUrl').innerText; 150 | if (!fido2ReturnUrl) { 151 | fido2ReturnUrl = "/"; 152 | } 153 | window.location.href = fido2ReturnUrl; 154 | } 155 | -------------------------------------------------------------------------------- /IdentityProvider/wwwroot/js/mfa.register.js: -------------------------------------------------------------------------------- 1 | document.getElementById('register').addEventListener('submit', handleRegisterSubmit); 2 | 3 | async function handleRegisterSubmit(event) { 4 | event.preventDefault(); 5 | 6 | let username = this.username.value; 7 | //let displayName = this.displayName.value; 8 | // passwordfield is omitted in demo 9 | // let password = this.password.value; 10 | // possible values: none, direct, indirect 11 | let attestation_type = "none"; 12 | // possible values:' + fido2TapYourSecurityKeyToFinishRegistration +'
';
65 |
66 | //Swal.fire({
67 | // title: 'Registering...',
68 | // text: 'Tap your security key to finish registration.',
69 | // imageUrl: "/images/securitykey.min.svg",
70 | // showCancelButton: true,
71 | // showConfirmButton: false,
72 | // focusConfirm: false,
73 | // focusCancel: false
74 | //});
75 |
76 | //console.log("Creating PublicKeyCredential...");
77 | //console.log(navigator);
78 | //console.log(navigator.credentials);
79 | //console.log(makeCredentialOptions);
80 | let newCredential;
81 | try {
82 | newCredential = await navigator.credentials.create({
83 | publicKey: makeCredentialOptions
84 | });
85 | } catch (e) {
86 | const fido2RegistrationError = document.getElementById('fido2RegistrationError').innerText;
87 | console.error(fido2RegistrationError, e);
88 | document.getElementById('fido2mfadisplay').innerHTML = '';
89 | showErrorAlert(fido2RegistrationError, e);
90 | }
91 |
92 | console.log("PublicKeyCredential Created", newCredential);
93 |
94 | try {
95 | registerNewCredential(newCredential);
96 |
97 | } catch (e) {
98 | showErrorAlert(err.message ? err.message : err);
99 | }
100 | }
101 |
102 | async function fetchMakeCredentialOptions(formData) {
103 | let response = await fetch('/mfamakeCredentialOptions', {
104 | method: 'POST', // or 'PUT'
105 | body: formData, // data can be `string` or {object}!
106 | headers: {
107 | 'Accept': 'application/json',
108 | 'RequestVerificationToken': document.getElementById('RequestVerificationToken').value
109 | }
110 | });
111 |
112 | let data = await response.json();
113 |
114 | return data;
115 | }
116 |
117 | // This should be used to verify the auth data with the server
118 | async function registerNewCredential(newCredential) {
119 | // Move data into Arrays incase it is super long
120 | let attestationObject = new Uint8Array(newCredential.response.attestationObject);
121 | let clientDataJSON = new Uint8Array(newCredential.response.clientDataJSON);
122 | let rawId = new Uint8Array(newCredential.rawId);
123 |
124 | const data = {
125 | id: newCredential.id,
126 | rawId: coerceToBase64Url(rawId),
127 | type: newCredential.type,
128 | extensions: newCredential.getClientExtensionResults(),
129 | response: {
130 | AttestationObject: coerceToBase64Url(attestationObject),
131 | clientDataJson: coerceToBase64Url(clientDataJSON)
132 | }
133 | };
134 |
135 | let response;
136 | try {
137 | response = await registerCredentialWithServer(data);
138 | } catch (e) {
139 | showErrorAlert(e);
140 | }
141 |
142 | //console.log("Credential Object", response);
143 |
144 | // show error
145 | if (response.status !== "ok") {
146 | console.log("Error creating credential");
147 | console.log(response.errorMessage);
148 | showErrorAlert(response.errorMessage);
149 | return;
150 | }
151 |
152 | // show success
153 | Swal.fire({
154 | title: 'Registration Successful!',
155 | text: 'You\'ve registered successfully.',
156 | // type: 'success',
157 | timer: 2000
158 | });
159 |
160 | // possible values: true,false
161 | window.location.href = "/Identity/Account/Manage/GenerateRecoveryCodes";
162 | }
163 |
164 | async function registerCredentialWithServer(formData) {
165 | let response = await fetch('/mfamakeCredential', {
166 | method: 'POST', // or 'PUT'
167 | body: JSON.stringify(formData), // data can be `string` or {object}!
168 | headers: {
169 | 'Accept': 'application/json',
170 | 'Content-Type': 'application/json',
171 | 'RequestVerificationToken': document.getElementById('RequestVerificationToken').value
172 | }
173 | });
174 |
175 | let data = await response.json();
176 |
177 | return data;
178 | }
--------------------------------------------------------------------------------
/IdentityProvider/wwwroot/js/site.js:
--------------------------------------------------------------------------------
1 | // Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
2 | // for details on configuring this project to bundle and minify static web assets.
3 |
4 | // Write your JavaScript code.
5 |
--------------------------------------------------------------------------------
/IdentityProvider/wwwroot/lib/bootstrap/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2011-2021 Twitter, Inc.
4 | Copyright (c) 2011-2021 The Bootstrap Authors
5 |
6 | Permission is hereby granted, free of charge, to any person obtaining a copy
7 | of this software and associated documentation files (the "Software"), to deal
8 | in the Software without restriction, including without limitation the rights
9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be included in
14 | all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22 | THE SOFTWARE.
23 |
--------------------------------------------------------------------------------
/IdentityProvider/wwwroot/lib/jquery-validation-unobtrusive/LICENSE.txt:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) .NET Foundation and Contributors
4 |
5 | All rights reserved.
6 |
7 | Permission is hereby granted, free of charge, to any person obtaining a copy
8 | of this software and associated documentation files (the "Software"), to deal
9 | in the Software without restriction, including without limitation the rights
10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11 | copies of the Software, and to permit persons to whom the Software is
12 | furnished to do so, subject to the following conditions:
13 |
14 | The above copyright notice and this permission notice shall be included in all
15 | copies or substantial portions of the Software.
16 |
17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23 | SOFTWARE.
24 |
--------------------------------------------------------------------------------
/IdentityProvider/wwwroot/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @license
3 | * Unobtrusive validation support library for jQuery and jQuery Validate
4 | * Copyright (c) .NET Foundation. All rights reserved.
5 | * Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
6 | * @version v4.0.0
7 | */
8 | !function(a){"function"==typeof define&&define.amd?define("jquery.validate.unobtrusive",["jquery-validation"],a):"object"==typeof module&&module.exports?module.exports=a(require("jquery-validation")):jQuery.validator.unobtrusive=a(jQuery)}(function(s){var a,o=s.validator,d="unobtrusiveValidation";function l(a,e,n){a.rules[e]=n,a.message&&(a.messages[e]=a.message)}function u(a){return a.replace(/([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g,"\\$1")}function n(a){return a.substr(0,a.lastIndexOf(".")+1)}function m(a,e){return a=0===a.indexOf("*.")?a.replace("*.",e):a}function f(a){var e=s(this),n="__jquery_unobtrusive_validation_form_reset";if(!e.data(n)){e.data(n,!0);try{e.data("validator").resetForm()}finally{e.removeData(n)}e.find(".validation-summary-errors").addClass("validation-summary-valid").removeClass("validation-summary-errors"),e.find(".field-validation-error").addClass("field-validation-valid").removeClass("field-validation-error").removeData("unobtrusiveContainer").find(">*").removeData("unobtrusiveContainer")}}function p(n){function a(a,e){(a=r[a])&&s.isFunction(a)&&a.apply(n,e)}var e=s(n),t=e.data(d),i=s.proxy(f,n),r=o.unobtrusive.options||{};return t||(t={options:{errorClass:r.errorClass||"input-validation-error",errorElement:r.errorElement||"span",errorPlacement:function(){!function(a,e){var e=s(this).find("[data-valmsg-for='"+u(e[0].name)+"']"),n=(n=e.attr("data-valmsg-replace"))?!1!==s.parseJSON(n):null;e.removeClass("field-validation-valid").addClass("field-validation-error"),a.data("unobtrusiveContainer",e),n?(e.empty(),a.removeClass("input-validation-error").appendTo(e)):a.hide()}.apply(n,arguments),a("errorPlacement",arguments)},invalidHandler:function(){!function(a,e){var n=s(this).find("[data-valmsg-summary=true]"),t=n.find("ul");t&&t.length&&e.errorList.length&&(t.empty(),n.addClass("validation-summary-errors").removeClass("validation-summary-valid"),s.each(e.errorList,function(){s("").html(this.message).appendTo(t)}))}.apply(n,arguments),a("invalidHandler",arguments)},messages:{},rules:{},success:function(){!function(a){var e,n=a.data("unobtrusiveContainer");n&&(e=(e=n.attr("data-valmsg-replace"))?s.parseJSON(e):null,n.addClass("field-validation-valid").removeClass("field-validation-error"),a.removeData("unobtrusiveContainer"),e&&n.empty())}.apply(n,arguments),a("success",arguments)}},attachValidation:function(){e.off("reset."+d,i).on("reset."+d,i).validate(this.options)},validate:function(){return e.validate(),e.valid()}},e.data(d,t)),t}return o.unobtrusive={adapters:[],parseElement:function(t,a){var e,i,r,o=s(t),d=o.parents("form")[0];d&&((e=p(d)).options.rules[t.name]=i={},e.options.messages[t.name]=r={},s.each(this.adapters,function(){var a="data-val-"+this.name,e=o.attr(a),n={};void 0!==e&&(a+="-",s.each(this.params,function(){n[this]=o.attr(a+this)}),this.adapt({element:t,form:d,message:e,params:n,rules:i,messages:r}))}),s.extend(i,{__dummy__:!0}),a||e.attachValidation())},parse:function(a){var a=s(a),e=a.parents().addBack().filter("form").add(a.find("form")).has("[data-val=true]");a.find("[data-val=true]").each(function(){o.unobtrusive.parseElement(this,!0)}),e.each(function(){var a=p(this);a&&a.attachValidation()})}},(a=o.unobtrusive.adapters).add=function(a,e,n){return n||(n=e,e=[]),this.push({name:a,params:e,adapt:n}),this},a.addBool=function(e,n){return this.add(e,function(a){l(a,n||e,!0)})},a.addMinMax=function(a,t,i,r,e,n){return this.add(a,[e||"min",n||"max"],function(a){var e=a.params.min,n=a.params.max;e&&n?l(a,r,[e,n]):e?l(a,t,e):n&&l(a,i,n)})},a.addSingleVal=function(e,n,t){return this.add(e,[n||"val"],function(a){l(a,t||e,a.params[n])})},o.addMethod("__dummy__",function(a,e,n){return!0}),o.addMethod("regex",function(a,e,n){return!!this.optional(e)||(e=new RegExp(n).exec(a))&&0===e.index&&e[0].length===a.length}),o.addMethod("nonalphamin",function(a,e,n){var t;return t=n?(t=a.match(/\W/g))&&t.length>=n:t}),o.methods.extension?(a.addSingleVal("accept","mimtype"),a.addSingleVal("extension","extension")):a.addSingleVal("extension","extension","accept"),a.addSingleVal("regex","pattern"),a.addBool("creditcard").addBool("date").addBool("digits").addBool("email").addBool("number").addBool("url"),a.addMinMax("length","minlength","maxlength","rangelength").addMinMax("range","min","max","range"),a.addMinMax("minlength","minlength").addMinMax("maxlength","minlength","maxlength"),a.add("equalto",["other"],function(a){var e=n(a.element.name),e=m(a.params.other,e);l(a,"equalTo",s(a.form).find(":input").filter("[name='"+u(e)+"']")[0])}),a.add("required",function(a){"INPUT"===a.element.tagName.toUpperCase()&&"CHECKBOX"===a.element.type.toUpperCase()||l(a,"required",!0)}),a.add("remote",["url","type","additionalfields"],function(t){var i={url:t.params.url,type:t.params.type||"GET",data:{}},r=n(t.element.name);s.each((t.params.additionalfields||t.element.name).replace(/^\s+|\s+$/g,"").split(/\s*,\s*/g),function(a,e){var n=m(e,r);i.data[n]=function(){var a=s(t.form).find(":input").filter("[name='"+u(n)+"']");return a.is(":checkbox")?a.filter(":checked").val()||a.filter(":hidden").val()||"":a.is(":radio")?a.filter(":checked").val()||"":a.val()}}),l(t,"remote",i)}),a.add("password",["min","nonalphamin","regex"],function(a){a.params.min&&l(a,"minlength",a.params.min),a.params.nonalphamin&&l(a,"nonalphamin",a.params.nonalphamin),a.params.regex&&l(a,"regex",a.params.regex)}),a.add("fileextensions",["extensions"],function(a){l(a,"extension",a.params.extensions)}),s(function(){o.unobtrusive.parse(document)}),o.unobtrusive});
--------------------------------------------------------------------------------
/IdentityProvider/wwwroot/lib/jquery-validation/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | =====================
3 |
4 | Copyright Jörn Zaefferer
5 |
6 | Permission is hereby granted, free of charge, to any person obtaining a copy
7 | of this software and associated documentation files (the "Software"), to deal
8 | in the Software without restriction, including without limitation the rights
9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be included in
14 | all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22 | THE SOFTWARE.
23 |
--------------------------------------------------------------------------------
/IdentityProvider/wwwroot/lib/jquery/LICENSE.txt:
--------------------------------------------------------------------------------
1 |
2 | Copyright OpenJS Foundation and other contributors, https://openjsf.org/
3 |
4 | Permission is hereby granted, free of charge, to any person obtaining
5 | a copy of this software and associated documentation files (the
6 | "Software"), to deal in the Software without restriction, including
7 | without limitation the rights to use, copy, modify, merge, publish,
8 | distribute, sublicense, and/or sell copies of the Software, and to
9 | permit persons to whom the Software is furnished to do so, subject to
10 | the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Backend for frontend security architecture (BFF) using Vue.JS and ASP.NET Core
2 |
3 | Implements 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.
4 |
5 | [](https://github.com/damienbod/bff-aspnetcore-oidc-vuejs/actions/workflows/dotnet.yml) [](https://github.com/damienbod/bff-aspnetcore-oidc-vuejs/blob/main/LICENSE)
6 |
7 | ## Setup Server
8 |
9 | The 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.
10 |
11 | > [!IMPORTANT]
12 | > In production, the Vue.js project is built into the **wwwroot** of the .NET project.
13 |
14 | 
15 |
16 | Configure 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).
17 |
18 | ```json
19 | "UiDevServerUrl": "https://localhost:4202",
20 | "ReverseProxy": {
21 | "Routes": {
22 | "route1": {
23 | "ClusterId": "cluster1",
24 | "Match": {
25 | "Path": "{**catch-all}"
26 | }
27 | }
28 | },
29 | "Clusters": {
30 | "cluster1": {
31 | "HttpClient": {
32 | "SslProtocols": [
33 | "Tls12"
34 | ]
35 | },
36 | "Destinations": {
37 | "cluster1/destination1": {
38 | "Address": "https://localhost:4202/"
39 | }
40 | }
41 | }
42 | }
43 | }
44 | ```
45 |
46 |
47 | ## Setup Vue.js Vite project
48 |
49 | Add the certificates to the nx project for example in the **/certs** folder
50 |
51 | Update the vite.config.ts file:
52 |
53 | ```typescipt
54 | import { defineConfig } from 'vite'
55 | import vue from '@vitejs/plugin-vue'
56 | import fs from 'fs';
57 |
58 | // https://vitejs.dev/config/
59 | export default defineConfig({
60 | plugins: [vue()],
61 | server: {
62 | https: {
63 | key: fs.readFileSync('./certs/dev_localhost.key'),
64 | cert: fs.readFileSync('./certs/dev_localhost.pem'),
65 | },
66 | port: 4202,
67 | strictPort: true, // exit if port is in use
68 | hmr: {
69 | clientPort: 4202, // point vite websocket connection to vite directly, circumventing .net proxy
70 | },
71 | },
72 | optimizeDeps: {
73 | force: true,
74 | },
75 | build: {
76 | outDir: "../server/wwwroot",
77 | emptyOutDir: true
78 | },
79 | })
80 | ```
81 |
82 |
83 | > [!NOTE]
84 | > The ASP.NET Core project setup uses port 4202, this needs to match the YARP reverse proxy settings for development.
85 |
86 |
87 | ## Setup development
88 |
89 | The 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.
90 |
91 | 
92 |
93 | > [!NOTE]
94 | > Always run in HTTPS, both in development and production
95 |
96 | ```
97 | npm start
98 | ```
99 |
100 | The OpenID Connect client is setup using the default ASP.NET Core OpenID connect handler.
101 |
102 | ```csharp
103 | services.AddAuthentication(options =>
104 | {
105 | options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
106 | options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
107 | })
108 | .AddCookie()
109 | .AddOpenIdConnect(options =>
110 | {
111 | builder.Configuration.GetSection("OpenIDConnectSettings").Bind(options);
112 | options.Authority = builder.Configuration["OpenIDConnectSettings:Authority"];
113 | options.ClientId = builder.Configuration["OpenIDConnectSettings:ClientId"];
114 | options.ClientSecret = builder.Configuration["OpenIDConnectSettings:ClientSecret"];
115 |
116 | options.SignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
117 | options.ResponseType = OpenIdConnectResponseType.Code;
118 |
119 | options.SaveTokens = true;
120 | options.GetClaimsFromUserInfoEndpoint = true;
121 | options.TokenValidationParameters = new TokenValidationParameters
122 | {
123 | NameClaimType = "name"
124 | };
125 | });
126 |
127 | services.AddControllersWithViews(options =>
128 | options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute()));
129 |
130 | services.AddRazorPages().AddMvcOptions(options =>
131 | {
132 | var policy = new AuthorizationPolicyBuilder()
133 | .RequireAuthenticatedUser()
134 | .Build();
135 | options.Filters.Add(new AuthorizeFilter(policy));
136 | });
137 | ```
138 |
139 | Add the Azure App registration settings to the **appsettings.Development.json** and the **ClientSecret** to the user secrets.
140 |
141 | ```json
142 | "OpenIDConnectSettings": {
143 | "Authority": "https://localhost:44318",
144 | "ClientId": "oidc-pkce-confidential",
145 | "ClientSecret": "oidc-pkce-confidential_secret"
146 | },
147 | ```
148 |
149 | ## Debugging
150 |
151 | Start the Vue.js project from the **ui** folder
152 |
153 | ```
154 | npm start
155 | ```
156 |
157 | Start the ASP.NET Core project from the **server** folder
158 |
159 | ```
160 | dotnet run
161 | ```
162 |
163 | Or just open Visual Studio and run the solution.
164 |
165 | ## Github actions build
166 |
167 | Github 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.
168 |
169 | ```yaml
170 |
171 | name: .NET and npm build
172 |
173 | on:
174 | push:
175 | branches: [ "main" ]
176 | pull_request:
177 | branches: [ "main" ]
178 |
179 | jobs:
180 | build:
181 | runs-on: ubuntu-latest
182 |
183 | steps:
184 |
185 | - uses: actions/checkout@v4
186 | - name: Setup .NET
187 | uses: actions/setup-dotnet@v4
188 | with:
189 | dotnet-version: 9.0.x
190 |
191 | - name: Restore dependencies
192 | run: dotnet restore
193 |
194 | - name: npm setup
195 | working-directory: ui
196 | run: npm install
197 |
198 | - name: ui-build
199 | working-directory: ui
200 | run: npm run build
201 |
202 | - name: Build
203 | run: dotnet build --no-restore
204 | - name: Test
205 | run: dotnet test --no-build --verbosity normal
206 | ```
207 |
208 | ## Credits and used libraries
209 |
210 | - NetEscapades.AspNetCore.SecurityHeaders
211 | - Yarp.ReverseProxy
212 | - Microsoft.Identity.Web
213 | - ASP.NET Core
214 | - Vue.js
215 | - Vite
216 | - OpenIddict
217 |
218 | ## Links
219 |
220 | https://vuejs.org/
221 |
222 | https://vitejs.dev/
223 |
224 | https://github.com/vuejs/create-vue
225 |
226 | https://documentation.openiddict.com/
227 |
228 | https://www.koderhq.com/tutorial/vue/vite/
229 |
230 | https://github.com/damienbod/bff-aspnetcore-angular
231 |
232 | https://github.com/damienbod/bff-openiddict-aspnetcore-angular
233 |
234 | https://github.com/damienbod/bff-aspnetcore-vuejs
235 |
--------------------------------------------------------------------------------
/bff/server/BffOidc.Server.csproj:
--------------------------------------------------------------------------------
1 |
15 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/bff/server/Pages/Error.cshtml.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Mvc;
2 | using Microsoft.AspNetCore.Mvc.RazorPages;
3 | using System.Diagnostics;
4 |
5 | namespace BffOidc.Server.Pages;
6 |
7 | [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
8 | [IgnoreAntiforgeryToken]
9 | public class ErrorModel : PageModel
10 | {
11 | public string? RequestId { get; set; }
12 |
13 | public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
14 |
15 | public void OnGet()
16 | {
17 | RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/bff/server/Pages/_Host.cshtml:
--------------------------------------------------------------------------------
1 | @page "/"
2 | @namespace BlazorBffAzureAD.Pages
3 | @using System.Net;
4 | @using NetEscapades.AspNetCore.SecurityHeaders;
5 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
6 | @addTagHelper *, NetEscapades.AspNetCore.SecurityHeaders.TagHelpers
7 | @inject IHostEnvironment hostEnvironment
8 | @inject IConfiguration config
9 | @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery antiForgery
10 | @{
11 | Layout = null;
12 |
13 | var source = string.Empty;
14 | if (hostEnvironment.IsDevelopment())
15 | {
16 | var httpClient = new HttpClient();
17 | source = await httpClient.GetStringAsync($"{config["UiDevServerUrl"]}/index.html");
18 | }
19 | else
20 | {
21 | source = System.IO.File.ReadAllText($"{System.IO.Directory.GetCurrentDirectory()}{@"/wwwroot/index.html"}");
22 | }
23 |
24 | var nonce = HttpContext.GetNonce();
25 |
26 | // The nonce is passed to the client through the HTML to avoid sync issues between tabs
27 | source = source.Replace("**PLACEHOLDER_NONCE_SERVER**", nonce);
28 |
29 | var nonceScript = $"
10 |
11 |
12 |
13 |
14 |
15 |
16 |
16 |
37 | Error.
17 |An error occurred while processing your request.
18 | 19 | @if (Model.ShowRequestId) 20 | { 21 |
22 | Request ID: @Model.RequestId
23 |
Development Mode
27 |28 | Swapping to the Development environment displays detailed information about the error that occurred. 29 |
30 |31 | The Development environment shouldn't be enabled for deployed applications. 32 | It can result in displaying sensitive information from exceptions to end users. 33 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 34 | and restarting the app. 35 |
36 |