微信小程序会议OA-登录获取手机号流程登录-小程序导入微信小程序SDK(从微信小程序和会议OA登录获取手机号到登录小程序导入微信小程序SDK)

news2024/10/6 12:21:50

目录

获取用户昵称头像和昵称

wx.getUserProfile

bindgetuserinfo

登录过程

登录-小程序

wx.checkSession

wx.login

wx.request

后台

准备数据表

反向生成工具生成

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

小程序服器配置

导入微信小程序SDK

application.yml

WxProperties

WxConfig

WxAuthController

登录-小程序

login.js

user.js

util.js

emoji


获取用户昵称头像和昵称

wx.getUserProfile

bindgetuserinfo

登录过程

小程序登录

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。

  • 说明

    • 调用 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 传到小程序客户端等服务器外的环境。

登录-小程序

  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信息

后台

准备数据表

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: wxf23b28b5e4ea4d6a
    app-secret: 212621faa31cdf0691367ea45b2b6041
    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

注册WxMaService

@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);
    }

响应给客户端数据有:

token userInfo

登录-小程序

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。

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

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

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

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

相关文章

对OpenAI CEO奥特曼突然被解雇事件的一些分析

今天也来凑个热闹&#xff0c;说说OpenAI的事。本来不想写的&#xff0c;但是看到自媒体又开始胡说八道&#xff0c;所以根据我自己得到的消息和理解说一说我的看法&#xff0c;这篇文章要是有个小姐姐解说录成视频&#xff0c;那肯定火了&#xff0c;但是我现在没资源&#xf…

OpenAI政变背后是科学家创始人的悲歌

OpenAI政变背后是科学家创始人的悲歌 去年11月突然推出ChatGPT震惊世界的OpenAI&#xff0c;在整整一年后以闪电解职CEO再次震惊世界。 有不少人以为这拿的是乔布斯的剧本&#xff0c;错了&#xff0c;这其实是天才科学家奋力一击的故事。 OpenAI的灵魂人物不是CEO Sam Al…

Vue3入门(与Vue2进行对比)

1. Vue2 选项式 API vs Vue3 组合式API 特点&#xff1a; 代码量变少分散式维护变成集中式维护 2. Vue3的优势 使用create-vue搭建Vue3项目 1. 认识create-vue create-vue是Vue官方新的脚手架工具&#xff0c;底层切换到了 vite &#xff08;下一代前端工具链&#xff09;&…

2023APMCM亚太杯/小美赛数学建模竞赛优秀论文模板分享

一、模板介绍 二、注意事项 将论文划分小节时&#xff0c;应避免在小节中出现大段的文字叙述&#xff0c;这样的叙述会妨碍评委在浏览论文时掌握论文的要点。重要的句子&#xff0c;包括首次定义的概念&#xff0c;用黑体书写。 重要的数学公式应另起新行单独列出。建模所用的…

使用activiti部署提示不是 ‘NCName‘ 的有效值

排查发现是整个流程图的&#xff0c;流程名称没有填写 修改之后就可以了

Redis篇---第十二篇

系列文章目录 文章目录 系列文章目录前言一、Memcache与Redis的区别都有哪些?二、单线程的redis为什么这么快三、redis的数据类型,以及每种数据类型的使用场景前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇…

大数据基础设施搭建 - Kafka(with ZooKeeper)

文章目录 一、简介二、单机部署2.1 上传压缩包2.2 解压压缩包2.3 修改配置文件&#xff08;1&#xff09;配置zookeeper地址&#xff08;2&#xff09;修改kafka运行日志(数据)存储路径 2.4 配置环境变量2.5 启动/关闭2.6 测试&#xff08;1&#xff09;查看当前服务器中的所有…

Wireshark的数据包它来啦!

通过Wireshark工具&#xff0c;可以轻松的看到网卡的数据信息。通过Wireshark显示的数据包内容信息&#xff0c;通常分七栏&#xff0c;介绍一下&#xff1a; 1No.&#xff1a; 数据包编号。 2.Time Time显示时间&#xff0c;以1号数据包发生开始计时。 3.Source Source显示内容…

零基础想系统地学习金融学、量化投资、数据分析、python,需要哪些课程、书籍?有哪些证书可以考?

曾经我也是零基础小白&#xff0c;题主想走的路&#xff0c;我已经走过啦&#xff5e;作为一名CFA持证人和管理因子投资的量化策略的投资组合经理&#xff0c;我把这些年积累的干货跟大家分享。 量化投资是金融学的一部分&#xff0c;量化投资&#xff08;跟量化交易的概念有部…

从入门到精通,mac电脑录屏软件使用教程!

