欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

JSON Web Token(JWT)教程：一个基于Laravel和AngularJS的例子 本文原文：JSON Web Token Tutorial: An Example in Laravel and AngularJS 有大用

星期五, 2017-10-06 17:22 — adminshiping1

前言

这篇本应是几周前发的，无奈中间遭遇了搬家阿里云以及备案，只好拖到今天。这是一篇介绍JSON Web Token(JWT)的文章，虽然可能用到的例子和Laravel和AngularJS有关，但知道了原理便能写出适用于自己的。同时，由于目前个人用的后台一直是java，前端也没用过AngularJS，vue也是最近才开始学，所以Laravel和AngularJS部分 并不十分了解，若有错误，欢迎及时提出。

JSON Web Token(JWT)教程：一个基于Laravel和AngularJS的例子

文章内容

随着单页应用程序，移动应用程序和RESTful API服务的日益普及，Web开发人员编写后端代码的方式发生了重大变化。 使用像AngularJS和BackboneJS这样的技术， 我们不再花费大量的时间来构建标记，而是构建前端应用程序使用的api。我们的后端更多地关注业务逻辑和数据，而演示逻辑被专门转移到前端或移动应用。这些变化导致了在现代应用程序中实现身份验证的新方式。

认证是任何Web应用程序中最重要的部分之一。 几十年来， Cookie和基于服务器的认证（感觉应该是常见的session）是最简单的解决方案。然而在现代移动端和单页应用程序处理身份认证可能是很棘手的，需要更好的解决方案。目前，API的认证问题最有名的解决方案是OAuth 2.0和JSON Web Token（JWT）。

什么是 JSON WEB TOKEN（JWT）

JSON Web TOKEN（JWT）是通过发送数字签名进行验证和信任信息的一种规范，是一个开放的标准（ RFC 7519 ）。它包含一个紧凑且URL安全的JSON对象，该对象通过加密签名来验证其真实性，如果负载（Payload ）包含敏感信息，也可以对其进行加密。

由于其结构紧凑，JWT通常用于HTTP Authorization头或URL查询参数。

JSON Web Token的结构

JWT实际上是一个使用. 分隔的多个base64url编码的字符串组成的一个新字符串。它由三部分组成：头部（Header）、负载（Payload）与签名（Signature）。

JSON Web Token(JWT)教程：一个基于Laravel和AngularJS的例子

实例：

1
2
3
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJpc3MiOiJ0b3B0YWwuY29tIiwiZXhwIjoxNDI2NDIwODAwLCJodHRwOi8vdG9wdGFsLmNvbS9qd3RfY2xhaW1zL2lzX2FkbWluIjp0cnVlLCJjb21wYW55IjoiVG9wdGFsIiwiYXdlc29tZSI6dHJ1ZX0.
yRQYnWzskCZUxPwaQupWkiUzKELZ49eM7oWxAQK_ZXw

 

Header-头部

标题包含token的元数据，最小限度地包含签名的类型和加密算法。（您可以使用JSON格式化工具来优化 JSON对象。）

例：

1
2
3
4
{
  “alg”: “HS256”,
  “typ”: “JWT”
}

该JWT头部声明编码对象是一个JSON Web令牌，并且使用HMAC SHA-256算法进行签名。

将其进行base64编码，我们就有了JWT的第一部分。

1
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

 

 Payload (Claims)-负载

在JWT的上下文中，一个声明（claim ）可以被定义为关于实体（通常是用户）的声明（statement ），以及有关token本身额外的元数据。Claim 包含我们要传输的信息以及服务器可以使用它来正确处理身份验证。我们可以提供多种claim，包括 registered claim names, public claim names and private claim names。

注：对于registered claim names，英文原文中使用的是registered ，jwt.io和查看的一些中文介绍中均用的是Reserved，故下文中均用Reserved代替英文原文中关于registered claim names部分。

即：Token的第二部分是负载，它包含了claim， Claim是一些实体（通常指的用户）的状态和额外的元数据，有三种类型的claim： reserved , public 和 private .

Reserved claims

