PHP实现微信扫码登录功能的两种方式总结

官方文档

微信扫码登录目前有两种方式:

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回调代码:(上边的两种扫码方式都可用)