微信网页扫码登录的实现
2023-03-07 09:45:03 时间
为了让用户登录网站的门槛更低,微信扫一扫登录变得越来越广泛,所以最近加紧赶制的项目中有用到这个功能,此篇文字的出发点基于微信开放平台已经配置好域名(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:
未经允许不得转载:肥猫博客 » 微信网页扫码登录的实现
相关文章
- Windows 11承诺的支持安卓App终于更新了 大神教你如何在国区使用
- HaaS场景式应用学习|阿里云产品精选(十七)
- 重新设计的Windows记事本和Media Player上架
- 移植案例与原理 - XTS子系统之应用兼容性测试套件之二
- 移植案例与原理 - XTS子系统之应用兼容性测试套件之一
- Windows 11今日迎来数个新功能 包括Android应用支持和任务栏改进
- Windows 11设置应用将获重大升级
- 微软 Windows 11 全新现代任务管理器更多曝光功能体验:支持 App 健康、电池健康、新启动项
- HaaS UI基础教学八:JSAPI自动化测试方法
- HaaS UI – 免费开源的轻量级IoT小程序解决方案
- 1 万 Star!基于 Android 平台的开源 Linux 终端模拟器
- HaaS UI小程序解决方案基础教学之一: 快速开始
- 微软筹备Windows 11系统新版本:Win10开始菜单文件夹功能终于回归
- 斗宿-HarmonyOS中APP、组件、组件库的辨析与应用
- 手机在线视频流量对业务速率、小区容量影响分析
- 微软听取用户意见:继续改进Windows 11任务栏 更好用了
- 微软突然暂停Windows 11更新:直言为系统准备更多重磅新功能
- 如何在 Windows 11 中快速安装 Android 原生应用
- 可运行安卓应用:微软正式确认Windows 11更新
- 微软 Windows 10 / 11 月活设备达 14 亿台,90% 财富 500 强企业使用 Teams