简单几步实现网站微信扫码登录微信扫码登录实现原理
最近在做公司的一个项目,通过微信或企业微信扫码登录PC管理后台,替代传统的账号、密码登录。
为了完成这个功能,疯狂百度各种扫码登录的技术文章,能实现微信或企业微信扫码登录的方式可以说有三种:
注册一个微信资源开放平台账号。官方链接是这个https://open.weixin.qq.com/。看网站应用模块即可,开发技术跟微信开发差不多,这种方式只能是微信扫码,不支持企业微信扫码。
为了让用户登录网站的门槛更低,微信扫一扫登录变得越来越广泛,所以最近加紧赶制的项目中有用到这个功能,此篇文字的出发点基于微信开放平台已经配置好域名(80端口)并且认证成功获得app_id和secret并有权限调用微信的接口。好了,就先谈一谈微信扫码登录的整个流程吧。
实现客户端扫码登录分为下列四步:
-
Web页面生成二维码
-
生成的二维码中必须要包含一个用于唯一标识用户的数据,这个唯一标识是为了确保将客户端(手机)与web网页绑定,避免其他人登录了你的账号。在这里可以生成以个随机的guid作为唯一标识。
-
生成二维码,大家可以使用jQuery qrcode插件 (http://www.ideawu.net/blog/archives/795.html)。
-
客户端扫描二维码
-
客户端在扫描二维码之前需要验证是否已经登录了账号,如果没有登录,则需要提示用户先登录。如果已经登录了,那么在扫描了二维码后应读取唯一标识guid并将sessionID一并发送给后台服务器(例如Java)。
-
通过GoEasy服务器主动告知web网页登录成功
-
后台服务器接收到请求后通过GoEasy将sessionID主动推送给拥有相同唯一标识的web网页。
-
GoEasy后台实时推送到web :http://www.cnblogs.com/jishaochengduo/articles/5552645.html
-
Java实现二维码扫码登录:http://goeasy.io/www/demo/qrcodelogin
-
4. Web浏览器设置登录的相关cookie信息
-
Web浏览器收到消息中包括了登录相关的sessionID,浏览器通过javascript代码就可以把cookie加入到浏览器中,这是浏览器就完成了登录。
第一步,我们必须得把二维码放在页面上显示。首先普及一下二维码是有失效时间以及失效状态的,一旦你扫过一次二维码或者在某段时间内没有扫描页面上的二维码,该二维码就失效了。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:
好了,二维码出现在页面上了,接下来我们就要大概的讲讲扫码的逻辑了,整个流程大概分为5步:
走完这五步你就拿到扫码用户的所有信息了,之后再写上自己需要的的代码逻辑即可(如重定向或者登陆),在代码里的表现形式如下:
//回调 public function codeinfo() { $code = $_GET["code"]; $appid = "你的appid"; $secret = "你的secret"; if (!empty($code)) //有code { //通过code获得 access_token + openid $url="https://api.weixin.qq.com/sns/oauth2/access_token?appid=" . $appid . "&secret=" . $secret . "&code=" . $code . "&grant_type=authorization_code"; $jsonResult = file_get_contents($url); $resultArray = json_decode($jsonResult, true); $access_token = $resultArray["access_token"]; $openid = $resultArray["openid"]; //通过access_token + openid 获得用户所有信息,结果全部存储在$infoArray里,后面再写自己的代码逻辑 $infoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=" . $access_token . "&openid=" . $openid; $infoResult = file_get_contents($infoUrl); $infoArray = json_decode($infoResult, true); } }
其实写完代码之后就会知道整个流程大概是怎么样的,本质上就是多个微信接口的配合调用,OK,记录Over!
摘自:https://www.cnblogs.com/martianShu/p/5947170.html
点击链接加入群聊三群:751529538
点击链接加入群聊二群:376877156
点击链接加入群聊【路由器交流群:622891808已满】
本站附件分享,如果附件失效,可以去找找看
饿了么红包