这些claim是JWT预先定义的，在JWT中并不会强制使用它们，而是推荐使用。包含：

  • iss：token签发者
  • exp：token过期时间戳
  • sub：token面向的用户/token的主题
  • aud：token接收方
  • iat：签发时间
  • nbf:“Not before”，JWT不能接受处理的时间
  • jti: JWT ID claim，为JWT提供唯一的标识符

Public claims

根据需要定义自己的字段，注意应该避免冲突。通过使用URI或URN命名避免发送者和接收方不属于封闭网络时 JWT中的命名冲突。

一个public claim name的例子是https://www.toptal.com/jwt_claims/is_admin，最佳做法是描述声明的位置放置一个文件，并让其文档可以被可以被引用。

Private claims

这些是自定义的字段，可以用来在双方之间交换信息。

可用于JWT仅在已知系统（如企业内部）之间的封闭环境中进行交换的地方。我们可以自定义自己的 claims，如user IDs, user roles, 或者其他任何信息。

使用这些声明名称（claim-names）在封闭或私有系统之外可能具有冲突的语义含义，因此请谨慎使用。

非常需要注意的是，我们希望保持尽可能小的web token，因此尽量仅将必要的数据放在public and private claims中。

例：

1
2
3
4
5
6
7
{
  “iss”: “toptal.com”,
  “exp”: 1426420800,
  “https://www.toptal.com/jwt_claims/is_admin”: true,
  “company”: “Toptal”,
  “awesome”: true
}

这个payload实例中有两个reserved claims， 一个public claim 和两个 private claims。将其进行base64编码，我们就有了JWT的第二部分。

1
eyJpc3MiOiJ0b3B0YWwuY29tIiwiZXhwIjoxNDI2NDIwODAwLCJodHRwOi8vdG9wdGFsLmNvbS9qd3RfY2xhaW1zL2lzX2FkbWluIjp0cnVlLCJjb21wYW55IjoiVG9wdGFsIiwiYXdlc29tZSI6dHJ1ZX0

 

Signature-签名

JWT标准遵循JSON Web签名（JWS）规范来生成最终签名的token。它通过组合编码的JWT头（header） 和编码的JWT负载（Payload ） 并使用强加密算法（如HMAC SHA-256）来生成签名。签名的密钥由服务器持有，因此它将能够验证现有的token并签署(颁发/生成)新的token。

1
2
3
4
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

这给了我们JWT的最后一部分。

1
yRQYnWzskCZUxPwaQupWkiUzKELZ49eM7oWxAQK_ZXw

 

JWT的安全与加密

为了防止中间人（man-in-the-middle）攻击，使用TLS/SSL与JWT结合是至关重要的。在大多数情况下，如果包含敏感信息，加密JWT payload就足够了。但是，如果我们要添加额外的保护层，可以使用JSON Web Encryption（JWE）规范对JWT payload进行加密。

当然，如果我们想避免使用JWE的额外开销，另一个选择是将敏感信息保留在我们的数据库中，并且在需要访问敏感数据时，使用我们的token进行额外的API调用。

为什么需要Web Tokens?

在我们可以看到使用token认证的所有优点之前，我们必须看看过去认证的方式。

基于服务器的身份验证

通常为Session和cookie。

JSON Web Token(JWT)教程：一个基于Laravel和AngularJS的例子

由于HTTP协议是无状态的，因此需要有一种存储用户信息的机制，以及登录后每个后续请求对用户进行身份验证的方法。大多数网站使用Cookie来存储用户的会话ID（session ID）。

它的工作原理

浏览器向包含用户身份和密码的服务器发出POST请求。服务器使用在用户浏览器上设置的cookie进行响应，并包含用于标识用户的会话ID。

在每个后续请求中，由于用户数据存储在服务器上，服务器需要找到该会话并对其进行反序列化。

基于服务器的认证的缺点
  • 难以扩展：服务器需要为用户创建一个会话并将其保存在服务器上的某个位置。这可以在内存或数据库中完成。如果我们有一个分布式系统，我们必须确保我们使用一个不耦合到应用服务器的单独的会话存储。
  • 跨源请求共享（CORS）：当使用AJAX调用从另一个域（跨域，Cross-origin）获取资源时，我们可能会遇到禁止请求的问题，因为默认情况下，HTTP请求不包括跨域（Cross-origin）请求的Cookie 。
  • 与Web框架耦合：当使用基于服务器的身份验证时，我们用在我们的框架的身份验证方案，在使用不同编程语言编写的不同Web框架之间共享会话数据是非常困难的，甚至是不可能的。

