目錄
## 前言
1.準備工作
1.1 網站域名
1.2 微信開放平臺
2.授權授權登錄開發
2.1 前端開發
2.1.1 發起授權登錄跳轉至掃碼頁面
2.1.2 掃碼成功后回調處理
2.2 后端開發
2.2.1? 根據code查詢用戶信息
2.2.2 自動注冊登錄
## 后記
## 前言
最近整了個AI助手網站，手機號注冊登錄時需要填手機號驗證碼什么的有點麻煩，于是考慮加個微信授權登錄。PC端這里實現的效果是點擊“微信登錄”按鈕，然后跳轉掃碼授權頁面，打開手機微信掃碼后自動登錄網站。開發過程中踩了一些坑這里簡單記錄下：
1.準備工作
1.1 網站域名
需要有個外網可訪問的已備案域名，在微信開放平臺申請創建網站應用時使用。
1.2 微信開放平臺
需要在微信開放平臺注冊賬號，然后在管理中心-網站應用頁面創建網站應用，這里需要填寫自己網站的相關信息發起申請，一般1天左右會出結果是否通過。通過之后拿到AppID --前端跳轉微信授權時用。
開放平臺地址： 微信開放平臺
2.授權授權登錄開發
2.1 前端開發
2.1.1 發起授權登錄跳轉至掃碼頁面
微信登錄按鈕點擊事件：
//微信登錄
const wxLogin = function () {let protocol = window.location.protocol;let host = window.location.host;let redirect_uri = protocol + '//' + host + '/login'; //掃碼后的回調地址let appId = 'xxxxx'; //開放平臺AppIDlet wxUrlStart = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appId + '&redirect_uri=';let wxUrlEnd = '&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect';let allUrl = wxUrlStart + encodeURIComponent(redirect_uri) + wxUrlEnd;window.location.replace(allUrl);
}
2.1.2 掃碼成功后回調處理
掃碼成功后會自動跳轉至自定義的回調地址redirect_uri，并帶上開放平臺返回的code，拿到這個code去后臺查詢用戶信息進行后續自動注冊登錄操作。
//獲取微信授權重定向后的codelet code = getUrlParam('code');if (code) {//微信授權自動注冊登錄httpPost('/api/user/wxLogin', {code: code}).then((res) => {setUserToken(res.data)router.push('/chat')}).catch((e) => {ElMessage.error('登錄失敗，' + e.message)})} //頁面重定向獲取URL中參數值
const getUrlParam = function(queryName) {const queryString = window.location.search;const params = new URLSearchParams(queryString);const value = params.get(queryName);return value ? decodeURIComponent(value) : null;
}
2.2 后端開發
2.2.1? 根據code查詢用戶信息
先拿code獲取AccessToken，再拿AccessToken獲取用戶的openid、昵稱等信息，其中openid是用戶唯一標識，可以拿來注冊登錄用。
需要用到的接口地址：
獲取AccessToken：https://api.weixin.qq.com/sns/oauth2/access_token
獲取用戶信息：https://api.weixin.qq.com/sns/userinfo
具體代碼開發可參考官方接口文檔：網站應用微信登錄開發指南
2.2.2 自動注冊登錄
拿到用戶openid后即可作為用戶唯一標識進行注冊登錄操作。
## 后記
至此開發工作已完成，在域名對應的服務器上部署啟動項目，測試功能OK即可。
最后提一下自己的小站，支持多種AI對話及MJ繪畫功能，歡迎體驗交流：小麥AI智能助手
)
