Uniapp + SpringBoot 开发微信H5项目 微信公众号授权登录 JAVA后台（一、配置使用微信公众平台测试公众号）

申请测试号进行调试开发，测试号拥有大部分服务号有的接口权限。

一、接口配置信息填写校验

这里需要填写一个URL和一个Token验证字符串
我这里是用了natapp内网穿透 将本地的后台8080端口服务映射到了 http://x7zws8.natappfree.cc
https://natapp.cn/在natapp官网注册账号并且申请免费隧道
在这里插入图片描述
申请完了之后把域名绑定到自己的后台
在这里插入图片描述
后台接口：

    @RequestMapping(value = "/check", produces = "text/plain;charset=UTF-8", method = {RequestMethod.GET, RequestMethod.POST})//微信服务器根据配置的token，结合时间戳timestamp和随机数nonce通过SHA1生成签名，发起get请求，检验token的正确性，//检验正确原样返回随机字符串echostr，失败返回空字符串public String check(HttpServletRequest request, HttpServletResponse response,@RequestParam("signature") String signature,@RequestParam("timestamp") String timestamp,@RequestParam("nonce") String nonce,String echostr) throws Exception {//若是为get请求，则为开发者模式验证if ("get".equals(request.getMethod().toLowerCase())) {String checkSignature = SHA1.creatSHA1("token", timestamp, nonce);if (checkSignature.equals(signature)) {return echostr;}}return null;}

SHA1：

import java.security.MessageDigest;
import java.util.Arrays;//SHA1加密算法类
public class SHA1 {/**** @param token* @param timestamp 时间戳* @param nonce 随机字符串* @return 安全签名* @throws AesException*/public static String creatSHA1(String token, String timestamp, String nonce) throws AesException{try {String[] array = new String[] { token, timestamp, nonce};StringBuffer sb = new StringBuffer();// 字符串排序Arrays.sort(array);for (int i = 0; i < 3; i++) {sb.append(array[i]);}String str = sb.toString();// SHA1签名生成MessageDigest md = MessageDigest.getInstance("SHA-1");md.update(str.getBytes());byte[] digest = md.digest();StringBuffer hexstr = new StringBuffer();String shaHex = "";for (int i = 0; i < digest.length; i++) {shaHex = Integer.toHexString(digest[i] & 0xFF);if (shaHex.length() < 2) {hexstr.append(0);}hexstr.append(shaHex);}return hexstr.toString();} catch (Exception e) {e.printStackTrace();throw new AesException(AesException.ComputeSignatureError);}}
}

AesException：

public class AesException extends Exception {public final static int OK = 0;public final static int ValidateSignatureError = -40001;public final static int ParseXmlError = -40002;public final static int ComputeSignatureError = -40003;public final static int IllegalAesKey = -40004;public final static int ValidateAppidError = -40005;public final static int EncryptAESError = -40006;public final static int DecryptAESError = -40007;public final static int IllegalBuffer = -40008;private int code;private static String getMessage(int code) {switch (code) {case ValidateSignatureError:return "签名验证错误";case ParseXmlError:return "xml解析失败";case ComputeSignatureError:return "sha加密生成签名失败";case IllegalAesKey:return "SymmetricKey非法";case ValidateAppidError:return "appid校验失败";case EncryptAESError:return "aes加密失败";case DecryptAESError:return "aes解密失败";case IllegalBuffer:return "解密后得到的buffer非法";default:return null; // cannot be}}public int getCode() {return code;}public AesException(int code) {super(getMessage(code));this.code = code;}
}

校验走完之后配置测试号中 网页服务下的网页授权获取基本用户
在这里插入图片描述
在这里插入图片描述

这里填自己前端项目运行后的地址 我的后端项目端口是8080 uniapp前端运行完了之后的端口是8081所以我配置的是本地的ipv4 ip+端口号

二、后端配置 + 拼装URL + 通过Code获取用户OpenID和基本信息

在SpringBoot项目的pom中引入依赖

