检测后端关闭window.open的窗口刷新页面
关闭 页面 检测 窗口 刷新 open window
2023-06-13 09:12:24 时间
欢迎来到友儿の博客
以qq调用第三方api登录为例子来说明
- 前端点击事件
- 根据app_id拼接授权地址并且跳转至授权页面
- 根据填写和请求的一致回调地址获取code和state
- 把code和state传递给第三方接口返回登录数据存储并赋值给页面
- 关闭浏览器窗口
- 检测刷新页面
- 显示登陆数据
前端点击授权窗口代码
<div onclick="toLogin();"></div>
<script>
function toLogin()
{
//以下为按钮点击事件的逻辑。注意这里要重新打开窗口
//否则后面跳转到QQ登录,授权页面时会直接缩小当前浏览器的窗口,而不是打开新窗口
var mywin = window.open("https://xxxx.com/api/v1/qqlogin","TencentLogin", "width=650,height=500,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1,top=400,left=400");
var loop = setInterval(function() {
if(mywin.closed) {
clearInterval(loop);
parent.location.reload();
}
},300);
}
</script>
后端处理代码
public function qqlogin()
{
$app_id = "xxxxxx";
//【成功授权】后的回调地址,即此地址在腾讯的信息中有储存
$my_url = "https://xxxx.com/api/v1/qqcallback";
//state参数用于防止CSRF攻击,成功授权后回调时会原样带回
$_SESSION['qq_state'] = md5(uniqid(rand(), TRUE));
//拼接URL
$dialog_url = "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=" . $app_id . "&redirect_uri=" . urlencode($my_url) . "&state=" . $_SESSION['qq_state'];
echo("<script>top.location.href='" . $dialog_url . "'</script>");
}
public function qqcallback()
{
if (isset($_GET['code']) && isset($_GET['state'])) {
$url = 'http://xxxxx.com/api/v2/login';
$data = [
'third_code' => $_GET['code'],
'state' => $_GET['state'],
//其他参数
];
$res = curl($url,'post', $data);
$data = json_decode($res, true);
if (isset($data['code']) && $data['code'] == 200) {
setcookie('user_info', json_encode($data['data']), 0, '/', '.xxxx.com');
echo("<script>window.opener = null; window.open('', '_self'); window.close();</script>");
}
}
}
学废了吗~~~
相关文章
- cos上传文件报错:ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接。
- outlook关闭最小化
- EasyCVR平台视频播放页面关闭后为何还有保活信息?播放器未注销
- 微信企业号开发:企业支付成功后关闭交易页面问题详解手机开发
- Linux下禁用防火墙的步骤(关闭linux的防火墙)
- 指令操作:在Linux上关闭防火墙(关闭linux的防火墙)
- 关于Linux系统中关闭防火墙的方法(关闭linux的防火墙)
- 关闭Linux防火墙的指南(关闭linux的防火墙)
- 一步搞定:Linux关闭服务器的简单命令(linux关闭服务器命令)
- 策略如何使用Oracle禁用密码策略(oracle 关闭密码)
- 战出新时代bat关闭Oracle(bat 关闭oracle)
- iOS 15支持手动关闭夜景模式 拍照算法大升级!
- Chrome 测试标签页缓存功能,能瞬间重启关闭的页面
- 下载完成后页面不自动关闭的方法
- js页面关闭前的出现提示的实现代码
- 用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
- jsp页面中窗口关闭,退出的方式分享
- JS关闭窗口与JS关闭页面的几种方法小结