不申請微信開放平臺(tái)，PC網(wǎng)站集成掃碼登錄實(shí)操

隨著移動(dòng)互聯(lián)網(wǎng)的普及，智能手機(jī)的使用頻率非常高，通過手機(jī)掃碼實(shí)現(xiàn)網(wǎng)站登錄的場景應(yīng)用非常多，本文介紹如何同微信公眾號的對接開發(fā)，而不是微信開放平臺(tái)，實(shí)現(xiàn)手機(jī)微信掃碼登錄。

集成開發(fā)平臺(tái)流程

集成微信登錄的時(shí)候，一般情況下的操作流程如下：

1、先到微信開放平臺(tái)申請開發(fā)者賬號；

2、賬號申請成功之后，將PC網(wǎng)站的域名和網(wǎng)站的簡介以及備案號等信息提交到開放平臺(tái)審核；

3、審核通過之后，分配Appid和Secret值，根據(jù)獲取的開發(fā)者權(quán)限做集成對接。

集成開發(fā)的局限性

這其中的局限性，主要還是來自微信開放平臺(tái)的審核，以及對接開發(fā)的成本，具體如下：

1、網(wǎng)站沒有備案號。有一些境外的網(wǎng)站以及一些外貿(mào)網(wǎng)站，需要集成Wechat登錄，但是想要申請開發(fā)者權(quán)限幾乎是不可行的。

2、從代碼維護(hù)的角度來說，既然已經(jīng)完成了微信公眾號的集成開發(fā)，如果再維護(hù)一套開放平臺(tái)的對接代碼，既容易出bug，也不利于降低維護(hù)成本。

公眾號掃碼登錄對接條件

繞過開放平臺(tái)，做微信掃碼的集成登錄，需要具備以下條件：

1、有認(rèn)證過的微信公眾號，而且必須是認(rèn)證服務(wù)號。這是因?yàn)橹挥蟹?wù)號才可以生成帶參數(shù)的臨時(shí)二維碼。通過帶參二維碼可以實(shí)現(xiàn)識(shí)別每次掃碼的唯一性，因?yàn)槭桥R時(shí)二維碼，可以設(shè)置5分鐘，10分鐘或者30分鐘后過期，這樣也不會(huì)占用帶參二維碼的數(shù)量資源。

2、另一個(gè)需要的技術(shù)準(zhǔn)備是Web Socket服務(wù)器。為什么需要這個(gè)呢？這是為了能夠?qū)叽a的結(jié)果即時(shí)顯示在PC網(wǎng)頁端。如果沒有Web Socket服務(wù)器，也可以通過JavaScript發(fā)送Ajax請求輪詢查詢來實(shí)現(xiàn)頁面的刷新，頻率比如間隔1~3秒。這樣做的缺點(diǎn)在于，既浪費(fèi)用戶瀏覽器的資源，又浪費(fèi)服務(wù)器的資源，同時(shí)還占用網(wǎng)絡(luò)帶寬。

掃碼登錄的處理過程

通過下面這張圖，我們來展示一下PC端掃碼登錄的處理過程。

這是一張完整的掃碼登錄過程的流程圖，不僅僅適用于說明手機(jī)微信掃碼登錄過程，通過其他手機(jī)APP去做掃碼開發(fā)同樣可以參考和使用。

實(shí)操：用戶PC瀏覽器端的處理

PC的網(wǎng)頁被打開后，首先顯示唯一的二維碼，同時(shí)，瀏覽器與Web Socket服務(wù)器建立連接，然后打開Socket的偵聽模式，等待掃碼事件被推送過來。

微信掃碼登錄的 PC端（瀏覽器端）的處理過程的代碼如下：

<script src="https://cdn.bootcss.com/socket.io/1.3.7/socket.io.js"></script>
<script type="text/javascript">
$(function(){

//連接服務(wù)端，workerman.net:2120換成實(shí)際部署web-msg-sender服務(wù)的域名或者ip
//var socket_io = io('http://m.yhowl.cn:8888');
var socket_io = io('http://m.yhowl.cn', {path: '/socketio/'});

// uid可以是自己網(wǎng)站的用戶id，以便針對uid推送以及統(tǒng)計(jì)在線人數(shù)
uid = '{abot:$sessionid}';

// socket連接后以uid登錄
socket_io.on('connect', function(){

socket_io.emit('login', uid);

console.log('login=====>>>>>', uid);
});

// 后端推送來消息時(shí)
socket_io.on('new_msg', function(msg){
console.log('new_msg=====>>>>>', msg);

var msg = JSON.parse(decodeURIComponent(msg));

//提示的文字
var result = msg.result;

if(msg.code == 1){
/* 掃描二維碼成功通知顯示成功的文字 */

$("#yes_qrcode").show();
$("#click_result").text(result);

}else if(msg.code == 2){
/* 點(diǎn)擊取消按鈕 */

$("#click_result").text(result);



}else if(msg.code == 3){
/* 點(diǎn)擊成功按鈕 */
$("#click_result").text(result);
//return;

var supplier_login_data = msg.supplier_login_data;

setTimeout(function(){
var new_url = "{abot::U('')}";

if(new_url.indexOf("?") != -1){
new_url = '&supplier_login_data='+supplier_login_data;
}
else{
new_url = '?supplier_login_data='+supplier_login_data;
}

location.href = new_url;

}, 2000);


}


});

// 后端推送來在線數(shù)據(jù)時(shí)
socket_io.on('update_online_count', function(online_stat){

});

});
</script>

實(shí)操：用戶手機(jī)端（微信中）的處理

手機(jī)微信端掃碼成功之后，會(huì)跳轉(zhuǎn)到一個(gè)指定網(wǎng)頁，這分成兩種情況：

1、如果掃描的認(rèn)證服務(wù)號的帶參二維碼，會(huì)首先推送一條消息給微信粉絲，消息中包含這個(gè)指定網(wǎng)頁的鏈接，并提示粉絲點(diǎn)擊。

2、如果是自家的APP掃碼登錄，則可以直接跳轉(zhuǎn)到網(wǎng)頁。

 //如果不是從APP掃碼過來的，提示去下載APP
 if ($this->_get('oneclicklogin') == '%oneclicklogin%'){
 $jump_to_url = 'https://yanyubao.tseo.cn/app/?id=yanyudianshang';
 $this->show_msg_to_mobile_ui('請使用延譽(yù)電商APP掃碼，點(diǎn)擊前去下載', $jump_to_url);
 
 return;
 }
 
 //如果到這里userid還是不存在，那么應(yīng)該是沒有 oneclicklogin 這個(gè)參數(shù)，出現(xiàn)這種情況，是從微信中打開鏈接進(jìn)來的。
 if($this->__userid == 0){
 if($this->is_it_in_weixin_browser()){
 $this->_is_user_login('請登錄后再掃碼進(jìn)入管理員后臺(tái)');
 return;
 }
 else{
 $jump_to_url = 'https://yanyubao.tseo.cn/app/?id=yanyudianshang';
 $this->show_msg_to_mobile_ui('請使用延譽(yù)電商APP掃碼，點(diǎn)擊前去下載', $jump_to_url);
 }
 
 
 return;
 }

掃碼登錄實(shí)例

掃碼登錄過程實(shí)例如下圖。