不申请微信开放平台,PC网站集成扫码登录实操

2020年10月20日   2670   4

随着移动互联网的普及,智能手机的使用频率非常高,通过手机扫码实现网站登录的场景应用非常多,本文介绍如何同微信公众号的对接开发,而不是微信开放平台,实现手机微信扫码登录。

随着移动互联网的普及,智能手机的使用频率非常高,通过手机扫码实现网站登录的场景应用非常多,本文介绍如何同微信公众号的对接开发,而不是微信开放平台,实现手机微信扫码登录。

集成开发平台流程

集成微信登录的时候,一般情况下的操作流程如下:

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;
 }

 

扫码登录实例

扫码登录过程实例如下图。

免费手机网站模板 X
小程序在线为您服务!