微信开发工具——进行网页授权

微信开发工具——进行网页授权

微信公众平台设置

1.在首页创建好自己的订阅号

网站:https://mp.weixin.qq.com/

在这里插入图片描述

点击立即注册,在选择订阅号(个人创建使用)
在这里插入图片描述
之后按流程填写后,点击设置与开发-------->基本配置,这里可以通过点击成为开发人员(我显示的是已经点击后的页面)
在这里插入图片描述
之后会出现开发者工具,点击后出现该页面,选择公众平台测试账号
在这里插入图片描述

  1. 在该页面当中,填写域名(ps:作者的80端口被占用,使用的是90端口,如果用80默认可以不写)
    在这里插入图片描述
  2. 同时修改页面授权的域名,两者保持一致

在这里插入图片描述

在这里插入图片描述
3. 修改本机中C:\Windows\System32\drivers\etc\hosts文件,以管理员身份打开修改,加入本机地址以及刚刚设置的域名

在这里插入图片描述

  1. 要扫描测试号二维码,加入自己的微信账号,否则后面无法进行测试授权

在这里插入图片描述

前端部分

1.前端页面中的设置

我设置的是90端口,注意写自己域名时写的端口

在这里插入图片描述

2.设计前端页面,授权可以通过超链接进行设置

<template><van-row><van-col span="24"><div class="header"><--头像--><van-image round width="5rem" height="5rem" :src="headimgurl" /><--点击授权的超链接,默认显示的是pinia中的微信登录--><aclass="login"href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx11222333334444d&redirect_uri=http%3A%2F%2Fshimmer.com%3A90%2Fmy&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect">{{ pinia.nickname }}</a></div></van-col></van-row>
</template>

注意:其中的appid要写成自己测试号中的,其中的redirect_uri为授权后返回的页面,其url格式需要进行加密。

页面展示(使用微信开发者工具展示)
在这里插入图片描述
前后端联系:在点击微信登录,同意授权后,回调页面会跳转至 redirect_uri/?code=CODE&state=STATE之后通过调用对应后端传送的接口同时将code传到后台,后台通过code发送对应请求获取access_token,再发送对应请求可以获得网页授权的用户信息,后端将用户信息返回给前端。

结果:前端我将回调页面还写的是本页面,授权之后,会将我微信对应的头像和名称显示 在当前页面。

实现

  1. 在onMounted中,先对code进行判断,如果为空说明是第一次进入该页面,尚未进行授权,则不进行调用接口;如果存在,则说明已经授权了,进行调用。

由于code是进行授权后,回调的url中携带的参数,所以用路由来接收参数并进行判断

import { ref, onMounted } from "vue";
import { usePinia } from "@/store/pinia";
import { weixinApi } from "@/api";
import { useRoute } from "vue-router";
const pinia = usePinia();
const route = useRoute();
const headimgurl = ref(pinia.headimgurl);
onMounted(() => {const code = route.query.code;if (code != undefined) {weixinCallApi(code);}
});
const weixinCallApi = (code: any) => {weixinApi.getAccessToken.call({ code: code }).then((res: any) => {console.log(res);pinia.nickname = res.data.nickname;pinia.headimgurl = res.data.headimgurl;});
};
  1. 进行调用接口后,将返回的响应数据进行赋值给pinia,用于显示或后期使用。

结果展示
在这里插入图片描述
注意: 在练习的过程中,进行授权后不要携带同一个code进行多次刷新,否则后端请求返回的access_token会为空,报错40163(好像是)
原因:code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。

后端部分

第一步:通过前端给的code换取网页授权access_token

通过发送请求https://api.weixin.qq.com/sns/oauth2/access_tokenappid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code,加粗的三个值都需要根据自己的进行传递

请求发送返回对应的json内容

{
“access_token”:“ACCESS_TOKEN”,
“expires_in”:7200,
“refresh_token”:“REFRESH_TOKEN”,
“openid”:“OPENID”,
“scope”:“SCOPE”,
“is_snapshotuser”: 1,
“unionid”: “UNIONID”
}

利用hutool工具,将返回的json转换为自己创建的modle对象
AccessTokenInfo

@Data
public class AccessTokenInfo {String access_token;int expires_in;String refresh_token;String openid;String scope;String unionid;int is_snapshotuser;
}

第二步:拉取用户信息(需scope为 snsapi_userinfo)

获取的access_token是网页授权接口调用凭证,以及openid 是用户的唯一标识,在这一步调用获取用户信息时需要这两个参数。

发送请求:
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

返回的就是用户信息的json

{
“openid”: “OPENID”,
“nickname”: NICKNAME,
“sex”: 1,
“province”:“PROVINCE”,
“city”:“CITY”,
“country”:“COUNTRY”,
“headimgurl”:“https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46”,
“privilege”:[ “PRIVILEGE1” “PRIVILEGE2” ],
“unionid”: “o6_bmasdasdsad6_2sgVt7hMZOPfL”
}

