快捷導(dǎo)航

Vue3中實(shí)現(xiàn)微信掃碼登錄的步驟和代碼示例

更新時(shí)間：2024年07月16日 08:48:48 作者：廣島原子

在 Vue 3 中實(shí)現(xiàn)微信掃碼登錄,涉及到前端生成二維碼、監(jiān)聽(tīng)微信回調(diào)以及與后端的交互,本文給大家介紹了一個(gè)詳細(xì)的實(shí)現(xiàn)步驟和代碼示例,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

實(shí)現(xiàn)步驟

步驟 1: 準(zhǔn)備工作

注冊(cè)微信開(kāi)放平臺(tái)應(yīng)用，獲取 AppID 和 AppSecret。
配置微信開(kāi)放平臺(tái)中的回調(diào) URL。

步驟 2: 安裝必要的依賴

安裝 qrcode 庫(kù)用于生成二維碼。
安裝 axios 或其他 HTTP 客戶端庫(kù)用于與后端通信。

bash
npm install qrcode axios

步驟 3: 編寫(xiě)組件代碼

創(chuàng)建一個(gè) Vue 3 組件，用于顯示二維碼和處理登錄邏輯。

vue<template>
  <div v-if="!isAuthenticated">
    <h2>請(qǐng)使用微信掃碼登錄</h2>
    <div id="qrcode"></div>
  </div>
</template>
?
<script setup>
import { ref, onMounted } from 'vue';
import QRCode from 'qrcode';
import axios from 'axios';
?
const isAuthenticated = ref(false);
?
// 生成微信登錄的二維碼
const generateQRCode = async () => {
  const loginUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${appId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`;
  await QRCode.toElement(document.getElementById('qrcode'), { text: loginUrl, width: 256 });
};
?
// 處理微信登錄回調(diào)
const handleLoginCallback = async (code) => {
  try {
    const response = await axios.post('/api/login/wechat', { code });
    if (response.data && response.data.token) {
      localStorage.setItem('token', response.data.token);
      isAuthenticated.value = true;
    }
  } catch (error) {
    console.error('Error during WeChat login:', error);
  }
};
?
// 初始化
onMounted(() => {
  generateQRCode();
  // 監(jiān)聽(tīng) URL 中的 code 參數(shù)
  if (window.location.hash.includes('code=')) {
    const code = window.location.hash.split('code=')[1].split('&')[0];
    handleLoginCallback(code);
  }
});
?
// 從環(huán)境變量或配置文件中獲取 AppID 和 Redirect URI
const appId = process.env.VUE_APP_WECHAT_APPID;
const redirectUri = process.env.VUE_APP_WECHAT_REDIRECT_URI;
</script>