前言

最近把小站的登錄頁面給重構(gòu)了，之前的安全性存在很大問題，基本處于裸奔的狀態(tài)，特此記錄一下過程。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供松北企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為松北眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

先說一下網(wǎng)站后端語言是php，為什么用php呢，因為php是世界上最好的語言嗎，可能吧，不過最大的原因是因為我的網(wǎng)站托管在虛擬主機(jī)上，目前來說，幾乎所有廠商的虛擬主機(jī)都只支持php，不過本文所涉及到的php代碼都十分簡單，跟js沒啥區(qū)別。

本次規(guī)劃的登錄方式有三種，密碼登錄、手機(jī)驗證碼登錄、第三方登錄，接下來就一一來看一下。

界面

登錄界面通常來說都比較簡單，無非是幾個輸入框，對于筆者這種一線搬磚碼農(nóng)來說不過是三下兩除二的事情，直接看最終效果：

Element UI和濃濃的QQ空間風(fēng)交雜在一起有沒有。

行為驗證

現(xiàn)在大多數(shù)網(wǎng)站登錄前一般都會先進(jìn)行人機(jī)驗證，從最早的輸入各種各樣字符驗證碼，到現(xiàn)在越來越流行的滑動拼圖驗證、文字點選驗證、無感驗證等等，阿里云、網(wǎng)易、騰訊等等大廠都有提供行為驗證服務(wù)。

行為驗證一般由前端和后端配合進(jìn)行驗證，單純的前端驗證并不安全，可以繞過，所以前端驗證通過后會生成token等標(biāo)識，傳給后端，后端再調(diào)用服務(wù)商對應(yīng)的接口來驗證。

行為驗證的原理可能涉及到機(jī)器學(xué)習(xí)什么的，已經(jīng)超出筆者的能力范圍，但作為使用方來說，具體使用方式一般服務(wù)商都會有詳細(xì)的例子和示例代碼，在此不贅述。

密碼登錄

密碼登錄是最傳統(tǒng)最歷史悠久的登錄方式了，注冊的時候把賬號密碼保存到數(shù)據(jù)庫，登錄的時候再進(jìn)行比對，基本原則是不能明文傳輸、不能明文保存。

具體實現(xiàn)上，首先對密碼設(shè)定要求，暫定規(guī)則是長度八位到十六位，需要至少包含大小寫字母和數(shù)字，可包含部分特殊字符：$@$!%*#_~?&，前后端都進(jìn)行校驗。

網(wǎng)站支持https的話可以不用考慮傳輸問題，但是我的虛擬主機(jī)并不支持，所以需要手動進(jìn)行加密傳輸。

后端接收到密碼解密后再進(jìn)行不可逆的加密存儲。

密碼規(guī)則驗證

直接通過正則表達(dá)式校驗即可，上述提到的密碼規(guī)則的其中一個正則表達(dá)式實現(xiàn)：/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9$@!.%*#_~?&]{8,16}$/，前面三個括號都是(?=p)的模式，p是一個子模式，?=用來匹配符合p模式之前的位置，整體含義是匹配以任意字符加小寫字母、任意字符加大寫字母和任意字符加數(shù)字開頭的八位以上的包含數(shù)字大小寫字母的字符串，其中的.*是必要的，否則上面的正則匹配不了任何字符，因為不可能有一個字符串能同時以大小寫字母及數(shù)字開頭。

加密傳輸

常用的加密方式有這幾種：MD5、對稱加密和非對稱加密，在這個場景下MD5不合適，因為它是把字符進(jìn)行不可逆的編碼，那傳給服務(wù)端也解不開，再加上它并不安全，很多人也不認(rèn)為它是一種加密算法；對稱加密的話加密和解密用的是同一個秘鑰，這意味著前端代碼里也得內(nèi)置這個秘鑰，那只要打開源碼就能看到了所以也不安全，就只能選擇非對稱加密了。

非對稱加密有公鑰和私鑰兩個秘鑰，加密和解密分別選擇一個，其中一個加密的數(shù)據(jù)只能使用另外一個秘鑰來加密，這樣在前端就可以使用公鑰來加密，后端使用私鑰解密，公鑰就算被發(fā)現(xiàn)了沒有私鑰也沒用，目前最知名也最重要的就是RSA加密算法了，詳細(xì)了解可參考阮大神的文章：http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_part_one.html。

RSA加密安全的代價之一就是慢，比對稱加密慢非常多，所以一般都是和對稱加密結(jié)合進(jìn)行使用，比如https協(xié)議，傳輸?shù)男畔⑹褂脤ΨQ加密算法進(jìn)行加密，對稱加密的秘鑰使用非對稱加密方式來加密進(jìn)行傳輸。另外，RSA加密的數(shù)據(jù)大小不能超過秘鑰長度，比如你的秘鑰長度為1024位，那么所加密的數(shù)據(jù)最大不能超過1024/8=128字節(jié)，首先來按登錄場景來簡單計算一下。

