Nest.js 从零到壹系列（三）：使用 JWT 实现单点登陆

时间  2020-12-14
标签 html 前端 git github web sql 数据库 json 数组 安全 栏目 JavaScript 繁體版
原文   原文链接

本文由图雀社区认证做者 布拉德特皮 写做而成，点击阅读原文查看做者掘金连接，感谢做者的优质输出，让咱们的技术世界变得更加美好😆html

前言

上一篇介绍了如何使用 Sequelize 链接 MySQL，接下来，在原来代码的基础上进行扩展，实现用户的注册和登陆功能。前端

这里须要简单提一下两个概念 JWT 和 单点登陆：git

JWT

JWT（JSON Web Token）是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准（RFC 7519）。该 Token 被设计为紧凑且安全的，特别适用于分布式站点的单点登陆（SSO）场景。JWT的声明通常被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也能够增长一些额外的其它业务逻辑所必须的声明信息，该 Token 也可直接被用于认证，也可被加密。github

具体原理能够参考《JSON Web Token 入门教程 \- 阮一峰》[1]web

单点登陆

单点登陆（Single Sign On），简称为 SSO，是比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只须要登陆一次就能够访问全部相互信任的应用系统。sql

因此 JWT 实现【单点登陆】的大体流程是：数据库

  1. 客户端用户进行登陆请求；
  2. 服务端拿到请求，根据参数查询用户表；
  3. 若匹配到用户，将用户信息进行签证，并颁发 Token；
  4. 客户端拿到 Token 后，存储至某一地方，在以后的请求中都带上 Token ；
  5. 服务端接收到带 Token 的请求后，直接根据签证进行校验，无需再查询用户信息；

下面，就开始咱们的实战：json

GitHub 项目地址[2]，欢迎各位大佬 Star。数组

1、编写加密的工具函数

在 src 目录下，新建文件夹 utils，里面将存放各类工具函数，而后新建 cryptogram.ts 文件：安全

import * as crypto from 'crypto';

/**
 * Make salt
 */
export function makeSalt(): string {
  return crypto.randomBytes(3).toString('base64');
}

/**
 * Encrypt password
 * @param password 密码
 * @param salt 密码盐
 */
export function encryptPassword(password: string, salt: string): string {
  if (!password || !salt) {
    return '';
  }
  const tempSalt = Buffer.from(salt, 'base64');
  return (
    // 10000 表明迭代次数 16表明长度
    crypto.pbkdf2Sync(password, tempSalt, 10000, 16, 'sha1').toString('base64')
  );
}

上面写了两个方法，一个是制做一个随机盐（salt），另外一个是根据盐来加密密码。

这两个函数将贯穿注册和登陆的功能。

2、用户注册

在写注册逻辑以前，咱们须要先修改一下上一篇写过的代码，即 user.service.ts 中的 findeOne() 方法：

// src/logical/user/user.service.ts
import { Injectable } from '@nestjs/common';
import * as Sequelize from 'sequelize'; // 引入 Sequelize 库
import sequelize from '../../database/sequelize'; // 引入 Sequelize 实例

@Injectable()
export class UserService {
  /**
 * 查询是否有该用户
 * @param username 用户名
 */
  async findOne(username: string): Promise<any | undefined> {
    const sql = `
 SELECT
 user_id userId, account_name username, real_name realName, passwd password,
 passwd_salt salt, mobile, role
 FROM
 admin_user
 WHERE
 account_name = '${username}'
 `; // 一段平淡无奇的 SQL 查询语句
    try {
      const user = (await sequelize.query(sql, {
        type: Sequelize.QueryTypes.SELECT, // 查询方式
        raw: true, // 是否使用数组组装的方式展现结果
        logging: true, // 是否将 SQL 语句打印到控制台
      }))[0];
      // 若查不到用户，则 user === undefined
      return user;
    } catch (error) {
      console.error(error);
      return void 0;
    }
  }
}

如今，findOne() 的功能更符合它的方法名了，查到了，就返回用户信息，查不到，就返回 undefined。

接下来，咱们开始编写注册功能：

