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

发布于 2022-09-05 01:54:43 字数 250 浏览 18 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

猥︴琐丶欲为 2022-09-12 01:54:44

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

如梦初醒的夏天 2022-09-12 01:54:44

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

柏拉图鍀咏恒 2022-09-12 01:54:44

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

差↓一点笑了 2022-09-12 01:54:44

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

把时间冻结 2022-09-12 01:54:44

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文