随着移动互联网的普及，智能手机的使用频率非常高，通过手机扫码实现网站登录的场景应用非常多，本文介绍如何同微信公众号的对接开发，而不是微信开放平台，实现手机微信扫码登录。
集成开发平台流程
集成微信登录的时候，一般情况下的操作流程如下：
1、先到微信开放平台申请开发者账号；
2、账号申请成功之后，将PC网站的域名和网站的简介以及备案号等信息提交到开放平台审核；
3、审核通过之后，分配Appid和Secret值，根据获取的开发者权限做集成对接。
集成开发的局限性
这其中的局限性，主要还是来自微信开放平台的审核，以及对接开发的成本，具体如下：
1、网站没有备案号。有一些境外的网站以及一些外贸网站，需要集成Wechat登录，但是想要申请开发者权限几乎是不可行的。
2、从代码维护的角度来说，既然已经完成了微信公众号的集成开发，如果再维护一套开放平台的对接代码，既容易出bug，也不利于降低维护成本。
公众号扫码登录对接条件
绕过开放平台，做微信扫码的集成登录，需要具备以下条件：
1、有认证过的微信公众号，而且必须是认证服务号。这是因为只有服务号才可以生成带参数的临时二维码。通过带参二维码可以实现识别每次扫码的唯一性，因为是临时二维码，可以设置5分钟，10分钟或者30分钟后过期，这样也不会占用带参二维码的数量资源。
2、另一个需要的技术准备是Web Socket服务器。为什么需要这个呢？这是为了能够将扫码的结果即时显示在PC网页端。如果没有Web Socket服务器，也可以通过JavaScript发送Ajax请求轮询查询来实现页面的刷新，频率比如间隔1~3秒。这样做的缺点在于，既浪费用户浏览器的资源，又浪费服务器的资源，同时还占用网络带宽。
扫码登录的处理过程
通过下面这张图，我们来展示一下PC端扫码登录的处理过程。
这是一张完整的扫码登录过程的流程图，不仅仅适用于说明手机微信扫码登录过程，通过其他手机APP去做扫码开发同样可以参考和使用。
实操：用户PC浏览器端的处理
PC的网页被打开后，首先显示唯一的二维码，同时，浏览器与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.abot.cn:8888');
var socket_io = io('https://www.abot.cn', {path: '/socketio/'});
// uid可以是自己网站的用户id，以便针对uid推送以及统计在线人数
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);
}
});
// 后端推送来在线数据时
socket_io.on('update_online_count', function(online_stat){
});
});
</script>
实操：用户手机端（微信中）的处理
手机微信端扫码成功之后，会跳转到一个指定网页，这分成两种情况：
1、如果扫描的认证服务号的带参二维码，会首先推送一条消息给微信粉丝，消息中包含这个指定网页的链接，并提示粉丝点击。
2、如果是自家的APP扫码登录，则可以直接跳转到网页。
//如果不是从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 这个参数，出现这种情况，是从微信中打开链接进来的。
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;
}
扫码登录实例
扫码登录过程实例如下图。
