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 {

    @Autowired
    private IWechatConfigService wechatConfigService;

    @Bean
    public WxMpConfigStorage wxMpConfigStorage() {
        WxMpDefaultConfigImpl configStorage = new WxMpDefaultConfigImpl();
        WechatConfig wechatConfig = wechatConfigService.selectWechatConfigById(1L);
        //我这里是做成了获取数据库中保存的AppID和AppSercret正常情况下写死就可以
        configStorage.setAppId(wechatConfig.getAppId());
        configStorage.setSecret(wechatConfig.getAppSecret());
        return configStorage;
    }

    @Bean
    public 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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python办公自动化之PDF(二)

Python办公自动化之PDF(二)

Python操作PDF二 1、PyMuPDF简介2、 1、PyMuPDF简介 PyMuPDF&#xff08;也称Fitz&#xff09;开源&#xff0c;提供了一整套用于处理PDF文件的综合工具。使用PyMuPDF&#xff0c;用户可以高效地执行打开PDF、提取文本、图像和表格、操作旋转和裁剪等页面属性、创建新PDF文档以…
阅读更多...
Pytorch线性回归实现（原理）

Pytorch线性回归实现（原理）

设置梯度 直接在tensor中设置 requires_gradTrue&#xff0c;每次操作这个数的时候&#xff0c;就会保存每一步的数据。也就是保存了梯度相关的数据。 import torch x torch.ones(2, 2, requires_gradTrue) #初始化参数x并设置requires_gradTrue用来追踪其计算历史 print(x…
阅读更多...
OpenHarmony教程指南—事件的订阅和发布

OpenHarmony教程指南—事件的订阅和发布

介绍 本示例主要展示了公共事件相关的功能&#xff0c;实现了一个检测用户部分行为的应用。具体而言实现了如下几点功能&#xff1a; 1.通过订阅系统公共事件&#xff0c;实现对用户操作行为&#xff08;亮灭屏、锁屏和解锁屏幕、断联网&#xff09;的监测&#xff1b; 2.通…
阅读更多...
ELK介绍使用

ELK介绍使用

文章目录 一、ELK介绍二、Elasticsearch1. ElasticSearch简介&#xff1a;2. Elasticsearch核心概念3. Elasticsearch安装4. Elasticsearch基本操作1. 字段类型介绍2. 索引3. 映射4. 文档 5. Elasticsearch 复杂查询 三、LogStash1. LogStash简介2. LogStash安装 四、kibana1. …
阅读更多...
粉嘟嘟的免费wordpress模板

粉嘟嘟的免费wordpress模板

粉色好看的wordpress免费模板&#xff0c;用免费wordpress模板也可以搭建网站。 https://www.wpniu.com/themes/11.html
阅读更多...
Android使用WebView打开内嵌H5网页

Android使用WebView打开内嵌H5网页

Android打开外部网页链接请参考上一篇文章 https://public.blog.csdn.net/article/details/136384559 继上篇&#xff0c;新建assets文章夹&#xff0c;将H5的网页资源放到此文件夹下 把H5的资源文件都拷进来 这个时候&#xff0c;将添加打开本地网页的代码&#xff1a; //打…
阅读更多...
unicloud 集合 Collection 详解及其使用示例

unicloud 集合 Collection 详解及其使用示例

Collection Collection是unicloud数据的指定表集合 获取集合Collection示例如下 const db uniCloud.database(); // 获取 user 集合的引用 const collection db.collection(user);集合 Collection 通过 db.collection(name) 可以获取指定集合的引用&#xff0c;在集合上可…
阅读更多...
西部广播电视杂志社《西部广播电视》杂志社2024年第1期目录

西部广播电视杂志社《西部广播电视》杂志社2024年第1期目录

聚焦&#xff1a;动漫创作中国故事的突破 从接受美学看奇幻电影如何讲好中国故事——以电影《封神第一部&#xff1a;朝歌风云》为例 郭海芃; 1-4 梦境构筑叙事隐含类型突破——以动画电影《深海》为例 李雯萱; 5-9 国产动画“全龄化”的创作突破——以《长安三万里…
阅读更多...
leetcode 热题 100_除自身以外数组的乘积

leetcode 热题 100_除自身以外数组的乘积

题解一&#xff1a; 前缀 / 后缀数组&#xff1a;某元素除自身以外的乘积&#xff0c;也就是其全部前缀元素乘积 * 全部后缀元素乘积&#xff0c;因此我们可以构造前缀数组和后缀数组&#xff0c;分别存储前i个元素的成绩和后i个元素的乘积&#xff0c;再将i-1前缀乘积 * i1后缀…
阅读更多...
系统提示mfc100u.dll丢失或错误的解决方法分享

系统提示mfc100u.dll丢失或错误的解决方法分享

mfc100u.dll是Microsoft Foundation Classes (MFC)库中的一个关键动态链接库文件。 mfc100u.dll文件是Microsoft Foundation Classes (MFC)库的一部分&#xff0c;这是一个为软件开发者提供的一系列类和功能&#xff0c;旨在简化Windows应用程序的开发过程。这个特定的文件包含…
阅读更多...
Python基础三

Python基础三

一、模块&#xff08;model&#xff09; 1、定义 以.py 结尾的文件&#xff0c;包含了Python对象定义和Python语句 如下&#xff1a;包含了两个模块&#xff0c;分别为 main.py 和 model.py 2、特点 模块让你能够有逻辑地组织你的Python 代码段。把相关的代码分配到一个模块…
阅读更多...
阿珊详解Vue路由的两种模式：hash模式与history模式

阿珊详解Vue路由的两种模式：hash模式与history模式

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
Hotchips2018年-英伟达V100展示肌肉(未来芯片论坛及资料下载)

Hotchips2018年-英伟达V100展示肌肉(未来芯片论坛及资料下载)

HOTCHIPS是什么&#xff1f; HOTCHIPS是一个关于计算机体系结构和电子设计的会议&#xff0c;主要探讨芯片设计、存储器、能源效率、机器学习和人工智能等方面的发展。该会议每年都会召开一次&#xff0c;吸引着来自世界各地的专业人士和研究人员。 在HOTCHIPS 2018年会上&a…
阅读更多...
MySQL安装与卸载

MySQL安装与卸载

安装 1). 双击官方下来的安装包文件 2). 根据安装提示进行安装(全部默认就可以) 安装MySQL的相关组件&#xff0c;这个过程可能需要耗时几分钟&#xff0c;耐心等待。 输入MySQL中root用户的密码,一定记得记住该密码 配置 安装好MySQL之后&#xff0c;还需要配置环境变量&am…
阅读更多...
C++泛型实现搜索二叉树

