書接上回，上一回我們按照“低耦合高內聚”的組織架構方針對專案的整體結構進行了優化，本回將會繼續撰寫業務，那就是用戶的登錄邏輯，將之前用戶管理模塊中添加的用戶賬號進行賬號和密碼的校驗，校驗通過后留存當前登錄用戶的資訊，程序中使用圖形驗證碼強制進行人機互動，防止賬號的密碼被暴力破解，
登錄邏輯
首先在邏輯層handler包中，創建用戶模塊檔案user.go:
package handler
import (
"github.com/kataras/iris/v12"
)
//用戶登錄模板
func User_signin(ctx iris.Context) {
ctx.View("/signin.html")
}
這里通過背景關系管理器結構體ctx渲染用戶登錄模板，
隨后，在views模板目錄中，添加用戶登錄模板signin.html:
<div >
<div >
<div style="max-width: 400px;">
<h1 >登 錄</h1>
<div >
<div >
<ul >
<li><a title="GitHub" href="JavaScript:void(0)">Connect With <strong>Meta Mask</strong></a></li>
</ul>
</div>
<div >— or —</div>
</div>
<div >
<div id="div_id_login" >
<label for="id_login" > Username<span >*</span></label>
<div ><input type="text" placeholder="請輸入用戶名" v-model="username" autofocus="" ></div>
</div>
</div>
<div >
<div id="div_id_password" >
<label for="id_password" > Password<span >*</span></label>
<div >
<input type="password" placeholder="請輸入密碼" v-model="password" minlength="8" maxlength="99" >
</div>
</div>
</div>
<div ><button name="jsSubmitButton">點擊登錄</button></div></div>
</div>
</div>
這里的表單中有兩個欄位，分別是Username和Password，
隨后通過Vue.js進行資料雙向系結邏輯：
const App = {
data() {
return {
username: "",
password: "",
};
},
created: function() {
},
methods: {
},
};
const app = Vue.createApp(App);
app.config.globalProperties.axios = axios;
app.mount("#app");
隨后添加登錄模板路由邏輯：
app.Get("/signin/", handler.User_signin)
訪問 http://localhost:5000/signin/ 如圖所示：
隨后撰寫登錄后臺業務user.go：
//登錄動作
func Signin(ctx iris.Context) {
db := database.Db()
defer func() {
_ = db.Close()
}()
Username := ctx.PostValue("username")
Password := ctx.PostValue("password")
user := &model.User{}
db.Where(&model.User{Username: Username, Password: mytool.Make_password((Password))}).First(&user)
ret := make(map[string]interface{}, 0)
if user.ID == 0 {
ret["errcode"] = 1
ret["msg"] = "登錄失敗,賬號或者密碼錯誤"
ctx.JSON(ret)
return
}
ret["errcode"] = 0
ret["msg"] = "登錄成功"
ret["username"] = user.Username
ctx.JSON(ret)
}
這里通過db.Where函式進行用戶名和密碼的檢索，注意密碼需要通過mytool.Make_password函式轉換為密文，
隨后通過判斷主鍵ID的值來判定賬號的合法性，這里注意回傳值字典的值通過介面(interface)宣告初始化，如此字典的value就可以兼容不同的資料型別，
在和前端聯調之前，撰寫測驗腳本tests.go:
package main
import (
"bytes"
"fmt"
"io/ioutil"
"net/http"
"net/url"
)
func main() {
formValues := url.Values{}
formValues.Set("username", "123")
formValues.Set("password", "123")
formDataStr := formValues.Encode()
formDataBytes := []byte(formDataStr)
formBytesReader := bytes.NewReader(formDataBytes)
resp, err := http.Post("http://localhost:5000/signin/", "application/x-www-form-urlencoded;charset=utf-8", formBytesReader)
if err != nil {
fmt.Println(err)
return
}
body, err := ioutil.ReadAll(resp.Body)
fmt.Println(string(body))
}
這里模擬表單資料，向后端Iris發起Post請求，程式回傳：
{"errcode":0,"msg":"登錄成功","username":"123"}
登錄成功后，回傳當前登錄用戶賬號，
反之：
{"errcode":1,"msg":"登錄失敗,賬號或者密碼錯誤"}
回傳錯誤碼以及提示資訊，
接著前端撰寫異步請求邏輯：
//登錄請求
signin:function(){
this.myaxios("http://localhost:5000/signin/","post",{"username":this.username,"password":this.password}).then(data =https://www.cnblogs.com/v3ucn/archive/2022/12/20/> {
console.log(data)
alert(data.msg);
});
}
如圖所示：
至此，登錄邏輯就完成了，
影像驗證碼
圖形驗證碼的主要作用是強制當前用戶進行人機互動，藉此來抵御人工智能的自動化攻擊，可以防止惡意破解密碼、刷票、論壇灌水，有效防止黑客對某一個特定注冊用戶用特定程式暴力破解進行不斷的登錄嘗試，
首先在專案內安裝三方的驗證碼校驗包：
go get -u github.com/dchest/captcha
隨后在工具類中添加驗證碼生成邏輯mytool.go:
package mytool
import (
"crypto/md5"
"fmt"
"io"
"github.com/dchest/captcha"
"github.com/kataras/iris/v12"
)
const (
StdWidth = 80
StdHeight = 40
)
func GetCaptchaId(ctx iris.Context) {
m := make(map[string]interface{}, 0)
m["errcode"] = 0
m["msg"] = "獲取成功"
m["captchaId"] = captcha.NewLen(4)
ctx.JSON(m)
return
}
這里定義常量StdWidth和StdHeight，意為圖片寬和高，然后通過captcha.NewLen(4)函式獲取驗證碼的標識，這里NewLen(4)標識生成四位驗證碼，如果不需要定制化操作，也可以使用captcha.New()回傳默認長度的驗證碼，
接著添加路由：
app.Post("/captcha/", mytool.GetCaptchaId)
繼續使用tests.go腳本進行測驗：
package main
import (
"bytes"
"fmt"
"io/ioutil"
"net/http"
"net/url"
)
func main() {
formValues := url.Values{}
formValues.Set("username", "123")
formValues.Set("password", "1243")
formDataStr := formValues.Encode()
formDataBytes := []byte(formDataStr)
formBytesReader := bytes.NewReader(formDataBytes)
resp, err := http.Post("http://localhost:5000/captcha/", "application/x-www-form-urlencoded;charset=utf-8", formBytesReader)
if err != nil {
fmt.Println(err)
return
}
body, err := ioutil.ReadAll(resp.Body)
fmt.Println(string(body))
}
程式回傳：
{"captchaId":"qGlf8P9RJtJJzc3Q1v4z","errcode":0,"msg":"獲取成功"}
這里就獲取到captchaId的值為qGlf8P9RJtJJzc3Q1v4z，隨后撰寫邏輯，使用captchaId渲染具體的圖片緩沖區：
func GetCaptchaImg(ctx iris.Context) {
captcha.Server(StdWidth, StdHeight).
ServeHTTP(ctx.ResponseWriter(), ctx.Request())
}
這里通過captcha.Server將圖片渲染出來，配置路由：
app.Get("/captcha/*/", mytool.GetCaptchaImg)
注意必須通過Get方式進行請求，因為需要瀏覽器對圖片進行訪問，如圖所示：
隨后，撰寫前端邏輯，首先登錄頁面初始化時，生成驗證碼id：
//獲取驗證碼標識
get_cid:function(){
this.myaxios("http://localhost:5000/captcha/","post").then(data =https://www.cnblogs.com/v3ucn/archive/2022/12/20/> {
console.log(data)
this.cid = data.captchaId;
});
}
隨后添加驗證碼欄位，將驗證碼展示在表單中：
<div >
<div id="div_id_password" >
<label for="id_password" > 驗證碼<span >
<img v-if="cid" :src="'http://localhost:5000/captcha/'+cid+'.png'" />
</span></label>
<div >
<input type="text" placeholder="請輸入驗證碼" v-model="code" minlength="8" maxlength="99" >
</div>
</div>
</div>
這里通過拼接將獲取到的驗證碼id系結在圖片標簽中，如圖所示：
接著，改寫用戶登錄邏輯user.go:
ret := make(map[string]interface{}, 0)
cid := ctx.PostValue("cid")
code := ctx.PostValue("code")
if captcha.VerifyString(cid, code) == false {
ret["errcode"] = 2
ret["msg"] = "登錄失敗,驗證碼錯誤"
ctx.JSON(ret)
return
}
這里增加兩個引數，驗證碼標識以及用戶輸入的表單驗證碼，通過captcha.VerifyString函式進行比對，如果二者吻合那么證明用戶輸入正確，否則輸入錯誤，
同樣地，前端應對增加表單請求欄位：
//登錄請求
signin:function(){
this.myaxios("http://localhost:5000/signin/","post",{"username":this.username,"password":this.password,"cid":this.cid,"code":this.code}).then(data =https://www.cnblogs.com/v3ucn/archive/2022/12/20/> {
console.log(data)
alert(data.msg);
});
}
如圖所示：
至此，集成影像驗證碼的登錄邏輯就完成了，
結語
每一次captcha.NewLen(4)回傳的驗證碼標識都是唯一的，所以也就避免了多個賬號并發登錄所帶來的覆寫問題，同時驗證碼本體和其生命周期都存盤在Iris服務的記憶體中，既靈活又方便，登錄成功以后，下一步就面臨用戶資訊留存方案的選擇，該專案已開源在Github：https://github.com/zcxey2911/IrisBlog ，與君共觴，和君共勉，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/540355.html
標籤：其他