微信扫描自定义二维码关注公众号并登录(二)移动端/微信端的设计与实现

上篇介绍了《微信扫描自定义二维码关注公众号并登录(一)PC端网站的设计与实现》   

很多情况下我们的网上是响应式的,如果用户在移动端访问或者微信里面访问,该如何实现微信扫码关注公众号并登录!?  这是个好问题。

PC端用户扫带参数的码,微信打开的是公众号,是不是还有回退返回打开页面!? 这样基本是不可以的,当用户离开关闭页面时,websocket 就关闭了,不会再收到消息; 如轮询也是页面关闭,js就不再执行。那我们就要另想解决办法。

当我们扫码关注公众号登录时,不管用户之前是否关注过公众号,我们的 服务都会给用户微信发一条消息,这里可不可给顺带用户发一个登录链接,用户收到消息点击链接完成登录??? 答案是,当然可以!

这里首先我们网站在移动端访问时,要判断是不是移动端访问,或者微信访问。

这里我们js 已经实现 , 移动端访问,不会使用websocket。

https://love.daquexing.com/theme/default/js/modules/authc.js

var from ='p';
    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        from ='m';
        if((/MicroMessenger/i).test(navigator.userAgent)){
          // 微信浏览器
            $('#hi_message').html('请长按图片,识别图中二维码登录');
        }
        $('#hi_message').show();
    } 
    var websocket = null;
    var Authc = {
        isAuthced: function () {
            return (typeof(window.app.LOGIN_TOKEN) != 'undefined' && window.app.LOGIN_TOKEN.length > 0);
        },
        showLogin : function () {
            var that = this;
             // 获取二维码链接
            jQuery.get(app.base + '/oauth2/qrcode?f='+from,  function (ret) {
                if (ret && ret.code == 0) {
                   // 给二维码赋值 和 timestamp
                    $('#qrcode').attr("src",qrcodeurl+ret.data.ticket) ;
                    $('#timestamp').val(ret.data.timestamp) ;
                    if (from =='p'){
                    // 建立socket
                     that.initWebSocket(ret.data.timestamp );
                     // 模式框 关闭的时候 关闭socket
                    $('#login_alert').on('hidden.bs.modal', function () {
                            that.closeWebSocket();
                     });
                    }
                    
                    
                } else {
                    $('#ajax_login_message').text(ret.message).show();
                }
            });


            $('#login_alert').modal();

并且我们在获取二维码链接的时候,带了一个参数f,区分是移动端还是pc端, (此处不考虑用户任务修改参数)。这样针对移动端和PC端生成不同的timestamp 参数,当用户扫码关注后,公众平台会给我们后台服务发送消息和用户信息,这里判断返回的timestamp 参数何种类型,如果是移动端,则在通知的消息里添加登录逻辑的链接。

if (timestamp.startsWith("m")) {
    loginStr="\n \n" +
            "==《大确幸网站》==\n" +
            "》》》点击 <a href=\""+website+"/oauth2/login?username="+userWxInfo.getNickname()+"&timestamp="+timestamp+"\">完成登录</a>";
}else{
    // socket 通知客户端
    JSONObject object = JSONObject.fromObject(userWxInfo);
    object.put("equipmentType", timestamp);
    //调用socket进行通信
    this.logger.info("调用socket进行通信 object: " + object.toString());
    webSocketController.onMessage(object.toString(), null);
}

实现效果如下:

 

!!!好了,移动端(微信里)微信扫码关注公众号登录基本就实现了。 重点是前端判断用户访问来源是移动端还是PC,生成不同类型timestamp参数,从而实现登录。

最后,希望本文对你有帮助,欢迎在微信里扫码体验一下

https://love.daquexing.com/login

如果你还有其他疑问,可以加我微信咨询