微信实现扫码登录

基本流程：1.用户打开微信-> 2.点击右上角，进行扫码-> 3.用户扫码登录-> 4.跳转回项目自定义登录页面,数据库创建用户数据(针对扫码登录微信用户)

扫码登录

1. 创建一个页面，名称为"code.html",创建一个div在其中  代码如右"<div class="text-center" id="wechatqrlogin"></div> "

2.页面添加自由标注初始化："appid=undefined",
scope: "snsapi_login",
redirect_uri: encodeURIComponent(window.location.origin+"/v/auth/oauth2/verify/wxkf.html"),
state: Math.ceil(Math.random()*1000),
style: "black",
href: window.location.origin+"/css/customwxqr.css"
});
</script>

4.页面后端添加代码块:

polocy操作读取-->变量名为oauth2,true-->插入

自定义代码如下：

    /*INSBEGIN:CUSTOM*/
      function(policy) {
        if (policy && policy.providers && policy.providers.wechatkf) {
          finish_data.appid = policy.providers.wechatkf.appID;
        }
      },
      /*INSEND:CUSTOM*/

4.页面二维码css在static文件夹下的customwxqr.css中,代码如下：

.impowerBox .qrcode {width: 180px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 180px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}

5.将页面发布到外网服务器中

注：1.如果登录过程中二维码扫描后显示为url链接地址，请联系运维修改对应项目配置重新进行测试,

       2.如果页面报错信息显示跨域请求，则修改页面后端代码中:"https" 为 "http"

       3. 动态化微信扫码完成:测试前对应的policy中需要有初始数据，否则会提示undefined错误信息

下图为测试案例：widefw.wware.org/code.html