介紹
隨著互聯(lián)網(wǎng)的發(fā)展，二維碼在人們的生活中出現(xiàn)的越來(lái)越頻繁口猜，二維碼的使用場(chǎng)景也越來(lái)越廣泛：二維碼登錄负溪、二維碼支付、加好友济炎、打開鏈接等等川抡。
因?yàn)橛脩羰褂枚S碼很容易，只需打開相機(jī)對(duì)著二維碼须尚，想要完成的業(yè)務(wù)就可以輕松完成崖堤。
掃碼登錄流程
包涵三個(gè)節(jié)點(diǎn)：服務(wù)器、登錄頁(yè)面耐床、授權(quán)頁(yè)面
登錄頁(yè)面：一般是用戶通過(guò)電腦瀏覽器訪問(wèn)的待授權(quán)頁(yè)面
服務(wù)器：用于登錄頁(yè)面與授權(quán)頁(yè)面進(jìn)行消息傳遞
授權(quán)頁(yè)面：一般是用戶掃描登錄二維碼后打開的頁(yè)面密幔，待用戶點(diǎn)擊確認(rèn)登錄
流程：
- 用戶打開登錄頁(yè)面
- 在登錄頁(yè)面與服務(wù)器建立websocket連接
- 服務(wù)器將生成唯一標(biāo)識(shí)發(fā)送給登錄頁(yè)面
- 登錄頁(yè)面用這個(gè)標(biāo)志來(lái)生成相應(yīng)的二維碼并顯示到頁(yè)面
- 用戶通過(guò)客戶端的掃一掃打開授權(quán)頁(yè)面
- 授權(quán)頁(yè)面通過(guò)唯一標(biāo)志與服務(wù)器建立連接
- 服務(wù)器通知登錄頁(yè)面：這個(gè)登錄頁(yè)面的二維碼已被掃了
- 用戶點(diǎn)擊確認(rèn)登錄，拿到服務(wù)器端返回的授權(quán)Token
- 授權(quán)頁(yè)面將此Token發(fā)送給登錄頁(yè)面
- 登錄頁(yè)面用這個(gè)Token進(jìn)行驗(yàn)證撩轰，成功則登錄成功
需要用到的技術(shù)
ThinkPHP
因?yàn)榉?wù)器端API使用此框架胯甩，所以這個(gè)業(yè)務(wù)使用此框架也是理所應(yīng)當(dāng)?shù)摹?/p>GatewayWorker
它是一個(gè)基于PHP的Socket應(yīng)用框架。Vue.js
進(jìn)行一些前端渲染堪嫂，與頁(yè)面的控制偎箫。
ThinkPHP集成GatewayWorker需要做些額外的操作，不清楚的請(qǐng)看我另外的一篇文章皆串。
Index控制器
<?php
namespace app\index\controller;
use think\Controller;
use think\Request;
class Index extends Controller
{
/**
* 登錄頁(yè)面
* @return [type] [description]
*/
public function login()
{
return $this->fetch('login');
}
/**
* 授權(quán)頁(yè)面
* @return [type] [description]
*/
public function auth()
{
// 此頁(yè)面應(yīng)該要驗(yàn)證客戶端是否已登錄
// 拿到待授權(quán)頁(yè)面的client_id
$client_id = $this->request->param('client_id');
if (empty($client_id)) {
return $this->error('客戶端ID不存在');
}
return $this->fetch('auth', ['client_id' => $client_id]);
}
/**
* 生成二維碼
* @return [type] [description]
*/
public function qrcode()
{
// 引入phpqrcode.php
include APP_PATH . 'extra' . DS . 'phpqrcode' . DS . 'phpqrcode.php';
$data = $this->request->param('data');
\QRcode::png($data, false, 'L', 4);
header('Content-Type:image/png');
exit();
}
}
登錄頁(yè)面 login.html
<!DOCTYPE html>
<html>
<head>
<title>掃碼登錄</title>
<style type="text/css">
.main {
width: 500px;
margin:50px auto;
}
.main .qrcode {
width: 166px;
margin:10px auto;
}
.main .tips {
text-align: center;
font-size: 14px;
}
.main .qrcode img {
border: 1px solid #eaeaea;
width: 164px;
height: 164px;
}
</style>
</head>
<body>
<div class="main" id="app">
<div class="qrcode">
<img v-bind:src="qrcode" v-if="client_id != null" alt="二維碼">
</div>
<div class="tips">
{{ tips }}
</div>
</div>
<script type="text/javascript" src="/static/js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
ws: null,
client_id: null,
qrcode: '/index/index/qrcode?data=load',
tips: '獲取二維碼中',
},
methods:{
open: function (evt) {
this.tips = '請(qǐng)掃碼來(lái)登錄'
},
close: function (evt) {
this.tips = '服務(wù)器錯(cuò)誤'
},
message: function (evt) {
console.log(evt)
try {
var data = JSON.parse(evt.data)
} catch (e) {
this.tips = '服務(wù)器響應(yīng)錯(cuò)誤'
return
}
switch (data.type) {
// 獲取client_id
case 'client_id':
this.client_id = data.client_id
break;
case 'scaned':
this.tips = '已掃碼淹办，請(qǐng)確認(rèn)'
break;
case 'auth':
this.tips = data.token
// 這里用Token進(jìn)行登錄服務(wù)器
break;
}
}
},
watch: {
client_id: function () {
var url = 'http://localhost:8129/index/index/auth?client_id=' + this.client_id
this.qrcode = '/index/index/qrcode?data=' + encodeURI(url)
}
},
created: function () {
this.ws = new WebSocket('ws://127.0.0.1:5678')
if (this.ws != null) {
this.ws.onopen = this.open
this.ws.onmessage = this.message
this.ws.onclose = this.close
}
}
})
</script>
</body>
</html>
預(yù)覽：
登錄頁(yè)面
授權(quán)頁(yè)面 auth.html
<!DOCTYPE html>
<html>
<head>
<title>確認(rèn)登錄</title>
<style type="text/css">
.main {
width: 500px;
margin:50px auto;
}
.main .button {
text-align: center;
margin-top: 20px;
}
.main .tips {
text-align: center;
font-size: 14px;
}
.main .qrcode img {
border: 1px solid #eaeaea;
width: 164px;
height: 164px;
}
</style>
</head>
<body>
<div class="main" id="app">
<div class="tips">
{{ tips }}
</div>
<div class="button">
<button v-on:click="auth">確認(rèn)登錄</button>
</div>
</div>
<script type="text/javascript" src="/static/js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
ws: null,
client_id: '{$client_id}',
qrcode: '/index/index/qrcode?data=load',
tips: '獲取權(quán)限中',
},
methods:{
open: function (evt) {
this.ws.send(JSON.stringify({
type: 'scan',
client_id: this.client_id
}))
this.tips = '請(qǐng)確認(rèn)登錄'
},
close: function (evt) {
this.tips = '服務(wù)器響應(yīng)錯(cuò)誤'
},
message: function (evt) {
console.log(evt)
try {
var data = JSON.parse(evt.data)
} catch (e) {
this.tips = '服務(wù)器錯(cuò)誤'
return
}
switch (data.type) {
case 'used':
this.tips = '二維碼已失效'
break;
}
},
auth: function () {
// 這里來(lái)獲取服務(wù)器Token
this.ws.send(JSON.stringify({
type: 'auth',
token: 'MTIzMTIzMTIzMTI0MnIzNDNyNDNyZzh1aWozNHIzOTJ1ZWk='
}))
}
},
watch: {
client_id: function () {
var url = 'http://localhost:8129/index/index/auth?client_id=' + this.client_id
this.qrcode = '/index/index/qrcode?data=' + encodeURI(url)
}
},
created: function () {
this.ws = new WebSocket('ws://127.0.0.1:5678')
if (this.ws != null) {
this.ws.onopen = this.open
this.ws.onmessage = this.message
this.ws.onclose = this.close
}
}
})
</script>
</body>
</html>
預(yù)覽：
授權(quán)頁(yè)面
Socket事件處理類
<?php
namespace app\push\controller;
use GatewayWorker\Lib\Gateway;
class Events
{
/**
* 有消息時(shí)
* @param integer $client_id 連接的客戶端
* @param mixed $message
* @return void
*/
public static function onMessage($client_id, $message)
{
try {
$data = json_decode($message, true);
if (empty($data) || empty($data['type'])) {
return;
}
} catch (\Exception $e) {
return;
}
// 處理消息
switch ($data['type']) {
// 客戶端掃碼
case 'scan':
if (!empty($data['client_id'])) {
$_SESSION['auth_client_id'] = $data['client_id'];
Gateway::sendToClient($data['client_id'], json_encode([
'type' => 'scaned',
]));
}
break;
// 客戶端授權(quán)
case 'auth':
$auth_client_id = $_SESSION['auth_client_id'];
if (!empty($auth_client_id) && !empty($data['token'])) {
Gateway::sendToClient($auth_client_id, json_encode([
'type' => 'auth',
'token' => $data['token'],
]));
// 授權(quán)后直接關(guān)閉客戶端連接
Gateway::closeClient($client_id);
}
break;
default:
# code...
break;
}
}
/**
* 當(dāng)用戶連接時(shí)觸發(fā)的方法
* @param integer $client_id 連接的客戶端
* @return void
*/
public static function onConnect($client_id)
{
// 連接時(shí)將client_id發(fā)給客戶端
Gateway::sendToClient($client_id, json_encode(['client_id' => $client_id, 'type' => 'client_id']));
}
/**
* 當(dāng)用戶斷開連接時(shí)觸發(fā)的方法
* @param integer $client_id 斷開連接的客戶端
* @return void
*/
public static function onClose($client_id)
{
// Gateway::sendToAll("client[$client_id] logout\n");
}
/**
* 當(dāng)進(jìn)程啟動(dòng)時(shí)
* @param integer $businessWorker 進(jìn)程實(shí)例
*/
public static function onWorkerStart($businessWorker)
{
echo "WorkerStart\n";
}
/**
* 當(dāng)進(jìn)程關(guān)閉時(shí)
* @param integer $businessWorker 進(jìn)程實(shí)例
*/
public static function onWorkerStop($businessWorker)
{
echo "WorkerStop\n";
}
}
有問(wèn)題？
在學(xué)習(xí)的過(guò)程中有問(wèn)題恶复？請(qǐng)直接在評(píng)論區(qū)回復(fù)怜森。
本項(xiàng)目GIT：https://git.coding.net/xtype/qrcode_login.git