“mac电脑怎么录屏呀&#xff0c;刚买了一台mac电脑&#xff0c;用了几个月感觉挺流畅的&#xff0c;最近因为工作原因&#xff0c;需要用到录屏功能&#xff0c;但是我不会操作&#xff0c;想问问大家有没有简单易懂的录屏教程&#xff0c;谢谢啦。” 在日常生活中&#xff0…

使用遗传算法优化的BP神经网络实现自变量降维

大家好&#xff0c;我是带我去滑雪&#xff01; 在现实生活中&#xff0c;实际问题很难用线性模型进行描述。神经网络的出现大大降低了模型建立的难度和工作量。只需要将神经网络当作一个黑箱子&#xff0c;根据输入和输出数据&#xff0c;神经网络依据相关的学习规则&#xff…

腾讯云轻量应用服务器三年租用价格表_免去续费困扰

腾讯云服务器续费贵所以一次性买3年或5年&#xff0c;腾讯云轻量应用服务器3年价格有优惠&#xff0c;CVM云服务器5年有特价&#xff0c;腾讯云3年轻量和5年云服务器CVM优惠活动入口&#xff0c;3年轻量应用服务器配置可选2核2G4M和2核4G5M带宽&#xff0c;5年CVM云服务器可以选…

米诺地尔行业分析:预计2029年将达到14亿美元

米诺地尔市场规模庞大&#xff0c;不仅包括消费品市场和服务行业&#xff0c;还涵盖了创新科技领域。随着经济的发展和市场需求的不断增长&#xff0c;米诺地尔市场的规模将继续扩大&#xff0c;各行各业都将面临更多机遇和挑战。 随着社会经济发展和城市化进程的推进&#xff…

无服务器开发实例|微服务向无服务器架构演进的探索

在当今的技术环境中&#xff0c;许多组织已经从构建单一的应用程序转变为采用微服务架构。微服务架构是将服务分解成多个较小的应用程序&#xff0c;这些应用程序可以独立开发、设计和运行。这些被拆分的小的应用程序相互协作和通信&#xff0c;为用户提供全面的服务。在设计和…

Ant Design Vue 树形表格计算盈收金额

树形表格计算 一、盈收金额计算1、根据需要输入的子级位置&#xff0c;修改数据2、获取兄弟节点数据&#xff0c;并计算兄弟节点的金额合计3、金额合计&#xff0c;遍历给所有的父级 一、盈收金额计算 1、根据需要输入的子级位置&#xff0c;修改数据 2、获取兄弟节点数据&am…

全面解析IEC 60364三种接地系统的概念、特点及应用

根据IEC 60364规定的各种保护方式、术语概念&#xff0c;低压配电系统按接地方式的不同分为三类&#xff0c;即 TT 、 TN 和 IT 系统。 1.TT系统TT grounding system TT供电系统&#xff1a;是指将电气设备的金属外壳直接接地的保护系统&#xff0c;称为保护接地系统&#xff…

运动装备经营小程序商城效果如何

运动装备可包含服装、帐篷、渔具、箱包鞋帽等&#xff0c;对喜欢外出的人来说&#xff0c;靠谱的装备是关键&#xff0c;往往更容易选择品牌和信得过的商家。 而对商家来说&#xff0c;如何打造品牌提升卖货经营效率和提升营收是重中之重&#xff1b;互联网时代需要商家拓展线…

sklearn模型中预测值的R2_score为负数

目录 正文评论区参考链接 正文 Sklearn.metrics下面的r2_score函数用于计算R&#xff08;确定系数&#xff1a;coefficient of determination&#xff09;。它用来度量未来的样本是否可能通过模型被很好地预测。 分值为 1 表示最好&#xff0c;但我们在使用过程中&#xff0c…

大结局!OpenAI创始人奥特曼和 Greg Brockman 将加入微软!!!

持续48小时的OpenAI政变大戏终于迎来了大结局&#xff01; 微软堪称最大赢家&#x1f4a5;&#x1f4a5;&#x1f4a5; 微软CEO刚刚宣布&#xff1a; 我们仍然致力于与 OpenAI 的合作伙伴关系&#xff0c;并对我们的产品路线图、我们在 Microsoft Ignite 上宣布的一切继续创…

单片机和FreeRTOS上跑机器人ROS的应用

机器人的应用越来越广泛了&#xff0c;大家熟知的稚晖君直接创业搞机器人&#xff0c;可想而至&#xff0c;接下来的十年&#xff0c;机器人绝对是热门的行业。 目前市面上很多机器人都是基于一套叫做ROS的系统开发的&#xff0c;今天就给大家分享一个跑在MCU上&#xff0c;基…