基于token的身份验证

JSON Web Token(JWT)教程：一个基于Laravel和AngularJS的例子

基于token的认证是无状态的，因此不需要在会话中存储用户信息。这使我们能够扩展我们的应用程序，而不必担心用户登录的位置。我们可以轻松地使用相同的token从除了我们登录的域之外的域中获取安全资源。

JSON Web Token 的工作原理

浏览器或移动客户端向包含用户登录信息的认证服务器发出请求。认证服务器生成新的JWT access token并将其返回给客户端。在对受限资源的每次请求时，客户端都会在查询字符串(the query string)或Authorization头(header)中发送access token。然后，服务器验证令牌，如果它有效，则将安全资源返回给客户机。

基于token认证的优点

无状态，易于扩展：token包含用于标识用户的所有信息，从而消除了对会话状态的需要（即，无需会话状态）。如果我们使用负载均衡配置，我们可以将用户传递给任何服务器，而不是仅被绑定在我们登陆的那台服务器上。

可重用性：我们可以拥有许多独立的服务器，在多个平台和域（domains）上运行，重复使用相同的令牌来验证用户。很容易构建与其他应用程序共享权限的应用程序。

安全性：由于我们没有使用cookies，我们不必再防御网站的跨站点请求伪造（CSRF）攻击。如果我们必须在其中提供任何敏感信息，我们还应该使用JWE加密我们的token，并通过HTTPS传输我们的令牌以防止中间人(man-in-the-middle)的袭击。

性能：没有服务器端查找可以在每个请求上查找和反序列化会话。我们唯一要做的就是计算HMAC SHA-256来验证token并解析其内容。

使用Laravel 5和AngularJS的JSON Web Token示例

(译注：由于对Laravel和AngularJS不熟悉，这里的以英文原文为准，同时若发现这里有错误，欢迎随时提出。 )

在本教程中，我将演示如何使用两个流行的Web技术实现JSON Web Token的基本身份验证：Laravel 5用于后端代码，AngularJS用于前端单页面应用程序（SPA）示例。（您可以在这里找到整个演示文稿，以及此GitHub存储库中的源代码，以便您可以遵循本教程。）

该JSON Web Token示例不会使用任何类型的加密来确保在claims中传送的信息的机密性。实际上，这通常是可以的，因为TLS / SSL会加密请求。然而，如果token将包含敏感信息，如用户的社会安全号码，则也应使用JWE进行加密。

Laravel后端示例

我们将使用Laravel来处理用户注册，将用户数据保留到数据库，并提供一些需要认证的受限数据，以供Angular应用程序使用。我们将创建一个示例API子域，以模拟跨域（ Cross-origin）资源共享（CORS）。

安装和项目引导（Installation and Project Bootstrapping）

为了使用Laravel，我们必须在我们的机器上安装Composer软件包管理器。我建议进行Laravel开发时使用 Laravel Homestead pre-packaged “box” of Vagrant （注：感觉是通过 Laravel 安装工具安装 Laravel）。无论我们的操作系统如何，它都为我们提供了完整的开发环境。

引导（Bootstrap ）我们Laravel应用程序的最简单方法是使用 Composer 下载 Laravel 安装包：

1
composer global require "laravel/installer=~1.1"

现在我们已经准备好一切通过运行laravel new jwt创建一个新的Laravel项目。

有关此过程的任何问题，请参阅官方Laravel文档。

在我们创建了基本的Laravel 5应用程序之后，我们需要设置我们的Homestead.yaml，它将为我们的本地环境配置文件夹映射和域配置。

Homestead.yaml文件示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
ip: "192.168.10.10"
memory: 2048
cpus: 1
 
authorize: /Users/ttkalec/.ssh/public.psk
 
keys:
    - /Users/ttkalec/.ssh/private.ppk
folders:
    - map: /coding/jwt
      to: /home/vagrant/coding/jwt
