feat:完成微信开放平台扫码登录
This commit is contained in:
parent
428be99b77
commit
46d3cb715b
@ -1,43 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
@ -1,188 +0,0 @@
|
||||
<template>
|
||||
<div class="wx-login-container">
|
||||
<div class="qrcode-container">
|
||||
<el-image
|
||||
v-loading="loading"
|
||||
:src="qrcodeUrl"
|
||||
fit="contain"
|
||||
class="qrcode-image"
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-error">二维码加载失败</div>
|
||||
</template>
|
||||
</el-image>
|
||||
|
||||
<div class="status-message">
|
||||
<el-alert
|
||||
v-if="errorMessage"
|
||||
:title="errorMessage"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
<div v-else-if="!loading" class="scan-tip">
|
||||
请使用微信扫一扫登录
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-skeleton :rows="3" animated v-if="loading" />
|
||||
</div>
|
||||
|
||||
<div class="action-area">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="refreshQrcode"
|
||||
:loading="refreshing"
|
||||
>
|
||||
刷新二维码
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import axios from 'axios'
|
||||
|
||||
const props = defineProps({
|
||||
// 微信公众号appid
|
||||
appid: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
// 微信公众号appsecret
|
||||
appsecret: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
|
||||
const loading = ref(true)
|
||||
const refreshing = ref(false)
|
||||
const qrcodeUrl = ref('')
|
||||
const errorMessage = ref('')
|
||||
let pollTimer = null
|
||||
let ticket = ref('')
|
||||
|
||||
// 获取微信接口访问令牌
|
||||
const getAccessToken = async () => {
|
||||
try {
|
||||
const response = await axios.get(`/api/wechat/token?appid=${props.appid}&secret=${props.appsecret}`)
|
||||
return response.data.access_token
|
||||
} catch (error) {
|
||||
throw new Error('获取访问令牌失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 生成临时二维码
|
||||
const generateQrcode = async (access_token) => {
|
||||
try {
|
||||
const response = await axios.post(`/api/wechat/qrcode/create?access_token=${access_token}`, {
|
||||
expire_seconds: 600,
|
||||
action_name: 'QR_STR_SCENE',
|
||||
action_info: {
|
||||
scene: {
|
||||
scene_str: 'login_' + Date.now()
|
||||
}
|
||||
}
|
||||
})
|
||||
return response.data
|
||||
} catch (error) {
|
||||
throw new Error('生成二维码失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 获取二维码
|
||||
const fetchQrcode = async () => {
|
||||
try {
|
||||
errorMessage.value = ''
|
||||
loading.value = true
|
||||
|
||||
// 获取访问令牌
|
||||
const access_token = await getAccessToken()
|
||||
|
||||
// 生成临时二维码
|
||||
const qrcodeData = await generateQrcode(access_token)
|
||||
ticket.value = qrcodeData.ticket
|
||||
qrcodeUrl.value = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${qrcodeData.ticket}`
|
||||
|
||||
// 开始轮询检查扫码状态
|
||||
startPolling()
|
||||
} catch (error) {
|
||||
errorMessage.value = error.message || '二维码获取失败，请重试'
|
||||
} finally {
|
||||
loading.value = false
|
||||
refreshing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 开始轮询检查状态
|
||||
const startPolling = () => {
|
||||
clearInterval(pollTimer)
|
||||
pollTimer = setInterval(async () => {
|
||||
try {
|
||||
const response = await axios.get(`/api/wechat/scan/check?ticket=${ticket.value}`)
|
||||
const data = response.data
|
||||
|
||||
if (data.status === 'success') {
|
||||
clearInterval(pollTimer)
|
||||
emit('success', data)
|
||||
} else if (data.status === 'expired') {
|
||||
errorMessage.value = '二维码已过期，请刷新'
|
||||
clearInterval(pollTimer)
|
||||
}
|
||||
} catch (error) {
|
||||
errorMessage.value = '网络异常，请检查连接'
|
||||
clearInterval(pollTimer)
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
// 刷新二维码
|
||||
const refreshQrcode = () => {
|
||||
refreshing.value = true
|
||||
fetchQrcode()
|
||||
}
|
||||
|
||||
onMounted(fetchQrcode)
|
||||
onBeforeUnmount(() => clearInterval(pollTimer))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wx-login-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qrcode-container {
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.qrcode-image {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.scan-tip {
|
||||
color: #666;
|
||||
margin: 15px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.action-area {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.image-error {
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user