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

问题描述

问 题

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

解决方案

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)
})

这篇关于javascript - oauth授权登入在授权成功后如何自动关闭窗口并刷新源网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！