微信开放平台开发第三方授权登陆(五):微信小程序

article/2025/11/1 12:22:24

 微信开放平台开发系列文章:

微信开放平台开发第三方授权登陆(一):开发前期准备

微信开放平台开发第三方授权登陆(二):PC网页端

微信开放平台开发第三方授权登陆(三):Android客户端

微信开放平台开发第三方授权登陆(四):微信公众号

微信开放平台开发第三方授权登陆(五):微信小程序

 

目录

一、需求

二、开发流程

三、开发使用的技术及工具

1.前端(小程序)

1)自定义的全局变量

2)index加载时进行登录

3)授权页面authorization.wxml

4)用户信息发送给后端

5)用户详情页mine.wxml

2.服务端(Java)

1).配置文件新增小程序相关配置

2)获取openid以及Sessionkey

3).获取用户信息:


 

开发小程序需要在公众平台注册一个小程序账号,然后获取到小程序的AppID和AppSecret。就可以进行第三方登陆授权开发。

一、需求

拥有第三方微信登录功能,并获取到用户信息。

二、开发流程

小程序:

1. 微信小程序通过wx.login API进行登录获取code。由于AppID和AppSecret不能泄露给用户,根据code获取openid需要在服务端完成,所以需要将code发送给服务端

(服务端),并且带上授权临时票据code参数;

2. 服务端通过code和appid、APPSecret获取到openid和SessionKey。服务端需要返回自定义登录态给前端,不能返回SessionKey

3. 前端保存自定义登录态,获取用户信息时携带自定义登录态给后端。

获取Token的流程

三、开发使用的技术及工具

1、.后端采用IDEA2017 进行开发

2、前端使用微信开发者工具V1.02进行开发

3、使用fastJson对json数据进行处理

四、具体实现步骤

1.前端(小程序)

目录结构如下:

1)自定义的全局变量

globalData: {userInfo: null,sessionkey:null}

自定义userInfo用于存储用户信息

sessionKey用于存储服务端发回给客户端的sessionkey

2)index加载时进行登录

用户登录后,服务端会返回一个sessionkey给客户端保存,如果为空,说明没有登录过,需要调用wx.login进行登录。

调用wx.login后,微信会返回一个code给小程序,小程序需要通过这个code发送给自身的服务端来获取sessionkey和openid信息。

onLoad: function() {var serverUrl = app.serverUrl;// 加载时,检查当前用户信息是否登录if (app.globalData.sessionkey != null) { // 已经登录了// 是否授权wx.getSetting({success: function(res) {if (res.authSetting['scope.userInfo']) {// 已经授权,可以直接调用 getUserInfo 获取头像昵称wx.getUserInfo({success: function(res) {app.globalData.userInfo = JSON.parse(res.rawData);}})} else {// 还没有授权,则需要授权wx.redirectTo({url: '../authorization/authorization'})}}})} else { // 还没有登录// 提示用户登录授权wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIdif (res.code) {// 发送请求,服务端能获取到openid和unionid,之前登录过则可以获取到之前的用户信息。wx.request({url: serverUrl + '/miniprogram/login/' + res.code, //请求路径method: "GET",success: function(res) {app.globalData.sessionkey = res.data;// 进入授权wx.redirectTo({url: '../authorization/authorization'})}})}}})}},

登录成功后,重定向到授权页面

3)授权页面authorization.wxml

<view class='tag-title'><image mode="widthFix" style=' width: 200rpx;height: 200rpx;margin-top:150rpx' src="/images/logo.jpg"></image></view><view wx:if="{{canIUse}}"><view style='text-align:center;margin-top:50rpx'>允许微信授权后,可体验更多功能</view><view><button open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo" >授权登录</button><button bindtap='navigateBack'>返回首页</button></view></view><view wx:else style='text-align:center;margin-top:50rpx'>您的微信版本过低,请升级后再次体验</view>

Button的open-type为getUserInfo时,点击后会调用bindgetuserinfo属性配置的函数,同时带上用户基本信息(不包括Openid等)

