微信小程序之会议OA个人中心后台交互

这篇具有很好参考价值的文章主要介绍了微信小程序之会议OA个人中心后台交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

获取用户昵称头像和昵称

小程序登录

登录-小程序

wx.checkSession

wx.login

wx.request

后台

准备数据表

反向生成工具生成

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

小程序服器配置

导入微信小程序SDK

application.yml

WxProperties

WxConfig

WxAuthController

登录-小程序

login.js

user.js

util.js

emoji


获取用户昵称头像和昵称

wx.getUserProfile

bindgetuserinfo

小程序登录

小程序登录参考地址:小程序登录 | 微信开放文档

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

微信小程序之会议OA个人中心后台交互,微信小程序,微信小程序,小程序,会议OA,交互

  • 说明

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

  • 微信小程序之会议OA个人中心后台交互,微信小程序,微信小程序,小程序,会议OA,交互

登录-小程序

  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

登录-小程序

将oa-mini项目导入到微信开发者工具中,这里注意一定要修改appid。

微信小程序之会议OA个人中心后台交互,微信小程序,微信小程序,小程序,会议OA,交互

点击"修改",将弹出一个对话框,请在对话框中输入你的小程序测试号appid

微信小程序之会议OA个人中心后台交互,微信小程序,微信小程序,小程序,会议OA,交互

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

util.js

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

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')
      },

emoji

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

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

Winows中的配置文件为my.ini。文章来源地址https://www.toymoban.com/news/detail-835386.html

到了这里,关于微信小程序之会议OA个人中心后台交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 —— 会议OA项目首页布局与Mock数据交互

    14天阅读挑战赛 如果世界上有奇迹,那一定是努力的另一个名字。 目录 一、小程序布局 1.1 Flex布局 1.2 Flex属性   二、OA会议首页搭建 2.1 首页底部菜单 2.2 创建后端结口 2.3 Mock模拟数据 2.4 首页轮播图搭建 2.5 首页内容搭建  布局的传统解决方案,基于盒状模型,依赖 dis

    2024年02月08日
    浏览(43)
  • 微信小程序之会议OA系统首页布局搭建与Mock数据交互

    目录 前言 一、Flex 布局( 分类 编程技术) 1、Flex布局是什么? 2、基本概念 3、容器的属性 3.1 flex-direction属性 3.2 flex-wrap属性 3.3 flex-flow 3.4 justify-content属性 3.5 align-items属性 3.6 align-content属性 4、项目的属性 4.1 order属性 4.2 flex-grow属性 4.3 flex-shrink属性 4.4 flex-basis属性 4.5 fl

    2024年02月08日
    浏览(48)
  • 会议OA小程序项目 与后台数据的交互【首页】

    目录 一. 与后台数据进行交互 pom.xml 配置数据源 MinoaApplication WxHomeController 后台数据展示  二. request的封装 三. 会议展示 application.yml 在utils/util.js中 api.js index/index.js utils/comm.wxs index/index.wxml  效果展示

    2024年02月07日
    浏览(45)
  • 小程序之自定义组件 结合案例(会议OA的会议/投票管理及个人中心的搭建)详解 (4)

                                            ⭐⭐ 小程序专栏:小程序开发专栏                                         ⭐⭐ 个人主页:个人主页 目录 一.前言 二.小程序自定义组件及其使用 2.1 自定义组件的使用 三.使用自定义组件完成会议功能界面的实

    2024年02月05日
    浏览(40)
  • (小程序)后台交互--个人中心

    目录 一、微信登录流程简介 二、微信用户获取用户昵称头像和昵称 ① wx.getUserProfile —— 获取头像  三、微信登录流程代码详解 1.bindgetuserinfo——把小程序端搭建起来 ① oa-mini  2.登录-小程序 ① wx.checkSession  ② wx.login ③ wx.request 3.后台 ① 准备数据表 ② 反向生成工具生成

    2024年02月09日
    浏览(45)
  • 微信小程序会议OA系统

    Flex弹性布局 Flex弹性布局是一种 CSS3 的布局模式,也叫Flexbox。它可以让容器中的元素按一定比例自动分配空间,使得它们在不同宽度、高度等情况下仍能保持整齐和密集不间隙地排列。 在使用Flexbox弹性布局时,首先需要创建一个容器和若干个子元素。容器的属性display需要设

    2024年02月08日
    浏览(49)
  • 微信小程序之开发会议OA项目

    目录 前言 本篇目标  首页 会议 投票  个人中心  会议OA项目-首页 配置 tabbar mock工具 page swiper 会议信息 会议OA项目-会议  自定义tabs组件 会议管理 会议OA项目-投票 会议OA项目-个人中心 文章含源码资源,投票及个人中心详细自行查看源码即可 小程序没有DOM对象,一切基于组

    2024年02月19日
    浏览(46)
  • 微信小程序&会议OA-登录获取手机号流程&登录-小程序&导入微信小程序SDK(从微信小程序和会议OA登录获取手机号到登录小程序导入微信小程序SDK)

    目录 获取用户昵称头像和昵称 wx.getUserProfile bindgetuserinfo 登录过程 登录-小程序 wx.checkSession wx.login wx.request 后台 准备数据表 反向生成工具生成 准备封装前端传过来的数据 小程序服器配置 导入微信小程序SDK application.yml WxProperties WxConfig WxAuthController 登录-小程序 login.js user.j

    2024年02月04日
    浏览(51)
  • 微信小程序--数字化会议OA系统之首页搭建

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持

    2024年02月08日
    浏览(49)
  • 【微信小程序】自定义组件布局会议OA其他页面(附源码)

    🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯 👉点击这里,就可以查看我的主页啦!👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧!🎁🎁 💖期待你的

    2024年02月08日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包