Skip to content

Commit 384fd9d

Browse files
ArgoZhangArgoZhang
authored
doc(MFA): add MFA sample code (#5975)
* doc: 增加 MFA 示例 * doc: 增加菜单
1 parent 496004b commit 384fd9d

File tree

10 files changed

+252
-3
lines changed

10 files changed

+252
-3
lines changed

‎src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<DialButton DialMode="DialMode.Radial" Icon="fa-solid fa-gear" Radius="100" Placement="Placement.BottomEnd" class="bb-dial-gear">
2222
<ButtonTemplate>
2323
<div class="btn-circle btn-fade dial-button-gear">
24-
<img src="./images/logo.png" />
24+
<img src="@WebsiteOption.CurrentValue.GetAssetUrl("images/logo.png")" />
2525
</div>
2626
</ButtonTemplate>
2727
<ChildContent>

‎src/BootstrapBlazor.Server/Components/Layout/TutorialsNavMenu.razor.cs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,11 @@ protected override async Task OnInitializedAsync()
115115
{
116116
Text = Localizer["MemorialMode"],
117117
Url = "tutorials/memorial",
118+
},
119+
new()
120+
{
121+
Text = Localizer["MFA"],
122+
Url = "tutorials/mfa",
118123
}
119124
]);
120125
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/Login.razor‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@page "/tutorials/mfa"
2+
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
3+
4+
<div class="bb-sign">
5+
<div class="text-center">
6+
<img src="@WebsiteOption.CurrentValue.GetAssetUrl("images/logo.png")" />
7+
<h3>Sign in to Blazor</h3>
8+
</div>
9+
<div class="bb-sign-body">
10+
<div class="mb-2">Username or email address</div>
11+
<input type="text" class="form-control mb-3" value="[email protected]" />
12+
<div class="d-flex mb-2">
13+
<div>Password</div>
14+
<div>Forgot password?</div>
15+
</div>
16+
<input type="password" class="form-control" value="123456" />
17+
<button type="button" class="form-control bg-success text-white mt-3" @onclick="OnSubmit">Sign in</button>
18+
<div class="bb-sign-divider text-center mt-3">Or</div>
19+
<button type="button" class="form-control bg-secondary mt-3">
20+
<i class="fa-solid fa-user-lock"></i>
21+
<span>Sign in with passkey</span>
22+
</button>
23+
</div>
24+
<div class="bb-sign-callout mt-3">
25+
<div class="mt-1">New to Blazor? <a href="#">Create an account</a></div>
26+
</div>
27+
</div>
28+
29+
@code {
30+
[Inject, NotNull]
31+
private NavigationManager? NavigationManager { get; set; }
32+
33+
private void OnSubmit()
34+
{
35+
NavigationManager.NavigateTo("/tutorials/mfa/two-factor");
36+
}
37+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/Login.razor.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.bb-sign {
2+
margin: 0 auto;
3+
width: 320px;
4+
padding: 0 1rem;
5+
}
6+
7+
.bb-sign img {
8+
background-color: var(--bb-primary-color);
9+
border-radius: 50%;
10+
margin-block: 2rem;
11+
}
12+
13+
.bb-sign-body {
14+
background-color: #f6f8fa;
15+
border: 1px solid var(--bs-border-color);
16+
border-radius: var(--bs-border-radius);
17+
padding: 1rem;
18+
}
19+
20+
.bb-sign-divider {
21+
display: flex;
22+
flex-basis: 100%;
23+
align-items: center;
24+
}
25+
26+
.bb-sign-divider::before,
27+
.bb-sign-divider::after {
28+
content: "";
29+
position: relative;
30+
display: inline-block;
31+
width: 50%;
32+
height: 1px;
33+
vertical-align: middle;
34+
background-color: #d1d9e0;
35+
}
36+
37+
.bb-sign-divider::before {
38+
right: 0.5rem;
39+
}
40+
41+
.bb-sign-divider::after {
42+
left: 0.5rem;
43+
}
44+
45+
.bb-sign-callout {
46+
padding: 1rem;
47+
border: 1px solid var(--bs-border-color);
48+
border-radius: var(--bs-border-radius);
49+
text-align: center;
50+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/TwoFactor.razor‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@page "/tutorials/mfa/two-factor"
2+
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
3+
4+
<div class="bb-sign">
5+
<div class="text-center">
6+
<img src="@WebsiteOption.CurrentValue.GetAssetUrl("images/logo.png")" />
7+
<h1>Two-factor authentication</h1>
8+
</div>
9+
<div class="bb-sign-body">
10+
<div class="text-center">
11+
<img class="rounded-2" src="@WebsiteOption.CurrentValue.GetAssetUrl("images/logo.png")" />
12+
<h3>Blazor Mobile</h3>
13+
</div>
14+
<div>We sent you a sign-in request on your Blazor Mobile app. Approve the request to verify your identity.</div>
15+
</div>
16+
<div class="bb-sign-callout mt-3">
17+
<div class="mt-1">
18+
<a href="./tutorials/mfa/two-factor/app">Use your authenticator app</a>
19+
</div>
20+
</div>
21+
</div>

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/TwoFactor.razor.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.bb-sign {
2+
margin: 0 auto;
3+
width: 320px;
4+
padding: 0 1rem;
5+
}
6+
7+
.bb-sign img {
8+
background-color: var(--bb-primary-color);
9+
border-radius: 50%;
10+
margin-block: 2rem;
11+
}
12+
13+
.bb-sign h1 {
14+
font-size: 24px;
15+
font-weight: 300;
16+
letter-spacing: -0.5px;
17+
margin-block-end: 1rem;
18+
}
19+
20+
.bb-sign-body {
21+
background-color: #f6f8fa;
22+
border: 1px solid var(--bs-border-color);
23+
border-radius: var(--bs-border-radius);
24+
padding: 1rem;
25+
}
26+
27+
.bb-sign-body img {
28+
width: 32px;
29+
height: auto;
30+
margin: 0;
31+
margin-block-end: 1rem;
32+
}
33+
34+
.bb-sign-body h3 {
35+
font-size: 20px;
36+
font-weight: 400;
37+
}
38+
39+
.bb-sign-callout {
40+
padding: 1rem;
41+
border: 1px solid var(--bs-border-color);
42+
border-radius: var(--bs-border-radius);
43+
text-align: center;
44+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/TwoFactorApp.razor‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@page "/tutorials/mfa/two-factor/app"
2+
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
3+
4+
<div class="bb-sign">
5+
<div class="text-center">
6+
<img src="@WebsiteOption.CurrentValue.GetAssetUrl("images/logo.png")" />
7+
<h3>Two-factor authentication</h3>
8+
</div>
9+
<div class="bb-sign-body">
10+
<div class="text-center">
11+
<img class="rounded-2" src="@WebsiteOption.CurrentValue.GetAssetUrl("images/logo.png")" />
12+
<h3>Authentication code</h3>
13+
</div>
14+
<div>
15+
<OtpInput @bind-Value="@_code"></OtpInput>
16+
</div>
17+
<button type="button" class="form-control bg-success text-white mt-3" @onclick="OnVerify">Sign in</button>
18+
<div class="mt-3">
19+
Open your two-factor authenticator (TOTP) app or browser extension to view your authentication code.
20+
</div>
21+
</div>
22+
</div>
23+
24+
@code {
25+
[Inject, NotNull]
26+
private ITotpService? TotpService { get; set; }
27+
28+
[Inject, NotNull]
29+
private ToastService? ToastService { get; set; }
30+
31+
private string _code = "";
32+
33+
private async Task OnVerify()
34+
{
35+
if (string.IsNullOrEmpty(_code))
36+
{
37+
return;
38+
}
39+
if (TotpService.Verify(_code))
40+
{
41+
await ToastService.Success("Sign In", "Login success. redirect home Url");
42+
}
43+
else
44+
{
45+
await ToastService.Error("Sign In", "Login failed.");
46+
}
47+
}
48+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/TwoFactorApp.razor.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.bb-sign {
2+
margin: 0 auto;
3+
width: 406px;
4+
padding: 0 1rem;
5+
}
6+
7+
.bb-sign img {
8+
background-color: var(--bb-primary-color);
9+
border-radius: 50%;
10+
margin-block: 2rem;
11+
}
12+
13+
.bb-sign h1 {
14+
font-size: 24px;
15+
font-weight: 300;
16+
letter-spacing: -0.5px;
17+
margin-block-end: 1rem;
18+
}
19+
20+
.bb-sign-body {
21+
background-color: #f6f8fa;
22+
border: 1px solid var(--bs-border-color);
23+
border-radius: var(--bs-border-radius);
24+
padding: 1rem;
25+
}
26+
27+
.bb-sign-body img {
28+
width: 32px;
29+
height: auto;
30+
margin: 0;
31+
margin-block-end: 1rem;
32+
}
33+
34+
.bb-sign-body h3 {
35+
font-size: 20px;
36+
font-weight: 400;
37+
}
38+
39+
::deep .bb-opt-input .bb-opt-item {
40+
--bb-opt-item-width: 50px;
41+
--bb-opt-font-size: 2em;
42+
}

‎src/BootstrapBlazor.Server/Locales/en-US.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
"DrawingSummary": "Drawing",
2424
"AdminSummary": "Admin",
2525
"OnlineSheet": "UniverSheet",
26-
"MemorialMode": "Memorial"
26+
"MemorialMode": "Memorial",
27+
"MFA": "MFA"
2728
},
2829
"BootstrapBlazor.Server.Components.Components.Pre": {
2930
"LoadingText": "Loading ...",

‎src/BootstrapBlazor.Server/Locales/zh-CN.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
"DrawingSummary": "画图 Drawing",
2424
"AdminSummary": "中台 Admin",
2525
"OnlineSheet": "在线表格 UniverSheet",
26-
"MemorialMode": "追悼模式"
26+
"MemorialMode": "追悼模式",
27+
"MFA": "多因子认证 MFA"
2728
},
2829
"BootstrapBlazor.Server.Components.Components.Pre": {
2930
"LoadingText": "正在加载 ...",

0 commit comments

Comments
 (0)