4)用户信息发送给后端

// 授权登录按钮bindGetUserInfo: function(e) {let that = this;var serverUrl = app.serverUrl;console.log(e.detail.userInfo)if (e.detail.userInfo) {  // 成功获取到信息app.globalData.userInfo = e.detail.userInfo// 这里可以将用户信息发送给后台// 获取到sessionkeyif (app.globalData.sessionkey!=null){wx.request({url: serverUrl + '/miniprogram/userinfo', //请求路径,method: "GET",data: {// openid: this.openid,// unionid: this.unionid,key: app.globalData.sessionkey,nickname: app.globalData.userInfo.nickName, //获取昵称gender: app.globalData.userInfo.gender, //获取性别province: app.globalData.userInfo.province, //获取省份city: app.globalData.userInfo.city, //获取城市country: app.globalData.userInfo.country, //获取国家avatarUrl: app.globalData.userInfo.avatarUrl, //这些是用户的基本信息language: app.globalData.userInfo.language},success: function (res) {if (res.data.code == 0) {  // 请求成功debuggerapp.globalData.userInfo = res.data.data; // 以数据库中返回的数据为准// 获取用户信息成功wx.switchTab({url: '../mine/mine'})}}})}else{this.showZanTopTips('错误:SessionKey为null');}} else {this.showZanTopTips('您拒绝了微信授权');}},}));

获取用户信息成功后,页面跳转到mine中显示用户详情信息

5)用户详情页mine.wxml

<view class="container more"><view class="userinfo"><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text><text class="userinfo-nickname">性别:{{userInfo.gender === 1 ? '男':'女'}}</text><text class="userinfo-nickname">城市:{{userInfo.city}}</text><text class="userinfo-nickname">省份:{{userInfo.province}}</text><text class="userinfo-nickname">国家:{{userInfo.country}}</text><text class="userinfo-nickname">使用语言:{{userInfo.language}}</text></view></view>

2.服务端(Java)

服务端需要做的是:接受小程序前端发送的请求,根据发送过来的code,以及服务端保存的AppId和APPSecret等向微信服务端发送请求,获取到sessionkey和openid,然后将二者关联起来保存到session存储器中(Redis),返回给前端key值。

接受小程序发送过来的key和用户基本信息,根据key从redis中获取openid,然后对数据库进行查询,若存在数据则封装后返回给前端,若无信息则向数据库中插入数据并返回给前端。

1).配置文件新增小程序相关配置

wechat.miniprogram.appid =

wechat.miniprogram.appsecret =

2)获取openid以及Sessionkey

@ResponseBody@RequestMapping("/login/{code}")public String login(@PathVariable("code") String code) {String url = "https://api.weixin.qq.com/sns/jscode2session?" +"appid=" +env.getProperty("wechat.miniprogram.appid") +"&secret=" +env.getProperty("wechat.miniprogram.appsecret") +"&js_code=" +code +"&grant_type=authorization_code";JSONObject object = HttpClientUtils.httpGet(url);// 请求,获取openid或unionid// 从数据库中查询是否存储// 成功获取String unionid = (String) object.get("unionid");String openid = (String) object.get("openid");//用户唯一标识// 会话密钥session_key 是对用户数据进行加密签名的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。String session_key = (String) object.get("session_key");String key = "wechatminiprogramkey-" + UUID.randomUUID().toString().replaceAll("-", "");RedisPoolUtil.setEx(key, openid + "---" + session_key, 9600);return key;}

3).获取用户信息:

小程序能够获取用户基本信息,但是不包括openid等信息,仅有基本的昵称等信息,需要通过后端传输的key作为标识发送到前端,然后找到对应的openid来获取。