// src/logical/user/user.service.ts
import { Injectable } from '@nestjs/common';
import * as Sequelize from 'sequelize'; // 引入 Sequelize 库
import sequelize from '../../database/sequelize'; // 引入 Sequelize 实例

import { makeSalt, encryptPassword } from '../../utils/cryptogram'; // 引入加密函数

@Injectable()
export class UserService {
  /**
 * 查询是否有该用户
 * @param username 用户名
 */
  async findOne(username: string): Promise<any | undefined> {
    ...
  }

  /**
 * 注册
 * @param requestBody 请求体
 */
  async register(requestBody: any): Promise<any> {
    const { accountName, realName, password, repassword, mobile } = requestBody;
    if (password !== repassword) {
      return {
        code: 400,
        msg: '两次密码输入不一致',
      };
    }
    const user = await this.findOne(accountName);
    if (user) {
      return {
        code: 400,
        msg: '用户已存在',
      };
    }
    const salt = makeSalt(); // 制做密码盐
    const hashPwd = encryptPassword(password, salt);  // 加密密码
    const registerSQL = `
 INSERT INTO admin_user
 (account_name, real_name, passwd, passwd_salt, mobile, user_status, role, create_by)
 VALUES
 ('${accountName}', '${realName}', '${hashPwd}', '${salt}', '${mobile}', 1, 3, 0)
 `;
    try {
      await sequelize.query(registerSQL, { logging: false });
      return {
        code: 200,
        msg: 'Success',
      };
    } catch (error) {
      return {
        code: 503,
        msg: `Service error: ${error}`,
      };
    }
  }
}

编写好后，在 user.controller.ts 中添加路由

// src/logical/user/user.controller.ts
import { Controller, Post, Body } from '@nestjs/common';
import { UserService } from './user.service';

@Controller('user')
export class UserController {
  constructor(private readonly usersService: UserService) {}

  // @Post('find-one')
  // findOne(@Body() body: any) {
  // return this.usersService.findOne(body.username);
  // }

  @Post('register')
  async register(@Body() body: any) {
    return await this.usersService.register(body);
  }
}

如今，咱们使用 Postman 来测试一下，先故意输入不同的密码和已存在的用户名：

如图，密码不一致的校验触发了。

而后，咱们把密码改为一致的：

如图，已有用户的校验触发了。

而后，咱们再输入正确的参数：

咱们再去数据库看一下：

发现已经将信息插入表中了，并且密码也是加密后的，至此，注册功能已基本完成。

3、JWT 的配置与验证

为了更直观的感觉处理顺序，我在代码中加入了步骤打印

1. 安装依赖包

$ yarn add passport passport-jwt passport-local @nestjs/passport @nestjs/jwt -S

2. 建立 Auth 模块

$ nest g service auth logical
$ nest g module auth logical

3. 新建一个存储常量的文件

在 auth 文件夹下新增一个 constants.ts，用于存储各类用到的常量：

// src/logical/auth/constats.ts
export const jwtConstants = {
  secret: 'shinobi' // 秘钥
};

4. 编写 JWT 策略

在 auth 文件夹下新增一个 jwt.strategy.ts，用于编写 JWT 的验证策略：

// src/logical/auth/jwt.strategy.ts
import { ExtractJwt, Strategy } from 'passport-jwt';
import { PassportStrategy } from '@nestjs/passport';
import { Injectable } from '@nestjs/common';
import { jwtConstants } from './constants';

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      ignoreExpiration: false,
      secretOrKey: jwtConstants.secret,
    });
  }
  
  // JWT验证 - Step 4: 被守卫调用
  async validate(payload: any) {
    console.log(`JWT验证 - Step 4: 被守卫调用`);
    return { userId: payload.sub, username: payload.username, realName: payload.realName, role: payload.role };
  }
}

5. 编写 auth.service.ts 的验证逻辑

// src/logical/auth/auth.service.ts
import { Injectable } from '@nestjs/common';
import { UserService } from '../user/user.service';
import { JwtService } from '@nestjs/jwt';
import { encryptPassword } from '../../utils/cryptogram';