sites:
    - map: jwt.dev
      to: /home/vagrant/coding/jwt/public
    - map: api.jwt.dev
      to: /home/vagrant/coding/jwt/public
variables:
    - key: APP_ENV
      value: local

当我们使用 vagrant up 命令启动我们的Vagrant box并使用 vagrant ssh登陆后，我们跳转到事先定义好的项目目录。在上面的例子中，这将是/home/vagrant/coding/jwt。我们现在可以运行php artisan migrate命令，以便在我们的数据库中创建必要的用户表。

安装Composer依赖

幸运的是，有一个Laravel开发者的社区，并拥有许多优秀的软件包，可以供我们重用和扩展我们的应用程序。这个例子中，我们将使用 tymon/jwt-auth，一个由Sean Tymon开发的用于在服务端处理token的，和barryvdh/laravel-cors，一个由 Barry vd. Heuvel开发的用于处理CORS。

jwt-auth

在我们 composer.json 中 Require the tymon/jwt-auth package并且更新我们的依赖。

1
composer require tymon/jwt-auth 0.5.*

添加 JWTAuthServiceProvider 到我们 app/config/app.php  的providers array中。

1
'Tymon\JWTAuth\Providers\JWTAuthServiceProvider'

接下来，在 app/config/app.php 文件中的 aliases 数组中,我们添加 JWTAuth facade.

1
'JWTAuth' => 'Tymon\JWTAuth\Facades\JWTAuth'

最后，我们将通过下面的命令发布软件包的配置： php artisan config:publish tymon/jwt-auth。

JSON Web tokens 通过秘钥加密。我们可以使用php artisan jwt:generate命令生成该密钥。它将被放置在我们的config/jwt.php文件中。然而，在生产环境中，我们不想在配置文件中使用我们的密码或API密钥。相反，我们应该将它们放在服务器环境变量中，并使用该env函数在配置文件中引用它们。例如：

1
'secret' => env('JWT_SECRET')

我们可以在Github上找到关于这个软件包和所有配置设置的更多信息。

laravel-cors

在我们composer.json 中Require the barryvdh/laravel-cors package 并更新我们的依赖。

1
composer require barryvdh/laravel-cors 0.4.x@dev

添加CorsServiceProvider到我们的app/config/app.php的providers array中。

1
'Barryvdh\Cors\CorsServiceProvider'

然后添加中间件（middleware ）到我们的app/Http/Kernel.php。

1
'Barryvdh\Cors\Middleware\HandleCors'

通过使用 php artisan vendor:publish 命令发布这配置到 一个本地config/cors.php 文件中。

一个cors.php文件配置示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
return [
   'defaults' => [
       'supportsCredentials' => false,
       'allowedOrigins' => [],
       'allowedHeaders' => [],
       'allowedMethods' => [],
       'exposedHeaders' => [],
       'maxAge' => 0,
       'hosts' => [],
   ],
 
   'paths' => [
       'v1/*' => [
           'allowedOrigins' => ['*'],
           'allowedHeaders' => ['*'],
           'allowedMethods' => ['*'],
           'maxAge' => 3600,
       ],
   ],
];

 

路由和处理HTTP请求

为了简洁起见，我将把我所有的代码放在route.php文件中，该文件负责Laravel路由和委托请求给控制器。我们通常会创建专门的控制器来处理我们所有的HTTP请求，并保持我们的代码模块化和干净。

我们将使用我们的AngularJS SPA视图

1
2
3
Route::get('/', function () {
   return view('spa');
});

 

用户注册

当我们使用用户名和密码向/signup创建一个POST请求时，我们将尝试创建一个新用户并将其保存到数据库。创建用户后，将创建一个JWT并通过JSON响应返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
Route::post('/signup', function () {
   $credentials = Input::only('email', 'password');
 
   try {
       $user = User::create($credentials);
   } catch (Exception $e) {
       return Response::json(['error' => 'User already exists.'], HttpResponse::HTTP_CONFLICT);
   }
 
   $token = JWTAuth::fromUser($user);
 
   return Response::json(compact('token'));
});

 

用户登录

当我们使用用户名和密码向/signin发出码POST请求，我们验证该用户是否存在，并通过JSON响应返回一个JWT。

