1.前言
我们在写一个不太了解的新功能的时候,又稳又快的一个方法就是借(chao)鉴(xi)其他的人的实现方法。所以我们先不急着开始写代码,先看一下各互联网巨头都是如何实现的。
首先来看一下淘宝的扫码登录:
F12调出控制台,可以看出淘宝一直在发送请求查看这个二维码的状态
可以看出京东也是这么做的,看到这里大家都有点思路了把
2.准备
接着我们还是不着急写代码,先把思路理清楚。这里我们采用前后端分离的方法来实现这个功能(暂不考虑二维码过期、该二维码登录过一次等复杂情况,只实现扫码登录功能)。
2.1 首先梳理一下要准备的PHP接口,一共有3个:
1.让前端页获取唯一的QRUUID(唯一字符串就可以)生成一个二维码用的接口。
2.APP端扫描到QRUUID后去请求的接口,功能是把用户和这个QRUUID绑定(可以传User_id或者token什么的,具体看需求)。
3.前端在获取到第一个的接口返回的QRUUID后去轮询请求的接口,功能是查询这个QRUUID是不是被APP端扫描并绑定。
2.2 然后是HTML页的主要实现:
其实就是Ajax请求PHP接口获得QRUUID然后生成二维码,接着使用setInterval() 方法去请求第三个PHP接口。(前端生成二维码的开放API:http://www.topscan.com/pingtai/)
2.3 最后是APP端(以iOS为例)的实现:
使用AVFoundation扫描二维码获得信息,然后请求PHP接口将用户数据和QRUUID绑定。
3.代码
3.0 简易数据库表:
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;
3.1 先放上PHP的3个接口的代码:
<?php
//config.php 数据库配置文件
$db_host = '192.168.1.103';
$db_name = 'test';
$db_user = 'root';
$db_pwd = 'a123456';
<?php
/**
* getqruuid.php
* 用于前端获取qruuid(二维码唯一ID)使用
*
* User: caohan
*/
require('config.php'