feat: qrcode login

netease_api/routes/index.js

@@ -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'),

package.json

@@ -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",

src/api/auth.js

@@ -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(),
+    },
+  });
+}
+
 /**
  * 刷新登录
  * 说明 : 调用此接口 , 可刷新登录状态

src/locale/lang/zh-CN.js

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

src/store/actions.js

@@ -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 });
+      }
+    });
+  },
 };

src/views/loginAccount.vue

@@ -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>

yarn.lock

@@ -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==