微信内置H5获取用户code

拿code做什么用?

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

H5拿code前置条件

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

  1. 申请APPId ,由于微信支付的产品体系全部搭载于微信的社交体系之上,所以直连商户或服务商接入微信支付之前,都需要有一个微信社交载体,该载体对应的ID即为APPID,这个载体可以是已有的小程序或者是公众号;
  2. 申请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");

至于后面的openId你可以直接拿这个code给后端进行处理即可,code有效期为5分钟

官方请求地址:https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值