微信内置H5获取用户code步骤方法
拿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");