前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)-1

简介: 前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)

前言


源码代码:

https://github.com/YuyanCai/gulixueyuan-back–zs

https://github.com/YuyanCai/gulixueyuan-front–zs


前端页面:

https://github.com/YuyanCai/guli-xy-fd


整合JWT


用户登录业务介绍

单一服务器模式

一般情况是用户将账号密码发给服务器,服务器验证后把数据保存到session中(cookie是数据存在客户端,session是数据存在服务端)。服务端返回sessionId给客户端,客户端会把这个信息存入用户的cookie中,每次请求的从cookie中取值和服务端的保存的数据对比,确认身份。


最开始学javaweb的时候,做登录都是保存到session域中,保存之后判断用户登录与否通过取session域中的数据来决定


这种登录模式只适合单一的小项目,不方便横向扩展…


SSO(single sign on)模式

单点登录


客户端登录后,将账户密码存到认证中心,其余服务通过访问认证中心进行身份验证

b575ef6b688d473f49fe2dd924c64d52_62a5b11412be104b9dd5bb05652e28ed.png

优点 :

用户身份信息独立管理,更好的分布式管理。

可以自己扩展安全策略

缺点:

认证服务器访问压力较大。

token模式登录流程



SSO登录三种常见的方式
  • session广播
  • cookie+redis
  • 使用token实现token


优点:


无状态: token无状态,session有状态的


基于标准化: 你的API可以采用标准化的 JSON Web Token (JWT)


缺点:


占用带宽


无法在服务器端销毁


注:基于微服务开发,选择token的形式相对较多,因此我使用token作为用户认证的标准


传统用户身份验证

995aa1c4f385b36565bfab714aacccb0_b3f2653b59a9592a1d77bba1a151b474.png

Internet服务无法与用户身份验证分开。一般过程如下:


  1. 用户向服务器发送用户名和密码。
  2. 验证服务器后,相关数据(如用户角色,登录时间等)将保存在当前会话中。
  3. 服务器向用户返回session_id,session信息都会写入到用户的Cookie。
  4. 用户的每个后续请求都将通过在Cookie中取出session_id传给服务器。
  5. 服务器收到session_id并对比之前保存的数据,确认用户的身份。


这种模式最大的问题是,没有分布式架构,无法支持横向扩展。

解决方案

  1. session广播
  2. 将透明令牌存入cookie,将用户身份信息存入redis


另外一种灵活的解决方案:

使用自包含令牌,通过客户端保存数据,而服务器不保存会话数据。 JWT是这种解决方案的代表。

JWT令牌


典型的,一个JWT看起来如下图:

该对象为一个很长的字符串,字符之间通过"."分隔符分为三个子串。

每一个子串表示了一个功能块,总共有以下三个部分:JWT头、有效载荷和签名

JWT的原则

JWT的原则是在服务器身份验证之后,将生成一个JSON对象并将其发送回用户

{
“sub”: “1234567890”,
“name”: “Jack”,
“admin”: true
}

之后,当用户与服务器通信时,客户在请求中发回JSON对象。服务器仅依赖于这个JSON对象来标识用户。为了防止用户篡改数据,服务器将在生成对象时添加签名。


服务器不保存任何会话数据,即服务器变为无状态,使其更容易扩展。


客户端接收服务器返回的JWT,将其存储在Cookie或localStorage中。


此后,客户端将在与服务器交互中都会带JWT。如果将它存储在Cookie中,就可以自动发送,但是不会跨域,因此一般是将它放入HTTP请求的Header Authorization字段中。当跨域时,也可以将JWT被放置于POST请求的数据主体中。


优势:

  • 生产的token可以包含基本信息,比如id、用户昵称、头像等信息,避免再次查库
  • 存储在客户端,不占用服务端的内存资源

整合

添加依赖

<dependencies>
    <!-- JWT-->
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
    </dependency>
</dependencies>

创建JWT工具类

public class JwtUtils {
    public static final long EXPIRE = 1000 * 60 * 60 * 24;
    public static final String APP_SECRET = "ukc8BDbRigUDaY6pZFfWus2jZWLPHO";
    public static String getJwtToken(String id, String nickname){
        String JwtToken = Jwts.builder()
                .setHeaderParam("typ", "JWT")
                .setHeaderParam("alg", "HS256")
                .setSubject("guli-user")
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRE))
                .claim("id", id)
                .claim("nickname", nickname)
                .signWith(SignatureAlgorithm.HS256, APP_SECRET)
                .compact();
        return JwtToken;
    }
    /**
     * 判断token是否存在与有效
     * @param jwtToken
     * @return
     */
    public static boolean checkToken(String jwtToken) {
        if(StringUtils.isEmpty(jwtToken)) return false;
        try {
            Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }
    /**
     * 判断token是否存在与有效
     * @param request
     * @return
     */
    public static boolean checkToken(HttpServletRequest request) {
        try {
            String jwtToken = request.getHeader("token");
            if(StringUtils.isEmpty(jwtToken)) return false;
            Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }
    /**
     * 根据token获取会员id
     * @param request
     * @return
     */
    public static String getMemberIdByJwtToken(HttpServletRequest request) {
        String jwtToken = request.getHeader("token");
        if(StringUtils.isEmpty(jwtToken)) return "";
        Jws<Claims> claimsJws = Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("id");
    }
}


整合腾讯云短信服务

这里整合的为腾讯云短信服务,视频中是阿里云短信。

由于阿里云短信申请不容易成功,所以我们这里用腾讯云。

看着sdk文档很容易就能整合成功~

短信 Java SDK-SDK 文档-文档中心-腾讯云-腾讯云 (tencent.com)

后端编码

建模块,改pom,yml,启动类


业务类

前端编码

主要技术点是:页面,倒计时功能

这两个功能主要是前端知识点,这里不过多展示

使用完这些插件之后,其余的套路和之前整合的一样

四大步:

  1. 添加路由
  2. 点击路由显示页面
  3. api文件夹创建js文件,定义后端接口地址和参数
  4. 创建vue页面引入js,调用方法实现功能


噢噢噢,这个是写后台管理系统的时候的套路对吧

前台系统也差不多的了

  1. api文件夹创建js文件,定义后端接口地址和参数
  2. 创建vue页面引入js,调用方法实现功能


前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)-2

https://developer.aliyun.com/article/1425294?spm=a2c6h.13148508.setting.22.51724f0eCLitrQ

相关文章
|
1月前
|
安全 Linux 网络安全
购了轻服务器,手机登录服务器用root和administrator做登录名,都提示别名已存在,请修改
【2月更文挑战第16天】购了轻服务器,手机登录服务器用root和administrator做登录名,都提示别名已存在,请修改
13 1
|
1月前
|
存储 JSON Java
spring boot3登录开发-1(整合jwt)
spring boot3登录开发-1(整合jwt)
57 1
|
2月前
|
安全 Linux 网络安全
手机登录服务器用root和administrator做登录名,都提示别名已存在
【2月更文挑战第5天】手机登录服务器用root和administrator做登录名,都提示别名已存在
30 8
|
3月前
|
安全 Java 数据库
SpringSecurity+JWT前后端分离架构登录认证
在SpringSecurity实现前后端分离登录token认证详解_springsecurity前后端分离登录认证-CSDN博客基础上进行重构,实现前后端分离架构登录认证,基本思想相同,借鉴开源Gitee代码进行改造,具有更好的代码规范。
175 1
|
3月前
|
JSON 前端开发 安全
前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)-2
前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)
55 0
|
13天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
13天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
13天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
13天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。

热门文章

最新文章

相关实验场景

更多