update: 二维码登录例子更新

This commit is contained in:
binaryify 2022-04-06 16:55:12 +08:00
parent 22fbe0e3ed
commit 81a218a2b1

View File

@ -1,66 +1,70 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh"> <html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>二维码登录</title>
</head>
<body> <head>
<img id="qrImg" /> <meta charset="UTF-8" />
<div id="info" class="info"></div> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js <title>二维码登录</title>
</head>
<body>
<img id="qrImg" />
<div id="info" class="info"></div>
<script src="https://cdn.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js
"></script> "></script>
<script> <script>
async function checkStatus(key) { async function checkStatus(key) {
const res = await axios({ const res = await axios({
url: `/login/qr/check?key=${key}&timerstamp=${Date.now()}`, url: `/login/qr/check?key=${key}&timerstamp=${Date.now()}`,
withCredentials: true, //关键 })
}) return res.data
return res.data }
} async function getLoginStatus(cookie = '') {
async function getLoginStatus() { const res = await axios({
const res = await axios({ url: `/login/status?timerstamp=${Date.now()}`,
url: `/login/status?timerstamp=${Date.now()}`, method: 'post',
withCredentials: true, //关键 data: {
}) cookie,
document.querySelector('#info').innerText = JSON.stringify(res.data, null, 2) },
} })
async function login() { document.querySelector('#info').innerText = JSON.stringify(res.data, null, 2)
let timer }
let timestamp = Date.now() async function login() {
this.getLoginStatus() let timer
const res = await axios({ let timestamp = Date.now()
url: `/login/qr/key?timerstamp=${Date.now()}`, const cookie = localStorage.getItem('cookie')
withCredentials: true, //关键 this.getLoginStatus(cookie)
}) const res = await axios({
const key = res.data.data.unikey url: `/login/qr/key?timerstamp=${Date.now()}`,
const res2 = await axios({ })
url: `/login/qr/create?key=${key}&qrimg=true&timerstamp=${Date.now()}`, const key = res.data.data.unikey
withCredentials: true, //关键 const res2 = await axios({
}) url: `/login/qr/create?key=${key}&qrimg=true&timerstamp=${Date.now()}`,
document.querySelector('#qrImg').src = res2.data.data.qrimg })
document.querySelector('#qrImg').src = res2.data.data.qrimg
timer = setInterval(async () => { timer = setInterval(async () => {
const statusRes = await this.checkStatus(key) const statusRes = await this.checkStatus(key)
if (statusRes.code === 800) { if (statusRes.code === 800) {
alert('二维码已过期,请重新获取') alert('二维码已过期,请重新获取')
clearInterval(timer) clearInterval(timer)
}
if (statusRes.code === 803) {
// 这一步会返回cookie
clearInterval(timer)
alert('授权登录成功')
await this.getLoginStatus()
}
}, 3000)
}
login()
</script>
<style>
.info{
white-space: pre;
} }
</style> if (statusRes.code === 803) {
</body> // 这一步会返回cookie
clearInterval(timer)
alert('授权登录成功')
await this.getLoginStatus(statusRes.cookie)
localStorage.setItem('cookie', statusRes.cookie)
}
}, 3000)
}
login()
</script>
<style>
.info {
white-space: pre;
}
</style>
</body>
</html> </html>