需求
网站如果想要实现微信扫码登录其实有很多种方案,常见的方案就是微信开放平台和微信公众号服务号。前者是目前大部分网站并且是微信认可的一种方式,后者是开发者发现服务号具备扫码关注后即可获取用户基本信息的能力后而开发的一种方式。
而这两者其实都是需要具备资质,例如认证,对于个人开发者来说,是有一定的门槛的,而我这次分享的是0门槛的,个人开发者一样可以实现。
原理
小程序也是具备获取用户基本信息的能力的,可以调用wx.login接口
获取用户的openid实现登录。简单来说就是web端创建一个带参数的二维码同时向数据库插入一条登录记录,此时web端已经开始轮询数据库这条记录的扫码状态了,微信扫码后打开小程序并立即获取到这个参数,然后点击授权登录按钮请求wx.login这个接口获取到openid,然后将openid更新至数据库这个登录记录中并更新扫码状态,web端可以轮询到登录成功的状态码就展示登录成功。
代码
creatqrcode.php
小程序扫码登录示例
$access_token['expires']){
// 如果已经过期就得重新获取并缓存
$access_token = array();
$access_token['access_token'] = getNewToken($appid,$appsecret);
$access_token['expires']=time()+7000;
// 将数组写入php文件
$arr = '';
$arrfile = fopen("./access_token.php","w");
fwrite($arrfile,$arr);
fclose($arrfile);
// 返回当前的access_token
return $access_token['access_token'];
}else{
// 如果没有过期就直接读取缓存文件
return $access_token['access_token'];
}
}
// 获取新的access_token
function getNewToken($appid,$appsecret){
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$appsecret}";
$access_token_Arr = https_request($url);
return $access_token_Arr['access_token'];
}
// curl请求函数
function https_request ($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$out = curl_exec($ch);
curl_close($ch);
return json_decode($out,true);
}
// 创建小程序码
function creatQrcode(){
// 请求小程序接口创建小程序码
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token='.getToken());
curl_setopt($ch, CURLOPT_POST, true);
$sc = uniqid(); // 生成scene
$data = array(
"scene" => $sc,
"env_version" => "develop" // 小程序审核通过后需要修改参数为release
);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
// 图片buffer转本地图片
$img = file_put_contents($sc.'.png', $result);
// 引入数据库配置
include './Db.php';
// 将二维码的scene写入数据库
$add_scene = "INSERT INTO xcxqrcodelogin (scene) VALUES ('$sc')";
if ($conn->query($add_scene) === TRUE) {
$file = $sc.'.png';
if($fp = fopen($file,"rb", 0))
{
$gambar = fread($fp,filesize($file));
fclose($fp);
$base64_qrcode = 'data:image/jpg/png/gif;base64,'.chunk_split(base64_encode($gambar));
// 以JSON的方式返回小程序码及scene
return json_encode(array('xcxqrcode'=>$base64_qrcode,'scene'=>$sc));
}
}
// 断开连接
curl_close($ch);
$conn->close();
}
?>
xcxqrcode;
$scene = $qrcodebase64json->scene;
// 删除本地的图片
unlink('./'.$scene.'.png');
?>
请使用微信扫码
getstatus.php
query($getstatusinfo);
// 如果scene存在
if ($result_statusinfo->num_rows > 0) {
while($row_statusinfo = $result_statusinfo->fetch_assoc()) {
$status = $row_statusinfo['status'];
$openid = $row_statusinfo['openid'];
}
// 当scene=1的时候代表还没扫码
if($status == '1'){
$ret = array(
'code' => 201,
'msg' => '请使用微信扫码'
);
}else if($status == '2'){
// 当scene=2的时候代表已扫码未登录
$ret = array(
'code' => 202,
'msg' => '已扫码,请授权登录'
);
}else if($status == '3'){
// 当scene=3的时候代表已登录
$ret = array(
'code' => 200,
'msg' => '登录成功',
'openid' => $openid
);
}
}else{
$ret = array(
'code' => 203,
'msg' => '请刷新重试'
);
}
// 断开数据库连接
$conn->close();
// 输出结果
echo json_encode($ret,JSON_UNESCAPED_UNICODE);
?>
scanCode.php
close();
?>
login.php
200,
'msg' => '登录成功',
'openid' => $openid
);
$conn->close();
// 返回结果
echo json_encode($ret,JSON_UNESCAPED_UNICODE);
?>
Db.php
代码说明
1、creatqrcode.php
是生成小程序码的界面,其中41行和42行的$appid和$appsecret要换成你的小程序的。以及92行的env_version在你的小程序上线后要改为release
,如果是开发调试中,就保持现状。
2、login.php
是小程序端向后端请求接口获取openid的,其中11行和12行的$appid和$appsecret要换成你的小程序的。
3、scanCode.php
是扫码后告诉服务器你已经完成扫码的后端。
4、getstatus.php
是轮询扫码状态的后端。
5、Db.php
是数据库配置文件,需要进去配置你的数据库地址、账号、密码、数据库名称。
数据库创建
将这条SQL粘贴至你的数据库管理端进行创建数据库表。
CREATE TABLE `xcxqrcodelogin` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`scene` varchar(32) DEFAULT '',
`openid` varchar(32) DEFAULT '',
`status` varchar(2) DEFAULT '1' COMMENT '1未扫码2已扫码3已登录',
`creat_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=148 DEFAULT CHARSET=utf8mb4
Demo
小程序端代码
以上仅为前端和后端的代码,小程序端的代码请点击这里下载。
小程序端代码:https://likeyun.lanzout.com/i...
作者
TANKING
如需请教,可加WeChat:sansure2016