昨天搞了個服務器,騰訊云的輕量應用服務器,價格還算實惠。又搞了個自己的域名,但在起名字時犯了難,想了半天都不知道叫啥,后來還是感謝對象的指點,哈哈哈。
擁有了自己的服務器,接下來,就可以開始我的后端微服務學習啦,加油共勉。
微信掃碼授權,如果允許授權,則登錄成功,跳轉到首頁。
前端只需調用后端微信登錄的接口即可。生成微信二維碼、傳遞code參數等操作都在后端處理。
// 在public/index.html的head標簽中引入<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<!-- 內嵌二維碼容器 --><div id="login_container"></div>// 獲取codevar obj = new WxLogin({ // 需要顯示內嵌二維碼的容器id id: 'login_container', // 應用ID appid: '', // 網頁默認即可 scope: 'snsapi_login', // 授權成功后回調的url redirect_uri: encodeURIComponent(''), // 可設置為簡單的隨機數加session用來校驗 state: Math.ceil(Math.random() * 1000), // 二維碼的樣式,提供"black"、"white"可選。 style: 'black', // 自定義樣式鏈接 href: '' }) }
// 通過code請求接口獲取access_tokenimport { useRoute, useRouter } from 'vue-router'const router = useRouter()const route = useRoutelet code = route.query.codelet state = route.query.stateif (code) { let codeForm = { code: code,// 關鍵 state: state, } // 調微信登錄的后端接口 LoginApi(codeForm).then(res => { localStorage.setItem('access_token', res.data.token) router.push('home') })}
微信掃碼授權登錄有兩種實現方式:網頁外鏈式、網頁內嵌式。
在選擇帶第三方登錄方式時,點擊微信登錄,然后會跳轉到一個新的微信掃碼頁面。當用戶掃碼允許授權登錄后,就會自動關閉掃碼頁面,然后跳轉到首頁。
此方式可以算是后端處理。
在選擇帶第三方登錄方式時,點擊微信登錄,會在當前頁面的某處彈出一個內嵌的二維碼。當用戶掃碼允許授權登錄后,就會直接跳轉到首頁。
此方式可以算是前端處理,但這種方式比較推薦,用戶體驗比較好。
步驟一:用戶進入登錄頁,在登錄頁選擇微信登陸,前端調用后端微信登錄的接口,后端會生成微信二維碼,將地址返回給前端,前端響應后會在新頁面打開這個二維碼地址。
步驟二:用戶用微信掃碼,當授權成功后,就會自動重定向到后端掃碼回調的接口。可以自動重定向到指定接口,是因為在生成二維碼時,回調地址填的是后端接口地址,此處區別于網頁內嵌式。
步驟三:后端會在重定向掃碼回調接口中獲取到code參數,再通過code參數獲取到access_token、openid,進而獲取用戶信息,最終返回重定向首頁地址給前端,登錄成功跳轉到首頁。其中,地址內攜帶著access_token、openid、用戶信息等參數,前端會保存這些參數到本地存儲中。
步驟一:用戶進入登錄頁,在登錄頁選擇微信登陸,然后就會在內嵌二維碼容器中顯示出二維碼。
步驟二:用戶用微信掃碼,當授權成功后,就會自動重定向到中轉頁。其中,中轉頁可以是注冊頁,也可以是當前登錄頁。
步驟三:前端在中轉頁獲取當前路由對象的query信息,并通過請求接口將query信息中的code參數傳給后端。
步驟四:后端就會通過code參數獲取到access_token、openid,進而獲取用戶信息,當前端拿到這些參數后就會登錄成功,跳轉到首頁,并保存到本地存儲中。
uniapp的微信授權登錄,主要借助uni.getUserProfile和uni.login這兩個API實現。getUserProfile作用是獲取用戶授權,login作用是獲取code參數。
原生小程序的微信授權登錄,主要借助wx.getUserProfile和wx.login這兩個API實現。getUserProfile作用是獲取用戶授權,login作用是獲取code參數。
uniapp和原生小程序的微信授權登陸的原理,和vue中的微信掃碼授權登錄基本一致,掌握其一即可。
本文鏈接:http://www.www897cc.com/showinfo-26-30986-0.htmlVue3問題:如何實現微信掃碼授權登錄?
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 解密 SSE,像 ChatGPT 一樣返回流式響應
下一篇: 一文帶你了解Netty