WeChat小程序·微信登录·开发参考文档

本文详细介绍了微信小程序的登录流程,包括调用wx.login获取code,后端通过code换取session_key和openId,以及如何使用这些信息生成自定义登录态(token)。还展示了后端业务开发的实现步骤,涉及DTO、VO设计,Controller、Service、Mapper层的代码实现,并提到了微信接口的使用和JWT令牌的生成。最后,文章提到了小程序端的联调测试。
摘要由CSDN通过智能技术生成

1 WeChat小程序登录业务开发

1.1 前期准备

微信小程序注册账号

获取开发时需要的开发者appid,secret
在这里插入图片描述

1.2 微信登录流程

1.2.1 官方参考文档

微信登录官方文档

1.2.2 登录流程时序图

在这里插入图片描述

1.2.3 步骤分析

所在方方法说明
小程序端调用wx.login()获取codecode为小程序端用户登录是产生的授权码,生成一次仅能被调用使用一次
小程序端调用wx.request()发送请求并携带code请求开发者编写的后端服务器
开发者服务端通过HttpClient向微信接口服务(第三方微信服务器接口)发送请求微信接口服务发送请求时携带开发者的appid开发者的appsecret、和小程序端用户产生的授权码code
开发者服务端接收微信接口服务(第三方微信接口)返回的数据session_keyopenIdsession_key会话密钥openId小程序端,微信用户的唯一标识
开发者服务端开发者自定义登录态生成令牌(token)微信接口服务返回的用户oppenID等数据给小程序端返回,方便后继操作
小程序端收到自定义登录态存储storage(仓库)
小程序端后继用户小程序通过wx.request()发起业务请求时携带token
开发者服务端开发者服务器收到用户发起的请求后,会解析用户请求中携带的token解析当前登录用户的id
开发者服务端解析token当解析通过后继续相关业务逻辑处理,最终返回业务数据

1.2.4 重要方法说明

方法说明
wx.login() 获取 临时登录凭证codecode为小程序端用户登录时产生,生成一次仅能使用一次
auth.code2Session 接口携带用户登录小程序时产生的临时登录凭证code开发者的appId开发者的appsecret,向微信接口服务的code2Session接口发送请求,此接口会向开发者服务器返回小程序用户的唯一凭证oppenId

1.2.5 微信服务接口code2Session接口请求参数说明

属性类型必填说明
appidstring小程序 appId
secretstring小程序 appSecret
js_codestring登录时获取的 code,可通过wx.login获取
grant_typestring授权类型,此处只需填写 authorization_code

1.2.6 请求数据示例

请求方式:GET

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

1.3 后端业务开发实现

1.3.1 定义相关配置

1.3.1.1 配置微信登录所需配置项

application-dev.yml:

sky:
 wechat:
   appid: your appid
   secret: your secret

application.yml:

sky:
 wechat:
   appid: ${sky.wechat.appid}
   secret: ${sky.wechat.secret}

1.3.1.2 配置为微信用户生成jwt令牌时使用的配置项

application.yml:

sky:
 jwt:
   # 设置jwt签名加密时使用的秘钥
   admin-secret-key: your key
   # 设置jwt过期时间
  admin-ttl: 7200000
   # 设置前端传递过来的令牌名称
   admin-token-name: token
   user-secret-key: your key
   user-ttl: 7200000
   user-token-name: your token-name

1.3.2 DTO数据传输对象设计

DTO(Data Transfer Object):数据传输对象,Service 或 Manager 向外传输的对象。接收前端传过来的数据
在这里插入图片描述


import lombok.Data;

import java.io.Serializable;
/**
 * C端用户登录
 */
@Data
public class UserLoginDTO implements Serializable {
    private String code;
}

1.3.3 VO显示层对象设计

VO(View Object):显示层对象,通常是 Web 向模板渲染引擎层传输的对象。前端显示数据
在这里插入图片描述

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class UserLoginVO implements Serializable {

    private Long id;
    private String openid;
    private String token;

}

1.3.4 Controller 请求控制层

JWT令牌组成:jwt令牌签名秘钥、令牌过期时间、有效载荷

 /**
     * 用户登录接口
     * @param userLoginDTO
     * @return
     */
    @PostMapping("/login")
    @ApiOperation("用户登录接口")
    public Result<UserLoginVO> wxLogin(@RequestBody UserLoginDTO userLoginDTO) {
        log.info("用户登录相关参数,{}", userLoginDTO);

        //微信登录
        User user = userService.wxLogin(userLoginDTO);

        //为微信用户生成jwt令牌,jwt有什么组成(jwt令牌签名秘钥、令牌过期时间、有效载荷)
        Map<String, Object> claims = new HashMap<>();
        String token = JwtUtil.createJWT(jwtProperties.getUserSecretKey(), jwtProperties.getUserTtl(), claims);//token的组成jwt签名秘钥,令牌过期时间,有效载荷

        //前端传输过来的值相当于set进user实体类
        UserLoginVO userLoginVO = UserLoginVO.builder().id(user.getId())
                .openid(user.getOpenid())
                .token(token).build();
        return Result.success(userLoginVO);
    }

1.3.5 Service(业务)层实现类

//微信服务接口地址
    public static final String WX_LOGIN = "https://api.weixin.qq.com/sns/jscode2session";
    @Autowired
    private UserMapper userMapper;

    @Autowired
    private WeChatProperties weChatProperties;

    /**
     * 调用微信接口服务,获取微信用户的openid
     * @param code
     * @return
     */
    public String getOpenid(String code){
        //调用微信接口服务,获得当前微信用户的openid
        //HashMap<Object, Object> map = new HashMap<>(); //使用泛型Object,这将导致什么类型的数据都可以传入此集合中,不安全
        HashMap<String, String> map = new HashMap<>(); //使用泛型String
        map.put("appid",weChatProperties.getAppid()); //开发者小程序 appId
        map.put("secret",weChatProperties.getSecret()); //开发者小程序 appSecret
        map.put("js_code",code);//code为小程序端用户登录时产生,生成一次仅能使用一次
        map.put("grant_type","authorization_code");
        String json = HttpClientUtil.doGet(WX_LOGIN,map);//把map集合通过http请求,传给微信接口服务,获取用户微信登录小程序时的用户openid,以进行后继操作
        JSONObject jsonObject = JSON.parseObject(json);
        String openid = jsonObject.getString("openid");
        return openid;
    }

    @Override
    public User wxLogin(UserLoginDTO userLoginDTO) {
        String openid = getOpenid(userLoginDTO.getCode());

        //判断openid是否为空,如果为空表示登录失败,抛出业务异常
        if (openid == null){
            throw new LoginFailedException(MessageConstant.LOGIN_FAILED);
        }

        //判断当前用户是否为新用户
        User user = userMapper.getByOpenid(openid);

        //如果是新用户字符完成注册
        if (user == null){
            User userBuild = User.builder()
                    .openid(openid)
                    .createTime(LocalDateTime.now())
                    .build();
            userMapper.insertNewUser(userBuild);
        }
        //返回这个用户对象
        return user;
    }

1.3.6 Mapper(Dao)数据访问层

    /**
     * 判断是否为新用户,当没有查出数据库中对应的用户openId返回null是,说明是新用户
     * @param openid
     * @return
     */
    @Select("select * from user where openid = #{openid}")
    User getByOpenid(String openid);
 /**
     * 不是新用户自动注册
     * @param userBuild
     */
    void insertNewUser(User userBuild);

1.3.7 XML映射文件

    <insert id="insertNewUser">
        insert into user (openid, name, phone, sex, id_number, avatar, create_time)
        VALUES(#{openid}, #{name},#{phone} ,#{sex}, #{idNumber},#{avatar} , #{createTime})
    </insert>

1.4 小程序端联调测试

在这里插入图片描述
在这里插入图片描述

测试成功,结束。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值