随着移动互联网的普及,智能手机的使用频率非常高,通过手机扫码实现网站登录的场景应用非常多,本文介绍如何同微信公众号的对接开发,而不是微信开放平台,实现手机微信扫码登录。
集成开发平台流程
集成微信登录的时候,一般情况下的操作流程如下:
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('https://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; }
扫码登录实例
扫码登录过程实例如下图。