下载本文提到的完整代码示例请访问：How to authorization Angular 2 app with asp.net core web api

在ASP.NET Core中使用Angular2，以及与Angular2的Token base身份认证

Angular2是对Angular1的一次彻底的，破坏性的更新。

相对于Angular1.x，借用某果的广告语，唯一的不同，就是处处都不同。

  • 首先，推荐的语言已经不再是Javascript，取而代之的TypeScript，(TypeScript = ES6 + 类型系统 + 类型注解), TypeScriipt的类型系统对于开发复杂的单页Web app大有帮助，同时编译成javascript后的执行效率也比大多数手写javascript要快。有兴趣的同学可以查阅官方文档：英文传送门 | 中文传送门。
  • 得益于彻底重构，性能相对于Angular1.x有了大幅提升，也更适合再全平台部署。
  • Angular2是基于Component的，Component可以理解为是1.x时代的Controller + $Scope + view
  • View的很多语法也做了更新，比如<li ng-repeat="movie in vm.movies"></li> 变成了 <li *ngFor="let 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 NPM
  • NPM 3.0.0或以上，默认NPM会随着Node.js一并安装完毕。（在本例中，这个主要是下载各种Angular的各个包用的，参考VS中的Nuget）

2.创建项目

在VS中新建项目，项目类型选择 ASP.NET Core Web Application(.Net Core)，输入项目名称为：CSAuthorAngular2InASPNetCore，Template选择为Empty.

3.在项目中整合Angular2

3.1.配置Startup.cs

注：添加下面的代码时IDE会报代码错误，这是因为还没有引用对用的包，进入报错的这一行，点击灯泡，加载对应的包就可以了。

（图文无关）

在ConfigureServices中添加如下代码

  1. services.AddMvc();

这里是添加MVC服务

在Configure中添加如下代码

  1. app.UseStaticFiles();
  2.  
  3. app.UseMvc(routes =>
  4. {
  5.     routes.MapRoute(
  6.         name: "default",
  7.         template: "{controller=Home}/{action=Index}");
  8. });

第一句是启用静态文件，第二句是应用MVC模式并添加路由配置。

完整的代码应该是这个样子

  1. public class Startup
  2. {
  3.     // This method gets called by the runtime. Use this method to add services to the container.
  4.     // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
  5.     public void ConfigureServices(IServiceCollection services)
  6.     {
  7.         services.AddMvc();
  8.     }
  9.  
  10.     // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
  11.     public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
  12.     {
  13.         app.UseStaticFiles();
  14.  
  15.         app.UseMvc(routes =>
  16.         {
  17.             routes.MapRoute(
  18.                 name: "default",
  19.                 template: "{controller=Home}/{action=Index}");
  20.         });
  21.     }
  22. }

3.2.添加控制器以及视图

3.2.1.在项目根目录下添加Controllers目录，并在其中添加一个控制器HomeController.cs，默认代码即可。

3.2.2.在项目跟目录下创建Views目录，在Views目录中新建目录Home, 最后在Home目录中新建视图Index.cshtml，内容应该是这样：

  1. <html>
  2. <head>
  3.     <title>Angular QuickStart</title>
  4.     <base href="/">
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!-- 1. Load libraries -->
  8.     <!-- Polyfill(s) for older browsers -->
  9.     <script src="node_modules/core-js/client/shim.min.js"></script>
  10.     <script src="node_modules/zone.js/dist/zone.js"></script>
  11.     <script src="node_modules/reflect-metadata/Reflect.js"></script>
  12.     <script src="node_modules/systemjs/dist/system.src.js"></script>
  13.     <!-- 2. Configure SystemJS -->
  14.     <script src="systemjs.config.js"></script>
  15.     <script>
  16.       System.import('app').catch(function(err){ console.error(err); });
  17.     </script>
  18. </head>
  19. <!-- 3. Display the application -->
  20. <body>
  21.     <my-app>Loading...</my-app>
  22. </body>
  23. </html>

现在运行项目的话你仅仅能看到一个Loading，再控制台中你还能看到错误，这是因为我们还没有配置Angular。让我们前往wwwroot目录。

3.3.在项目的wwwroot目录中添加如下结构:

