微信网页扫码登录的实现

为了让用户登录网站的门槛更低，微信扫一扫登录变得越来越广泛，所以最近加紧赶制的项目中有用到这个功能，此篇文字的出发点基于微信开放平台已经配置好域名（80端口）并且认证成功获得app_id和secret并有权限调用微信的接口。好了，就先谈一谈微信扫码登录的整个流程吧。

第一步，我们必须得把二维码放在页面上显示。首先普及一下二维码是有失效时间以及失效状态的，一旦你扫过一次二维码或者在某段时间内没有扫描页面上的二维码，该二维码就失效了。OK，微信官网给我们提供两种方式来显示二维码：1.后台发请求返回一个新的页面；2.前端js实例化二维码内嵌在自己的页面上，显然第一种比较适合懒的人(因为微信直接返回一个打包好的页面啊有木有，都不用各种css调样式了)，不过在项目中两种都在用，所以就都说明一下。

1.后台发请求获取微信返回的扫码页面

复制代码
$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，

2.内嵌JS显示：

这里就是通过js端实例化一个对象即可，首先在<head>标签内添加如下js文件，

 <script src="http://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文件" });
});
复制代码

注意其中href里指向的css文件必须放在https协议下才能引用的到，不然页面上就是默认样式（显示上是一个比较大的二维码，你无法调节二维码的大小，位置，太痛苦了）。最后部分页面大概长成这样，这里的二维码大概只有140px：

 喜欢笑话的，欢迎访问每日一笑话，http://xiaogouyu.top

posted @ 2019-10-12 18:05  心雨星空  阅读(11009)  评论(3)  编辑  收藏  举报