oauth授权登入在授权成功后如何自动关闭窗口并刷新源网页?

现在的各大社交网站都支持第三方登入,比如QQ,微博等,但要做成那种点击使用QQ登入后弹出一个子窗口的授权页,用户确认授权后就会授权成功,成功后子窗口就自动关闭了,并且原来的网页也自动刷新了,子窗口是如何在授权成功后就自动关闭的呢,是不是需要父级窗口去后台查询是否已经授权成功,成功就关闭子窗口,还是子窗口在授权成功后接到后台返回的消息就自己关闭自己并且通知父级窗口刷新页面,因为我是写后台的,对于前端也不是很了解,目前是授权完全成功的,就差这个流程了,能有关键代码就更加感激不尽了0.0

阅读 2.6k
评论 2017-04-07 提问
    5 个回答
    牧毅
    • 4.8k

    LZ主要想问前端怎么做吧?作为一个写后台的,对后台的处理你应该比较熟悉了,我就不多说了。

    前端主要在于两点:

    1. 要保证打开的窗口可控(可以关闭)

    2. 要能收到授权成功的通知/事件

    第一点而言,很简单 window.open() 打开窗口的时候函数返回值保留下来。请参考 window.open on MDN.

    而第二点,就需要前后台合作了,一般可以通过轮询、长连接拉取、EventSource甚至WebSocket等方式来搞。由于登录功能不是一个长时间跑的业务,一般轮询就可以了。

    前端伪代码:

    $('#QQ登录按钮ID').on('click', function(){
        // 打开小窗,让用户登录,并保留窗口对象以备关闭
        var authWin = window.open('你的授权的页面URL', '_blank', 'width=600,height=400,menubar=no,toolbar=no,location=no')
        
        // 轮询是否授权成功,授权成功后关闭小窗,并刷新页面
        var timerId = setInterval(function(){
            $.getJSON("你的授权是否成功的轮询地址?相关参数", function(response){
                if (response.授权成功){
                    clearInterval(timerId)
                    authWin.close()
                    window.location.reload()
                }
            })
        }, 500)
    })
    
    
    评论 赞赏 2017-04-08
      yc8332
      • 1.1k

      源网页有请求到后端,检测登录状态。。。和那些扫码登录一个原理,会一直去请求后端,或是保持长连接

      评论 赞赏 2017-04-07

        授权页一般没法关闭的吧。。。因为那是授权方的页面,除非对方支持。。。
        所以如果是要跳转授权页的话,没办法自动关闭。

        评论 赞赏 2017-04-07
          StormerZ
          • 2.3k

          查查有没有 回调事件 或者 回调的参数,也就是申请授权时候给了第三方,授权完毕后第三方会调用这个URL,这样就返回你指定的页面了。

          评论 赞赏 2017-04-07
            万兵
            • 2
            • 新人请关照

            楼主怎么解决的,我也遇到同样的问题了!~

            评论 赞赏 2017-06-16
              撰写回答

              登录后参与交流、获取后续更新提醒