首先梳理一下要准备的PHP接口,一共有3个:
-
1.让前端页获取唯一的QRUUID(唯一字符串就可以)生成一个二维码用的接口。
-
2.APP端扫描到QRUUID后去请求的接口,功能是把用户和这个QRUUID绑定(可以传User_id或者token什么的,具体看需求)。
-
3.前端在获取到第一个的接口返回的QRUUID后去轮询请求的接口,功能是查询这个QRUUID是不是被APP端扫描并绑定。
然后是HTML页的主要实现:
-
其实就是Ajax请求PHP接口获得QRUUID然后生成二维码,接着使用setInterval() 方法去请求第三个PHP接口。(前端生成二维码的开放API:http://www.topscan.com/pingtai/)
最后是APP端(以iOS为例)的实现:
-
使用AVFoundation扫描二维码获得信息,然后请求PHP接口将用户数据和QRUUID绑定。
代码
DROP TABLE IF EXISTS `qrcodelogin`;
CREATE TABLE `qrcodelogin` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`qruuid` varchar(15) NOT NULL DEFAULT '',
`user_id` int(11) DEFAULT NULL,
`user_token` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB;
SET FOREIGN_KEY_CHECKS = 1;
<?php
$db_host = '192.168.1.103';
$db_name = 'test';
$db_user = 'root';
$db_pwd = 'a123456';
1
2
3
<?php
require('config.php');
$mysqli = new mysqli($db_host, $db_user, $db_pwd, $db_name);
if (mysqli_connect_error())
echo mysqli_connect_error();
$mysqli->set_charset("utf8");
$qruuid = substr(md5(uniqid(mt_rand(), true)), 0, 15);
$sql = "insert into qrcodelogin (qruuid) values ('". $qruuid ."')";
$result = $mysqli->query($sql);
if($result === false){
echo $mysqli->error;
echo $mysqli->errno;
}
$mysqli->close();
$arr = ['code'=>1, 'msg' => '生成qruuid成功','data'=>$qruuid];
echo json_encode($arr);
exit();
<?php
require('config.php');
$mysqli = new mysqli($db_host, $db_user, $db_pwd, $db_name);
if (mysqli_connect_error())
echo mysqli_connect_error();
$mysqli->set_charset("utf8");
$qruuid = $_GET['qruuid'];
$user_id = $_GET['user_id'];
$user_token = $_GET['user_token'];
$sql = "update qrcodelogin set user_id='" . $user_id . "',user_token='" . $user_token . "' where qruuid='" . $qruuid . "'";
$result = $mysqli->query($sql);
if ($result === false) {
echo $mysqli->error;
echo $mysqli->errno;
}
$mysqli->close();
$arr = ['code' => 1, 'msg' => '绑定成功'];
echo json_encode($arr);
exit();
<?php
require('config.php');
$mysqli = new mysqli($db_host, $db_user, $db_pwd, $db_name);
if (mysqli_connect_error())
echo mysqli_connect_error();
$mysqli->set_charset("utf8");
$qruuid = $_GET['qruuid'];
$sql = "select * from qrcodelogin where qruuid='" . $qruuid . "'";
$result = $mysqli->query($sql)->fetch_array();
if ($result === false) {
echo $mysqli->error;
echo $mysqli->errno;
}
$mysqli->close();
if (!is_null($result['user_id']))
$arr = ['code' => 1, 'msg' => '登录成功', 'data' => $result];
else
$arr = ['code' => 500, 'msg' => 'qruuid暂时未被绑定','data'=>$qruuid];
echo json_encode($arr);
exit();
?>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script><!--在线jq引用-->
<title>这个一个二维码登录页Demo</title>
</head>
<body>
<h4>
这个一个二维码登录页Demo
</h4>
<h5>
用APP扫描下方二维码模拟登录
</h5>
<img id="qrcodeimg" />
</body>
<script>
$.ajax({
type: "GET",
url: "getqruuid.php",
data: {},
success: function (result) {
var data = JSON.parse(result);
if (data.code == 1) {
$("#qrcodeimg").attr('src', 'http://qr.topscan.com/api.php?text=' + data.data);
var interval1= setInterval(function () {
$.ajax({
type: "GET",
url: "checkqruuid.php",
data: {'qruuid': data.data},
success: function (result) {
var data = JSON.parse(result);
if (data.code == 1) {
alert('扫码成功(即登录成功),进行跳转.....');
clearInterval(interval1);
}
}
});
}, 1000);
}
}
});
</script>
</html>
#import "ViewController.h"
#import "QRCodeViewController.h"
@interface ViewController () <QRCodeViewControllerDelegate>
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
}
- (IBAction)scanCode:(UIButton *)sender {
QRCodeViewController *qrVc = [[QRCodeViewController alloc] init];
qrVc.delegate = self;
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:qrVc];
__weak typeof (self) wSelf = self;
[qrVc setCompletionWithBlock:^(NSString *resultAsString) {
[wSelf.navigationController popViewControllerAnimated:YES];
}];
[self presentViewController:nav animated:YES completion:nil];
}
#pragma mark - 代理方法
- (void)reader:(QRCodeViewController *)reader didScanResult:(NSString *)result
{
NSLog(@"%@",result);
NSInteger user_id = 1;
NSString *user_token = @"this_is_user_token";
[self dismissViewControllerAnimated:YES completion:^{
NSError *error;
NSString *urlString = [NSString stringWithFormat:@"http://192.168.1.103/qrcodelogin/bindqruuid.php?qruuid=%@&user_id=%ld&user_token=%@",result,(long)user_id,user_token];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:urlString]];
NSData *response = [NSURLConnection sendSynchronousRequest:request returningResponse:nil error:nil];
NSDictionary *jsonDic = [NSJSONSerialization JSONObjectWithData:response options:NSJSONReadingMutableLeaves error:&error];
NSLog(@"接收到的数据为%@",jsonDic);
}];
}
@end