在ASP.NET Core中使用Angular2，以及与Angular2的Token base身份认证 - 微软一站式示(2)_H5之家

{ "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.0+20160725163759", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160909174046" } }

右击wwwroot中的Package.json,选择Restore Packages（或者在CMD下进入wwwroot目录，并执行命令 npm install）,npm会去下载需要的包,并存储于node_modules目录中。

3.3.2.配置启动文件以启用Angular2

在wwwroot下新建目录app,app拥有如下文件：

app.component.ts

import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', template: "this is in angular2", }) export class AppComponent { }

可以发现被@Component装饰属性装饰了AppComponent，selector指代你Component的占位符，比如本例中你可以再Home/index.cshtml中发现一段这样的标记

template既为该Component的View，不要忘记moduleId，不添加它会出现很多奇怪的问题。

app.module.ts

import { 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.ts

import { 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 { Audience { ; Issuer { ; 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中添加如下代码：