1
2
3
4
5
6
7
8
9
Route::post('/signin', function () {
   $credentials = Input::only('email', 'password');
 
   if ( ! $token = JWTAuth::attempt($credentials)) {
       return Response::json(false, HttpResponse::HTTP_UNAUTHORIZED);
   }
 
   return Response::json(compact('token'));
});

 

在同一个域上获取限制资源

用户登录后，我们可以获取受限制的资源。我创建了一个/restricted模拟需要经过身份验证的用户的资源的路由。为了做到这一点，请求Authorization头（header ）或查询字符串（query string ）需要提供JWT用于后端进行验证。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Route::get('/restricted', [
   'before' => 'jwt-auth',
   function () {
       $token = JWTAuth::getToken();
       $user = JWTAuth::toUser($token);
 
       return Response::json([
           'data' => [
               'email' => $user->email,
               'registered_at' => $user->created_at->toDateTimeString()
           ]
       ]);
   }
]);

在这个例子中，我通过'before' => 'jwt-auth'.使用了 jwt-auth 包中提供的jwt-auth 中间件。该中间件用于过滤请求并验证JWT token。如果token无效，不存在或过期，则中间件将抛出一个可以捕获的异常。

在Laravel 5中，我们可以使用app/Exceptions/Handler.php文件捕获异常。使用render函数，我们可以基于抛出的异常创建HTTP响应。

1
2
3
4
5
6
7
8
9
10
11
12
13
public function render($request, Exception $e)
{
  if ($e instanceof \Tymon\JWTAuth\Exceptions\TokenInvalidException)
  {
     return response(['Token is invalid'], 401);
  }
  if ($e instanceof \Tymon\JWTAuth\Exceptions\TokenExpiredException)
  {
     return response(['Token has expired'], 401);
  }
 
  return parent::render($request, $e);
}

如果用户认证并且token有效，我们可以通过JSON安全地将受限数据返回到前端。

从API子域中获取限制资源(跨域问题)

在下面JSON web token实例中，我们将采用不同的token验证方法。不同于使用jwt-auth中间件，我们将手动处理异常。当我们向一个API 服务器（ server），如 api.jwt.dev/v1/restricted发出POST请求时，我们正在进行跨域请求，并且必须在后端启用CORS。幸运的是，我们已经在config/cors.php文件中配置了CORS 。

1
2
3
4
5
6
7
8
9
10
11
Route::group(['domain' => 'api.jwt.dev', 'prefix' => 'v1'], function () {
   Route::get('/restricted', function () {
       try {
           JWTAuth::parseToken()->toUser();
       } catch (Exception $e) {
           return Response::json(['error' => $e->getMessage()], HttpResponse::HTTP_UNAUTHORIZED);
       }
 
       return ['data' => 'This has come from a dedicated API subdomain with restricted access.'];
   });
});

 

AngularJS前端示例

我们使用AngularJS作为前端，依赖Laravel后端身份验证服务器的API调用进行用户身份验证和样本数据以及用于提供跨域示例数据的API服务器。一旦我们进入我们项目的主页，后端将提供resources/views/spa.blade.php视图用来引导Angular应用程序。

