在给出具体的实现代码之前,我们先来分析下微信扫码登录的流程。
首先我们必须要把二维码放在页面上显示出来,二维码是有失效时间以及失效状态的,一旦你扫过一次二维码或者在某段时间内没有扫描页面上的二维码,那么这个二维码也就失效了。微信官网给我们提供了两种方式来显示二维码:
一种是后台发请求返回一个新的页面,另一种是前端js实例化二维码内嵌在自己的页面上。
很显然第一种方式比较简单方便,但是在实际的项目中两种方式都会使用到,既然如此我们就把这两种方式都说明一下。
第一种:后台发请求获取微信返回的扫码页面
$redirect_uri="http://你的微信开放平台绑定域名下处理扫码事件的方法"; $redirect_uri=urlencode($redirect_uri);//该回调需要url编码 $appID="你的appid"; $scope="snsapi_login";//写死,微信暂时只支持这个值 //准备向微信发请求 $url = "https://open.weixin.qq.com/connect/qrconnect?appid=" . $appID."&redirect_uri=".$redirect_uri."&response_type=code&scope=".$scope."&state=STATE#wechat_redirect"; //请求返回的结果(实际上是个html的字符串) $result = file_get_contents($url); //替换图片的src才能显示二维码 $result = str_replace("/connect/qrcode/", "https://open.weixin.qq.com/connect/qrcode/", $result); return $result; //返回页面
这样子就会返回一个这样的页面,扫描后调用$redirect_uri
第二种:内嵌JS显示:
这里就是通过js端实例化一个对象即可,首先在<head>标签内添加如下js文件,
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
其次在html中定义一个div包含二维码,
<div id="login_container"></div>
最后在$(document).ready()内进行实例化:
$(document).ready(function() { var obj = new WxLogin ({ id:"login_container",//div的id appid: "你的appid", scope: "snsapi_login",//写死 redirect_uri:encodeURI("你的处理扫码事件的方法") , state: "", style: "black",//二维码黑白风格 href: "https://某个域名下的css文件" }); });
实际案例: