（小程序）后台交互--个人中心

news2024/12/23 4:40:42

目录

一、微信登录流程简介

二、微信用户获取用户昵称头像和昵称

① wx.getUserProfile ——> 获取头像

 三、微信登录流程代码详解

1.bindgetuserinfo——>把小程序端搭建起来

① oa-mini 

2.登录-小程序

① wx.checkSession 

② wx.login

③ wx.request

3.后台

① 准备数据表

② 反向生成工具生成

③ 准备封装前端传过来的数据

④ 小程序服器配置

        ⑴导入微信小程序SDK

        ⑵ application.yml

        ⑶ WxProperties

        ⑷ WxConfig

⑤ WxAuthController

3.登录-小程序

① login.js

② user.js

③ util.js

四、emoji的存储 

一、微信登录流程简介

小程序登录https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

  • 说明

    • 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。

    • 调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号） 和 会话密钥 session_key。

    • 之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

  • 注意事项

    1. 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。

    2. 临时登录凭证 code 只能使用一次

  • appId 作用说明

    • appid 是微信账号的唯一标识，这个是固定不变的； 如果了解微信公众号开发的就需要注意一下，小程序的appid 和 公众号的appid 是不一致的

  • session_key 功能说明 微信客户端通过wx.getUserInfo()获取用户的信息 后台有时候也需要获取微信客户端的用户信息，因此，就需要利用session_key这个秘钥来从微信平台中获取 官方文档原文 签名校验以及数据加解密涉及用户的会话密钥 session_key。 开发者应该事先通过 wx.login 登录流程获取会话密钥 session_key 并保存在服务器。为了数据不被篡改，开发者不应该把 session_key 传到小程序客户端等服务器外的环境。

二、微信用户获取用户昵称头像和昵称

① wx.getUserProfile ——> 获取头像

 参考地址如下以及图片：

wx.getUserProfile(Object object) | 微信开放文档

当我们点击微信直接登录2那个按钮时----》接着就会访问你允许你头像和昵称---》直接点击允许

我们可以去访问一下，如下图所示：

最终效果如下图所示：

 三、微信登录流程代码详解

1.bindgetuserinfo——>把小程序端搭建起来

① oa-mini 

打开我们小程序的后台：导入项目ssm-oa

注意：一定要修改maven配置

修改application.yml文件里面的app-id配置

跟小程序里面的APPID对应已经密钥

 如果不对应的话，待会我们在小程序中是登录不上的，如下图所示：

启动后台,如下图所示：

 返回到小程序，如下图所示：

这样就说明登录成功了，如下图所示：

最终它就会在数据库里面新增一条数据，昵称是我本人，如下图所示：

2.登录-小程序

  1. 执行wx.login 登录获取小程序端的code

  2. 服务端根据code去微信端获取session_key并且缓存；同时生成access_token 保存在小程序端，维持登录状态；

  3. 小程序端请求服务端用户数据时，先wx.checkSession，有效就通过access_token 确定用户，找到session_key；无效就执行wx.login重新登录重新生成access_token,服务端重新获取session_key；

  4. 小程序端长时间不使用，服务端的session_key会失效，无法再用session_key去微信端获取数据，需要小程序端重新执行登录操作； 服务端要获取session_key 只能通过小程序端的登录来操作；

① wx.checkSession 

检查登录态是否过期

② wx.login

调用接口获取登录凭证（code）

③ wx.request

请求自己小程序服器，并且携带了code,userInfo信息

3.后台

① 准备数据表

DROP TABLE IF EXISTS `wx_user`;
CREATE TABLE `wx_user`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '用户名称',
  `password` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用户密码',
  `gender` tinyint(3) NOT NULL DEFAULT 0 COMMENT '性别：0 未知， 1男， 1 女',
  `birthday` date NULL DEFAULT NULL COMMENT '生日',
  `last_login_time` datetime(0) NULL DEFAULT NULL COMMENT '最近一次登录时间',
  `last_login_ip` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '最近一次登录IP地址',
  `user_level` tinyint(3) NULL DEFAULT 0 COMMENT '用户层级 0 普通用户，1 VIP用户，2 区域代理用户',
  `nickname` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用户昵称或网络名称',
  `mobile` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用户手机号码',
  `avatar` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用户头像图片',
  `weixin_openid` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '微信登录openid',
  `status` tinyint(3) NOT NULL DEFAULT 0 COMMENT '0 可用, 1 禁用, 2 注销',
  `add_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
  `deleted` tinyint(1) NULL DEFAULT 0 COMMENT '逻辑删除',
  `share_user_id` int(11) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE INDEX `user_name`(`username`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '用户表' ROW_FORMAT = Compact;

② 反向生成工具生成

  • WxUser.java

  • WxUserMapper.java

  • WxUserMapper.xml

③ 准备封装前端传过来的数据

  • UserInfo

  • WxLoginInfo

④ 小程序服器配置

⑴导入微信小程序SDK

<dependency>
    <groupId>com.github.binarywang</groupId>
    <artifactId>weixin-java-miniapp</artifactId>
    <version>3.3.0</version>
</dependency>

⑵ application.yml

oa:
  wx:
    app-id: wxf13ed7f2838e6ea5
    app-secret: 0acefe2a6804e5569ed742a210040306
    msgDataFormat: JSON

⑶ WxProperties

封装oa.wx的数据

@Data
@Configuration
@ConfigurationProperties(prefix = "oa.wx")
public class WxProperties {
	/**
	 * 设置微信小程序的appId
	 */
	private String appId;
	/**
	 * 设置微信小程序的Secret
	 */
	private String appSecret;
	/**
	 * 消息数据格式
	 */
	private String msgDataFormat;

}

 ⑷ WxConfig

注册WXMaS而vice

@Configuration
public class WxConfig {
	@Autowired
	private WxProperties properties;

	@Bean
	public WxMaConfig wxMaConfig() {
		WxMaInMemoryConfig config = new WxMaInMemoryConfig();
		config.setAppid(properties.getAppId());
		config.setSecret(properties.getAppSecret());
		config.setMsgDataFormat(properties.getMsgDataFormat());
		return config;
	}

	@Bean
	public WxMaService wxMaService(WxMaConfig maConfig) {
		WxMaService service = new WxMaServiceImpl();
		service.setWxMaConfig(maConfig);
		return service;
	}

}

⑤ WxAuthController

@RequestMapping("/wx/auth")
public class WxAuthController {
    @Autowired
    private WxMaService wxService;
     @PostMapping("login_by_weixin")
    public Object loginByWeixin(@RequestBody WxLoginInfo wxLoginInfo, HttpServletRequest request) {

        //客户端需携带code与userInfo信息
        String code = wxLoginInfo.getCode();
        UserInfo userInfo = wxLoginInfo.getUserInfo();
        if (code == null || userInfo == null) {
            return ResponseUtil.badArgument();
        }
        //调用微信sdk获取openId及sessionKey
        String sessionKey = null;
        String openId = null;
        try {
            WxMaJscode2SessionResult result = this.wxService.getUserService().getSessionInfo(code);
            sessionKey = result.getSessionKey();//session id
            openId = result.getOpenid();//用户唯一标识 OpenID
        } catch (Exception e) {
            e.printStackTrace();
        }

        if (sessionKey == null || openId == null) {
            log.error("微信登录,调用官方接口失败：{}", code);
            return ResponseUtil.fail();
        }else{
            log.info("openId={},sessionKey={}",openId,sessionKey);
        }
        //根据openId查询wx_user表
        //如果不存在，初始化wx_user,并保存到数据库中
        //如果存在，更新最后登录时间
        //....
        // token
        UserToken userToken = null;
        try {
            userToken = UserTokenManager.generateToken(user.getId());
        } catch (Exception e) {
            log.error("微信登录失败,生成token失败：{}", user.getId());
            e.printStackTrace();
            return ResponseUtil.fail();
        }
        userToken.setSessionKey(sessionKey);
        log.info("SessionKey={}",UserTokenManager.getSessionKey(user.getId()));
        Map<Object, Object> result = new HashMap<Object, Object>();
        result.put("token", userToken.getToken());
        result.put("tokenExpire", userToken.getExpireTime().toString());
        result.put("userInfo", userInfo);
        //....


        log.info("【请求结束】微信登录,响应结果:{}", JSONObject.toJSONString(result));

        return ResponseUtil.ok(result);
    }

3.登录-小程序

① login.js

user.loginByWeixin(res.userInfo).then(res => {
    app.globalData.hasLogin = true;
    wx.navigateBack({
    delta: 1
    })
})

② user.js

function loginByWeixin(userInfo) {
  return new Promise(function(resolve, reject) {
    return login().then((res) => {
      //登录远程服务器
      util.request(api.AuthLoginByWeixin, {
        code: res.code,
        userInfo: userInfo
      }, 'POST').then(res => {
        if (res.errno === 0) {
          //存储用户信息
          wx.setStorageSync('userInfo', res.data.userInfo);
          wx.setStorageSync('token', res.data.token);
          resolve(res);
        } else {
          reject(res);
        }
      })

将userInfo，token数据保存到本地

③ util.js

function request(url, data = {}, method = "GET") {
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,
      data: data,
      method: method,
      timeout:6000,
      header: {
        'Content-Type': 'application/json',
        'X-OA-Token': wx.getStorageSync('token')
      },

如果使用util.request函数，每次请求都会携带'X-OA-Token': wx.getStorageSync('token');而服器已经保存了所有的token,所以服器通过token区分每个客户端

四、emoji的存储 

mysql的utf8编码的一个字符最多3个字节，但是一个emoji表情为4个字节，所以utf8不支持存储emoji表情。但是utf8的超集utf8mb4一个字符最多能有4字节，所以能支持emoji表情的存储。

Linux系统中MySQL的配置文件为my.cnf。

Winows中的配置文件为my.ini。

my.ini

[mysql]
# 设置mysql客户端默认字符集
default-character-set=utf8mb4

[mysqld]
#设置3306端口
port = 3306
# 设置mysql的安装目录
basedir=F:/Courseware/MySQL/mysql-8.0.18-winx64
# 设置mysql数据库的数据的存放目录
datadir=F:/Courseware/MySQL/mysql-8.0.18-winx64/data
# 允许最大连接数
max_connections=200
# 服务端使用的字符集默认为8比特编码的latin1字符集
character-set-server=utf8mb4
# 创建新表时将使用的默认存储引擎
default-storage-engine=INNODB

 找到服务----》找到MySQL右键重新启动

这样我们存储了emoji的表情包，如下图所示：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/141102.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Python - 数据容器list（列表）

Python - 数据容器list（列表）

目录列表的定义列表的下标&#xff08;索引&#xff09;列表的常用操作查找某元素的下标index修改特定位置&#xff08;索引&#xff09;的元素值插入元素insert追加元素append追加元素方式extend删除元素pop与del删除某元素在列表中的第一个匹配项remove清空列表内容clear()统…
阅读更多...
【JavaScript】获取和操作 DOM 节点

【JavaScript】获取和操作 DOM 节点

文章目录【JavaScript】获取和操作 DOM 节点一. DOM节点分类二. 获取节点(1) 获取元素节点1. 非常规元素节点2. 常规元素节点(2) 获取节点的方式三. 操作节点(1) 创建节点(2) 插入节点(3) 删除节点(4) 替换节点(5) 克隆节点(6) 节点属性四. 案例&#xff1a;微博发布【JavaScri…
阅读更多...
使用云开发的垃圾分类、垃圾识别、答题的微信小程序源码+部署教程，文字识别垃圾类型、语音识别垃圾类型、图片识别类型、垃圾类别答题

使用云开发的垃圾分类、垃圾识别、答题的微信小程序源码+部署教程，文字识别垃圾类型、语音识别垃圾类型、图片识别类型、垃圾类别答题

使用云开发的垃圾分类、垃圾识别、答题的微信小程序 完整代码下载地址&#xff1a;使用云开发的垃圾分类、垃圾识别、答题的微信小程序 前言 项目介绍 小程序使用了云开发&#xff0c;包含文字识别垃圾类型、语音识别垃圾类型、图片识别类型、垃圾类别答题、腾讯机器人对话…
阅读更多...
AndroidStudio启动app时闪退问题解决过程

AndroidStudio启动app时闪退问题解决过程

问题描述： Android app在启动时闪退的问题有很多种，大部分可能集中在代码有问题上，譬如StartActivity的时候启动不了。 看提示里一般是有错误出现的，这个很好解决，只要找到对应的错误就可以了。 那么，还有一类问题，就是我这里出现的，启动成功，没有任何错误，查看lo…
阅读更多...
Odoo 16 企业版手册 - 库存管理之库存调拨

Odoo 16 企业版手册 - 库存管理之库存调拨

库存调拨 拥有多个仓库的公司需要管理产品从一个地点转移到另一个地点。在某些情况下&#xff0c;公司可能在不同地点设有不同的分支机构&#xff0c;这需要付出巨大努力才能成功管理产品调拨。公司通常通过分配主要仓库和子仓库进行产品分销来管理这种情况。Odoo中的调拨功能支…
阅读更多...
SpringBoot+JWT+Shiro+MybatisPlus实现Restful快速开发后端脚手架

SpringBoot+JWT+Shiro+MybatisPlus实现Restful快速开发后端脚手架

一、背景 前后端分离已经成为互联网项目开发标准&#xff0c;它会为以后的大型分布式架构打下基础。SpringBoot使编码配置部署都变得简单&#xff0c;越来越多的互联网公司已经选择SpringBoot作为微服务的入门级微框架。 Mybatis-Plus是一个 Mybatis 的增强工具&#xff0c;有…
阅读更多...
房产管理系统系统与数据中心对接要遵循的标准和规范

房产管理系统系统与数据中心对接要遵循的标准和规范

数图互通高校房产综合管理系统平台是基于公司自主研发的FMCenterV5.0平台&#xff0c;是针对中国高校房产的管理特点和管理要求&#xff0c;研发的一套标准产品&#xff1b;通过在中国100多所高校的成功实施和迭代&#xff0c;形成了一套成熟、完善、全生命周期的房屋资源管理解…
阅读更多...
票务公司网上订票系统

票务公司网上订票系统

课程设计题目七&#xff1a;票务公司网上订票系统https://download.csdn.net/download/qq_45037155/87364367 点击此链接免费下载原文章&#xff01; 第1章 绪论 1.1 引言 在当今社会&#xff0c;速度决定了很多商业机构的成败。为了顺应时代发展&#xff0c;提高效率&#x…
阅读更多...
2023年山东建筑安全员考试真题题库及答案

2023年山东建筑安全员考试真题题库及答案

百分百题库提供建筑安全员考试试题、安全员证考试真题、安全员证考试题库等,提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 51.申请从事建筑施工特种作业的人员,应当具备()基本条件。 A.年满18周岁且符合相关工种规定的年龄要求; B.经医院体检合格…
阅读更多...
【Java多线程JUC入门详解】AQS原理详解

【Java多线程JUC入门详解】AQS原理详解

AQS 概述 AbstractQuenedSynchronizer抽象的队列式同步器, 在java.util.concurrent.locks包下。 我们常用的ReentrantLock中有一个抽象静态内部类Sync&#xff0c;就继承自AbstractQuenedSynchronizer。 abstract static class Sync extends AbstractQueuedSynchronizer { …
阅读更多...
1.4日报

1.4日报

验收了TestMrlController 历经千辛万苦给电脑安装了vpn 因为昨天系统损坏&#xff0c;今天重新配置postman和navicat 遇到的困难及解决 linux安装vpn时官方给的教程&#xff1a; 可是ubnutu里没有yum&#xff0c;我得先下载yum 而默认镜像源里找不到yum软件包&#xff0c;…
阅读更多...
单调栈 单调队列 专题

单调栈 单调队列 专题

文章目录一、单调栈1、问题模型2、实现过程&#xff1a;3、代码实现4、规律总结5、题目练习二、单调队列1、问题模型2、实现过程&#xff1a;3、代码实现4、规律总结5、题目练习三、总结一、单调栈 1、问题模型 主要解决一类问题&#xff1a; O(n)O(n)O(n) 求数列中每个元素左…
阅读更多...
PaddleNLP系列课程一：Taskflow、小样本学习、FasterTransformer

PaddleNLP系列课程一：Taskflow、小样本学习、FasterTransformer

文章目录一、Taskflow1.1 前言1.2 Taskflow应用介绍1.2.1 词法分析1.2.2 命名实体识别1.2.3 文本纠错1.2.4 句法分析1.2.5 情感分析1.2.6 文本生成应用&#xff08;三行代码体验 Stable Diffusion&#xff09;1.2.7 使用技巧&#xff08;保存地址、批量推理&#xff09;二、 小…
阅读更多...
Excel怎么转换成PDF？教你两招轻松搞定

Excel怎么转换成PDF？教你两招轻松搞定

Excel怎么转换成PDF&#xff1f;相信在工作中大家都或多或少需要转换文件的格式&#xff0c;我们会根据工作需求将word、excel、PPT、图片等文件转换成PDF文件。Excel表格是我们经常使用的一款录入数据的文件类型&#xff0c;因为excel文件打开查看时不是很方便&#xff0c;我们…
阅读更多...
时序数据库 TDengine 3.0 参数体系使用方式汇总

时序数据库 TDengine 3.0 参数体系使用方式汇总

在日常使用 TDengine 时&#xff0c;参数是用户们无法绕开的重要一环。深入了解参数的属性&#xff0c;生效范围&#xff0c;查询更改方式等会让我们在使用数据库的过程中更加节时高效&#xff0c;也有助于我们更加深入地理解数据库的架构体系。在 3.0 版本中&#xff0c;TDeng…
阅读更多...
参数校验(Validator)

参数校验(Validator)

为什么要用validator 实战演练 1. Validated 声明要检查的参数 2. 对参数的字段进行注解标注 3. 在全局校验中增加校验异常 4. 测试 自定义参数注解 1. 比如我们来个 自定义身份证校验 注解 2. 然后自定义Validator 3. 使用自定义的注解 4.使用groups的校验 5.restful…
阅读更多...
209数组-长度最小的子数组

209数组-长度最小的子数组

题目 链接&#xff1a;209. 长度最小的子数组 - 力扣&#xff08;LeetCode&#xff09; 思路 可以采用暴力&#xff0c;两个for循环&#xff0c;不断寻找符合条件的子序列。时间复杂度为O(n^2) 代码&#xff1a; class Solution { public:int minSubArrayLen(int target, v…
阅读更多...
【BP靶场portswigger-服务端6】信息泄露漏洞-5个实验（全）

【BP靶场portswigger-服务端6】信息泄露漏洞-5个实验（全）

目录 一、信息泄露漏洞 1、简述&#xff1a; 2、危害&#xff1a; 3、示例&#xff1a; 4、漏洞的产生 5、影响 6、严重程度判定 二、发现和利用信息泄露漏洞 1、模糊测试 2、使用BP扫描仪 3、使用Burp的相关工具 4、工程信息响应 三、常见来源 1、示例&#xff…
阅读更多...
【数据篇】34 # 如何处理多元变量？

【数据篇】34 # 如何处理多元变量？

说明 【跟月影学可视化】学习笔记。 从数据到图表展现 2014 年北京市的天气历史数据&#xff08;csv 格式&#xff09; 这里使用QCharts 图表库折线图来展示平均气温 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" …
阅读更多...
PDF转换成word免费版网页版哪个好？办公就用它

PDF转换成word免费版网页版哪个好？办公就用它

我们在工作中经常需要对PDF文件进行编辑&#xff0c;所以可以将PDF文件转换为word文件&#xff0c;这样就可以随意编辑我们想要编辑的内容了&#xff0c;不过有些小伙伴不喜欢下载客户端&#xff0c;但是又不知道PDF转换成word免费版网页版哪个好&#xff0c;为了帮助大家更好的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023