这是Angular应用程序的文件夹结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public/
  |-- css/
      `-- bootstrap.superhero.min.css
  |-- lib/
      |-- loading-bar.css
      |-- loading-bar.js
      `-- ngStorage.js
  |-- partials/
      |-- home.html
      |-- restricted.html
      |-- signin.html
      `-- signup.html
  `-- scripts/
      |-- app.js
      |-- controllers.js
      `-- services.js

 

引导Angular应用程序

spa.blade.php包含运行应用程序所需的基本要素。我们将使用Twitter Bootstrap进行样式化，以及Bootswatch的自定义主题。在进行AJAX调用时，要获得一些视觉反馈，我们将使用angular-loading-bar script来拦截XHR请求并创建一个加载栏。 在<head>中，我们需要添加如下样式文件(即，开头要引入的css文件)：

1
2
3
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap.superhero.min.css">
<link rel="stylesheet" href="/lib/loading-bar.css">

我们标记的footer 包含对库的引用，以及Angular模块，控制器和服务的自定义脚本。（即，在最后的<.body> 之前引入js文件）：

1
2
3
4
5
6
7
8
9
10
<script src="/lib/ngStorage.js"></script>
<script src="/lib/loading-bar.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers.js"></script>
<script src="/scripts/services.js"></script>
</body>

我们使用AngularJS的 ngStorage 库，将token保存到浏览器的本地存储中，以便我们可以通过Authorization头（header） 在每个请求上发送它。

在生产环境中，当然，我们会缩小并组合所有的脚本文件（js文件）和样式表（css文件），以提高性能。

我已经使用Bootstrap创建了一个导航栏，它将根据用户的登录状态更改相应链接的可见性。登录状态由控制器作用域中的token变量决定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
       <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="#">JWT Angular example</a>
</div>
<div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-right">
       <li data-ng-show="token"><a ng-href="#/restricted">Restricted area</a></li>
       <li data-ng-hide="token"><a ng-href="#/signin">Sign in</a></li>
       <li data-ng-hide="token"><a ng-href="#/signup">Sign up</a></li>
       <li data-ng-show="token"><a ng-click="logout()">Logout</a></li>
   </ul>
</div>

 

路由

我们有一个名为app.js的文件负责配置我们所有的前端路由。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
angular.module('app', [
   'ngStorage',
   'ngRoute',
   'angular-loading-bar'
])
   .constant('urls', {
       BASE: 'http://jwt.dev:8000',
       BASE_API: 'http://api.jwt.dev:8000/v1'
   })
   .config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
       $routeProvider.
           when('/', {
               templateUrl: 'partials/home.html',
               controller: 'HomeController'
           }).
           when('/signin', {
               templateUrl: 'partials/signin.html',
               controller: 'HomeController'
           }).
           when('/signup', {
               templateUrl: 'partials/signup.html',
               controller: 'HomeController'
           }).
           when('/restricted', {
               templateUrl: 'partials/restricted.html',
               controller: 'RestrictedController'
           }).
           otherwise({
               redirectTo: '/'
           });

我们可以看到我们已经定义了4个由 HomeController 或 RestrictedController处理的路由。每个路线都对应于部分HTML视图。我们还定义了两个常量，其中包含我们对后端的HTTP请求的URL。

请求拦截器

AngularJS的$ http服务允许我们与后端通信并发出HTTP请求。在我们的例子中，Authorization如果用户被认证，我们要拦截每个HTTP请求并注入一个包含我们的JWT 的头。我们也可以使用拦截器来创建一个全局的HTTP错误处理程序。这是我们的拦截器的一个例子，它们在浏览器的本地存储中可用时注入一个token。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$httpProvider.interceptors.push(['$q', '$location', '$localStorage', function ($q, $location, $localStorage) {
   return {
       'request': function (config) {
           config.headers = config.headers || {};
           if ($localStorage.token) {
               config.headers.Authorization = 'Bearer ' + $localStorage.token;
           }
           return config;
       },
       'responseError': function (response) {
           if (response.status === 401 || response.status === 403) {
               $location.path('/signin');
           }
           return $q.reject(response);
       }
   };
}]);

 

控制器

在controllers.js文件中，我们定义了两个控制器，为我们的应用程序：HomeController和RestrictedController。

HomeController处理登录，注册和注销功能。它将用户名和密码数据从登录表单和注册表单传递Auth到向后端发送HTTP请求的服务。然后将token保存到本地存储，或者显示错误消息，具体取决于后端的响应。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
angular.module('app')
   .controller('HomeController', ['$rootScope', '$scope', '$location', '$localStorage', 'Auth',
       function ($rootScope, $scope, $location, $localStorage, Auth) {
           function successAuth(res) {
               $localStorage.token = res.token;
               window.location = "/";
           }
 
           $scope.signin = function () {
               var formData = {
                   email: $scope.email,
                   password: $scope.password
               };
 
               Auth.signin(formData, successAuth, function () {
                   $rootScope.error = 'Invalid credentials.';
               })
           };
 
           $scope.signup = function () {
               var formData = {
                   email: $scope.email,
                   password: $scope.password
               };
 
               Auth.signup(formData, successAuth, function () {
                   $rootScope.error = 'Failed to signup';
               })
           };
 
           $scope.logout = function () {
               Auth.logout(function () {
                   window.location = "/"
               });
           };
           $scope.token = $localStorage.token;
           $scope.tokenClaims = Auth.getTokenClaims();
       }])

RestrictedController表现方式相同，只是它通过使用服务getRestrictedData和getApiData函数来获取数据Data。

1
2
3
4
5
6
7
8
9
10
11
12
.controller('RestrictedController', ['$rootScope', '$scope', 'Data', function ($rootScope, $scope, Data) {
       Data.getRestrictedData(function (res) {
           $scope.data = res.data;
       }, function () {
           $rootScope.error = 'Failed to fetch restricted content.';
       });
       Data.getApiData(function (res) {
           $scope.api = res.data;
       }, function () {
           $rootScope.error = 'Failed to fetch restricted API content.';
       });
   }]);

仅当用户进行身份验证成功后，后端才负责提供受限制的数据。这意味着为了响应受限数据，对该数据的请求需要在其Authorization头（header）或查询字符串(query string)内包含一个有效的JWT 。如果不是这样，服务器将使用401未经授权的错误状态代码进行响应。

认证服务

Auth服务负责登录并向后端注册HTTP请求。如果请求成功，则响应包含签名token，然后将其解码，并将附带的token声明(claims )信息保存到tokenClaims变量中。这通过getTokenClaims功能传递给控制器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
angular.module('app')
   .factory('Auth', ['$http', '$localStorage', 'urls', function ($http, $localStorage, urls) {
       function urlBase64Decode(str) {
           var output = str.replace('-', '+').replace('_', '/');
           switch (output.length % 4) {
               case 0:
                   break;
               case 2:
                   output += '==';
                   break;
               case 3:
                   output += '=';
                   break;
               default:
                   throw 'Illegal base64url string!';
           }
           return window.atob(output);
       }
 
       function getClaimsFromToken() {
           var token = $localStorage.token;
           var user = {};
           if (typeof token !== 'undefined') {
               var encoded = token.split('.')[1];
               user = JSON.parse(urlBase64Decode(encoded));
           }
           return user;
       }
 
       var tokenClaims = getClaimsFromToken();
 
       return {
           signup: function (data, success, error) {
               $http.post(urls.BASE + '/signup', data).success(success).error(error)
           },
           signin: function (data, success, error) {
               $http.post(urls.BASE + '/signin', data).success(success).error(error)
           },
           logout: function (success) {
               tokenClaims = {};
               delete $localStorage.token;
               success();
           },
           getTokenClaims: function () {
               return tokenClaims;
           }
       };
   }
   ]);

 

数据服务

这是一个简单的服务，它向认证服务器以及API服务器发出一些虚拟受限数据的请求。它发出请求，并将成功和错误回调委托给控制器。

1
2
3
4
5
6
7
8
9
10
11
12
13
angular.module('app')
   .factory('Data', ['$http', 'urls', function ($http, urls) {
 
       return {
           getRestrictedData: function (success, error) {
               $http.get(urls.BASE + '/restricted').success(success).error(error)
           },
           getApiData: function (success, error) {
               $http.get(urls.BASE_API + '/restricted').success(success).error(error)
           }
       };
   }
   ]);

 

结论

基于token的身份验证使我们能够构建不绑定到特定认证方案的解耦系统。令牌可能在任何地方生成，并在使用相同密钥(secret key)签署token的任何系统上使用。他们已准备就绪，并不要求我们使用Cookie。

JSON Web Token可以在所有流行的编程语言中工作，并且迅速普及。它们由Google，Microsoft和Zendesk等公司支持。互联网工程任务组（IETF）的标准规范仍在草案版本中，未来可能略有变动。

还有很多关于JWT的内容，例如如何处理安全细节，以及在token过期时刷新令牌，但上述示例应演示使用JSON Web Token的基本用法，更重要的是显示优势。

参考资料

Introduction to JSON Web Tokens

JWT 简介

JSON Web Token - 在Web应用间安全地传递信息

待延伸

OAuth 2.0

来自 https://windcoder.com/json-web-tokenjwtjiaochengyigejiyularavelheangularjsdelizi

普通分类: 
laravel
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2