同理,利用hutool工具,将返回的json转换为自己创建的modle对象,最终把用户信息对象返回给前端
WeiXinUserInfo

@Data
public class WeiXinUserInfo {String openid;String nickname;int sex;String province;String city;String country;String headimgurl;String privilege;String unionid;
}

Controller完整代码

@RestController
@RequestMapping("/api/weixin")
public class H5WeiXinController {@Value("${wx.appid}")private String appId;@Value("${wx.secret}")private String secret;/*** 获取access_token* @param code 前端通过授权后会跳转的页面中携带的参数* @return*/@GetMapping("/getAccessToken")public WeiXinUserInfo getAccessToken(String code) {String url = StrFormatter.format("https://api.weixin.qq.com/sns/oauth2/access_token?appid={}&secret={}&code={}&grant_type=authorization_code", appId, secret, code);//请求返回的内容,一个json对象String body = HttpUtil.get(url);//将接收的json对象转换为对象AccessTokenInfo accessTokenInfo = JSONUtil.toBean(body, AccessTokenInfo.class);//获取用户信息url = StrFormatter.format("https://api.weixin.qq.com/sns/userinfo?access_token={}&openid={}&lang=zh_CN",accessTokenInfo.getAccess_token(),accessTokenInfo.getOpenid());//请求返回的内容,一个json对象body = HttpUtil.get(url);WeiXinUserInfo weiXinUserInfo = JSONUtil.toBean(body, WeiXinUserInfo.class);//返回用户信息给前端return weiXinUserInfo;}
}

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

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

相关文章

JAVA八股--redis

JAVA八股--redis 如何保证Redis和数据库数据一致性redisson实现的分布式锁的主从一致性Redis脑裂现象及解决方案介绍I/O多路复用模型undo log 和 redo log&#xff08;没掌握MyISAM 和 InnoDB 有什么区别&#xff1f; 如何保证Redis和数据库数据一致性 关于异步通知中消息队列…

Kubernetes(k8s):精通 Pod 操作的关键命令

Kubernetes&#xff08;k8s&#xff09;&#xff1a;精通 Pod 操作的关键命令 1、查看 Pod 列表2、 查看 Pod 的详细信息3、创建 Pod4、删除 Pod5、获取 Pod 日志6、进入 Pod 执行命令7、暂停和启动 Pod8、改变 Pod 副本数量9、查看当前部署中使用的镜像版本10、滚动更新 Pod11…

基于Java+SpringBoot+Mybaties+layui+Vue+elememt 实习管理系统 的设计与实现

一.项目介绍 前台功能&#xff1a;用户进入系统可以实现首页&#xff0c;系统公告&#xff0c;个人中心&#xff0c;后台管理等功能进行操作 后台由管理员&#xff0c;实习单位&#xff0c;教师和学生&#xff0c;主要功能包括首页&#xff0c;个人中心&#xff0c;班级管理&am…

【C++学习】哈希的应用—位图与布隆过滤器

目录 1.位图1.1位图的概念1.2位图的实现3.位图的应用 2.布隆过滤器2.1 布隆过滤器提出2.2布隆过滤器概念2.3如何选择哈希函数个数和布隆过滤器长度2.4布隆过滤器的实现2.4.1布隆过滤器插入操作2.4.2布隆过滤器查找操作2.4.3 布隆过滤器删除 2.5 布隆过滤器优点2.6布隆过滤器缺陷…

Service介绍-Service常用类型-Endpoints服务代理

简介 K8s 中的Service是一种抽象&#xff0c;用于定义一组Pod的逻辑集合&#xff0c;并为它们提供统一的网络入口。Service充当了Pod的负载平衡器和服务发现器&#xff0c;为应用程序提供了稳定的网络地址&#xff0c;使得应用程序可以访问与之关联的Pod而无需了解其具体的IP地…

Linux:make/makefile的使用

一、什么是makefile/make 会不会写makefile&#xff0c;从一个侧面说明了一个人是否具备完成大型工程的能力 一个工程中的源文件不计数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;makefile定义了一系列的 规则来指定&#xff0c;哪些文件需要先编译&am…

深度学习的发展历史与关键技术

深度学习的发展历史与关键技术 引言1. 早期神经网络&#xff1a;感知机2. 多层感知机3. 梯度下降算法4. 反向传播算法5. 深度神经网络6. 深度学习的发展历程6.1 早期阶段6.2 重新复兴6.3 深度学习的兴起 结论 引言 深度学习作为人工智能领域的一个重要分支&#xff0c;在过去几…

蓝桥杯嵌入式总结

用到外部时钟&#xff1a;UART,ADC,RTC 用到中断&#xff1a;UART,TIM LED_KEY: 将高低电平写入对应引脚 HAL_GPIO_WritePin(GPIOD, GPIO_PIN_2, GPIO_PIN_SET); 读取对应引脚的电平状态 HAL_GPIO_ReadPin(GPIOB,GPIO_PIN_0) UART: 发送&#xff1a; int fputc(int …

P1331 海战 (深搜)

题目背景 在峰会期间&#xff0c;武装部队得处于高度戒备。警察将监视每一条大街&#xff0c;军队将保卫建筑物&#xff0c;领空将布满了 F-2003 飞机。 此外&#xff0c;巡洋船只和舰队将被派去保护海岸线。不幸的是&#xff0c;因为种种原因&#xff0c;国防海军部仅有很少的…

设置Chrome打开链接在新标签页显示

Chrome版本 版本 123.0.6312.106&#xff08;正式版本&#xff09; &#xff08;64 位&#xff09; 下面这两个页面都有设置按钮&#xff1a; https://www.google.com/?pli1或者https://www.google.com/?hlzh-CN 要先退出账号&#xff0c;要不然看不到右下角的 “设置” 。…

TCP/IP协议、HTTP协议和FTP协议等网络协议包简介

文章目录 一、常见的网络协议二、TCP/IP协议1、TCP/IP协议模型被划分为四个层次2、TCP/IP五层模型3、TCP/IP七层模型 三、FTP网络协议四、Http网络协议1、Http网络协议简介2、Http网络协议的内容3、HTTP请求协议包组成4、HTTP响应协议包组成 一、常见的网络协议 常见的网络协议…

内部类(InnerClass) 总结

类的成员之五&#xff1a;内部类1. 什么是内部类&#xff1f; 将一个类A定义在另一个类B里面&#xff0c;里面的那个类A就称为内部类&#xff08;InnerClass&#xff09;&#xff0c;类B则称为外部类&#xff08;OuterClass&#xff09;。 内部只供外部类使用 2. 为什么需要内部…

富格林:正规思路实现得益出金

富格林悉知&#xff0c;随着金融市场的不断发展&#xff0c;黄金作为一种正规投资品种被越来越多投资者认识&#xff0c;在黄金投资市场中&#xff0c;有各种各样复杂的信息&#xff0c;投资者要懂得明辨是非&#xff0c;树立正规做单思路避免受害亏损。以下也为大家总结几点正…

STM32为什么不能跑Linux?

STM32是一系列基于ARM Cortex-M微控制器的产品&#xff0c;它们主要用于嵌入式系统中。而Linux则是一个开源的类Unix操作系统&#xff0c;主要面向的是桌面电脑、服务器等资源丰富的计算机。虽然理论上可以将Linux移植到STM32上运行&#xff0c;但是由于两者之间存在着很多技术…

vivado 配置存储器器件编程2

为双 QSPI (x8) 器件创建配置存储器文件 您可使用 write_cfgmem Tcl 命令来为双 QSPI (x8) 器件生成 .mcs 镜像。此命令会将配置数据自动拆分为 2 个独立 的 .mcs 文件。 注释 &#xff1a; 为 SPIx8 生成 .mcs 时指定的大小即为这 2 个四通道闪存器件的总大小。…

QA测试开发工程师面试题满分问答5: 内存溢出和内存泄漏问题

概念阐述 内存溢出&#xff08;Memory Overflow&#xff09;和内存泄漏&#xff08;Memory Leak&#xff09;是与计算机程序中的内存管理相关的问题&#xff0c;它们描述了不同的情况。 内存溢出是指程序在申请内存时&#xff0c;要求的内存超出了系统所能提供的可用内存资源…

SSM框架学习——Eclipse创建Spring MVC maven项目

Spring MVC项目创建 什么是Spring MVC Spring MVC是Spring内置的&#xff0c;实现了Web MVC设计模式的框架。 它解决了Web开发过程中很多的问题&#xff0c;例如参数接收、表单验证等。另外它采用松散耦合可插拔组件等结构&#xff0c;具有相对较高的灵活性和扩展性。 Spri…

vue创建项目下载动态路由v-for mounted websocket :style :class store使用说明

在Vue中创建一个项目&#xff0c;并整合动态路由、v-for、mounted生命周期钩子、WebSocket、:style、:class以及Vuex的store&#xff0c;涉及到多个Vue核心特性的使用。下面我将简要说明如何逐步整合这些特性。 1. 创建Vue项目 使用Vue CLI创建项目&#xff1a; 2. 配置动态路…

html怎么实现axios发请求,并且实现跨域

方案是代理服务器 前端处理 一、下包 save是开发环境的意思 可以单独弄个server文件夹或者其他也行 npm install express --savenpm install http-proxy-middleware --save二、准备proxy-server.js文件 const express = require(express) const {createProxyMiddleware } = r…

C++ 类(初篇)

类的引入 C语言中&#xff0c;结构体中只能定义变量&#xff0c;在C中&#xff0c;结构体内不仅可以定义变量&#xff0c;也可以定义函数。 而为了区分C和C我们将结构体重新命名成class去定义 类的定义 标准格式&#xff1a; class className {// 类体&#xff1a;由成员函…