微信公众号获取openId——开发阶段

news2025/1/20 1:58:47

1、注册测试号

微信公众平台

2、理解获取逻辑

获得微信的openid,需要先访问微信提供的一个网址来获取code。
再访问微信提供的另一网址从而获取openId。

两个链接分别为:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE

 https://api.weixin.qq.com/sns/oauth2/access_token?appid=AppId&secret=AppSecret&code=CODE&grant_type=authorization_code

3、选择预览环境

第一个链接需要在微信客户端打开,可以选择微信开发者工具

选择公众号网页项目

打开后在地址栏中输入第一个URL地址,我这边后面跟的是跳转的网页

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa5b9c7f2a5ab9d1e&redirect_uri=http://192.168.3.130:3000&response_type=code&scope=snsapi_base&state=STATE

 注意:这个redirect_uri填写的地址需要在公众号或者是测试号中网页账号中进行配置

 跳转后可以看到地址栏中出现了两个参数,code和state,这个时候,我们就可以拿到我们需要的code

 4、获取openId

获取到code后,就可以通过第二个链接,将所需的内容填写后,获取到openId了。

推荐从后端获取openId,可能会存在跨域、code不可用等等一系列问题,code只能使用一次。

@GetMapping("/getOpenId")
    @ApiOperation("获取OpenId")
    public JSONObject getOpenId(@RequestParam("code") String code){
        String url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={appid}&secret={secret}&code={code}&grant_type={grant_type}";
        HashMap<String,String> params = new HashMap<>();
        params.put("appid","");
        params.put("secret","");
        params.put("code",code);
        params.put("grant_type","authorization_code");
        String result = new RestTemplate().getForEntity(url, String.class, params).getBody();
        return JSONObject.fromObject(result);
    }

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

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

相关文章

JavaScript 基础语法

✏️作者&#xff1a;银河罐头 &#x1f4cb;系列专栏&#xff1a;JavaEE &#x1f332;“种一棵树最好的时间是十年前&#xff0c;其次是现在” 目录JavaScript 的组成第一个程序JavaScript 的书写形式:注释输出JS 变量理解动态类型基本数据类型运算符数组创建数组访问数组元素…

前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy

前言&#xff1a; 在前端发出Ajax请求的时候&#xff0c;有时候会产生跨域问题&#xff0c;报错如下: Access to XMLHttpRequest at http://127.0.0.1/api/post from origin null has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the…

06_HTML_表单提交的细节(submit提交按钮的使用细节)

目录一、submit提交按钮的细节二、关于输入类型(input标签)type属性中file类型(文件上传)和submit类型(提交按钮)的关系三、关于输入类型(input标签)type属性中hidden类型(隐藏域)和submit类型(提交按钮)的关系一、submit提交按钮的细节 form标签是表单标签action属性设置提交…

【js】多分支语句练习(2)

个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大一在校生&#xff0c;web前端开发专业 &#x1f921; 个人主页&#xff1a;python学不会123 &#x1f43c;座右铭&#xff1a;懒惰受到的惩罚不仅仅是自己的失败&#xff0c;还有别人的成功。 &#x1f385;**学习…

媒体查询@media

