如何在弹出窗口中使用 Twitch/Discord/Google 登录,将访问令牌传回网站并让用户登录而无需刷新?

问题描述 投票:0回答:1

所以我想要的是,如果用户单击“使用 Twitch 登录”(或任何其他服务),则会弹出一个新窗口并显示“授权”页面。当用户授权应用程序时,窗口将关闭并将位于重定向 URL 中的访问令牌作为参数传递回网站,并触发一个函数来登录用户,而无需刷新网站。

我使用 Nuxt 和 Express API 服务器。

这是一个具有我想要实现的登录程序的网站:https://mee6.xyz/

reactjs vue.js authentication nuxt.js
1个回答
0
投票

我不熟悉 Nuxt 和 Express API,但我可以解释你需要的任何内容。

您需要的是

create popup window
打开您的授权链接。

成功授权后的弹出窗口会将您重定向到

redirect url
,您可以在其中处理数据并与服务器进行响应。

使用跨源请求,您无法访问您的子弹出窗口,但您可以做的是发送 html 响应,您

close current window (popup) on success
。 以下是您需要执行的操作示例:

JavaScript

let url = 'your authorization link'
let params = 'popup window parameters'
let target = 'authorization target'

window.open(url, target, windowFeatures)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    // Close this window (popup)
    window.close()
</script>
<body>

</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.