C++泛型实现搜索二叉树

文章目录 二叉搜索树查找插入删除实现应用性能分析 二叉搜索树 二叉搜索树&#xff08;BST&#xff0c;Binary Search Tree&#xff09;又称为二叉排序树&#xff0c;空树也算 二叉搜索树有如下性质 若左子树不为空&#xff0c;则左子树上所有节点值小于根节点若右子树不为空…
阅读更多...
Tonka Finance，BTCFi 浪潮的发动机

Tonka Finance，BTCFi 浪潮的发动机

在 2023 年年初&#xff0c;Ordinals 技术方案为比特币 Layer1 带来了一种全新的资产发行方式&#xff0c;此后一场以比特币生态为主战场的新一轮资金、注意力价值争夺战打响&#xff0c;并且越来越多的加密原教旨主义者、密码极客们加入这场战争中。我们看到&#xff0c;铭文市…
阅读更多...
类和对象（1）（至尊详解版）

类和对象（1）（至尊详解版）

相信对于大家而言&#xff0c;对于类和对象都会是一头雾水吧&#xff01;什么是类&#xff1f;或者你有对象吗&#xff1f;那么本期的内容呢&#xff1f;就由我来为大家再次增加对于它们的理解&#xff0c;由于水平上的原因&#xff0c;可能会存在不当之处&#xff0c;敬请读者…
阅读更多...
局域网管理工具

局域网管理工具

每个组织的业务运营方法都是独一无二的&#xff0c;其网络基础设施也是如此&#xff0c;由于随着超融合基础设施等新计算技术的发展&#xff0c;局域网变得越来越复杂&#xff0c;因此局域网管理也应该如此&#xff0c;组织需要量身定制的局域网管理解决方案&#xff0c;这些解…
阅读更多...
【FPGA】DDR3学习笔记（一）丨SDRAM原理详解

【FPGA】DDR3学习笔记（一）丨SDRAM原理详解

本篇文章包含的内容 一、DDR3简介1.1 DDR3 SDRAM概述1.2 SDRAM的基础结构 二、 SDRAM操作时序2.1 SDRAM操作指令2.2 模式寄存器&#xff08;LOAD MODE REGISTER&#xff09;2.3 SDRAM操作时序示例2.3.1 SDRAM初始化时序2.3.2 突发读时序2.3.3 随机读时序2.3.4 突发写时序2.3.5 …
阅读更多...
计算机这几个炮灰专业，选错毕业直接去搬砖

计算机这几个炮灰专业，选错毕业直接去搬砖

计算机五大专业&#xff0c;选错毕业后直接去搬砖。 在所有的计算机类专业中&#xff0c;计算机科学与技术这个专业既要学硬件&#xff0c;也要学软件&#xff0c;既要学理论&#xff0c;也要学技术。课程既有数理类&#xff0c;也有电器类&#xff0c;还有计算机类&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023