@Injectable()
export class AuthService {
  constructor(private readonly usersService: UserService, private readonly jwtService: JwtService) {}

  // JWT验证 - Step 2: 校验用户信息
  async validateUser(username: string, password: string): Promise<any> {
    console.log('JWT验证 - Step 2: 校验用户信息');
    const user = await this.usersService.findOne(username);
    if (user) {
      const hashedPassword = user.password;
      const salt = user.salt;
      // 经过密码盐，加密传参，再与数据库里的比较，判断是否相等
      const hashPassword = encryptPassword(password, salt);
      if (hashedPassword === hashPassword) {
        // 密码正确
        return {
          code: 1,
          user,
        };
      } else {
        // 密码错误
        return {
          code: 2,
          user: null,
        };
      }
    }
    // 查无此人
    return {
      code: 3,
      user: null,
    };
  }

  // JWT验证 - Step 3: 处理 jwt 签证
  async certificate(user: any) {
    const payload = { username: user.username, sub: user.userId, realName: user.realName, role: user.role };
    console.log('JWT验证 - Step 3: 处理 jwt 签证');
    try {
      const token = this.jwtService.sign(payload);
      return {
        code: 200,
        data: {
          token,
        },
        msg: `登陆成功`,
      };
    } catch (error) {
      return {
        code: 600,
        msg: `帐号或密码错误`,
      };
    }
  }
}

此时保存文件，控制台会报错：

能够先无论，这是由于尚未把 JwtService 和 UserService 关联到 auth.module.ts 中。

5. 编写本地策略

这一步非必须，根据项目的需求来决定是否须要本地策略

// src/logical/auth/local.strategy.ts
import { Strategy } from 'passport-local';
import { PassportStrategy } from '@nestjs/passport';
import { Injectable, UnauthorizedException } from '@nestjs/common';
import { AuthService } from './auth.service';

@Injectable()
export class LocalStrategy extends PassportStrategy(Strategy) {
  constructor(private readonly authService: AuthService) {
    super();
  }

  async validate(username: string, password: string): Promise<any> {
    const user = await this.authService.validateUser(username, password);
    if (!user) {
      throw new UnauthorizedException();
    }
    return user;
  }
}

6. 关联 Module

// src/logical/auth/auth.module.ts
import { Module } from '@nestjs/common';
import { AuthService } from './auth.service';
import { LocalStrategy } from './local.strategy';
import { JwtStrategy } from './jwt.strategy';
import { UserModule } from '../user/user.module';
import { PassportModule } from '@nestjs/passport';
import { JwtModule } from '@nestjs/jwt';
import { jwtConstants } from './constants';

@Module({
  imports: [
    PassportModule.register({ defaultStrategy: 'jwt' }),
    JwtModule.register({
      secret: jwtConstants.secret,
      signOptions: { expiresIn: '8h' }, // token 过时时效
    }),
    UserModule,
  ],
  providers: [AuthService, LocalStrategy, JwtStrategy],
  exports: [AuthService],
})
export class AuthModule {}

此时保存文件，若还有上文的报错，则须要去 app.module.ts，将 AuthService 从 providers 数组中移除，并在 imports 数组中添加 AuthModule 便可：

// src/app.module.ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { UserModule } from './logical/user/user.module';
// import { AuthService } from './logical/auth/auth.service';
import { AuthModule } from './logical/auth/auth.module';

