Automa-通過連接塊來自動化你的瀏覽器
1、前言通過瀏覽器插件可實(shí)現(xiàn)自動化腳本的錄制與編寫，具有代表性的工具就是：Selenium IDE、Katalon Recorder，對于簡單的業(yè)務(wù)來說可快速實(shí)現(xiàn)自動化的上手工作。Selenium IDEKat
昨天搞了個服務(wù)器，騰訊云的輕量應(yīng)用服務(wù)器，價格還算實(shí)惠。又搞了個自己的域名，但在起名字時犯了難，想了半天都不知道叫啥，后來還是感謝對象的指點(diǎn)，哈哈哈。
擁有了自己的服務(wù)器，接下來，就可以開始我的后端微服務(wù)學(xué)習(xí)啦，加油共勉。
微信掃碼授權(quán)，如果允許授權(quán)，則登錄成功，跳轉(zhuǎn)到首頁。
前端只需調(diào)用后端微信登錄的接口即可。生成微信二維碼、傳遞code參數(shù)等操作都在后端處理。
// 在public/index.html的head標(biāo)簽中引入<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script><!-- 內(nèi)嵌二維碼容器 --><div id="login_container"></div>// 獲取codevar obj = new WxLogin({ // 需要顯示內(nèi)嵌二維碼的容器id id: 'login_container', // 應(yīng)用ID appid: '', // 網(wǎng)頁默認(rèn)即可 scope: 'snsapi_login', // 授權(quán)成功后回調(diào)的url redirect_uri: encodeURIComponent(''), // 可設(shè)置為簡單的隨機(jī)數(shù)加session用來校驗(yàn) 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,// 關(guān)鍵 state: state, } // 調(diào)微信登錄的后端接口 LoginApi(codeForm).then(res => { localStorage.setItem('access_token', res.data.token) router.push('home') })}
微信掃碼授權(quán)登錄有兩種實(shí)現(xiàn)方式：網(wǎng)頁外鏈?zhǔn)健⒕W(wǎng)頁內(nèi)嵌式。
在選擇帶第三方登錄方式時，點(diǎn)擊微信登錄，然后會跳轉(zhuǎn)到一個新的微信掃碼頁面。當(dāng)用戶掃碼允許授權(quán)登錄后，就會自動關(guān)閉掃碼頁面，然后跳轉(zhuǎn)到首頁。
此方式可以算是后端處理。
在選擇帶第三方登錄方式時，點(diǎn)擊微信登錄，會在當(dāng)前頁面的某處彈出一個內(nèi)嵌的二維碼。當(dāng)用戶掃碼允許授權(quán)登錄后，就會直接跳轉(zhuǎn)到首頁。
此方式可以算是前端處理，但這種方式比較推薦，用戶體驗(yàn)比較好。
步驟一：用戶進(jìn)入登錄頁，在登錄頁選擇微信登陸，前端調(diào)用后端微信登錄的接口，后端會生成微信二維碼，將地址返回給前端，前端響應(yīng)后會在新頁面打開這個二維碼地址。
步驟二：用戶用微信掃碼，當(dāng)授權(quán)成功后，就會自動重定向到后端掃碼回調(diào)的接口。可以自動重定向到指定接口，是因?yàn)樵谏啥S碼時，回調(diào)地址填的是后端接口地址，此處區(qū)別于網(wǎng)頁內(nèi)嵌式。
步驟三：后端會在重定向掃碼回調(diào)接口中獲取到code參數(shù)，再通過code參數(shù)獲取到access_token、openid，進(jìn)而獲取用戶信息，最終返回重定向首頁地址給前端，登錄成功跳轉(zhuǎn)到首頁。其中，地址內(nèi)攜帶著access_token、openid、用戶信息等參數(shù)，前端會保存這些參數(shù)到本地存儲中。
步驟一：用戶進(jìn)入登錄頁，在登錄頁選擇微信登陸，然后就會在內(nèi)嵌二維碼容器中顯示出二維碼。
步驟二：用戶用微信掃碼，當(dāng)授權(quán)成功后，就會自動重定向到中轉(zhuǎn)頁。其中，中轉(zhuǎn)頁可以是注冊頁，也可以是當(dāng)前登錄頁。
步驟三：前端在中轉(zhuǎn)頁獲取當(dāng)前路由對象的query信息，并通過請求接口將query信息中的code參數(shù)傳給后端。
步驟四：后端就會通過code參數(shù)獲取到access_token、openid，進(jìn)而獲取用戶信息，當(dāng)前端拿到這些參數(shù)后就會登錄成功，跳轉(zhuǎn)到首頁，并保存到本地存儲中。
uniapp的微信授權(quán)登錄，主要借助uni.getUserProfile和uni.login這兩個API實(shí)現(xiàn)。getUserProfile作用是獲取用戶授權(quán)，login作用是獲取code參數(shù)。
原生小程序的微信授權(quán)登錄，主要借助wx.getUserProfile和wx.login這兩個API實(shí)現(xiàn)。getUserProfile作用是獲取用戶授權(quán)，login作用是獲取code參數(shù)。
uniapp和原生小程序的微信授權(quán)登陸的原理，和vue中的微信掃碼授權(quán)登錄基本一致，掌握其一即可。
本文鏈接：http://www.www897cc.com/showinfo-26-30986-0.htmlVue3問題：如何實(shí)現(xiàn)微信掃碼授權(quán)登錄？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 解密 SSE，像 ChatGPT 一樣返回流式響應(yīng)
下一篇： 一文帶你了解Netty
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號