@ResponseBody@RequestMapping(value = "/userinfo", method = RequestMethod.GET) // 获取用户信息public Result getOpenId(String key, MiniProgramBaseUserInfo miniProgramBaseUserInfo) {MiniProgramBaseUserInfo result = null;String value = RedisPoolUtil.get(key);if (value != null) {String values[] = value.split("---");String openid = values[0];// 从数据库中查询是否存储(根据openid查询)result = null; // TODO: 这里是查数据库操作if (result == null){ // 数据库中没有数据// TODO: 向数据库中执行插入操作// insert  weChatUserInforesult = miniProgramBaseUserInfo;}return Result.success(result);return Result.error(SESSION_KEY_OVER_TIME); // SessionKey失效}

 


http://chatgpt.dhexx.cn/article/qLUDfsgr.shtml

相关文章

微信开放平台开发-授权、全网发布(PHP)

这两天做了微信开发平台的开发&#xff0c;梳理下。。。 先看看授权的流程&#xff1a; 第一步&#xff1a;接收component_verify_ticket&#xff1a; 1、微信服务器每隔10分钟会向第三方的消息接收地址推送一次component_verify_ticket&#xff0c;拿到后需要在本地做好存储&…

微信开放平台开发——网页微信扫码登录(OAuth2.0)

转自 http://www.cnblogs.com/0201zcr/p/5133062.html 1、OAuth2.0 OAuth&#xff08;开放授权&#xff09;是一个开放标准&#xff0c;允许用户让第三方应用访问该用户在某一网站上存储的私密的资源&#xff08;如照片&#xff0c;视频&#xff0c;联系人列表&#xff09;&am…

微信开放平台-第三方平台开发配置及常见的问题

目录 概述 参考文档 开源项目&工具 第三方平台设置 问题及解决方法 概述 本实例&#xff1a;第三方平台微信公众号&#xff08;服务号&#xff09; 微信开放平台-第三方平台&#xff0c;为广大公众号和小程序提供运营服务和行业解决方案。分两种类型&#xff0c;定制…

微信第三方平台开发(一)

个人感觉微信在第三方平台开发者这块的开发文档写的很不友好&#xff0c;很隐晦&#xff0c;我在开发的过程总结的一些东西&#xff0c;写出来给大家分享一下。恩&#xff0c;就这样吧。 一、注册第三方平台账号 打开https://open.weixin.qq.com/cgi-bin/index?thome/index&…

微信开放平台开发第三方授权登陆(三):Android客户端

微信开放平台开发系列文章&#xff1a; 微信开放平台开发第三方授权登陆&#xff08;一&#xff09;&#xff1a;开发前期准备 微信开放平台开发第三方授权登陆&#xff08;二&#xff09;&#xff1a;PC网页端 微信开放平台开发第三方授权登陆&#xff08;三&#xff09;&a…

微信开放平台开发第三方授权登陆(二):PC网页端

微信开放平台开发系列文章&#xff1a; 微信开放平台开发第三方授权登陆&#xff08;一&#xff09;&#xff1a;开发前期准备 微信开放平台开发第三方授权登陆&#xff08;二&#xff09;&#xff1a;PC网页端 微信开放平台开发第三方授权登陆&#xff08;三&#xff09;&a…

.md文件用什么软件打开

记事本-------体验感差 效果&#xff1a; Notepad 毫无疑问的完胜记事本 官网下载地址&#xff1a;https://notepad-plus.en.softonic.com/download &#xff08;下载速度比较慢&#xff09; 这是百度网盘&#xff1a;&#xff08;会快一点点&#xff09; 链接&#xff1a;ht…

md文件打开方式推荐

MD文件介绍 以下介绍来自于百度&#xff1a; md文件是Markdown语法编写的文件&#xff0c;Markdown是一款轻量级的标记语言&#xff0c;可以使用语法来代替排版&#xff0c;插入公式和图片等都非常的容易&#xff0c;目前很多博客都可以使用该语法去编辑。使用Markdown的好处…

md文件如何打开?

阅读md文件时 常常会手足无措 今天教大家如何打开md文件 当在阅览md文件时&#xff0c;一般系统默认是记事本&#xff1a; 阅览效果极其不佳且编辑体验极差&#xff01; 今天推荐一款软件&#xff1a;Typora 直接上链接&#xff1a;下载地址&#xff08;官网&#xff09; …