以上面百科上的utf8編碼轉(zhuǎn)換表來寫一個簡單的計算字符字節(jié)數(shù)的方法如下：

function strLen (str) {
    let len = 0
    for(let i = 0; i < str.length; i++) {
        let code = str.charCodeAt(i)
        if (code <= 0x007f) {
            len += 1
        } else if (code <= 0x07ff) {
            len += 2
        } else if (code <= 0xffff) {
            len += 3
        } else {
            len += 4
        }
    }
    return len
}

賬號為手機(jī)號，也就是11個數(shù)字，字節(jié)大小計算出來為：11；密碼以最長16位計算出來字節(jié)大小約為：16，都遠(yuǎn)小于128字節(jié)，所以可以直接使用RSA來進(jìn)行加密，速度的話此處也可以忽略不計。

前端可以使用jsencrypt這個庫來進(jìn)行rsa加密。在此之前需要先生成公鑰和私鑰，這個可以使用openssl命令行工具，openssl是一個開源的軟件工具包，用來實現(xiàn)TLS(傳輸層安全協(xié)議)，同時包含了主要的加密算法、常用的密鑰和證書封裝管理等功能。

生成私鑰：

openssl genrsa -out lx_rsa_1024_priv.pem 1024

查看上一步生成的私鑰：

cat lx_rsa_1024_priv.pem

獲取上述私鑰的公鑰：

openssl rsa -pubout -in lx_rsa_1024_priv.pem -out lx_rsa_1024_pub.pem

查看上一步生成的公鑰：

cat lx_rsa_1024_pub.pem

保存好私鑰和公鑰，接下來前端使用公鑰來加密，安裝jsencrypt：

npm i jsencrypt

加密代碼：

import Jsencrypt from 'jsencrypt';

const rsa_pub = 'xxx'// 公鑰
const password = 'xxx'

encrypt.setPublicKey(rsa_pub)
let encryptedPassword = encrypt.encrypt(password)

然后把加密后的賬號和密碼發(fā)送到后端，后端進(jìn)行解密，php解密代碼如下：

public encrypt(str:string) {
    // Return the encrypted string.
    try {
        return hex2b64(this.getKey().encrypt(str));
    } catch (ex) {
        return false;
    }
}

~`+=,.;:/?|';
    $charsLen = strlen($chars) - 1;
    $str = '';
    for($i = 0; $i < $len; $i++) {
        $str .= $chars[mt_rand(0,$charsLen)];
    }
    return $str;
}

// 元信息
const header = base64UrlEncode({
    "alg": "HS256",
    "typ": "JWT"
}
// 內(nèi)容主體
const payload = base64UrlEncode({
    // 可以選用預(yù)定義字段，也可以添加自定義字段
})
// 簽名，用來檢查數(shù)據(jù)是否被篡改了，secret是秘鑰，不能泄露
const signature = HMACSHA256(`${header}.${payload}`, secret)
// 組成最終的token
const token = `${header}.${payload}.${signature}`

let url = `https://github.com/login/oauth/authorize?client_id=xxx&redirect_uri=http://xxx.com/`;
window.open(url)

window.open(url, '_blank', 'width=600, height=600')

https://github.com/login?client_id=ab971aa5416e000&return_to=/login/oauth/authorize?client_id=ab971aa5416e000&redirect_uri=https://juejin.cn/passport/auth/login_success&scope=user:email&state=4b4bgASoVCgoVPZIGM4MDY0MzZmNjJlNDlhMTc1NjBmNjg1MDU3MWUxNWM2oU6-aHR0cHM6Ly9qdWVqaW4uY24vb2F1dGgtcmVzdWx0oVYBoUkAoUQAoUHRCjChTdEKMKFIqWp1ZWppbi5jbqFSBKJQTNEEFaZBQ1RJT06goUyyaHR0cHM6Ly9qdWVqaW4uY24voVTZIDEwNDlkOTIyYTE1YjUyOTdkMTA5NTk5M2UxZThiM2EwoVcAoUYAolNBAKFVww==

this.windowObj = window.open(url, '_blank', 'width=600, height=600')
this.onCloseCheck()

onCloseCheck() {
    if (!this.windowObj) {
        return
    }
    clearTimeout(this.closeCheckTimer)
    this.closeCheckTimer = setTimeout(() => {
        if(this.windowObj.closed) {  
            location.reload()
            clearTimeout(this.closeCheckTimer)
            this.windowObj = null
        } else {
            this.onCloseCheck()
        }
    }, 500);
}

 'xxx',
    'client_secret' => 'xxx',
    'code' => $code,
    'redirect_uri' => 'xxx'
);
// post為一個發(fā)送post請求的方法，不是php的內(nèi)置函數(shù)
post('https://github.com/login/oauth/access_token', $data);