检测后端关闭window.open的窗口刷新页面

友儿

June 9, 2021

2058 views

4 comments

2007 words

PHP 前端

`欢迎来到友儿の博客`

`以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>");
           }
       }
    }