feat: qrcode login

This commit is contained in:
qier222 2021-06-07 18:27:46 +08:00
parent 04bc4770b4
commit d70fd44d8e
No known key found for this signature in database
GPG Key ID: 9C85007ED905F14D
7 changed files with 220 additions and 30 deletions

View File

@ -18,6 +18,8 @@ const table = {
'/playlist/create': require('../module/playlist_create'),
'/playlist/tracks': require('../module/playlist_tracks'),
'/recommend/songs': require('../module/recommend_songs'),
'/login/qr/create': require('../module/login_qr_create'),
'/login/qr/check': require('../module/login_qr_check'),
'/user/cloud/del': require('../module/user_cloud_del'),
'/toplist/artist': require('../module/toplist_artist'),
'/artist/sublist': require('../module/artist_sublist'),
@ -28,6 +30,7 @@ const table = {
'/personalized': require('../module/personalized'),
'/top/playlist': require('../module/top_playlist'),
'/user/account': require('../module/user_account'),
'/login/qr/key': require('../module/login_qr_key'),
'/daily_signin': require('../module/daily_signin'),
'/simi/artist': require('../module/simi_artist'),
'/song/detail': require('../module/song_detail'),

View File

@ -39,7 +39,7 @@
"electron-builder": "^22.10.5",
"electron-context-menu": "^2.3.0",
"electron-debug": "^3.1.0",
"electron-devtools-installer": "^3.1.1",
"electron-devtools-installer": "^3.2",
"electron-icon-builder": "^1.0.2",
"electron-is-dev": "^1.2.0",
"electron-log": "^4.3.0",
@ -56,6 +56,7 @@
"pac-proxy-agent": "^4.1.0",
"plyr": "^3.6.2",
"prettier": "2.1.2",
"qrcode": "^1.4.4",
"register-service-worker": "^1.7.1",
"svg-sprite-loader": "^5.0.0",
"tunnel": "^0.0.6",

View File

@ -19,6 +19,7 @@ export function loginWithPhone(params) {
params,
});
}
/**
* 邮箱登录
* - email: 163 网易邮箱
@ -37,6 +38,54 @@ export function loginWithEmail(params) {
});
}
/**
* 二维码key生成接口
*/
export function loginQrCodeKey() {
return request({
url: '/login/qr/key',
method: 'get',
params: {
timestamp: new Date().getTime(),
},
});
}
/**
* 二维码生成接口
* 说明: 调用此接口传入上一个接口生成的key可生成二维码图片的base64和二维码信息,
* 可使用base64展示图片,或者使用二维码信息内容自行使用第三方二维码生产库渲染二维码
* @param {Object} params
* @param {string} params.key
* @param {string=} params.qrimg 传入后会额外返回二维码图片base64编码
*/
export function loginQrCodeCreate(params) {
return request({
url: '/login/qr/create',
method: 'get',
params: {
...params,
timestamp: new Date().getTime(),
},
});
}
/**
* 二维码检测扫码状态接口
* 说明: 轮询此接口可获取二维码扫码状态,800为二维码过期,801为等待扫码,802为待确认,803为授权登录成功(803状态码下会返回cookies)
* @param {string} key
*/
export function loginQrCodeCheck(key) {
return request({
url: '/login/qr/check',
method: 'get',
params: {
key,
timestamp: new Date().getTime(),
},
});
}
/**
* 刷新登录
* 说明 : 调用此接口 , 可刷新登录状态

View File

@ -71,8 +71,8 @@ export default {
email: '邮箱',
password: '密码',
login: '登录',
loginWithEmail: '使用邮箱登录',
loginWithPhone: '使用手机号登录',
loginWithEmail: '邮箱登录',
loginWithPhone: '手机号登录',
notice: `YesPlayMusic 承诺不会保存你的任何账号信息到云端。<br />
你的密码会在本地进行 MD5 加密后再传输到网易云 API<br />
YesPlayMusic 并非网易云官方网站输入账号信息前请慎重考虑 你也可以前往

View File

@ -10,6 +10,7 @@ import {
likedArtists,
likedMVs,
cloudDisk,
userAccount,
} from '@/api/user';
export default {
@ -159,4 +160,12 @@ export default {
}
});
},
fetchUserProfile: ({ commit }) => {
if (!isAccountLoggedIn()) return;
return userAccount().then(result => {
if (result.code === 200) {
commit('updateData', { key: 'user', value: result.profile });
}
});
},
};

View File

@ -31,6 +31,7 @@
</div>
</div>
</div>
<div v-show="mode === 'email'" class="input-box">
<div class="container" :class="{ active: inputFocus === 'email' }">
<svg-icon icon-class="mail" />
@ -47,7 +48,7 @@
</div>
</div>
</div>
<div class="input-box">
<div v-show="mode !== 'qrCode'" class="input-box">
<div class="container" :class="{ active: inputFocus === 'password' }">
<svg-icon icon-class="lock" />
<div class="inputs">
@ -65,8 +66,17 @@
</div>
</div>
</div>
<div v-show="mode == 'qrCode'">
<div v-show="qrCodeImage" class="qr-code-container">
<img :src="qrCodeImage" />
</div>
<div class="qr-code-info">
{{ qrCodeInformation }}
</div>
</div>
</div>
<div class="confirm">
<div v-show="mode !== 'qrCode'" class="confirm">
<button v-show="!processing" @click="login">
{{ $t('login.login') }}
</button>
@ -77,14 +87,18 @@
</button>
</div>
<div class="other-login">
<a v-show="mode === 'phone'" @click="mode = 'email'">{{
<a v-show="mode !== 'email'" @click="mode = 'email'">{{
$t('login.loginWithEmail')
}}</a>
<a v-show="mode === 'email'" @click="mode = 'phone'">{{
<span v-show="mode === 'qrCode'">|</span>
<a v-show="mode !== 'phone'" @click="mode = 'phone'">{{
$t('login.loginWithPhone')
}}</a>
<span v-show="mode !== 'qrCode'">|</span>
<a v-show="mode !== 'qrCode'" @click="mode = 'qrCode'"> 二维码登录 </a>
</div>
<div
v-show="mode !== 'qrCode'"
class="notice"
v-html="isElectron ? $t('login.noticeElectron') : $t('login.notice')"
></div>
@ -93,25 +107,35 @@
</template>
<script>
import NProgress from 'nprogress';
import { loginWithPhone, loginWithEmail } from '@/api/auth';
import { setCookies } from '@/utils/auth';
import QRCode from 'qrcode';
import md5 from 'crypto-js/md5';
import NProgress from 'nprogress';
import { mapMutations } from 'vuex';
import { setCookies } from '@/utils/auth';
import nativeAlert from '@/utils/nativeAlert';
import {
loginWithPhone,
loginWithEmail,
loginQrCodeKey,
loginQrCodeCheck,
} from '@/api/auth';
export default {
name: 'Login',
data() {
return {
processing: false,
mode: 'email',
mode: 'qrCode',
countryCode: '+86',
phoneNumber: '',
email: '',
password: '',
smsCode: '',
inputFocus: '',
qrCodeKey: '',
qrCodeImage: '',
qrCodeCheckInterval: null,
qrCodeInformation: '打开网易云音乐APP扫码登录',
};
},
computed: {
@ -120,10 +144,13 @@ export default {
},
},
created() {
if (this.$route.query.mode === 'phone') {
this.mode = 'phone';
if (['phone', 'email', 'qrCode'].includes(this.$route.query.mode)) {
this.mode = this.$route.query.mode;
}
NProgress.done();
this.getQrCodeKey();
},
beforeDestroy() {
clearInterval(this.qrCodeCheckInterval);
},
methods: {
...mapMutations(['updateData']),
@ -188,16 +215,64 @@ export default {
}
if (data.code === 200) {
setCookies(data.cookie);
this.updateData({ key: 'user', value: data.profile });
this.updateData({ key: 'loginMode', value: 'account' });
this.$store.dispatch('fetchLikedPlaylist').then(() => {
this.$router.push({ path: '/library' });
this.$store.dispatch('fetchUserProfile').then(() => {
this.$store.dispatch('fetchLikedPlaylist').then(() => {
this.$router.push({ path: '/library' });
});
});
} else {
this.processing = false;
nativeAlert(data.msg ?? data.message ?? '账号或密码错误,请检查');
}
},
getQrCodeKey() {
return loginQrCodeKey().then(result => {
if (result.code === 200) {
this.qrCodeKey = result.data.unikey;
QRCode.toDataURL(
`https://music.163.com/login?codekey=${this.qrCodeKey}`,
{
width: 192,
margin: 0,
color: {
dark: '#335eea',
light: '#00000000',
},
}
)
.then(url => {
this.qrCodeImage = url;
})
.catch(err => {
console.error(err);
})
.finally(() => {
NProgress.done();
});
}
this.checkQrCodeLogin();
});
},
checkQrCodeLogin() {
this.qrCodeCheckInterval = setInterval(() => {
if (this.qrCodeKey === '') return;
loginQrCodeCheck(this.qrCodeKey).then(result => {
if (result.code === 800) {
this.getQrCodeKey(); // QrCode
this.qrCodeInformation = '二维码已失效,请重新扫码';
} else if (result.code === 802) {
this.qrCodeInformation = '扫描成功,请在手机上确认登录';
} else if (result.code === 803) {
clearInterval(this.qrCodeCheckInterval);
this.qrCodeInformation = '登录成功,请稍等...';
result.code = 200;
console.log(result);
this.handleLoginResponse(result);
}
});
}, 1000);
},
},
};
</script>
@ -327,11 +402,11 @@ export default {
.other-login {
margin-top: 24px;
font-size: 13px;
color: var(--color-text);
opacity: 0.68;
a {
cursor: pointer;
font-size: 13px;
color: var(--color-text);
opacity: 0.68;
padding: 0 8px;
}
}
@ -380,4 +455,15 @@ button.loading {
.loading span:nth-child(3) {
animation-delay: 0.4s;
}
.qr-code-container {
background-color: var(--color-primary-bg);
padding: 24px 24px 21px 24px;
border-radius: 1.25rem;
margin-bottom: 12px;
}
.qr-code-info {
text-align: center;
margin-bottom: 28px;
}
</style>

View File

@ -2804,6 +2804,19 @@ browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4
escalade "^3.1.1"
node-releases "^1.1.71"
buffer-alloc-unsafe@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
buffer-alloc@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
dependencies:
buffer-alloc-unsafe "^1.1.0"
buffer-fill "^1.0.0"
buffer-crc32@~0.2.3:
version "0.2.13"
resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@ -2819,7 +2832,12 @@ buffer-equal@1.0.0:
resolved "https://registry.yarnpkg.com/buffer-equal/-/buffer-equal-1.0.0.tgz#59616b498304d556abd466966b22eeda3eca5fbe"
integrity sha1-WWFrSYME1Var1GaWayLu2j7KX74=
buffer-from@^1.0.0:
buffer-fill@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
buffer-from@^1.0.0, buffer-from@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
@ -2848,7 +2866,7 @@ buffer@^4.3.0:
ieee754 "^1.1.4"
isarray "^1.0.0"
buffer@^5.1.0, buffer@^5.2.0, buffer@^5.5.0:
buffer@^5.1.0, buffer@^5.2.0, buffer@^5.4.3, buffer@^5.5.0:
version "5.7.1"
resolved "https://registry.nlark.com/buffer/download/buffer-5.7.1.tgz?cache=0&sync_timestamp=1618846959596&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fbuffer%2Fdownload%2Fbuffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
integrity sha1-umLnwTEzBTWCGXFghRqPZI6Z7tA=
@ -4286,6 +4304,11 @@ diffie-hellman@^5.0.0:
miller-rabin "^4.0.0"
randombytes "^2.0.0"
dijkstrajs@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.2.tgz#2e48c0d3b825462afe75ab4ad5e829c8ece36257"
integrity sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg==
dir-compare@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/dir-compare/-/dir-compare-2.4.0.tgz#785c41dc5f645b34343a4eafc50b79bac7f11631"
@ -4567,13 +4590,14 @@ electron-debug@^3.1.0:
electron-is-dev "^1.1.0"
electron-localshortcut "^3.1.0"
electron-devtools-installer@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/electron-devtools-installer/-/electron-devtools-installer-3.1.1.tgz#7b56c8c86475c5e4e10de6917d150c53c9ceb55e"
integrity sha512-g2D4J6APbpsiIcnLkFMyKZ6bOpEJ0Ltcc2m66F7oKUymyGAt628OWeU9nRZoh1cNmUs/a6Cls2UfOmsZtE496Q==
electron-devtools-installer@^3.2:
version "3.2.0"
resolved "https://registry.yarnpkg.com/electron-devtools-installer/-/electron-devtools-installer-3.2.0.tgz#acc48d24eb7033fe5af284a19667e73b78d406d0"
integrity sha512-t3UczsYugm4OAbqvdImMCImIMVdFzJAHgbwHpkl5jmfu1izVgUcP/mnrPqJIpEeCK1uZGpt+yHgWEN+9EwoYhQ==
dependencies:
rimraf "^3.0.2"
semver "^7.2.1"
tslib "^2.1.0"
unzip-crx-3 "^0.2.0"
electron-dl@^3.1.0:
@ -7004,6 +7028,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
isarray@^2.0.1:
version "2.0.5"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@ -9009,7 +9038,7 @@ pn@^1.0.0:
resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
pngjs@^3.0.0, pngjs@^3.3.3:
pngjs@^3.0.0, pngjs@^3.3.0, pngjs@^3.3.3:
version "3.4.0"
resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
@ -9622,6 +9651,19 @@ q@^1.1.2:
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
qrcode@^1.4.4:
version "1.4.4"
resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83"
integrity sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==
dependencies:
buffer "^5.4.3"
buffer-alloc "^1.2.0"
buffer-from "^1.1.1"
dijkstrajs "^1.0.1"
isarray "^2.0.1"
pngjs "^3.3.0"
yargs "^13.2.4"
qs@6.7.0:
version "6.7.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@ -11392,7 +11434,7 @@ tslib@^1.9.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.0.1, tslib@^2.0.3:
tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
@ -12562,7 +12604,7 @@ yargs-parser@^4.2.0:
dependencies:
camelcase "^3.0.0"
yargs@^13.3.2:
yargs@^13.2.4, yargs@^13.3.2:
version "13.3.2"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==