Windows下右键新建.md文件教程(转)

Windows下右键新建.md文件教程 转载自Keavnn’Blog&#xff0c;并有些许修正 原本创建.md文件需要首先打开markdown文本编辑器&#xff0c;如Typora&#xff0c;或者新建.txt文件然后修改后缀名&#xff0c;本文介绍了如何在Windows操作系统中添加右键创建.md文件的方法。 环…

md文件使用

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

如何编写md格式的文档、vscode中写.md文件的插件推荐

目录 1. 标题 2. 字体 3. 引用 4. 分割线 5. 图片 6. 超链接 7. 无序列表 8. 有序列表 9. 列表嵌套 10. 表格 11.代码 12. vscode中写.md文件的插件推荐 .md格式的文章可以用编辑器Markdown打开&#xff0c;Markdown是一种纯文本格式的标记语言。通过简单的标记语法…

md文件转换成word文档

md文件转成word文档 Typora导出word文件时需要先下载pandoc Typora导出word文件时因为文档里面有表格&#xff0c;导出失败&#xff0c;所以先使用使用pandoc命令导出无边框表格的word 1.在xxx.md所在文件夹打开命令提示符 2.在命令提示符输入&#xff1a;pandoc -s xxxx.md …

.md文件以及markdown语法书写md文档

.md文件以及markdown语法书写md文档 1. .md文件如何打开2. markdown是什么&#xff1f;2.1 markdown用来干嘛&#xff1f;2.2 怎样书写和读取markdown&#xff1f; 3. markdown语法3.1 基本符号3.2 标题&#xff08;从大到小取决于#号的数量&#xff09;3.3 正文3.4 段落3.5 字…

md文档的阅读查看

前言&#xff1a; md文档可以用vscode看&#xff0c;也可以直接拖入浏览器看&#xff0c;但看起来不太好看&#xff0c;效果如下&#xff1a; 改进方法&#xff1a; 方法1、假如你的电脑安装了node.js &#xff08;1&#xff09;判断是否安装&#xff1a;WindowsR&#xff0…

如何将md文件完美转化为 PDF?

今天在网上搜kali相关教程时&#xff0c;无意中找到一本很好的教程&#xff0c;但是它是以*.md的文件形式放在github上&#xff0c;我试了将原文件zip下载到本地&#xff0c;但怎么能将.md文件转成PDF文件呢&#xff1f;&#xff08;如果你用Visual Studio code, 那么安装Markd…

如何编写.md格式文件?

文章目录 如何编写.md格式文件&#xff1f;1.标题2.字体3.插入图片操作4.不带快捷键Markdown书写操作5.Markdown拓展功能6.主题替换 如何编写.md格式文件&#xff1f; md即markdown&#xff0c;百度的解释&#xff1a;Markdown是一种可以使用普通文本编辑器编写的标记语言&…

加载.md文件

webpack是不能直接加载.md文件的&#xff0c;但是一些博客或者文章指导类的内容通过markdown进行编辑管理是比较常见的&#xff0c;这就需要我们进行一些配置&#xff0c;使webpack能够加载.md文件&#xff0c;并将文件内容展示到网页上。 1、先写一个md加载器 在这之前&…

.md文件的打开

今天终于知道.md文件是markdown格式的了&#xff0c; windows下可以安装markdownpad来打开md文件&#xff1a; http://blog.csdn.net/github_35160620/article/details/52158604 ubuntu下则可安装retext&#xff0c;查看时 retext xxx.md即可 例子&#xff1a; ubuntu下&…

pdf文件转为md文件

针对Windows 方法一&#x1f4a1; 下载Pandoc 由于Pandoc不支持PDF直接转为md形式&#xff0c;先将PDF文档转换为Word形式&#xff0c;再使用Typora将你的Word文件导入。 途径 1 &#xff1a; \textcolor{green}{途径1&#xff1a;} 途径1&#xff1a;&#x1f528; 官网下载…