建设银行遵义分行网站,关键词seo公司,网络优化器免费,上海千家美装饰公司地址Angular2是对Angular1的一次彻底的#xff0c;破坏性的更新。 相对于Angular1.x#xff0c;借用某果的广告语#xff0c;唯一的不同#xff0c;就是处处都不同。 首先#xff0c;推荐的语言已经不再是Javascript#xff0c;取而代之的TypeScript#xff0c;(TypeScript … Angular2是对Angular1的一次彻底的破坏性的更新。 相对于Angular1.x借用某果的广告语唯一的不同就是处处都不同。 首先推荐的语言已经不再是Javascript取而代之的TypeScript(TypeScript ES6 类型系统 类型注解), TypeScriipt的类型系统对于开发复杂的单页Web app大有帮助同时编译成javascript后的执行效率也比大多数手写javascript要快。有兴趣的同学可以查阅官方文档英文传送门 | 中文传送门。得益于彻底重构性能相对于Angular1.x有了大幅提升也更适合再全平台部署。Angular2是基于Component的Component可以理解为是1.x时代的Controller $Scope viewView的很多语法也做了更新比如li ng-repeatmovie in vm.movies/li 变成了 li *ngForlet movie of movies/li等等。。 关于Angular2强烈建议查阅官方文档英文传送门 | 中文传送门 废话不多说接下来的内容中将介绍如何将 Angular2 整合到 ASP.NET Core 中并实现一个Anguar2 和 ASP.NET Core Web API 的身份认证。 注意本文章属于Step by step Code Sample教程且篇幅较长建议下载本Sample并跟着本文进度自己重做一遍本例下载完整代码并分析代码结构才有意义下载地址How to authorization Angular 2 app with asp.net core web api 1.前期准备 推荐使用VS2015 Update3或更新的版本完成本示例下载地址https://www.visualstudio.com/你需要安装.NET Core开发环境这里提供VS版:https://www.microsoft.com/net/core#windows安装Node.js 版本5.0.0或以上在本例中这个主要是编译TypeScript用的下载地址Node.js and NPMNPM 3.0.0或以上默认NPM会随着Node.js一并安装完毕。在本例中这个主要是下载各种Angular的各个包用的参考VS中的Nuget 2.创建项目 在VS中新建项目项目类型选择 ASP.NET Core Web Application(.Net Core)输入项目名称为CSAuthorAngular2InASPNetCoreTemplate选择为Empty. 3.在项目中整合Angular2 3.1.配置Startup.cs 注添加下面的代码时IDE会报代码错误这是因为还没有引用对用的包进入报错的这一行点击灯泡加载对应的包就可以了。 图文无关 在ConfigureServices中添加如下代码 services.AddMvc(); 这里是添加MVC服务 在Configure中添加如下代码 app.UseStaticFiles();app.UseMvc(routes {routes.MapRoute(name: default,template: {controllerHome}/{actionIndex});
}); 第一句是启用静态文件第二句是应用MVC模式并添加路由配置。 完整的代码应该是这个样子 3.2.添加控制器以及视图 3.2.1.在项目根目录下添加Controllers目录并在其中添加一个控制器HomeController.cs默认代码即可。 3.2.2.在项目跟目录下创建Views目录在Views目录中新建目录Home, 最后在Home目录中新建视图Index.cshtml内容应该是这样 现在运行项目的话你仅仅能看到一个Loading再控制台中你还能看到错误这是因为我们还没有配置Angular。让我们前往wwwroot目录。 3.3.在项目的wwwroot目录中添加如下结构: 3.3.1搭建Angular2基础环境 package.jsonsystemjs.config.jstsconfig.js{compileOnSave: true, compilerOptions: { target: es5, module: commonjs, moduleResolution: node, sourceMap: true, emitDecoratorMetadata: true, experimentalDecorators: true, removeComments: false, noImplicitAny: false }, exclude: [ node_modules ] }typings.json(注在最新文档中typings已被npm的types替代参见官方文档:文档变更日志){globalDependencies: { core-js: registry:dt/core-js#0.0.020160725163759, jasmine: registry:dt/jasmine#2.2.020160621224255, node: registry:dt/node#6.0.020160909174046 } } 右击wwwroot中的Package.json,选择Restore Packages或者在CMD下进入wwwroot目录并执行命令 npm install,npm会去下载需要的包,并存储于node_modules目录中。 3.3.2.配置启动文件以启用Angular2 在wwwroot下新建目录app,app拥有如下文件 app.component.tsimport { Component } from angular/core;Component({moduleId: module.id,selector: my-app,template: this is in angular2,
})
export class AppComponent {
}可以发现被Component装饰属性装饰了AppComponentselector指代你Component的占位符比如本例中你可以再Home/index.cshtml中发现一段这样的标记my-appLoading.../my-apptemplate既为该Component的View不要忘记moduleId不添加它会出现很多奇怪的问题。app.module.tsimport { NgModule } from angular/core;
import { BrowserModule } from angular/platform-browser;import { AppComponent } from ./app.component;NgModule({bootstrap: [AppComponent],imports: [BrowserModule],declarations: [AppComponent]
})
export class AppModule { } main.tsimport { platformBrowserDynamic } from angular/platform-browser-dynamic;
import { AppModule } from ./app.module;
const platform platformBrowserDynamic();
platform.bootstrapModule(AppModule); 基础整合完毕。 按F5 Debug一下现在你能再浏览器中看到一句话this is in angular 2 ---分割线------------------------------------------------------------------------- 4.实现身份认证 废了半天劲看着很傻没有任何成就感。怎么办让我们再深入一点接下来我们来为Angular2完成一个Token base的身份验证我会把Angular2的routing,data bind,service,http,等等你工作中最常用到的挨个演示一遍。 4.1.Server端 4.1.1.创建一些辅助类 4.1.1.1.在项目根目录下创建一个文件夹Auth,并添加RSAKeyHelper.cs以及TokenAuthOption.cs两个文件 在RSAKeyHelper.cs中 using System.Security.Cryptography; namespace CSTokenBaseAuth.Auth
{ public class RSAKeyHelper{ public static RSAParameters GenerateKey(){ using (var key new RSACryptoServiceProvider(2048)){ return key.ExportParameters(true);}}}
} 在TokenAuthOption.cs中 using System; using Microsoft.IdentityModel.Tokens; namespace CSTokenBaseAuth.Auth
{ public class TokenAuthOption{ public static string Audience { get; } ExampleAudience; public static string Issuer { get; } ExampleIssuer; public static RsaSecurityKey Key { get; } new RsaSecurityKey(RSAKeyHelper.GenerateKey()); public static SigningCredentials SigningCredentials { get; } new SigningCredentials(Key, SecurityAlgorithms.RsaSha256Signature); public static TimeSpan ExpiresSpan { get; } TimeSpan.FromMinutes(20);}
} 4.1.1.2.在项目根目录下创建目录Model,并在其中添加RequestResult.cs代码应该是这样。 public class RequestResult
{ public RequestState State { get; set; } public string Msg { get; set; } public Object Data { get; set; }
}public enum RequestState
{Failed -1,NotAuth 0,Success 1} 4.1.2更新Startup.cs 在ConfigureServices中添加如下代码 services.AddAuthorization(auth {auth.AddPolicy(Bearer, new AuthorizationPolicyBuilder().AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme).RequireAuthenticatedUser().Build());
}); 这里是添加身份认证服务 在Configure方法中添加如下代码 app.UseExceptionHandler(appBuilder {appBuilder.Use(async (context, next) { var error context.Features[typeof(IExceptionHandlerFeature)] as IExceptionHandlerFeature; //when authorization has failed, should retrun a json message to clientif (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}));} //when orther error, retrun a error message json to clientelse 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}));} //when no error, do next.else await next();});
}); 本段是Handle当身份认证失败时抛出的异常并返回合适的json 在相同的方法中添加另外一段代码 本段代码是应用JWTBearerAuthentication身份认证。 4.1.3.TokenAuthController.cs 在Controllers中新建一个Web API Controller Class命名为TokenAuthController.cs。我们将在这里完成登录授权 在同文件下添加两个类分别用来模拟用户模型以及用户存储代码应该是这样: public class User
{ public Guid ID { get; set; } public string Username { get; set; } public string Password { get; set; }
}public static class UserStorage
{ public static ListUser Users { get; set; } new ListUser { new User {IDGuid.NewGuid(),Usernameuser1,Password user1psd }, new User {IDGuid.NewGuid(),Usernameuser2,Password user2psd }, new User {IDGuid.NewGuid(),Usernameuser3,Password user3psd }};
} 接下来在TokenAuthController.cs中添加如下方法 该方法仅仅只是生成一个Auth Token,接下来我们来添加另外一个方法来调用它 在相同文件中添加如下代码 接下来我们来完成授权部分在相同的文件中添加如下代码 public string GetUserInfo()
{ var claimsIdentity User.Identity as ClaimsIdentity; return JsonConvert.SerializeObject(new RequestResult{State RequestState.Success,Data new{UserName claimsIdentity.Name}});
} 为方法添加装饰属性 [HttpGet]
[Authorize(Bearer)] 第二行代码说明这个action需要身份验证。 该文件完整的代码应该是这个样子 using System; using System.Collections.Generic;using System.Linq;using Microsoft.AspNetCore.Mvc;using CSAuthorAngular2InASPNetCore.Auth;using System.IdentityModel.Tokens.Jwt;using Newtonsoft.Json;using System.Security.Claims;using System.Security.Principal;using Microsoft.IdentityModel.Tokens;using CSAuthorAngular2InASPNetCore.Model;using Microsoft.AspNetCore.Authorization; namespace CSAuthorAngular2InASPNetCore.Controllers
{[Route(api/[controller])] public class TokenAuthController : Controller{[HttpPost] 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);}[HttpGet][Authorize(Bearer)] public string GetUserInfo(){ var claimsIdentity User.Identity as ClaimsIdentity; return JsonConvert.SerializeObject(new RequestResult{State RequestState.Success,Data new{UserName claimsIdentity.Name}});}} public class User{ public Guid ID { get; set; } public string Username { get; set; } public string Password { get; set; }} public static class UserStorage{ public static ListUser Users { get; set; } new ListUser { new User {IDGuid.NewGuid(),Usernameuser1,Password user1psd }, new User {IDGuid.NewGuid(),Usernameuser2,Password user2psd }, new User {IDGuid.NewGuid(),Usernameuser3,Password user3psd }};}
} 4.2Angular2端 4.2.1创建View Model 在wwwroot/app下创建一个目录_model 并添加一个Typescript文件RequestResult.ts内容应该是这样。 export class RequestResult {State: number;Msg: string;Data: Object;
} 4.2.2创建Service 在wwwroot/app下创建一个目录_services并添加一个Typescript文件auth.service.ts内容应该是这样。 本文件主要用来完成登录以及登录验证工作之后该service将可以被注入到Component中以便被Component调用。 注主要的逻辑都应该写到service中 4.2.3.创建Component 4.2.3.1.在wwwroot/app下创建一个目录home,该目录用来存放HomeComponent,home应拥有如下文件 home.component.ts 查阅代码在Component中指定了View以及style。AuthService被在构造方法中被注入了本ComponentngOnInit是接口OnInit的一个方法他在Component初始化时会被调用。style.css/*styles of this view*/本例中没有添加任何样式如有需要可以写在这里。view.htmldiv *ngIfisLoginh1Hi span{{userName}}/span/h1/divdiv *ngIf!isLoginh1please login/h1a routerLink/loginLogin/a/div*ngIf是Angular2 的其中一种标记语法作用是当返回真时渲染该节点完整教程请参阅官方文档。 4.2.3.2.在wwwroot/app下创建目录Login,该目录用来存放LoginComponent,文件结构类似于上一节。 login.component.ts style.css/*styles of this view*/view.htmltabletrtduserName:/tdtdinput [(ngModel)]userName placeholderuseName:try type user1 //td/trtrtduserName:/tdtdinput [(ngModel)]password placeholderpassword:try type user1psd //td/trtrtd/tdtdinput typebutton (click)login() valueLogin //td/tr/table 4.2.4.应用路由 路由是切换多页面用的。 在wwwroot/app下新建一个Typescript文件命名为app-routing.module.ts内容应该是这个样子。 接下来我们来应用这个路由 打开app.module.ts更新代码如下 NgModule和BrowserModule你可以理解为基础模块必加的。 HttpModule是做http请求用的。 FormsModule是做双向数据绑定用的比如下面这样的如果想把数据从view更新到component就必须加这个。 input [(ngModel)]userName placeholderuseName:try type user1 / AppRoutingModule即为我们刚才添加的路由文件。 AuthService是我们最早添加的service文件。 AppComponent是我们最初添加的那个app.component.ts里的那个component. HomeComponent,LoginComponent同上。 最后我们再app.component.ts中添加路由锚点 把template的值为 router-outlet/router-outlet 完整的代码应该是这样 import { Component } from angular/core;Component({moduleId: module.id,selector: my-app,template: router-outlet/router-outlet,
})
export class AppComponent {
} router-outlet是路由锚点的关键词。 至此所有代码完成F5调试吧。 完整的Angular2的入门教程请参阅官方文档的《英雄指南》中文传送门 | 英文传送门 关于本例完整的代码以及调试运行步骤请访问How to authorization Angular 2 app with asp.net core web api 相关文章 Angular 2与TypeScript概览Angular发布1.5正式版专注于向Angular 2的过渡我为什么选择Angular 2ASP.NET Core loves JavaScript使用 JavaScriptService 在.NET Core 里实现DES加密算法 原文地址http://www.cnblogs.com/onecodeonescript/p/6062203.html .NET社区新闻深度好文微信中搜索dotNET跨平台或扫描二维码关注
