h5页面微信鉴权
h5页面需要记录微信id和头像之类的话需要用到微信公众号平台的鉴权功能。大致就是第一次官方鉴权网址请求code,用户后授权然用返回的code再第二次请求官方服务器获取此时的用户信息即可。
一.注册测试账号
申请测试:微信公众号测试号
获取appid
![](https://img.haomeiwen.com/i11315673/2d613f85b605ca53.png)
扫测试号二维码获取测试资格
![](https://img.haomeiwen.com/i11315673/9ca45f78216917c3.png)
设置重定向返回的白名单域名,路径体验接口权限表-网页帐号(可能官方安全鉴定?)。注意这边支持本地ip192.168.0.xx,或写xx.com,不要要带http。否则鉴权url出错。
![](https://img.haomeiwen.com/i11315673/988fc2387e280e0e.png)
二.拿code取openid
引导点击或直接访问鉴权网址。(官方建议UrlEncode(xx)转义且必须含http://,否则鉴权将又出错)。
:
let appid=xx,url=xx;//(`...${id}...`字符模板语法指前面申明变量,拼接时可随意换行空白,为顿号)
let appid='',url='',secret='';
//判断页面能获取到code就拿openid,要不就请求去
let code=urlName("code");// 获取code值可以在客户端打开链接的时候alert出来查看
alert(code)
if(code==null) {
window.location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
}else{
// 获取openid
uni.request({
ulr:`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code${code}&grant_type=authorization_code`,
success:(res)=>{
//获取返回信息
console.log(res)
},
fail(err) {
console.log(err)
}
})
//xx.js
urlName(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
},
let code=urlName('code')//允许后获得的code
三 .后台准备部分:
openid和token涉及一些安全性质,只能后台亲自请求,之后获取code完就和前台无关了。
//1code换取token再获取信息(需要服务端请求)
//官方文档流程:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
//2参考代码获取token和openid:
/**
* 通过code换取网页授权access_token 2018-08-04
* @param string $appid 公众号的唯一标识
* @param string $appsecret 公众号的appsecret
* @param string $code 填写第一步获取的code参数
* @link https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
* @return false|static[]
*/
public function getAuthAccessToken($appid, $appsecret, $code)
{
$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appid&secret=$appsecret&code=$code&grant_type=authorization_code";
$result = https_request($url);
apilog('wechat', 'get_auth_token', $url, '', $result);
return $result;
}
3已有token和openid拿用户信息(步骤1,请求前可选检验授权)
微信开发工具
小程序,微信公众号,微信网页调试少不了的,写之前别忘下载ide工具,尤其是网页调试便捷。最近类似小程序太多了,不想写的可以去试试uni框架,写一次自动打包,省事。
![](https://img.haomeiwen.com/i11315673/17dd3ca66681dcc2.png)
网友评论