        <dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-mp</artifactId><version>4.6.0</version></dependency>

创建配置类

import com.ruoyi.system.domain.WechatConfig;
import com.ruoyi.system.service.IWechatConfigService;
import me.chanjar.weixin.mp.api.WxMpService;
import me.chanjar.weixin.mp.api.impl.WxMpServiceImpl;
import me.chanjar.weixin.mp.config.WxMpConfigStorage;
import me.chanjar.weixin.mp.config.impl.WxMpDefaultConfigImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configuration
public class WxMpConfig {@Autowiredprivate IWechatConfigService wechatConfigService;@Beanpublic WxMpConfigStorage wxMpConfigStorage() {WxMpDefaultConfigImpl configStorage = new WxMpDefaultConfigImpl();WechatConfig wechatConfig = wechatConfigService.selectWechatConfigById(1L);//我这里是做成了获取数据库中保存的AppID和AppSercret正常情况下写死就可以configStorage.setAppId(wechatConfig.getAppId());configStorage.setSecret(wechatConfig.getAppSecret());return configStorage;}@Beanpublic WxMpService wxMpService(WxMpConfigStorage configStorage) {WxMpService wxMpService = new WxMpServiceImpl();wxMpService.setWxMpConfigStorage(configStorage);return wxMpService;}
}

之后就可以在Controller中正常使用了
/authorize 接口其实只做了一步操作 就是构建获取code的url 构建完成之后返回给前端 前端直接重定向
buildAuthorizationUrl其中的三个参数
第一个是回调地址
第二个填snsapi_base 或者 snsapi_userinfo
snsapi_base 是之能获取到 openid 而 snsapi_userinfo 是可以获取到用户基本信息
snsapi_base是静默获取 而 snsapi_userinfo 需要用户点击授权

@RestController
@RequestMapping("/wx")
public class WeChatController extends BaseController {@GetMapping("/authorize")public AjaxResult test() {WxOAuth2Service oAuth2Service = wxMpService.getOAuth2Service();String redirectUrl = oAuth2Service.buildAuthorizationUrl("http://192.168.1.100:8081", "snsapi_userinfo", null);return success(redirectUrl);}@GetMapping("/userInfo")public AjaxResult userInfo(@RequestParam("code") String code) throws WxErrorException {WxOAuth2Service oAuth2Service = wxMpService.getOAuth2Service();WxOAuth2AccessToken wxMpOAuth2AccessToken = oAuth2Service.getAccessToken(code);logger.info("【wxMpOAuth2AccessToken：】{}", wxMpOAuth2AccessToken);String openId = wxMpOAuth2AccessToken.getOpenId();logger.info("【openid：】{}", openId);WxOAuth2UserInfo userInfo = oAuth2Service.getUserInfo(wxMpOAuth2AccessToken, "zh_CN");logger.info("【用户信息：】{}", userInfo.toString());return success(userInfo);}
}

二、uniapp前端调用

前端首先调用 /authorize 获取拼装好的地址然后重定向并获取code
getUrlCode来判断地址中是否包含code如果有的话拿着code去获取用户基本信息和openid

<template><view class="content"><image class="logo" :src="loginUser.headImgUrl ? loginUser.headImgUrl : '/static/logo.png'"></image><view class="text-area"><text class="title">{{loginUser.openid}}</text></view><button type="default" @click="login">登录</button></view>
</template><script>export default {data() {return {loginUser:{}}},onLoad(query) {const that = this;let code = that.getUrlCode();if (code) {console.log("有code")console.log(code)uni.request({url: "http://192.168.1.100:8080/wx/userInfo",data: {code: code},success(res) {console.log("获取到用户信息")console.log(res.data.data);that.loginUser = res.data.data;}})} else {console.log("没有code")}},methods: {login() {uni.request({url: "http://192.168.1.100:8080/wx/authorize",success(res) {window.location.href = res.data.msg;}})},getUrlCode() {return (decodeURIComponent((new RegExp("[?|&]" + "code" + "=" + "([^&;]+?)(&|#|;|$)").exec(location.href) || [, ""])[1].replace(/\+/g, "%20")) || null);},}}
</script>

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

GEE 底图加载——自定义底图样式加载案例分析（含免费引如多款底图）

GEE 底图加载——自定义底图样式加载案例分析（含免费引如多款底图）

在本教程中&#xff0c;您将学习如何更改地图对象的选项&#xff0c;以便为底层基础地图定义自己的样式。 地球引擎中的默认地图 地球引擎的基础地图是 Google Map API 中的地图。默认选项包括 roadmap&#xff0c;显示默认的路线图视图、卫星&#xff0c;显示谷歌地球卫星图…
阅读更多...
Leetcode ： 面试题 10.01. 合并排序的数组

Leetcode ： 面试题 10.01. 合并排序的数组

思路&#xff1a;设定两个指针ptrA和ptrB&#xff0c;遍历两个数组比较&#xff0c;对A数组进行修改&#xff1b; A.insert添加&#xff0c;最后进行A.erase删除多余元素&#xff0c;提醒&#xff0c;数组长度提前记录一下&#xff0c;方便后续删除 #include <iostream>…
阅读更多...
数据可视化原理-腾讯-分类散点图

数据可视化原理-腾讯-分类散点图

在做数据分析类的产品功能设计时&#xff0c;经常用到可视化方式&#xff0c;挖掘数据价值&#xff0c;表达数据的内在规律与特征展示给客户。 可是作为一个产品经理&#xff0c;&#xff08;1&#xff09;如果不能够掌握各类可视化图形的含义&#xff0c;就不知道哪类数据该用…
阅读更多...
付强:基于注意力机制的听觉前端处理 | 嘉宾公布

付强:基于注意力机制的听觉前端处理 | 嘉宾公布

一、智能家居与会议系统专题论坛 智能家居与会议系统专题论坛将于3月28日同期举办&#xff01; 智能会议系统它通过先进的技术手段&#xff0c;提高了会议效率&#xff0c;降低了沟通成本&#xff0c;提升了参会者的会议体验。对于现代企业、政府机构和学术界是不可或缺的。在这…
阅读更多...
GitHub登不上：修改hosts文件来解决（GitHub520，window）

GitHub登不上：修改hosts文件来解决（GitHub520，window）

参考链接&#xff1a;GitHub520: 本项目无需安装任何程序&#xff0c;通过修改本地 hosts 文件&#xff0c;试图解决&#xff1a; GitHub 访问速度慢的问题 GitHub 项目中的图片显示不出的问题 花 5 分钟时间&#xff0c;让你"爱"上 GitHub。 (gitee.com) GitHub网站…
阅读更多...
阿里云服务器怎么使用？3分钟搭建网站教程2024新版

阿里云服务器怎么使用？3分钟搭建网站教程2024新版

使用阿里云服务器快速搭建网站教程&#xff0c;先为云服务器安装宝塔面板&#xff0c;然后在宝塔面板上新建站点&#xff0c;阿里云服务器网aliyunfuwuqi.com以搭建WordPress网站博客为例&#xff0c;来详细说下从阿里云服务器CPU内存配置选择、Web环境、域名解析到网站上线全流…
阅读更多...
Hive案例分析之消费数据

Hive案例分析之消费数据

Hive案例分析之消费数据 部分数据展示 1.customer_details customer_id,first_name,last_name,email,gender,address,country,language,job,credit_type,credit_no 1,Spencer,Raffeorty,sraffeorty0dropbox.com,Male,9274 Lyons Court,China,Khmer Safety,Technician III,jc…
阅读更多...
二、实战篇 商户查询缓存

二、实战篇 商户查询缓存

源码仓库地址&#xff1a;gitgitee.com:chuangchuang-liu/hm-dingping.git 1、什么是缓存&#xff1f; 缓存(Cache),就是数据交换的缓冲区,俗称的缓存就是缓冲区内的数据,一般从数据库中获取,存储于本地代码 1.1、为什么要使用缓存&#xff1f; 添加缓存后&#xff0c;重复的…
阅读更多...
双链表的实现（数据结构）

双链表的实现（数据结构）

链表总体可以分为三大类 一、无头和有头 二、单向和双向 三、循环和不循环 从上面分类得知可以组合成8种不同类型链表&#xff0c;其中单链表最为简单&#xff0c;双联表最为复杂&#xff0c;两种链表都实现后其余链表都不成问题。 我们前期博客已将完成了单向无头不循环链表…
阅读更多...
如何一键发布离线地图（二次开发）

如何一键发布离线地图（二次开发）

离线地图发布工具支持 离线浏览 离线地图二次开发 离线工具应用(绘制&#xff1a;点、线、面&#xff0c;导入导出矢量数据)以及轨迹纪录等等应用&#xff0c;具体可参看&#xff1a;演示实例 Bigemap Server离线地图服务器下载地址&#xff1a;http://download.bigemap.com…
阅读更多...
图机器学习（3）-面向节点的人工特征工程

图机器学习（3）-面向节点的人工特征工程

0 问题引入 地铁导航图 计算机是看不懂这些图&#xff0c;计算机只能看懂向量、矩阵。 传统图机器学习只讨论连接特征。 构造一个新的特征 x 1 x 2 x_1x_2 x1​x2​&#xff0c;有利于分开这种数据。 人需要去翻译这些计算机不懂的特征&#xff0c;变成计算机可以懂…
阅读更多...
二叉搜索树（BST）的创建及增，删，查，改（详解）

二叉搜索树（BST）的创建及增，删，查，改（详解）

目录 初识二叉搜索树&#xff08;BST&#xff09;&#xff1a; 二叉搜索树查找元素&#xff1a; 二叉搜索树修改元素: 二叉搜索树中的增加元素&#xff1a; 二叉搜索树中的删除元素&#xff1a; 初识二叉搜索树&#xff08;BST&#xff09;&#xff1a; 一张图简要概括二…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023