ASP.NET Core與Dapper和VS 2017使用JWT身份驗證WEB API並在Angular2客戶端應用程式中使用它
目錄
identity.FindFirst("FitnessJWT")
ASP.NET Core使用JWT身份驗證WEB API並在Angular2客戶端應用程式中使用適當的專案結構設定。
介紹
我試圖在Web API
原始碼連結:https://github.com/rajeshdas85/JwtAuthentication
- 使用JWT身份驗證的ASP.NET Core中的Web API專案解決方案
- Angular2 / 4用於客戶端應用程式
請參閱下面的專案結構:
背景
步驟1
建立 ASP.NET Core Web API專案
- 開啟“Visual Studio 2017” - >轉到“檔案”選單 - >新建 - >專案
- 選擇專案模板。
- 右鍵單擊Solution Explorer - > Add - > New Project-> Class Library。
Fitness.JWT.API專案說明
我想解釋一下用於啟用Jwt身份驗證的專案原始碼的突出顯示部分。
使用程式碼
startup.cs
配置secretkey,允許跨源並應用使用策略身份驗證。
// public IConfigurationRoot Configuration { get; } //SecretKey for Authentication private const string SecretKey = "ABCneedtogetthisfromenvironmentXYZ"; private readonly SymmetricSecurityKey _signingKey = new SymmetricSecurityKey(Encoding.ASCII.GetBytes(SecretKey)); // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { // Add framework services. // services.AddMvc(); // Add framework services. // Add framework services. services.AddCors(options => { options.AddPolicy("CorsPolicy",//Allow Cross origin builder => builder.AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials()); }); services.AddOptions(); // Make authentication compulsory across the board (i.e. shut // down EVERYTHING unless explicitly opened up). services.AddMvc(config => { var policy = new AuthorizationPolicyBuilder() .RequireAuthenticatedUser() .Build(); config.Filters.Add(new AuthorizeFilter(policy)); }); // Use policy auth. services.AddAuthorization(options => { options.AddPolicy("FitnessJWT", policy => policy.RequireClaim("FitnessJWT", "FitnessUser")); }); // Get options from app settings var jwtAppSettingOptions = Configuration.GetSection(nameof(JwtIssuerOptions)); // Configure JwtIssuerOptions services.Configure<JwtIssuerOptions>(options => { options.Issuer = jwtAppSettingOptions[nameof(JwtIssuerOptions.Issuer)]; options.Audience = jwtAppSettingOptions[nameof(JwtIssuerOptions.Audience)]; options.SigningCredentials = new SigningCredentials (_signingKey, SecurityAlgorithms.HmacSha256); }); } //
JwtIssuerOptions.cs
這是類檔案,負責在伺服器中建立Auth唯一票證。
//
public class JwtIssuerOptions
{
/// <summary>
/// "iss" (Issuer) Claim
/// </summary>
/// <remarks>The "iss" (issuer) claim identifies the principal that issued the
/// JWT. The processing of this claim is generally application specific.
/// The "iss" value is a case-sensitive string containing a StringOrURI
/// value. Use of this claim is OPTIONAL.</remarks>
public string Issuer { get; set; }
/// <summary>
/// "sub" (Subject) Claim
/// </summary>
/// <remarks> The "sub" (subject) claim identifies the principal that is the
/// subject of the JWT. The claims in a JWT are normally statements
/// about the subject. The subject value MUST either be scoped to be
/// locally unique in the context of the issuer or be globally unique.
/// The processing of this claim is generally application specific. The
/// "sub" value is a case-sensitive string containing a StringOrURI
/// value. Use of this claim is OPTIONAL.</remarks>
public string Subject { get; set; }
/// <summary>
/// "aud" (Audience) Claim
/// </summary>
/// <remarks>The "aud" (audience) claim identifies the recipients that the JWT is
/// intended for. Each principal intended to process the JWT MUST
/// identify itself with a value in the audience claim. If the principal
/// processing the claim does not identify itself with a value in the
/// "aud" claim when this claim is present, then the JWT MUST be
/// rejected. In the general case, the "aud" value is an array of case-
/// sensitive strings, each containing a StringOrURI value. In the
/// special case when the JWT has one audience, the "aud" value MAY be a
/// single case-sensitive string containing a StringOrURI value. The
/// interpretation of audience values is generally application specific.
/// Use of this claim is OPTIONAL.</remarks>
public string Audience { get; set; }
/// <summary>
/// "nbf" (Not Before) Claim (default is UTC NOW)
/// </summary>
/// <remarks>The "nbf" (not before) claim identifies the time before which the JWT
/// MUST NOT be accepted for processing. The processing of the "nbf"
/// claim requires that the current date/time MUST be after or equal to
/// the not-before date/time listed in the "nbf" claim. Implementers MAY
/// provide for some small leeway, usually no more than a few minutes, to
/// account for clock skew. Its value MUST be a number containing a
/// NumericDate value. Use of this claim is OPTIONAL.</remarks>
public DateTime NotBefore => DateTime.UtcNow;
/// <summary>
/// "iat" (Issued At) Claim (default is UTC NOW)
/// </summary>
/// <remarks>The "iat" (issued at) claim identifies the time at which the JWT was
/// issued. This claim can be used to determine the age of the JWT. Its
/// value MUST be a number containing a NumericDate value. Use of this
/// claim is OPTIONAL.</remarks>
public DateTime IssuedAt => DateTime.UtcNow;
/// <summary>
/// Set the timespan the token will be valid for (default is 3 min/180 seconds)
/// </summary>
public TimeSpan ValidFor { get; set; } = TimeSpan.FromMinutes(1);
/// <summary>
/// "exp" (Expiration Time) Claim (returns IssuedAt + ValidFor)
/// </summary>
/// <remarks>The "exp" (expiration time) claim identifies the expiration time on
/// or after which the JWT MUST NOT be accepted for processing. The
/// processing of the "exp" claim requires that the current date/time
/// MUST be before the expiration date/time listed in the "exp" claim.
/// Implementers MAY provide for some small leeway, usually no more than
/// a few minutes, to account for clock skew. Its value MUST be a number
/// containing a NumericDate value. Use of this claim is OPTIONAL.</remarks>
public DateTime Expiration => IssuedAt.Add(ValidFor);
/// <summary>
/// "jti" (JWT ID) Claim (default ID is a GUID)
/// </summary>
/// <remarks>The "jti" (JWT ID) claim provides a unique identifier for the JWT.
/// The identifier value MUST be assigned in a manner that ensures that
/// there is a negligible probability that the same value will be
/// accidentally assigned to a different data object; if the application
/// uses multiple issuers, collisions MUST be prevented among values
/// produced by different issuers as well. The "jti" claim can be used
/// to prevent the JWT from being replayed. The "jti" value is a case-
/// sensitive string. Use of this claim is OPTIONAL.</remarks>
public Func<Task<string>> JtiGenerator =>
() => Task.FromResult(Guid.NewGuid().ToString());
/// <summary>
/// The signing key to use when generating tokens.
/// </summary>
public SigningCredentials SigningCredentials { get; set; }
}
//
JwtController.cs
它是匿名使用者將登入的控制器,它建立JWT安全令牌並對其進行編碼,並作為具有策略的響應傳送回客戶端。
identity.FindFirst("FitnessJWT")
請參閱以下程式碼:
[HttpPost]
[AllowAnonymous]
public async Task<IActionResult> Get([FromBody] ApplicationUser applicationUser)
{
var identity = await GetClaimsIdentity(applicationUser);
if (identity == null)
{
_logger.LogInformation($"Invalid username ({applicationUser.UserName})
or password ({applicationUser.Password})");
return BadRequest("Invalid credentials");
}
var claims = new[]
{
new Claim(JwtRegisteredClaimNames.Sub, applicationUser.UserName),
new Claim(JwtRegisteredClaimNames.Jti, await _jwtOptions.JtiGenerator()),
new Claim(JwtRegisteredClaimNames.Iat,
ToUnixEpochDate(_jwtOptions.IssuedAt).ToString(), ClaimValueTypes.Integer64),
identity.FindFirst("FitnessJWT")
};
// Create the JWT security token and encode it.
var jwt = new JwtSecurityToken(
issuer: _jwtOptions.Issuer,
audience: _jwtOptions.Audience,
claims: claims,
notBefore: _jwtOptions.NotBefore,
expires: _jwtOptions.Expiration,
signingCredentials: _jwtOptions.SigningCredentials);
var encodedJwt = new JwtSecurityTokenHandler().WriteToken(jwt);
// Serialize and return the response
var response = new
{
access_token = encodedJwt,
expires_in = (int)_jwtOptions.ValidFor.TotalSeconds,
State=1,
expire_datetime= _jwtOptions.IssuedAt
};
var json = JsonConvert.SerializeObject(response, _serializerSettings);
return new OkObjectResult(json);
}
JwtAuthTestController.cs
這個控制器我定義了策略[Authorize(Policy = "FitnessJWT")],所以當用戶請求控制器時,它必須匹配策略和金鑰,然後響應將返回給客戶端。
[HttpGet("[action]")]
[Authorize(Policy = "FitnessJWT")]
public IActionResult WeatherForecasts()
{
var rng = new Random();
List<WeatherForecast> lstWeatherForeCast = new List<WeatherForecast>();
for (int i = 0; i < 5; i++)
{
WeatherForecast obj = new WeatherForecast();
obj.DateFormatted = DateTime.Now.AddDays(i).ToString("d");
obj.TemperatureC = rng.Next(-20, 55);
obj.Summary = Summaries[rng.Next(Summaries.Length)];
lstWeatherForeCast.Add(obj);
}
var response = new
{
access_token = lstWeatherForeCast,
State = 1
};
var json = JsonConvert.SerializeObject(response, _serializerSettings);
return new OkObjectResult(json);
}
第2步:Angular2 / 4用於客戶端應用程式
我想補充其中一個。我沒有太多關注UI部分,但我試圖從Angualar2 / 4應用程式實現JWT Auth。
Fitness.App.UI解決方案
login.component.ts
通過傳遞使用者名稱和密碼使用typescript登入模組:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from "../../../app/services/auth.service";
import { LoginModel } from "../../model/login.model";
@Component({
selector: 'Fitness-Login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
providers: [AuthService]
})
export class LoginComponent {
loginModel = new LoginModel();
constructor(private router: Router, private authService: AuthService) {
}
login() {
this.authService.login(this.loginModel.userName, this.loginModel.password)
.then(result => {
if (result.State == 1) {
this.router.navigate(["/nav-menu"]);
}
else {
alert(result.access_token);
}
});
}
}
auth.service.ts
驗證憑據並重定向到主頁的身份驗證服務。
login(userName: string, password: string): Promise<ResponseResult> {
let data = {
"userName": userName,
"password": password
}
let headers = new Headers({ 'Content-Type': 'application/json' });
let applicationUser = JSON.stringify(data);
let options = new RequestOptions({ headers: headers });
if (this.checkLogin()) {
return this.authPost(this.localUrl + '/api/Jwt', applicationUser, options);
}
else {
return this.http.post(this.localUrl + '/api/Jwt', applicationUser, options).toPromise()
.then(
response => {
let result = response.json() as ResponseResult;
if (result.State == 1) {
let json = result.access_token as any;
localStorage.setItem(this.tokeyKey, json);
localStorage.setItem(this.tokeyExpKey, result.expire_datetime);
this.sg['isUserExist'] = true;
}
return result;
}
)
.catch(this.handleError);
}
}
app.module.client.ts
{ provide: 'ORIGIN_URL', useValue: 'http://localhost:57323' },JWT WEB API上的路徑。
您需要根據計算機URL更改本地主機API。
@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
BrowserModule,
FormsModule,
HttpModule,
...sharedConfig.imports
],
providers: [
//{ provide: 'ORIGIN_URL', useValue: location.origin },
{ provide: 'ORIGIN_URL', useValue: 'http://localhost:57323' },
AuthService, AuthGuard, SimpleGlobal
]
})
export class AppModule {
}
要執行應用程式,您需要將專案設定如下:
使用多個啟動專案執行解決方案。
然後在瀏覽器的兩個選項卡中,客戶端應用程式和Web API服務都將啟動。
應用程式的輸出在下面
使用者名稱:Test和密碼:Test
然後,它將重定向到導航選單頁面,如下所示:
原文地址: https://www.codeproject.com/Articles/1221556/ASP-NET-Core-With-Dapper-And-VS-2017-Using-JWT