上一篇我們在後端建立了 Token 發行與驗證的機制,今天我們回到主題在 Blaoz 怎麼取得 Token
登入畫面#
首先我們建立一個登入的頁面,有帳號和密碼欄位以及一個送出的按鈕
- 建立登入頁,在
Blazor.JWT.Client
專案內的Page
資料夾建立Login.razor
,並且完成表單
![](https://i.imgur.com/jj0o10O.png)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| @page "/Login"
<div class="form-signin w-100 m-auto">
<form data-bitwarden-watching="1">
<h1 class="h3 mb-3 fw-normal">請登入</h1>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> 記住我
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">登入</button>
<p class="mt-5 mb-3 text-muted">© 2022</p>
</form>
</div>
@code {
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| .form-signin {
max-width: 330px;
padding: 15px;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
main {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
|
- 建立資料類別以及資料繫結
我們在
Blazor.Jwt.Shared
建立登入表單所需要的類別LoginDto.cs
1
2
3
4
5
6
7
8
9
10
11
12
| public class LoginDto
{
/// <summary>
/// 使用者名稱
/// </summary>
public string Username { get; set; }
/// <summary>
/// 密碼
/// </summary>
public string Password { get; set; }
}
|
並且修改 Login.razor
的內容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| @page "/Login"
@using Blazor.Jwt.Shared
<div class="form-signin w-100 m-auto">
<EditForm Model="@loginDto" OnValidSubmit="HandleValidSubmit" data-bitwarden-watching="1">
<h1 class="h3 mb-3 fw-normal">請登入</h1>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"
@bind-value="loginDto.Username">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password"
@bind-value="loginDto.Password">
<label for="floatingPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> 記住我
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">登入</button>
<p class="mt-5 mb-3 text-muted">© 2022</p>
</EditForm>
</div>
@code {
private LoginDto loginDto = new LoginDto();
private void HandleValidSubmit()
{
Console.WriteLine($"Username:{loginDto.Username}");
Console.WriteLine($"Password:{loginDto.Password}");
}
}
|
完成後可以試著填入資料並點選登入,如果沒意外的話可以有 Console 上看到,就代表成功將欄值綁定了
![](https://i.imgur.com/Kuxtg6H.png)
- 將使用者名稱及密碼送到後端取得 Token
Razor 元件中加入
using
1
2
| @using System.Net.Http
@inject HttpClient Http
|
在方法內呼叫 API
1
2
3
4
5
| private async Task HandleValidSubmit()
{
var token = await(await Http.PostAsJsonAsync("api/Authorize/Login", loginDto)).Content.ReadAsStringAsync();
Console.WriteLine($"Token {token}");
}
|
WebAPI 部分#
做完前端後,要完成後端的部分不然是沒辦法作用的,在昨天的 API Controller 內加入一個新的 Action
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| [HttpPost]
public IActionResult Login(LoginDto query)
{
var key = "2022/09/28 IThome 鐵人賽";
var claims = new List<Claim>
{
// 使用者名稱
new(JwtRegisteredClaimNames.Sub,query.Username),
// Token Id
new(JwtRegisteredClaimNames.Jti,Guid.NewGuid().ToString())
};
var claimsIdentity = new ClaimsIdentity(claims);
var securityKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(key));
var signingCredentials = new SigningCredentials(securityKey, SecurityAlgorithms.HmacSha256Signature);
var tokenDescriptor = new SecurityTokenDescriptor
{
Issuer = "發行者",
Subject = claimsIdentity,
Expires = DateTime.UtcNow.AddMinutes(30),
SigningCredentials = signingCredentials
};
var tokenHandler = new JwtSecurityTokenHandler();
var securityToken = tokenHandler.CreateToken(tokenDescriptor);
return Ok(tokenHandler.WriteToken(securityToken));
}
|
完成後,建置完成後,到剛剛做的登入頁面,輸入帳號密碼登入!
![](https://i.imgur.com/l2yL9OV.png)
做到這邊已經初步的打通了前後端,下一章會說明怎麼讓請求(Request)送出時帶著 Token,還有 Token 該如何保存才好