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

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

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

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

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

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

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

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

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

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

公眾號掃碼登錄對接條件

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

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

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

掃碼登錄的處理過程

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

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

實操：用戶PC瀏覽器端的處理

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

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

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

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

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

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

socket_io.emit('login', uid);

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

// 后端推送來消息時
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){
/* 點擊取消按鈕 */

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



}else if(msg.code == 3){
/* 點擊成功按鈕 */
$("#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ù)時
socket_io.on('update_online_count', function(online_stat){

});

});
</script>

實操：用戶手機端（微信中）的處理

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

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

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

掃碼登錄實例

掃碼登錄過程實例如下圖。