3.3.1搭建Angular2基础环境

  • package.json

    1. {
    2.   "name": "angular-quickstart",
    3.   "version": "1.0.0",
    4.   "scripts": {
    5.     "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    6.     "lite": "lite-server",
    7.     "postinstall": "typings install",
    8.     "tsc": "tsc",
    9.     "tsc:w": "tsc -w",
    10.     "typings": "typings"
    11.   },
    12.   "licenses": [
    13.     {
    14.       "type": "MIT",
    15.       "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    16.     }
    17.   ],
    18.   "dependencies": {
    19.     "@angular/common": "2.0.2",
    20.     "@angular/compiler": "2.0.2",
    21.     "@angular/core": "2.0.2",
    22.     "@angular/forms": "2.0.2",
    23.     "@angular/http": "2.0.2",
    24.     "@angular/platform-browser": "2.0.2",
    25.     "@angular/platform-browser-dynamic": "2.0.2",
    26.     "@angular/router": "3.0.2",
    27.     "@angular/upgrade": "2.0.2",
    28.     "angular-in-memory-web-api": "0.1.5",
    29.     "bootstrap": "3.3.7",
    30.     "core-js": "2.4.1",
    31.     "reflect-metadata": "0.1.8",
    32.     "rxjs": "5.0.0-beta.12",
    33.     "systemjs": "0.19.39",
    34.     "zone.js": "0.6.25"
    35.   },
    36.   "devDependencies": {
    37.     "concurrently": "3.0.0",
    38.     "gulp": "^3.9.1",
    39.     "lite-server": "2.2.2",
    40.     "typescript": "2.0.3",
    41.     "typings": "1.4.0"
    42.   }
    43. }

  • systemjs.config.js

    1. (function (global) {
    2.     System.config({
    3.         paths: {
    4.             // paths serve as alias
    5.             'npm:': 'node_modules/'
    6.         },
    7.         // map tells the System loader where to look for things
    8.         map: {
    9.             // our app is within the app folder
    10.             app: 'app',
    11.             // angular bundles
    12.             '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    13.             '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    14.             '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    15.             '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    16.             '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    17.             '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    18.             '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    19.             '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    20.             '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
    21.             // other libraries
    22.             'rxjs': 'npm:rxjs',
    23.             'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    24.         },
    25.         // packages tells the System loader how to load when no filename and/or no extension
    26.         packages: {
    27.             app: {
    28.                 main: './main.js',
    29.                 defaultExtension: 'js'
    30.             },
    31.             rxjs: {
    32.                 defaultExtension: 'js'
    33.             }
    34.         }
    35.     });
    36. })(this);

  • tsconfig.js

    1. {
    2.   "compileOnSave": true,
    3.   "compilerOptions": {
    4.     "target": "es5",
    5.     "module": "commonjs",
    6.     "moduleResolution": "node",
    7.     "sourceMap": true,
    8.     "emitDecoratorMetadata": true,
    9.     "experimentalDecorators": true,
    10.     "removeComments": false,
    11.     "noImplicitAny": false
    12.   },
    13.   "exclude": [
    14.     "node_modules"
    15.   ]
    16. }

  • typings.json(注，在最新文档中typings已被npm的@types替代，参见官方文档:文档变更日志)

    1. {
    2.   "globalDependencies": {
    3.     "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    4.     "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    5.     "node": "registry:dt/node#6.0.0+20160909174046"
    6.   }
    7. }

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

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

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

  • app.component.ts

    1. import { Component } from '@angular/core';
    2.  
    3. @Component({
    4.     moduleId: module.id,
    5.     selector: 'my-app',
    6.     template: "this is in angular2",
    7. })
    8. export class AppComponent {
    9. }

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

    1. <my-app>Loading...</my-app>

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

  • app.module.ts

    1. import { NgModule } from "@angular/core";
    2. import { BrowserModule } from "@angular/platform-browser";
    3.  
    4. import { AppComponent } from "./app.component";
    5.  
    6. @NgModule({
    7.     bootstrap: [AppComponent],
    8.     imports: [
    9.         BrowserModule
    10.     ],
    11.     declarations: [
    12.         AppComponent
    13.     ]
    14. })
    15. export class AppModule { }

  • main.ts

    1. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    2. import { AppModule } from './app.module';
    3. const platform = platformBrowserDynamic();
    4. 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中

    1. using System.Security.Cryptography;
    2.  
    3. namespace CSTokenBaseAuth.Auth
    4. {
    5.     public class RSAKeyHelper
    6.     {
    7.         public static RSAParameters GenerateKey()
    8.         {
    9.             using (var key = new RSACryptoServiceProvider(2048))
    10.             {
    11.                 return key.ExportParameters(true);
    12.             }
    13.         }
    14.     }
    15. }

  • 在TokenAuthOption.cs中

    1. using System;
    2. using Microsoft.IdentityModel.Tokens;
    3.  
    4. namespace CSTokenBaseAuth.Auth
    5. {
    6.     public class TokenAuthOption
    7.     {
    8.         public static string Audience { get; } = "ExampleAudience";
    9.         public static string Issuer { get; } = "ExampleIssuer";
    10.         public static RsaSecurityKey Key { get; } = new RsaSecurityKey(RSAKeyHelper.GenerateKey());
    11.         public static SigningCredentials SigningCredentials { get; } = new SigningCredentials(Key, SecurityAlgorithms.RsaSha256Signature);
    12.  
    13.         public static TimeSpan ExpiresSpan { get; } = TimeSpan.FromMinutes(20);
    14.     }
    15. }

4.1.1.2.在项目根目录下创建目录Model,并在其中添加RequestResult.cs，代码应该是这样。

  1. public class RequestResult
  2. {
  3.     public RequestState State { get; set; }
  4.     public string Msg { get; set; }
  5.     public Object Data { get; set; }
  6. }
  7.  
  8. public enum RequestState
  9. {
  10.     Failed = -1,
  11.     NotAuth = 0,
  12.     Success = 1
  13. }

4.1.2更新Startup.cs

在ConfigureServices中添加如下代码：

  1. services.AddAuthorization(auth =>
  2. {
  3.     auth.AddPolicy("Bearer", new AuthorizationPolicyBuilder()
  4.         .AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme‌​)
  5.         .RequireAuthenticatedUser().Build());
  6. });

这里是添加身份认证服务

在Configure方法中添加如下代码：

  1. app.UseExceptionHandler(appBuilder =>
  2. {
  3.     appBuilder.Use(async (context, next) =>
  4.     {
  5.         var error = context.Features[typeof(IExceptionHandlerFeature)] as IExceptionHandlerFeature;
  6.  
  7.         //when authorization has failed, should retrun a json message to client
  8.         if (error != null && error.Error is SecurityTokenExpiredException)
  9.         {
  10.             context.Response.StatusCode = 401;
  11.             context.Response.ContentType = "application/json";
  12.  
  13.             await context.Response.WriteAsync(JsonConvert.SerializeObject(new RequestResult
  14.             {
  15.                 State = RequestState.NotAuth,
  16.                 Msg = "token expired"
  17.             }));
  18.         }
  19.         //when orther error, retrun a error message json to client
  20.         else if (error != null && error.Error != null)
  21.         {
  22.             context.Response.StatusCode = 500;
  23.             context.Response.ContentType = "application/json";
  24.             await context.Response.WriteAsync(JsonConvert.SerializeObject(new RequestResult
  25.             {
  26.                 State = RequestState.Failed,
  27.                 Msg = error.Error.Message
  28.             }));
  29.         }
  30.         //when no error, do next.
  31.         else await next();
  32.     });
  33. });

本段是Handle当身份认证失败时抛出的异常，并返回合适的json

在相同的方法中添加另外一段代码：

  1. app.UseJwtBearerAuthentication(new JwtBearerOptions()
  2. {
  3.     TokenValidationParameters = new TokenValidationParameters()
  4.     {
  5.         IssuerSigningKey = TokenAuthOption.Key,
  6.         ValidAudience = TokenAuthOption.Audience,
  7.         ValidIssuer = TokenAuthOption.Issuer,
  8.         // When receiving a token, check that we've signed it.
  9.         ValidateIssuerSigningKey = true,
  10.         // When receiving a token, check that it is still valid.
  11.         ValidateLifetime = true,
  12.         // This defines the maximum allowable clock skew - i.e. provides a tolerance on the token expiry time
  13.         // when validating the lifetime. As we're creating the tokens locally and validating them on the same
  14.          // machines which should have synchronised time, this can be set to zero. Where external tokens are
  15.         // used, some leeway here could be useful.
  16.         ClockSkew = TimeSpan.FromMinutes(0)
  17.     }
  18. });

本段代码是应用JWTBearerAuthentication身份认证。

4.1.3.TokenAuthController.cs

在Controllers中新建一个Web API Controller Class，命名为TokenAuthController.cs。我们将在这里完成登录授权，

在同文件下添加两个类，分别用来模拟用户模型，以及用户存储，代码应该是这样:

  1. public class User
  2. {
  3.     public Guid ID { get; set; }
  4.     public string Username { get; set; }
  5.     public string Password { get; set; }
  6. }
  7.  
  8. public static class UserStorage
  9. {
  10.     public static List<User> Users { get; set; } = new List<User> {
  11.         new User {ID=Guid.NewGuid(),Username="user1",Password = "user1psd" },
  12.         new User {ID=Guid.NewGuid(),Username="user2",Password = "user2psd" },
  13.         new User {ID=Guid.NewGuid(),Username="user3",Password = "user3psd" }
  14.     };
  15. }

接下来在TokenAuthController.cs中添加如下方法

  1. private string GenerateToken(User user, DateTime expires)
  2. {
  3.     var handler = new JwtSecurityTokenHandler();
  4.  
  5.     ClaimsIdentity identity = new ClaimsIdentity(
  6.         new GenericIdentity(user.Username, "TokenAuth"),
  7.         new[] {
  8.             new Claim("ID", user.ID.ToString())
  9.         }
  10.     );
  11.  
  12.     var securityToken = handler.CreateToken(new SecurityTokenDescriptor
  13.     {
  14.         Issuer = TokenAuthOption.Issuer,
  15.         Audience = TokenAuthOption.Audience,
  16.         SigningCredentials = TokenAuthOption.SigningCredentials,
  17.         Subject = identity,
  18.         Expires = expires
  19.     });
  20.     return handler.WriteToken(securityToken);
  21. }

该方法仅仅只是生成一个Auth Token,接下来我们来添加另外一个方法来调用它

在相同文件中添加如下代码

  1. [HttpPost]
  2. public string GetAuthToken(User user)
  3. {
  4.     var existUser = UserStorage.Users.FirstOrDefault(u => u.Username == user.Username && u.Password == user.Password);
  5.  
  6.     if (existUser != null)
  7.     {
  8.         var requestAt = DateTime.Now;
  9.         var expiresIn = requestAt + TokenAuthOption.ExpiresSpan;
  10.         var token = GenerateToken(existUser, expiresIn);
  11.  
  12.         return JsonConvert.SerializeObject(new {
  13.             stateCode = 1,
  14.             requertAt = requestAt,
  15.             expiresIn = TokenAuthOption.ExpiresSpan.TotalSeconds,
  16.             accessToken = token
  17.         });
  18.     }
  19.     else
  20.     {
  21.         return JsonConvert.SerializeObject(new { stateCode = -1, errors = "Username or password is invalid" });
  22.     }
  23. }

接下来我们来完成授权部分，在相同的文件中添加如下代码：

  1. public string GetUserInfo()
  2. {
  3.     var claimsIdentity = User.Identity as ClaimsIdentity;
  4.  
  5.     return JsonConvert.SerializeObject(new RequestResult
  6.     {
  7.         State = RequestState.Success,
  8.         Data = new
  9.         {
  10.             UserName = claimsIdentity.Name
  11.         }
  12.     });
  13. }

为方法添加装饰属性

  1. [HttpGet]
  2. [Authorize("Bearer")]

第二行代码说明这个action需要身份验证。

该文件完整的代码应该是这个样子：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;using Microsoft.AspNetCore.Mvc;
  4. using CSAuthorAngular2InASPNetCore.Auth;
  5. using System.IdentityModel.Tokens.Jwt;
  6. using Newtonsoft.Json;
  7. using System.Security.Claims;
  8. using System.Security.Principal;
  9. using Microsoft.IdentityModel.Tokens;
  10. using CSAuthorAngular2InASPNetCore.Model;
  11. using Microsoft.AspNetCore.Authorization;
  12.  
  13. namespace CSAuthorAngular2InASPNetCore.Controllers
  14. {
  15.     [Route("api/[controller]")]
  16.     public class TokenAuthController : Controller
  17.     {
  18.         [HttpPost]
  19.         public string GetAuthToken([FromBody]User user)
  20.         {
  21.             var existUser = UserStorage.Users.FirstOrDefault(u => u.Username == user.Username && u.Password == user.Password);
  22.  
  23.             if (existUser != null)
  24.             {
  25.                 var requestAt = DateTime.Now;
  26.                 var expiresIn = requestAt + TokenAuthOption.ExpiresSpan;
  27.                 var token = GenerateToken(existUser, expiresIn);
  28.  
  29.                 return JsonConvert.SerializeObject(new RequestResult
  30.                 {
  31.                     State = RequestState.Success,
  32.                     Data = new
  33.                     {
  34.                         requertAt = requestAt,
  35.                         expiresIn = TokenAuthOption.ExpiresSpan.TotalSeconds,
  36.                         tokeyType = TokenAuthOption.TokenType,
  37.                         accessToken = token
  38.                     }
  39.                 });
  40.             }
  41.             else
  42.             {
  43.                 return JsonConvert.SerializeObject(new RequestResult
  44.                 {
  45.                     State = RequestState.Failed,
  46.                     Msg = "Username or password is invalid"
  47.                 });
  48.             }
  49.         }
  50.  
  51.         private string GenerateToken(User user, DateTime expires)
  52.         {
  53.             var handler = new JwtSecurityTokenHandler();
  54.  
  55.             ClaimsIdentity identity = new ClaimsIdentity(
  56.                 new GenericIdentity(user.Username, "TokenAuth"),
  57.                 new[] {
  58.                     new Claim("ID", user.ID.ToString())
  59.                 }
  60.             );
  61.  
  62.             var securityToken = handler.CreateToken(new SecurityTokenDescriptor
  63.             {
  64.                 Issuer = TokenAuthOption.Issuer,
  65.                 Audience = TokenAuthOption.Audience,
  66.                 SigningCredentials = TokenAuthOption.SigningCredentials,
  67.                 Subject = identity,
  68.                 Expires = expires
  69.             });
  70.             return handler.WriteToken(securityToken);
  71.         }
  72.  
  73.         [HttpGet]
  74.         [Authorize("Bearer")]
  75.         public string GetUserInfo()
  76.         {
  77.             var claimsIdentity = User.Identity as ClaimsIdentity;
  78.  
  79.             return JsonConvert.SerializeObject(new RequestResult
  80.             {
  81.                 State = RequestState.Success,
  82.                 Data = new
  83.                 {
  84.                     UserName = claimsIdentity.Name
  85.                 }
  86.             });
  87.         }
  88.     }
  89.  
  90.     public class User
  91.     {
  92.         public Guid ID { get; set; }
  93.  
  94.         public string Username { get; set; }
  95.  
  96.         public string Password { get; set; }
  97.     }
  98.  
  99.     public static class UserStorage
  100.     {
  101.         public static List<User> Users { get; set; } = new List<User> {
  102.             new User {ID=Guid.NewGuid(),Username="user1",Password = "user1psd" },
  103.             new User {ID=Guid.NewGuid(),Username="user2",Password = "user2psd" },
  104.             new User {ID=Guid.NewGuid(),Username="user3",Password = "user3psd" }
  105.         };
  106.     }
  107. }

4.2Angular2端

4.2.1创建View Model

在wwwroot/app下创建一个目录：_model， 并添加一个Typescript文件RequestResult.ts，内容应该是这样。

  1. export class RequestResult {
  2.     State: number;
  3.     Msg: string;
  4.     Data: Object;
  5. }

4.2.2创建Service

在wwwroot/app下创建一个目录：_services，并添加一个Typescript文件auth.service.ts，内容应该是这样。

  1. import { Injectable } from "@angular/core";
  2. import { Headers, Http } from "@angular/http";
  3. import "rxjs/add/operator/toPromise";
  4.  
  5. import { RequestResult } from "../_model/RequestResult";
  6.  
  7. @Injectable()
  8. export class AuthService {
  9.     private tokeyKey = "token";
  10.     private token: string;
  11.  
  12.     constructor(
  13.         private http: Http
  14.     ) { }
  15.  
  16.     login(userName: string, password: string): Promise<RequestResult> {
  17.         return this.http.post("/api/TokenAuth", { Username: userName, Password: password }).toPromise()
  18.             .then(response => {
  19.                 let result = response.json() as RequestResult;
  20.                 if (result.State == 1) {
  21.                     let json = result.Data as any;
  22.  
  23.                     sessionStorage.setItem("token", json.accessToken);
  24.                 }
  25.                 return result;
  26.             })
  27.             .catch(this.handleError);
  28.     }
  29.  
  30.     checkLogin(): boolean {
  31.         var token = sessionStorage.getItem(this.tokeyKey);
  32.         return token != null;
  33.     }
  34.  
  35.     getUserInfo(): Promise<RequestResult> {
  36.         return this.authGet("/api/TokenAuth");
  37.     }
  38.  
  39.     authPost(url: string, body: any): Promise<RequestResult> {
  40.         let headers = this.initAuthHeaders();
  41.         return this.http.post(url, body, { headers: headers }).toPromise()
  42.             .then(response => response.json() as RequestResult)
  43.             .catch(this.handleError);
  44.     }
  45.  
  46.     authGet(url): Promise<RequestResult> {
  47.         let headers = this.initAuthHeaders();
  48.         return this.http.get(url, { headers: headers }).toPromise()
  49.             .then(response => response.json() as RequestResult)
  50.             .catch(this.handleError);
  51.     }
  52.  
  53.     private getLocalToken(): string {
  54.         if (!this.token) {
  55.             this.token = sessionStorage.getItem(this.tokeyKey);
  56.         }
  57.         return this.token;
  58.     }
  59.  
  60.     private initAuthHeaders(): Headers {
  61.         let token = this.getLocalToken();
  62.         if (token == null) throw "No token";
  63.  
  64.         var headers = new Headers();
  65.         headers.append("Authorization", "Bearer " + token);
  66.  
  67.         return headers;
  68.     }
  69.  
  70.     private handleError(error: any): Promise<any> {
  71.         console.error('An error occurred', error);
  72.         return Promise.reject(error.message || error);
  73.     }
  74. }

本文件主要用来完成登陆以及登陆验证工作，之后该service将可以被注入到Component中以便被Component调用。

注：主要的逻辑都应该写到service中

4.2.3.创建Component

4.2.3.1.在wwwroot/app下创建一个目录home,该目录用来存放HomeComponent,home应拥有如下文件：

  • home.component.ts

    1. import { Component, OnInit } from "@angular/core";
    2.  
    3. import { AuthService } from "../_services/auth.service";
    4.  
    5. @Component({
    6.     moduleId: module.id,
    7.     selector: "my-home",
    8.     templateUrl: "view.html",
    9.     styleUrls: ["style.css"]
    10. })
    11. export class HomeComponent implements OnInit {
    12.     isLogin = false;
    13.     userName: string;
    14.  
    15.     constructor(
    16.         private authService: AuthService
    17.     ) { }
    18.  
    19.     ngOnInit(): void {
    20.         this.isLogin = this.authService.checkLogin();
    21.         if (this.isLogin) {
    22.             this.authService.getUserInfo().then(res => {
    23.                 this.userName = (res.Data as any).UserName;
    24.             });
    25.         }
    26.  
    27.     }
    28. }

    查阅代码，在@Component中指定了View以及style。

    AuthService被在构造方法中被注入了本Component，ngOnInit是接口OnInit的一个方法，他在Component初始化时会被调用。

  • style.css

    1. /*styles of this view*/

    本例中没有添加任何样式，如有需要可以写在这里。

  • view.html

    1. <div *ngIf="isLogin">
    2.     <h1>Hi <span>{{userName}}</span></h1>
    3. </div>
    4.  
    5. <div *ngIf="!isLogin">
    6.     <h1>please login</h1>
    7.     <a routerLink="/login">Login</a>
    8. </div>

    *ngIf=""是Angular2 的其中一种标记语法，作用是当返回真时渲染该节点，完整教程请参阅官方文档。

4.2.3.2.在wwwroot/app下创建目录Login,该目录用来存放LoginComponent,文件结构类似于上一节。

  • login.component.ts

    1. import { Component } from "@angular/core";
    2. import { Router } from '@angular/router';
    3.  
    4. import { AuthService } from "../_services/auth.service";
    5.  
    6. @Component({
    7.     moduleId: module.id,
    8.     selector: "my-login",
    9.     templateUrl: "view.html",
    10.     styleUrls: ["style.css"]
    11. })
    12. export class LoginComponent {
    13.  
    14.     private userName: string;
    15.     private password: string;
    16.  
    17.     constructor(
    18.         private authService: AuthService,
    19.         private router: Router
    20.     ) { }
    21.  
    22.     login() {
    23.         this.authService.login(this.userName, this.password)
    24.             .then(result => {
    25.                 if (result.State == 1) {
    26.                     this.router.navigate(["./home"]);
    27.                 }
    28.                 else {
    29.                     alert(result.Msg);
    30.                 }
    31.             });
    32.     }
    33. }

  • style.css

    1. /*styles of this view*/

  • view.html

    1. <table>
    2.     <tr>
    3.         <td>userName:</td>
    4.         <td><input [(ngModel)]="userName" placeholder="useName:try type user1" /></td>
    5.     </tr>
    6.     <tr>
    7.         <td>userName:</td>
    8.         <td><input [(ngModel)]="password" placeholder="password:try type user1psd" /></td>
    9.     </tr>
    10.     <tr>
    11.         <td></td>
    12.         <td><input type="button" (click)="login()" value="Login" /></td>
    13.     </tr>
    14. </table>

4.2.4.应用路由

路由是切换多页面用的。

在wwwroot/app下新建一个Typescript文件，命名为app-routing.module.ts，内容应该是这个样子。

  1. import { NgModule } from "@angular/core";
  2. import { RouterModule, Routes } from "@angular/router";
  3.  
  4. import { HomeComponent } from "./home/home.component";
  5. import { LoginComponent } from "./login/login.component"
  6.  
  7. const routes: Routes = [
  8.     { path: "", redirectTo: "/home", pathMatch: "full" },
  9.     { path: "home", component: HomeComponent },
  10.     { path: "login", component: LoginComponent }
  11. ];
  12.  
  13. @NgModule({
  14.     imports: [RouterModule.forRoot(routes)],
  15.     exports: [RouterModule]
  16. })
  17. export class AppRoutingModule { }

接下来我们来应用这个路由，

打开app.module.ts，更新代码如下：

  1. import { NgModule } from "@angular/core";
  2. import { BrowserModule } from "@angular/platform-browser";
  3. import { HttpModule } from "@angular/http";
  4. import { FormsModule } from "@angular/forms";
  5.  
  6. import { AppRoutingModule } from "./app-routing.module";
  7.  
  8. import { AuthService } from "./_services/auth.service";
  9.  
  10. import { AppComponent } from "./app.component";
  11. import { HomeComponent } from "./home/home.component";
  12. import { LoginComponent } from "./login/login.component";
  13.  
  14. @NgModule({
  15.     bootstrap: [AppComponent],
  16.     imports: [
  17.         BrowserModule,
  18.         HttpModule,
  19.         AppRoutingModule,
  20.         FormsModule
  21.     ],
  22.     declarations: [
  23.         AppComponent,
  24.         HomeComponent,
  25.         LoginComponent
  26.     ],
  27.     providers: [AuthService]
  28. })
  29. export class AppModule { }

NgModule和BrowserModule你可以理解为基础模块，必加的。

HttpModule是做http请求用的。

FormsModule是做双向数据绑定用的，比如下面这样的，如果想把数据从view更新到component，就必须加这个。

  1. <input [(ngModel)]="userName" placeholder="useName:try type user1" />

AppRoutingModule即为我们刚才添加的路由文件。

AuthService是我们最早添加的service文件。

AppComponent是我们最初添加的那个app.component.ts里的那个component.

HomeComponent,LoginComponent同上。

最后我们再app.component.ts中添加路由锚点，

把template的值为 "<router-outlet></router-outlet>"

完整的代码应该是这样：

  1. import { Component } from '@angular/core';
  2.  
  3. @Component({
  4.     moduleId: module.id,
  5.     selector: 'my-app',
  6.     template: "<router-outlet></router-outlet>",
  7. })
  8. export class AppComponent {
  9. }

router-outlet是路由锚点的关键词。

至此，所有代码完成，F5调试吧。

完整的Angular2的入门教程，请参阅官方文档的《英雄指南》：中文传送门 | 英文传送门

关于本例完整的代码以及调试运行步骤，请访问：How to authorization Angular 2 app with asp.net core web api

更多脚本样例, 访问微软One Code样例库：http://aka.ms/onescriptsamples 更多代码样例, 访问微软One Script样例库：http://aka.ms/onecodesamples

NET Core中使用Angular2的Token base身份认证的更多相关文章

  1. 在ASP.NET Core中使用Angular2，以及与Angular2的Token base身份认证

    注:下载本文提到的完整代码示例请访问:How to authorization Angular 2 app with asp.net core web api 在ASP.NET Core中使用Angu ...

  2. ASP.NET Core WebApi基于Redis实现Token接口安全认证

    一.课程介绍 明人不说暗话,跟着阿笨一起玩WebApi!开发提供数据的WebApi服务,最重要的是数据的安全性.那么对于我们来说,如何确保数据的安全将会是需要思考的问题.在ASP.NET WebSer ...

  3. 基于Token的身份认证 与 基于服务器的身份认证

    基于Token的身份认证 与 基于服务器的身份认证 基于服务器的身份认证 在讨论基于Token的身份认证是如何工作的以及它的好处之前,我们先来看一下以前我们是怎么做的: HTTP协议是无状态的,也就是 ...

  4. 基于session和token的身份认证方案

    一.基于session的身份认证方案 1.方案图示 2.比较通用的鉴权流程实现如下: 在整个流程中有两个拦截器. 第一个拦截器AuthInteceptor是为了每一次的请求的时候都先去session中 ...

  5. 实现一个简单的基于Token的身份认证

    这个例子是基于客户端与webapi进行进行交互的身份认证,当然也适用于其他情况下的身份认证.   简单的交互过程: 1.首先输入用户名.密码进行登录操作 2.服务器验证用户名.密码的正确性,验证通过之 ...

  6. 如何在ASP.NET Core中实现一个基础的身份认证

    注:本文提到的代码示例下载地址> How to achieve a basic authorization in ASP.NET Core 如何在ASP.NET Core中实现一个基础的身份认证 ...

  7. [转]如何在ASP.NET Core中实现一个基础的身份认证

    本文转自:http://www.cnblogs.com/onecodeonescript/p/6015512.html 注:本文提到的代码示例下载地址> How to achieve a bas ...

  8. Core身份认证

    Core中实现一个基础的身份认证 注:本文提到的代码示例下载地址> How to achieve a basic authorization in ASP.NET Core 如何在ASP.NET ...

  9. 在ASP.NET Core中实现一个Token base的身份认证

    注:本文提到的代码示例下载地址> How to achieve a bearer token authentication and authorization in ASP.NET Core 在 ...

随机推荐

  1. String args[] 和 String[] args 有什么区别

    String args[] 和 String[] args 有什么区别 public static void main(String args[]) 或 public static void main ...

  2. 【刷题】BZOJ 4176 Lucas的数论

    Description 去年的Lucas非常喜欢数论题,但是一年以后的Lucas却不那么喜欢了. 在整理以前的试题时,发现了这样一道题目"求Sigma(f(i)),其中1<=i< ...

  3. 洛谷P4172 [WC2006]水管局长 （LCT，最小生成树）

    洛谷题目传送门 思路分析 在一个图中,要求路径上最大边边权最小,就不难想到最小生成树.而题目中有删边的操作,那肯定是要动态维护啦.直接上LCT维护边权最小值(可以参考一下蒟蒻的Blog) 这时候令人头 ...

  4. 【BZOJ1053】[HAOI2007]反素数（搜索）

    [BZOJ1053][HAOI2007]反素数(搜索) 题面 BZOJ 洛谷 题解 大力猜一下用不了几个质因子,那么随便爆搜一下就好了. #include<iostream> #inclu ...

  5. 【转】AD转换中常用的十种数字滤波法

    在AD采集中经常要用到数字滤波,而不同情况下又有不同的滤波需求,下面是10种经典的软件滤波方法的程序和优缺点分析: 限幅滤波法(又称程序判断滤波法) 中位值滤波法 算术平均滤波法 递推平均滤波法(又称 ...

  6. 洛谷 P4284 [SHOI2014]概率充电器 解题报告

    P4284 [SHOI2014]概率充电器 题目描述 著名的电子产品品牌SHOI 刚刚发布了引领世界潮流的下一代电子产品-- 概率充电器: "采用全新纳米级加工技术,实现元件与导线能否通电完 ...

  7. 洛谷 P2303 [SDOi2012]Longge的问题 解题报告

    P2303 [SDOi2012]Longge的问题 题目背景 SDOi2012 题目描述 Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数\(N\),你需要 ...

  8. 进程和线程（4）-进程 vs. 线程

    进程 vs. 线程 我们介绍了多进程和多线程,这是实现多任务最常用的两种方式.现在,我们来讨论一下这两种方式的优缺点. 首先,要实现多任务,通常我们会设计Master-Worker模式,Master负 ...

  9. CF&&CC百套计划4 Codeforces Round #276 (Div. 1) A. Bits

    http://codeforces.com/contest/484/problem/A 题意: 询问[a,b]中二进制位1最多且最小的数 贪心,假设开始每一位都是1 从高位i开始枚举, 如果当前数&g ...

  10. 分布式文件系统 之 数据块（Block）

    众所周知,HDFS中以数据块(block)为单位进行存储管理.本文简单介绍一下HDFS中数据块(block)的概念,以及众多分布式存储系统(不止是HDFS)使用block作为存储管理基本单位的意义. ...