第一步
准备工作:
微信开放平台,需要企业认证,个人无法实现,因为网站审核的时候要有公司盖章。
并且开发人员资质也是要公司资质。
要交300元的认证费。
审核过程挺快,第一天申请,第二天就可以,写代码了。
填写资料的时候 网站的域名 要写对,扫码回调的域名,就是网站的域名。
第二步:
开始撸代码
官方文档:准备工作 | 微信开放文档
点击页面按钮调用展示二维码接口
/**
* @title 展示微信二维码
* @Author: Righter.Guo <righter.g@qq.com>
* @Time: 2021/12/9 13:36
*/
public function show_wxcode(Request $request)
{
//调用微信扫描
//回调地址,扫码后,页面会自动跳转到这个链接。不需要前端轮询。
$redirect_uri= $request->domain().'/admin/login/wx_callback';
//该回调需要url编码
$redirect_uri=urlencode($redirect_uri);
//开放平台的id
$appID=$this->appid;
//写死,官方文档写的
$scope="snsapi_login";
//准备向微信发请求
$url = "https://open.weixin.qq.com/connect/qrconnect?appid=" . $appID."&redirect_uri=".$redirect_uri."&response_type=code&scope=".$scope."&state=扫码后会原样返回给你#wechat_redirect";
//请求返回的结果(实际上是个html的字符串)就是微信写好的一个二维码的HTML页面。
$result = file_get_contents($url);
//替换图片的src才能显示二维码,因为图片没有拼接微信域名,
$result = str_replace("/connect/qrcode/", "https://open.weixin.qq.com/connect/qrcode/", $result);
//此处注释的格式转化,是调试的时候 报错 ,乱码,转化后可以看到汉字报错
// $result = iconv('gb2312', 'UTF-8//IGNORE', $result);
// echo $result;
//返回json数据,
return JsonService::successfuljson('ok',$result);
}
接口返回的数据用layer的弹框,type=1,可以直接展示页面内容。
$('.submit').on('click',function (
$.ajax({
url:'show_wxcode',
type:'post',
data:postData,
dataType:'json',
success:function (d) {
// console.log(d);
if (d.code == 200){
//直接弹框出现二维码页面
layer.open({
type:1,
offset: '100px',
area: ['500px', '500px'],
content:d.data
});
}else{
alert(d.msg);
}
}
});
return false;
});
下图就是接口返回的页面,
用微信扫码后,页面会自动跳转到show_wxcode接口里设置的回调地址:wx_callback
public function wx_callback()
{
$code = $_GET["code"];
$state = $_GET["state"];
//开放平台id
$appid = $this->appid;
//开放平台秘钥
$secret = $this->secret;
//code是必须的,state我也有用,可以根据自己的业务传参
if (!empty($code) && !empty($state)) {
//有code
//通过code获得 access_token + openid
$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" . $appid
. "&secret=" . $secret . "&code=" . $code . "&grant_type=authorization_code";
$jsonResult = file_get_contents($url);
$resultArray = json_decode($jsonResult, true);
// $access_token = $resultArray["access_token"];
// $openid = $resultArray["openid"];
$unionid = $resultArray["unionid"];
//此处是为了查看到底返回了些啥东西
//file_put_contents('./wx_callback111.txt',$jsonResult);
//通过access_token + openid 获得用户信息,此处根据官网资料,获取你想要的东西
// $infoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=" . $access_token . "&openid=" . $openid;
// $infoResult = file_get_contents($infoUrl);
// file_put_contents('./wx_callback222.txt',$infoResult);
// $infoArray = json_decode($infoResult, true);
//下面自己的 业务逻辑
//最后跳转到你想要的页面
$this->redirect('index/index');
}
}
至此微信扫描登录pc功能完成。
有bug、疑问、建议,可以留言。
有帮助 可以给点打赏。感谢