@Module({
  imports: [UserModule, AuthModule],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

7. 编写 login 路由

此时，回归到 user.controller.ts，咱们将组装好的 JWT 相关文件引入，并根据验证码来判断用户状态：

// src/logical/user/user.controller.ts
import { Controller, Post, Body } from '@nestjs/common';
import { AuthService } from '../auth/auth.service';
import { UserService } from './user.service';

@Controller('user')
export class UserController {
  constructor(private readonly authService: AuthService, private readonly usersService: UserService) {}

  // JWT验证 - Step 1: 用户请求登陆
  @Post('login')
  async login(@Body() loginParmas: any) {
    console.log('JWT验证 - Step 1: 用户请求登陆');
    const authResult = await this.authService.validateUser(loginParmas.username, loginParmas.password);
    switch (authResult.code) {
      case 1:
        return this.authService.certificate(authResult.user);
      case 2:
        return {
          code: 600,
          msg: `帐号或密码不正确`,
        };
      default:
        return {
          code: 600,
          msg: `查无此人`,
        };
    }
  }

  @Post('register')
  async register(@Body() body: any) {
    return await this.usersService.register(body);
  }
}

此时保存文件，一样的报错又出现了：

此次咱们先去 user.module.ts 将 controllers 注释掉：

此时看控制台，没有 User 相关的路由，咱们须要去 app.module.ts 将 Controller 添加回去：

这么作是由于若是在 user.module.ts 中引入 AuthService 的话，就还要将其余的策略又引入一次，我的以为很麻烦，就干脆直接用 app 来统一管理了。

4、登陆验证

前面列了一大堆代码，是时候检验效果了，咱们就按照原来注册的信息，进行登陆请求：

图中能够看到，已经返回了一长串 token 了，并且控制台也打印了登陆的步骤和用户信息。前端拿到这个 token，就能够请求其余有守卫的接口了。

接下来咱们试试输错帐号或密码的状况：

5、守卫

既然发放了 Token，就要能验证 Token，所以就要用到 Guard（守卫）了。

咱们拿以前的注册接口测试一下，修改 user.controller.ts 的代码，引入 UseGuards 和 AuthGuard，并在路由上添加 @UseGuards(AuthGuard('jwt'))：

// src/logical/user/user.controller.ts
import { Controller, Post, Body, UseGuards } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';
import { AuthService } from '../auth/auth.service';
import { UserService } from './user.service';

@Controller('user')
export class UserController {
  constructor(private readonly authService: AuthService, private readonly usersService: UserService) {}

  @Post('login')
  async login(@Body() loginParmas: any) {
    ...
  }

  @UseGuards(AuthGuard('jwt')) // 使用 'JWT' 进行验证
  @Post('register')
  async register(@Body() body: any) {
    return await this.usersService.register(body);
  }
}

而后，咱们先来试试请求头没有带 token 的状况：

能够看到，返回 401 状态码，Unauthorized 表示未受权，也就是判断你没有登陆。

如今，咱们试试带 Token 的状况，把登陆拿到的 Token 复制到 Postman 的 Authorzation 里（选择 Bearer Token）：

而后再请求接口：

此时，已经能够正常访问了，再看看控制台打印的信息，步骤也正如代码中注释的那样：

至此，单点登陆功能已基本完成。

总结

本篇介绍了如何使用 JWT 对用户登陆进行 Token 签发，并在接受到含 Token 请求的时候，如何验证用户信息，从而实现了单点登陆。

固然，实现单点登陆并不局限于 JWT，还有不少方法，有兴趣的读者能够本身查阅。

这里也说一下 JWT 的缺点，主要是没法在使用同一帐号登陆的状况下，后登陆的，挤掉先登陆的，也就是让先前的 Token 失效，从而保证信息安全（至少我是没查到相关解决方法，若是有大神解决过该问题，还请指点），只能使用一些其余黑科技挤掉 Token。

如今，注册、登陆功能都有了，接下来应该完善一个服务端应有的其余公共功能。

下一篇将介绍拦截器、异常处理以及日志的收集。

参考资料

[1]

《JSON Web Token 入门教程 - 阮一峰》: http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html

 [2]

GitHub 项目地址: https://github.com/SephirothKid/nest-zero-to-one

 



     
 
 
      
 
       
 
        
 
         
 
          
 
           
 
            
 
             
 
              
 
              
 
               
 
                
 
                 
 
                  
 
                   
 
                     
                   
 
                   
● Nest.js 从零到壹系列（一）：项目建立&路由设置&模块
 
                   
● Nest.js 从零到壹系列（二）：数据库的链接
 
                   
● 从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（最终篇）


·END·

图雀社区

汇聚精彩的免费实战教程



关注公众号回复 z 拉学习交流群


喜欢本文，点个“在看”告诉我

本文分享自微信公众号 - 图雀社区（tuture-dev）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程