media可以针对不同的媒体类型(包括显示器、便携设备、电视机&#xff0c;等等)设置不同的样式规则&#xff0c;CSS3 根据设置自适应显示。 1.使用方法: media 多媒体类型 and (条件) and (条件)... ①多媒体类型: all用于所有多媒体类型设备 print用于打印机 screen用于电脑…

2022前端笔试面试题

目录 以下为笔试题部分&#xff1a; 1.CSS盒子模型的构成是__,__,__,__. 2.二叉树的中序遍历顺序是badce,后续遍历顺序是bdeca&#xff0c;问前序遍历的顺序。 3.flex布局的父级元素中有哪些常用属性。 4.box-sizing:____;表示怪异盒模型&#xff08;IE盒模型&#xff09;…

JavaScript基础知识总结 14:学习JavaScript中的File API、Streams API、Web Cryptography API

目录一、Atomics和SharedArrayBuffer二、原子操作基础1、算术及位操作方法2、原子读和写3、原子交换4、原子Futex操作与加锁三、跨上下文消息四、Encoding API五、File API和Blob API1、File类型2、FileReader类型3、FileReaderSync类型4、Blob与部分读取六、Streams API1、应用…

uniapp和vue组件之间的传值方法(父子传值,兄弟传值,跨级传值,vuex)

前言 在做vue项目或者uniapp开发微信小程序时&#xff0c;经常会用到组件之间传值&#xff0c;因此想总结记录下。 一、父子传值 父向子传递&#xff1a;props子向父传递&#xff1a;通过 events&#xff08;$emit&#xff09;父组件想调用子组件的方法&#xff1a;通过 thi…

Get请求报错404出现原因及解决办法

ajax中get请求时报404背景环境项目结构问题成因解决办法1解决办法2背景环境 已学习java基础&#xff0c;html&#xff0c;css&#xff0c;js&#xff0c;jquery&#xff0c;bootstrap&#xff0c;layui&#xff0c;maven&#xff0c;servlet和jsp&#xff0c;刚进入spring的学…

前端下载文件的几种方式

前端下载文件的几种方式 前言 实习一个人负责一个管理系统的前端部分。其中&#xff0c;就有前端下载文件的需要。最终采用的是使用axios发送get请求的方式&#xff0c;因为需要携带token。但是&#xff0c;不应该只注重结果&#xff0c;也应该注重过程&#xff0c;不然可能一…

jQuery选择器(二)(基本过滤器,内容过滤器,可见过滤器)

写在前面 jQuery是一个快速、简洁的 JavaScript 框架&#xff0c;是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess&#xff0c;DoMore”&#xff0c;即倡导写更少的代码&#xff0c;做 更多的事情。jQuery封装了 JavaScript 常用的功能代码&…

【Vue】具名插槽

要点&#xff1a; 具名插槽&#xff1a;即具有名字的插槽&#xff0c;在默认插槽基础上指定插槽的名字&#xff08;name " "&#xff09;。父组件指明放入子组件的哪个插槽 slot "footer"&#xff0c;如果是template可以写成 v-slot : footer。 父组件中…

html中关于侧边导航栏和导航栏的编写

侧边导航栏 <style>.box{width: 50px;height: 50px;background-color: #483957;transition: width .5s,background-color .2s;}.box:hover{background-color: #004FCB;width: 200px;cursor: pointer;}.a1{position: fixed;right: 40px;top: 200px;float: right;}</st…

如何搭建一个vue项目(完整步骤)

如何搭建一个vue项目(完整步骤) 一、环境准备 1、安装node.js 下载地址&#xff1a;https://nodejs.org/zh-cn/界面展示 2、检查node.js版本 查看版本的两种方式 1|node -v 2|node -version 出现版本号则说明安装成功&#xff08;最新的以官网为准&#xff09; 3、为了…

vue环境搭建

前言&#xff1a;1、首先安装nodejs2、其次安装vue-cli&#xff0c;配置vue环境变量3、再次安装webpack、webpack-cli一、NodeJs安装 1、nodejs下载地址&#xff1a;https://nodejs.org/ 2、验证是否安装成功&#xff08;安装时已经自动加入到环境变量的path中&#xff09; 以…

Referer和Referrer Policy以及图片防盗链

​ Referer Referer请求头包含了当前请求页面的来源页面的地址&#xff0c;即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用Referer&#xff08;注&#xff1a;正确英语拼写应该是referrer&#xff0c;由于早期HTTP规范的拼写错误&#xff0c;为了保持向后兼容…

html 简单表格制作(看了它足以应对大部分表格)

目录 基础表格 进阶表格 锦上添花表格 bgcolor background align frame元素 基础表格 首先制作一个表格我们要知道一张简单表格就是由二部分组成分别是表头&#xff0c;表身。 下面就是一个简单的表格。 表头就是黑体加粗的内容&#xff0c;表身就是表格主要表达的内容。…

css里面设置按钮(button)让字体居中

题目&#xff1a;设置button中的字体让其居中&#xff0c;不至于溢出(字体下落&#xff0c;重影等问题) 1&#xff0c;抛出问题&#xff0c;如图所示 2&#xff0c;引出我的代码 <view class"loginBtn"><form action"check.jsp" method"get…

带你吃透Servlet技术(二)

个人主页&#xff1a; 几分醉意的CSDN博客_传送门 前言&#xff1a;在上一篇&#xff0c;我们已经初步的了解了 Servlet技术 传送门&#xff0c;接下来我们继续深入学习Servlet。 本文目录&#x1f496;继承HttpServlet实现Servlet程序✨代码实战✨自动生成doGet和doPost方法✨…

猿创征文|如何使用 Element UI? 以登录框为例带你感受一下基础使用

目录 前言 一、安装&#xff08;所有内容&#xff09; 二、按需引入 三、案例演示 1.案前整理 2.代码演示&#xff08;后附源码&#xff09; 3.源码 前言 Element-ui&#xff0c;一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库&#xff0c;提供了配套设计…