v0.1.3 新增二维码登录功能

timlzh · Feb 22, 2021 · c6889b7 · c6889b7
1 parent fe561f4
commit c6889b7
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -63,15 +63,24 @@
 
     <!-- 登录box -->
     <div class="login">
-      <div class="login_box"><i class="fas fa-envelope"></i><i class="fas fa-mobile-alt"></i><input id="account_input"
-          placeholder="请输入网易云音乐账号">
+      <div class="login_box">
+        <i class="fas fa-envelope"></i>
+        <i class="fas fa-mobile-alt"></i>
+        <input id="account_input" placeholder="请输入网易云音乐账号">
       </div>
-      <div class="login_box"><i class="fas fa-lock"></i><input id="pwd_input" type="password" placeholder="请输入网易云音乐密码">
+
+      <div class="login_box">
+        <i class="fas fa-lock"></i>
+        <input id="pwd_input" type="password" placeholder="请输入网易云音乐密码">
+      </div>
+
+      <div class="login_qrcode_box">
+        <img id="pic" class="login_qrcode"></img>
       </div>
 
       <div class="login_btn_box">
-        <div class="login_btn"><i class="fas fa-check"></i></div>
-        <div class="login_btn"><i class="far fa-address-card"></i></div>
+        <div class="login_btn" id="login"><i class="fas fa-check"></i></div>
+        <div class="login_btn" id="login_with_qrcode"><i class="fas fa-qrcode" id="login_btn_icon"></i></i></div>
       </div>
 
       <div class="change_login"><a id="loginMethodChanger">使用手机号登录</a></div>
@@ -110,9 +119,9 @@
             <span class="playing_singer"></span>-<span class="playing_album"></span></br>
           </div>
           <span class="playing_name"></span>
-          <div class = "playing_album_div">
+          <div class="playing_album_div">
             <div class="playing_album_cover" href="album"></div>
-            <span class="playing_album" id ="under_cover"></span>
+            <span class="playing_album" id="under_cover"></span>
           </div>
         </div>
       </div>

diff --git a/source/css/login.css b/source/css/login.css
@@ -29,7 +29,7 @@
 
 .login_btn_box{
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     margin: 40px 100px 20px 100px;
 }
 
@@ -64,4 +64,16 @@
 .change_login a{
     float: right;
     margin-right: 110px;
+}
+
+.login_qrcode_box{
+    width: 100%;
+    height: 20vw;
+    display: flex;
+    justify-content: center;
+}
+
+.login_qrcode{
+    width: 20vw;
+    height: 20vw;
 }
diff --git a/source/js/login.js b/source/js/login.js
@@ -3,10 +3,12 @@ $(".login_btn").unbind('click').click(function () {
     login();
 })
 
+//绑定回车登录
 $("#pwd_input").on('keypress', function (key) {
     if (key.keyCode == 13) login();
 });
 
+//登录主程序
 function login() {
     let account = $("#account_input").val();
 
@@ -31,10 +33,6 @@ function login() {
         loginCookie = data.cookie;
         localStorage.cookie = loginCookie;
         cookieStr = "cookie=" + loginCookie;
-        avatar_url = data.profile.avatarUrl + "?param=40y40";
-        console.log(avatar);
-        $("#avatar").css("background", 'url(' + avatar_url + ')');
-        $("#avatar_i").hide();
         initLogin();
     } else {
         alert("用户名或密码错误");
@@ -88,6 +86,7 @@ function initLogin() {
     }
 }
 
+//注销 登出
 function logout() {
     let api_adr = apiAd + "logout";
     if (ajaxGet(api_adr)) {
@@ -98,4 +97,52 @@ function logout() {
         $("#avatar_i").show();
         loginCookie = localStorage.cookie = "";
     }
+}
+
+//更换成二维码登录模式
+$("#login_with_qrcode").unbind("click").click(function () {
+    if (!QRCode) {
+        QRCode = 1;
+        $(".login_box").hide();
+        $("#login_btn_icon").attr("class", "fas fa-keyboard");
+        $(".login_qrcode_box").show();
+        $("#login").hide();
+        let api_adr = apiAd + "login/qr/key?timestamp=" + stamp();
+        let data;
+        if (data = ajaxGet(api_adr)) {
+            let key = data.data.unikey;
+            let QRCodeImgUrl = getQRCodeImg("https://music.163.com/login?codekey=" + key);
+            $(".login_qrcode").attr("src", QRCodeImgUrl);
+            QRCodeStatusChecker(key);
+        } 
+    } else {
+        QRCode = 0;
+        $(".login_box").show();
+        $("#login_btn_icon").attr("class", "fas fa-qrcode");
+        $(".login_qrcode_box").hide();
+        $("#login").show();
+    }
+})
+
+//检查二维码登录状态
+function QRCodeStatusChecker(key) {
+    let QRTimer = setInterval(function () {
+        let api_adr = apiAd + "login/qr/check?key=" + key +  "&timestamp=" + stamp();
+        let data;
+        if (data = ajaxGet(api_adr, false)) {
+            if (data.code === 800) {
+                alert('二维码已过期,正在重新获取');
+                QRCode=0;
+                $("#login_with_qrcode").click();
+                clearInterval(QRTimer);
+            }else if (data.code === 803) {
+                clearInterval(QRTimer);
+                alert("登录成功");
+                loginCookie = data.cookie;
+                localStorage.cookie = loginCookie;
+                cookieStr = "cookie=" + loginCookie;
+                initLogin();
+            }
+        }
+    }, 3000);
 }
diff --git a/source/js/main.js b/source/js/main.js
@@ -27,6 +27,7 @@ let searchMethod = 1;
 let appendToWhere;
 let nowPage = 0;
 let nowWord = "";
+let QRCode=0;
 
 //隐藏contianer中的所有元素(可改进)
 function hideAll() {
@@ -36,7 +37,7 @@ function hideAll() {
 }
 
 //ajax请求
-function ajaxGet(api_adr) {
+function ajaxGet(api_adr,checkCode = true) {
     let res;
     $.ajax({
         url: api_adr,
@@ -45,7 +46,7 @@ function ajaxGet(api_adr) {
         async: false,
         success: function (data) {
             console.log(data);
-            if (data.code == "200") res = data;
+            if (data.code == "200" || (!checkCode)) res = data;
         }
     });
     if (res) return res;
@@ -79,6 +80,7 @@ transInputIcon("#account_input", ".fa-envelope");
 transInputIcon("#account_input", ".fa-mobile-alt");
 transInputIcon("#pwd_input", ".fa-lock");
 $("#loginMethodChanger").click();
+$(".login_qrcode_box").hide();
 initLogin();
 playSongFromId(lastPlayedId, false);
 $(".bar_loop_svg").html('<embed src="' + playMethodIcon[playMethod] + '" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />');

diff --git a/source/js/tooles.js b/source/js/tooles.js
@@ -26,4 +26,9 @@ function getPlaylistAuthor(id) {
     if (data = ajaxGet(api_adr)) {
         return data.playlist.creator.nickname;
     }
+}
+
+//获取二维码图片
+function getQRCodeImg(url) {
+    return ("https://api.pwmqr.com/qrcode/create/?url=" + url);
 }