微信内置H5获取用户code

最新推荐文章于 2025-04-10 22:27:23 发布

泛舟当歌都有人抢？

最新推荐文章于 2025-04-10 22:27:23 发布

阅读量2.8k

点赞数 30

文章标签：微信前端微信小程序 javascript

本文链接：https://blog.csdn.net/weixin_48706421/article/details/142490868

版权

微信内置H5获取用户code步骤方法

拿code做什么用？
H5拿code前置条件
获取前言
- - 这里以登录微信公众号为例
微信网页开发官方文档
获取code
至于后面的openId你可以直接拿这个code给后端进行处理即可，code有效期为5分钟

拿code做什么用？

可以用做登陆或者H5的微信支付(后端使用微信支付的JSAPI时或者换取openId,access_token时需要)

H5拿code前置条件

h5在微信公众号中获取oppenId,静默和非静默

申请APPId ，由于微信支付的产品体系全部搭载于微信的社交体系之上，所以直连商户或服务商接入微信支付之前，都需要有一个微信社交载体，该载体对应的ID即为APPID，这个载体可以是已有的小程序或者是公众号；
申请mchid，申请成功后，会向服务商填写的联系邮箱下发通知邮件，内容包含申请成功的mchid及其登录账号密码，请妥善保存。

注意：一个mchid只能对应一个结算币种，若需要使用多个币种收款，需要申请对应数量的mchid。；
3. 绑定APPID及mchid ，直连模式下，APPID与mchid之间的关系为多对多，即一个APPID下可以绑定多个mchid，而一个mchid也可以绑定多个APPID；
4. 在微信商户平台配置相关APIV3密钥并下载证书 ；
5. 设置支付授权目录地址，相关事宜可以查看微信支付的官方文档，微信支付文档；

获取前言

首先,要有个微信公众号或者小程序,默认已经获取到了微信公众号的appid 和redirect_uri还有secret

这里以登录微信公众号为例

appid 和 secret 公众号设置里边都可以查看到
重定向的redirect_uri在下图上有个修改点击修改
设置与开发->公众号设置->功能设置->网页授权获取用户基本信息->修改后有个填写网址的,获取后跳转的网址写上。不需要带上http等协议前缀
在这里插入图片描述

在这里插入图片描述

微信网页开发官方文档

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

获取code

在微信浏览器里面输入下面的url，appid、redirect_uri改成自己的，其他的都可以不用改。或者用微信开发者工具测试一下,https://open.weixin.qq.com/connect/oauth2/authorize。为请求微信官方获取code的请求地址后面需要跟参数，如appid,redirect_uri回调地址url(回调地址需要是可以直接访问的)，response_type参数返回类型，scope授权静默类型

静默授权：scope=snsapi_base

官方参考链接(请在微信客户端中打开此链接体验)：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

非静默授权：scope=snsapi_userinfo

官方参考链接(请在微信客户端中打开此链接体验)：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx807d86fb6b3d4fd2&redirect_uri=http%3A%2F%2Fdevelopers.weixin.qq.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

非静默授权，微信会让你进行授权在这里插入图片描述

然后都会拿到返回的地址，里边包含code

在这里插入图片描述

你可以在代码里直接通过window.location.href方法获取解析

//请求微信官方code的地址
const authUrl = `https://open.weixin.9g.com/connect/oauth2/authorize?appid=${appid}&....

// 模拟用户点击按钮触发授权
document.getElementById("authBtn").onclick = function(){
	window.location.href=authUrl
};

//在可调页南解析 code
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get("code");