前言
在前一篇使用C#發(fā)送郵箱驗證碼已經(jīng)完成使用.net core web api寫了完成往登錄郵箱發(fā)送驗證碼的接口。現(xiàn)在就用前端調(diào)用接口模擬登錄功能。
接口
public class ApiResp
{
public bool Success { get; set; }
public int Code { get; set; }
public int count { get; set; }
public string msg { get; set; }
public object Data { get; set; }
}
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Model;
using System.IO;
namespace TestSystem.Controllers
{
[Route("api/[controller]/[action]")]
[ApiController]
public class UserController : ControllerBase
{
[HttpPost]
public ApiResp email(string username,string email)
{
var resp = new ApiResp();
if (username == "admin")//模擬數(shù)據(jù)庫讀取 UserName是唯一屬性
{
EmaliSend e = new EmaliSend();
string str = e.emailsendone(email);
resp.Data = str;
resp.Success = true;
return resp;
}
resp.Success = false;
return resp;
}
}
}
前端
前端使用是layui樣式＋Vue寫的功能。
引入Vue
記得把<div id = "app"></div>把前端樣式包含
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div class="layui-form-item" v-if="vercodeVisible">
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-email"
for="LAY-user-login-email"></label>
<input type="text" name="email" v-model="email" placeholder="請輸入郵箱" autocomplete="off"
class="layui-input">
</div>
<div class="layui-row">
<div class="layui-col-xs7">
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
for="LAY-user-login-vercode"></label>
<input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required"
v-model="emalistr" placeholder="驗證碼" class="layui-input">
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<button type="button" class="layui-btn layui-btn-primary layui-btn-fluid"
@click="EmailSend" id="emailButton">獲取驗證碼</button>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" v-if="vercodeVisible" lay-submit
lay-filter="LAY-user-login-submit" @click="loginEmail">驗證碼登錄
</button>
</div>
Vue寫調(diào)用發(fā)送郵箱api
<script>
// 提前引入layui并初始化layer模塊
layui.use('layer', function() {
var layer = layui.layer;
new Vue({
el: '#app',
data: {
username: 'admin',
email: 'xx@163.com', //郵箱
emalistr: '', //郵箱驗證碼
remalistr: '', //緩存郵箱驗證碼
},
mounted() {
},
methods: {
EmailSend() {
const button = document.getElementById('emailButton'); // 獲取按鈕元素
const originalText = button.innerText; // 原始按鈕文本
const username = this.username;
const email = this.email;
// 郵箱格式驗證正則表達式
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
layer.msg('請輸入正確的郵箱地址', {
time: 1000,
icon: 5,
shade: [0.5, '#000'],
shadeClose: true
});
return; // 郵箱格式不正確，停止執(zhí)行發(fā)送郵件操作
}
const headers = new Headers();
headers.append('Content-Type', 'application/json');
const body = JSON.stringify({
username,
email
});
button.disabled = true; // 禁用按鈕
let countDown = 60; // 倒計時時間
const timer = setInterval(() => {
if (countDown >= 1) {
button.innerText = `${countDown}秒后可重發(fā)`; // 更新按鈕文本
countDown--;
} else {
clearInterval(timer);
button.innerText = originalText; // 還原按鈕文本
button.disabled = false; // 啟用按鈕
}
}, 1000);
fetch('https://localhost:44301/api/Login/EmaliSendLogin', {
method: 'POST',
headers: headers,
body: body
})
.then(response => response.json())
.then(data => {
if (data.success) {
layer.msg('發(fā)送成功', {
time: 500,
icon: 6,
shade: [0.5, '#000'],
shadeClose: true,
end: function() {
console.log("驗證碼" + data.data);
localStorage.setItem('remalistr', data.data);
}
});
} else {
layer.msg('發(fā)送失敗', {
time: 1000,
icon: 5,
shade: [0.5, '#000'],
shadeClose: true
});
}
})
.catch(error => {
console.log(error);
layer.msg('發(fā)送失敗，請檢查網(wǎng)絡(luò)連接', {
time: 1000,
icon: 5,
shade: [0.5, '#000'],
shadeClose: true
});
});
},
loginEmail() {
const username = this.username;
const email = this.email;
const emalistr = this.emalistr;
const remalistr = localStorage.getItem('remalistr');
const vercode = this.vercode;
const operator = this.operator;
const headers = new Headers();
headers.append('Content-Type', 'application/json');
const body = JSON.stringify({
username,
email,
});
fetch('https://localhost:44301/api/Login/LoginEmail', {
method: 'POST',
headers: headers,
body: body
})
.then(response => response.json())
.then(data => {
if (data.success && localStorage.getItem('remalistr') === this
.emalistr && this.vercode == this.rvercode) {
layer.msg('登錄成功', {
time: 1000,
icon: 6,
shade: [0.5, '#000'],
shadeClose: true,
end: function() {
console.log(data.data);
localStorage.setItem('data', JSON.stringify(data
.data));
location.href = '../';
}
});
} else {
layer.msg('登錄失敗', {
time: 1000,
icon: 5,
shade: [0.5, '#000'],
shadeClose: true
});
}
})
.catch(error => {
console.log(error);
});
},
}
});
});
</script>
結(jié)果
右側(cè)那驗證碼是緩存中的驗證碼，一般是看不見的。文章來源：http://www.zghlxwxcb.cn/news/detail-803260.html
主要邏輯
前端調(diào)用后端發(fā)送驗證碼的方法，傳入username和郵箱。username是唯一，在數(shù)據(jù)庫不可重復。
后端返回JSON格式給前端，前端解析返回的驗證碼以及其他用戶信息可以進行驗證碼的讀取，然后用戶收到郵箱發(fā)來的驗證碼可以進行登錄，進行用戶輸入的驗證碼和瀏覽器緩存的驗證碼進行比對然后登錄成功。
還可以添加進行驗證碼的過期策略以及添加多種驗證登錄。文章來源地址http://www.zghlxwxcb.cn/news/detail-803260.html
到了這里，關(guān)于使用郵箱發(fā)送驗證碼前端完成登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
