微信扫码登录目前有两种方式:
1:在微信作用域执行 ,就是条一个新页面
前端点击一个按钮,请求后端接口条微信作用域
后端php代码如下:
$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; //返回页面
最终跳转页面如下:
2:内嵌js,在当前页面显示登录二维码
第一种操作实现起来比较简单,但是个人感觉用户体验稍微差一点。
最好还是在当前页面就是显示微信登录的二维码,直接扫描就好。
微信也为我们提供了这种方式。
(1):引入js
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/jquery.min.js"></script> <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
(2):html部分
(3):js示例
注意其中href里指向的css文件必须放在https协议下才能引用的到,大体上不需改变默认样式,浪费脑细胞,可以针对div 来改变二维码的大小和位置,里边是内嵌一个iframe
整理的实现逻辑如下图所示:
微信的二维码嵌入在一个iframe中,微信扫码成功,手机点击确定后,回调地址接收到微信给我们的参数code,这里微信使用的是get传参,因此我们只需要在回调地址的页面中获取当前页面的URL中的code参数传给上一层(父级),上一层接收到code参数再请求后端接口执行登录逻辑即可。
回调地址:
PHP回调代码:(上边的两种扫码方式都可用)