如何使用 ASP.NET Core Web API 授权 Angular 2 应用-详细内容

文章内容

2017/8/25 13:58:08,作者: 黄兵

如何使用 ASP.NET Core Web API 授权 Angular 2 应用

简介

ASP.NET Core 是用于 Web 的新跨平台框架，而 Angular 2 是用于前端的新框架。

本示例将向你展示如何使用 ASP.NET Core Web API 授权 Angular 2 应用。

示例先决条件

• .NET Core 1.0 或更高版本。[.NET Core 和 Visual Studio 工具]

• Microsoft Visual Studio 2015 Update3 或更高版本。[Visual Studio 2015 安装程序]

• Node.js v5.0.0 或更高版本。[Node.js 和 NPM]

• Npm 3.0.0 或更高版本。[Node.js 和 NPM]

生成示例

• 按 win + R，然后键入 cmd 以打开命令行窗口。

• 找到此解决方案的 wwwroot 文件夹。

• 键入命令 npm install，然后 npm 将安装程序包。

• 使用 Visual Studio 打开“CSAuthorAngular2InASPNetCore”文件夹中的“CSAuthorAngular2InASPNetCore.sln”示例解决方案。

• 右键单击项目“CSAuthorAngular2InASPNetCore”，然后选择“还原程序包”。

• 按 F6 键或者从菜单中选择“生成”->“生成解决方案” 以生成示例。

运行示例

• 使用 Visual studio 打开示例解决方案，然后按 F5 键或者从菜单中选择 “调试”->“开始调试”。

• 当该 Web 应用运行时，你可以在浏览器中看到以下页面。

• 单击“登录” 链接，转至登录页面。

• 键入 user1 作为用户名，user1psd 作为密码，然后单击“登录” 按钮。

• 键入正确的用户名和密码后，应用将路由到主页。在主页中，可以看到你的用户名。

使用代码

后端

Startup.cs

public void ConfigureServices(IServiceCollection services) 
{ 
    services.AddApplicationInsightsTelemetry(Configuration); 
 
    services.AddAuthorization(auth => 
    { 
        auth.AddPolicy("Bearer", new AuthorizationPolicyBuilder() 
            .AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme) 
            .RequireAuthenticatedUser().Build()); 
    }); 
 
    services.AddMvc(); 
} 
 
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 
{ 
    app.UseApplicationInsightsRequestTelemetry(); 
 
    app.UseApplicationInsightsExceptionTelemetry(); 
 
    #region static files 
    app.UseStaticFiles(); 
    #endregion 
 
    #region Handle Exception 
    app.UseExceptionHandler(appBuilder => 
    { 
        appBuilder.Use(async (context, next) => 
        { 
            var error = context.Features[typeof(IExceptionHandlerFeature)] as IExceptionHandlerFeature; 
 
            if (error != null && error.Error is SecurityTokenExpiredException) 
            { 
                context.Response.StatusCode = 401; 
                context.Response.ContentType = "application/json"; 
 
                await context.Response.WriteAsync(JsonConvert.SerializeObject(new RequestResult 
                { 
                    State = RequestState.NotAuth, 
                    Msg = "token expired" 
                })); 
            } 
            else if (error != null && error.Error != null) 
            { 
                context.Response.StatusCode = 500; 
                context.Response.ContentType = "application/json"; 
                await context.Response.WriteAsync(JsonConvert.SerializeObject(new RequestResult 
                { 
                    State = RequestState.Failed, 
                    Msg = error.Error.Message 
                })); 
            } 
            else await next(); 
        }); 
    }); 
    #endregion 
 
    #region UseJwtBearerAuthentication 
    app.UseJwtBearerAuthentication(new JwtBearerOptions() 
    { 
        TokenValidationParameters = new TokenValidationParameters() 
        { 
            IssuerSigningKey = TokenAuthOption.Key, 
            ValidAudience = TokenAuthOption.Audience, 
            ValidIssuer = TokenAuthOption.Issuer, 
            ValidateIssuerSigningKey = true, 
            ValidateLifetime = true, 
            ClockSkew = TimeSpan.FromMinutes(0) 
        } 
    }); 
    #endregion 
 
    #region route 
    app.UseMvc(routes => 
    { 
        routes.MapRoute( 
            name: "default", 
            template: "{controller=Home}/{action=Index}"); 
 
        routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" }); 
    }); 
    #endregion

public string GetAuthToken([FromBody]User user) 
{ 
    var existUser = UserStorage.Users.FirstOrDefault(u => u.Username == user.Username && u.Password == user.Password); 
 
    if (existUser != null) 
    { 
        var requestAt = DateTime.Now; 
        var expiresIn = requestAt + TokenAuthOption.ExpiresSpan; 
        var token = GenerateToken(existUser, expiresIn); 
 
        return JsonConvert.SerializeObject(new RequestResult 
        { 
            State = RequestState.Success, 
            Data = new 
            { 
                requertAt = requestAt, 
                expiresIn = TokenAuthOption.ExpiresSpan.TotalSeconds, 
                tokeyType = TokenAuthOption.TokenType, 
                accessToken = token 
            } 
        }); 
    } 
    else 
    { 
        return JsonConvert.SerializeObject(new RequestResult 
        { 
            State = RequestState.Failed, 
            Msg = "Username or password is invalid" 
        }); 
    } 
} 
 
private string GenerateToken(User user, DateTime expires) 
{ 
    var handler = new JwtSecurityTokenHandler(); 
 
    ClaimsIdentity identity = new ClaimsIdentity( 
        new GenericIdentity(user.Username, "TokenAuth"), 
        new[] { 
            new Claim("ID", user.ID.ToString()) 
        } 
    ); 
 
    var securityToken = handler.CreateToken(new SecurityTokenDescriptor 
    { 
        Issuer = TokenAuthOption.Issuer, 
        Audience = TokenAuthOption.Audience, 
        SigningCredentials = TokenAuthOption.SigningCredentials, 
        Subject = identity, 
        Expires = expires 
    }); 
    return handler.WriteToken(securityToken); 
}

前端

Auth.service.ts

JavaScript

login(userName: string, password: string): Promise<RequestResult> { 
    return this.http.post("/api/TokenAuth", { Username: userName, Password: password }).toPromise() 
        .then(response => { 
            let result = response.json() as RequestResult; 
            if (result.State == 1) { 
                let json = result.Data as any; 
 
                sessionStorage.setItem("token", json.accessToken); 
            } 
            return result; 
        }) 
        .catch(this.handleError); 
}    checkLogin(): boolean { 
    var token = sessionStorage.getItem(this.tokeyKey); 
    return token != null; 
} 
 
getUserInfo(): Promise<RequestResult> { 
    return this.authGet("/api/TokenAuth"); 
} 
 
authGet(url): Promise<RequestResult> { 
    let headers = this.initAuthHeaders(); 
    return this.http.get(url, { headers: headers }).toPromise() 
        .then(response => response.json() as RequestResult) 
        .catch(this.handleError); 
}