時(shí)間：2023-04-23 21:06:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-04-23 21:06:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
【個(gè)人練習(xí)】網(wǎng)易云音樂(lè)PC端仿站 Vue 2（四）：
在線咨詢
getQRCode方法用來(lái)獲取二維碼圖片URL，同時(shí)設(shè)置一個(gè)定時(shí)器，每隔一段時(shí)間檢查二維碼狀態(tài)。如果二維碼過(guò)期，顯示二維碼過(guò)期的提示和重新獲取按鈕；如果登錄掃碼成功，得到cookie，從而根據(jù)cookie獲取用戶信息。二維碼登錄
說(shuō)明: 二維碼登錄涉及到 3 個(gè)接口,調(diào)用務(wù)必帶上時(shí)間戳,防止緩存
1. 二維碼 key 生成接口
說(shuō)明: 調(diào)用此接口可生成一個(gè) key
接口地址 :/login/qr/key
2. 二維碼生成接口
說(shuō)明: 調(diào)用此接口傳入上一個(gè)接口生成的 key 可生成二維碼圖片的 base64 和二維碼信息,可使用 base64 展示圖片,或者使用二維碼信息內(nèi)容自行使用第三方二維碼生成庫(kù)渲染二維碼
必選參數(shù):key,由第一個(gè)接口生成
可選參數(shù):qrimg傳入后會(huì)額外返回二維碼圖片 base64 編碼
3. 二維碼檢測(cè)掃碼狀態(tài)接口
說(shuō)明: 輪詢此接口可獲取二維碼掃碼狀態(tài),800 為二維碼過(guò)期,801 為等待掃碼,802 為待確認(rèn),803 為授權(quán)登錄成功(803 狀態(tài)碼下會(huì)返回 cookie)
必選參數(shù):key,由第一個(gè)接口生成
接口地址 :/login/qr/check
// 二維碼key生成export function reqLoginQRKey() { return request('/login/qr/key', 'get')}// 二維碼生成export function reqLoginQRCreate(key) { return request('/login/qr/create', 'get', { 'key': key, 'qrimg': true })}// 二維碼檢測(cè)掃碼狀態(tài)export function reqLoginQRCheck(key) { return request('/login/qr/check', 'get', { 'key': key })}2. 手機(jī)號(hào)+驗(yàn)證碼登錄發(fā)送驗(yàn)證碼
說(shuō)明 : 調(diào)用此接口 ,傳入手機(jī)號(hào)碼, 可發(fā)送驗(yàn)證碼
必選參數(shù) :phone: 手機(jī)號(hào)碼
可選參數(shù) :ctcode: 國(guó)家區(qū)號(hào),默認(rèn) 86 即中國(guó)
接口地址 :/captcha/sent
驗(yàn)證驗(yàn)證碼
說(shuō)明 : 調(diào)用此接口 ,傳入手機(jī)號(hào)碼和驗(yàn)證碼, 可校驗(yàn)驗(yàn)證碼是否正確
必選參數(shù) :phone: 手機(jī)號(hào)碼，captcha: 驗(yàn)證碼
可選參數(shù) :ctcode: 國(guó)家區(qū)號(hào),默認(rèn) 86 即中國(guó)
接口地址 :/captcha/verify
手機(jī)登錄
必選參數(shù) :phone: 手機(jī)號(hào)碼，password: 密碼
可選參數(shù) :countrycode: 國(guó)家碼，用于國(guó)外手機(jī)號(hào)登錄，例如美國(guó)傳入：1md5_password: md5 加密后的密碼,傳入后password參數(shù)將失效captcha: 驗(yàn)證碼,使用/captcha/sent接口傳入手機(jī)號(hào)獲取驗(yàn)證碼,調(diào)用此接口傳入驗(yàn)證碼,可使用驗(yàn)證碼登錄,傳入后password參數(shù)將失效
接口地址 :/login/cellphone
// 獲取手機(jī)驗(yàn)證碼export function reqCaptcha(phone, ctcode) { return request('/captcha/sent', 'get', { 'phone': phone, 'ctcode': ctcode })}// 驗(yàn)證驗(yàn)證碼export function verifyCaptcha(phone, captcha, ctcode) { return request('/captcha/verify', 'get', { 'phone': phone, 'captcha': captcha, 'ctcode': ctcode })}// 手機(jī)號(hào)+驗(yàn)證碼登錄export function loginCellphoneByCaptcha(phone, captcha) { return request('/login/cellphone', 'post', { 'phone': phone, 'captcha': captcha })}// 手機(jī)號(hào)+密碼登錄export function loginCellphoneByPassword(phone, password) { return request('/login/cellphone', 'post', { 'phone': phone, 'password': password })}國(guó)家編碼列表
說(shuō)明 : 調(diào)用此接口,可獲取國(guó)家編碼列表
接口地址 :/countries/code/list
// 獲取國(guó)家編碼列表export function reqCountriesCodeList() { return request('/countries/code/list', 'get');}3. 手機(jī)號(hào)+密碼登錄<script>export default { data () { return { isShowLogin: false, // 是否展示登錄框 loginMethod: 'QR', // 登錄方法 ['QR', 'phone'] phoneLoginOrRegister: '', // 手機(jī)號(hào)登錄或注冊(cè) ['', 'login', 'register'] loginwithPassword: false, // 使用密碼還是驗(yàn)證碼登錄 qrUrl: '', // 二維碼 isUpdate: false, // 是否需要更新二維碼 timer: null, // 定時(shí)器用來(lái)檢查二維碼狀態(tài) agree: false, // 是否勾選協(xié)議 countryCode: '86', // 手機(jī)號(hào)國(guó)家編碼 countriesCodeList: [], // 國(guó)家編碼列表 isShowCountriesCodeList: false, // 是否展示國(guó)家編碼列表 phone: '', // 手機(jī)號(hào) password: '', // 密碼 captcha: '', // 驗(yàn)證碼 message: '', // 提示信息（手機(jī)號(hào)、驗(yàn)證碼、密碼校驗(yàn)錯(cuò)誤信息） countDown: 60, // 獲取驗(yàn)證碼的倒計(jì)時(shí) countdownTimer: null, // 倒計(jì)時(shí)計(jì)時(shí)器 checkPassword: true, // 驗(yàn)證手機(jī)號(hào)和密碼是否正確 } }, methods: { // 打開登錄窗口 openLoginBox() { this.isShowLogin = true this.loginMethod = 'QR' // 默認(rèn)打開是二維碼登錄方式 this.getQRCode() // 獲取二維碼 }, // 關(guān)閉登錄窗口 closeLoginBox() { this.isShowLogin = false this.loginMethod = 'QR' this.phoneLoginOrRegister = '' this.agree = false this.countryCode = '86' this.phone = '' this.password = '' this.captcha = '' this.message = '' this.countDown = 60 clearInterval(this.timer) clearInterval(this.countdownTimer) }, // 生成二維碼 async getQRCode() { let result1 = await this.$api.reqLoginQRKey() let key = result1.data.unikey let result2 = await this.$api.reqLoginQRCreate(key) this.qrUrl = result2.data.qrimg this.isUpdate = false this.checkQRState(key) // 檢查二維碼狀態(tài) }, // 檢查二維碼狀態(tài) checkQRState(key) { this.timer = setInterval(async () => { try { let result = await this.$api.reqLoginQRCheck(key) if (result.code === 800) { // 二維碼過(guò)期 this.isUpdate = true clearInterval(this.timer) } else if (result.code === 803) { // 授權(quán)登錄成功 this.$store.dispatch('user/setCookie', result.cookie) // 根據(jù)cookie獲取賬號(hào)信息 let result2 = await this.$api.reqUserAccount(result.cookie) if (result2.code === 200) { this.userImg = result2.profile.avatarUrl this.$store.dispatch('user/setUserId', result2.account.id) this.$store.dispatch('user/setUserInfo', result2.profile) } this.isLogin = true this.closeLoginBox() // 關(guān)閉登錄窗口 location.reload() } } catch (err) { this.$message.error(err.message) } }, 5000) }, // 切換登錄方式 changeLoginMethod() { this.loginMethod = this.loginMethod === 'QR' ? 'phone' : 'QR' if (this.loginMethod === 'QR') { // 二維碼登錄 this.getQRCode() } else { // 其他方式登錄 clearInterval(this.timer) if (this.countriesCodeList.length === 0) { // 獲取國(guó)家編碼列表 this.getCountriesCodeList() } } }, // 獲取國(guó)家編碼列表 async getCountriesCodeList() { let result = await this.$api.reqCountriesCodeList() for (let item of result.data) { this.countriesCodeList = [ ...this.countriesCodeList, ...item.countryList, ] } }, // 修改手機(jī)號(hào)國(guó)家編碼 chooseCountryCode(index) { this.countryCode = this.countriesCodeList[index].code this.isShowCountriesCodeList = false }, // 點(diǎn)擊手機(jī)號(hào)登錄按鈕 loginWithPhone() { if (this.agree) { this.phoneLoginOrRegister = 'login' // 切換到手機(jī)號(hào)登錄頁(yè)面 this.countryCode = '86' } else { // 沒(méi)有勾選協(xié)議 this.$message.warning({ message: '請(qǐng)先勾選同意《服務(wù)條款》《隱私政策》《兒童隱私政策》', }) } }, // 點(diǎn)擊手機(jī)號(hào)注冊(cè)按鈕 registerWithPhone() { if (this.agree) { this.phoneLoginOrRegister = 'register' // 切換到手機(jī)號(hào)注冊(cè)頁(yè)面 this.countryCode = '86' } else { // 沒(méi)有勾選協(xié)議 this.$message.warning({ message: '請(qǐng)先勾選同意《服務(wù)條款》《隱私政策》《兒童隱私政策》', }) } }, // 手機(jī)號(hào)密碼登錄或驗(yàn)證碼登錄切換 changePasswordOrCaptcha() { this.loginwithPassword = !this.loginwithPassword this.message = '' }, // 檢查手機(jī)號(hào)格式是否正確 checkPhone() { let re = /^[1][3,4,5,6.7,8,9][0-9]{9}$/ return re.test(this.phone) }, // 檢查驗(yàn)證碼格式是否正確 checkCaptcha() { let re = /^[0-9]{4}$/ return re.test(this.captcha) }, // 獲取驗(yàn)證碼 async sendCode() { // 手機(jī)號(hào)為空 if (this.phone === '') { this.message = '請(qǐng)輸入手機(jī)號(hào)' return } // 手機(jī)號(hào)格式錯(cuò)誤 if (!this.checkPhone()) { this.message = '手機(jī)號(hào)碼格式錯(cuò)誤，請(qǐng)更換后重試' return } let result = await this.$api.reqCaptcha(this.phone, this.countryCode) if (result.code !== 200) { this.$message.error('驗(yàn)證碼發(fā)送失敗，請(qǐng)稍后重試') } else { // 獲取驗(yàn)證碼倒計(jì)時(shí) this.countdownTimer = setInterval(() => { if (this.countDown === 0) { this.countDown = 60 this.$refs.captchaButton.innerHTML = '獲取驗(yàn)證碼' clearInterval(this.countdownTimer) } else { this.countDown-- this.$refs.captchaButton.innerHTML = this.countDown + '秒后重試' } }, 1000) } }, // 驗(yàn)證手機(jī)號(hào)和驗(yàn)證碼 async loginCellphoneByCaptcha() { if (this.phone === '') { this.message = '請(qǐng)輸入手機(jī)號(hào)' return } else { if (!this.checkPhone()) { this.message = '請(qǐng)輸入正確的手機(jī)號(hào)' return } } if (this.captcha === '') { this.message = '請(qǐng)輸入驗(yàn)證碼' return } else { if (!this.checkCaptcha()) { this.message = '短信驗(yàn)證碼格式錯(cuò)誤' return } } let result = await this.$api.verifyCaptcha( this.phone, this.captcha, this.countryCode ) if (result.code !== 200) { this.message = '請(qǐng)輸入正確的短信驗(yàn)證碼' } else { try { let result2 = await this.$api.loginCellphoneByCaptcha( this.phone, this.captcha ) if (result2.code === 200) { this.$store.dispatch('user/setCookie', result2.cookie) this.$store.dispatch('user/setUserInfo', result2.profile) this.$store.dispatch('user/setUserId', result2.account.id) this.userImg = result2.profile.avatarUrl this.isLogin = true this.closeLoginBox() location.reload() } } catch (err) { this.$message.error(err) } } }, // 手機(jī)號(hào)+密碼登錄 async loginCellphoneByPassword() { if (this.phone === '') { this.message = '請(qǐng)輸入手機(jī)號(hào)' return } else { if (!this.checkPhone(this.phone)) { this.message = '請(qǐng)輸入正確的手機(jī)號(hào)' return } } if (this.password === '') { this.message = '請(qǐng)輸入密碼' return } let result = await this.$api.loginCellphoneByPassword( this.phone, this.password ) if (result.code === 200) { this.message = '' // 成功登錄 this.$store.dispatch('user/setCookie', result.cookie) this.$store.dispatch('user/setUserInfo', result.profile) this.$store.dispatch('user/setUserId', result.account.id) this.userImg = result.profile.avatarUrl this.isLogin = true this.closeLoginBox() location.reload() } else { this.message = '手機(jī)號(hào)或密碼錯(cuò)誤' } } }}</script>關(guān)鍵詞：音樂(lè),練習(xí)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
