- 在此声明一下一定要看全我说的文字，以防大家中间漏掉什么东西
- 我还是用一个简易模板给大家进行讲解并且演示
- 其中还有登录匹配数据库的方法，大家如果不需要可以删除的
- 我是通过.net core做的其实都一样大家只是用方法而已，直接复制粘贴改方法就可以了
- 接下来大家请看：
1、首先要有一个MVC的页面大概是这个样子的：
大家把这个页面控制器建好之后就可以开始进行邮箱的设置和后台代码的编写了：上方页面的代码我会贴在下面大家直接复制就行，下方包含登录请求和验证码请求的ajax方法和页面样式大家课自行更改：
@{
ViewBag.Title = "验证码";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
.laytable-cell-1-ImgUrl {
height: 100%;
max-width: 100%;
}
.xm-form-select {
width: 180px;
}
</style>
<div class="container mt-3">
<h2>验证码登录练习</h2>
<form action="" id="form1" runat="server">
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="mb-3">
<label for="pwd" class="form-label" style="display:block">Code:</label>
<input type="text" class="form-control" id="code" placeholder="Enter Code" name="Code" style="width:200px;display:inline-block">
<input type="button" id="helpcode" class="btn btn-success" value="获取验证码" />
</div>
<button type="submit" id="login" class="btn btn-primary" >登录</button>
</form>
</div>
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
const fistForm = document.getElementById("form1");
fistForm.addEventListener("submit", (e) => e.preventDefault());
// 验证码
$("#helpcode").click(function () {
$.ajax({
url: "/Email/Code",
type: "post",
contentType: "application/x-www-form-urlencoded",
data: {
"email_r": $("#email").val()
},
success: function (data) {
layer.msg(data, { icon: 1 });
}
})
})
//登录请求
$("#login").click(function () {
$.ajax({
url: "/Email/Login",
type: "post",
contentType: "application/x-www-form-urlencoded",
data: {
"email_r": $("#email").val(),
"password": $("#pwd").val(),
"code": $("#code").val()
},
success: function (data) {
if (data != "true") {
layer.msg(data, { icon: 2 });
} else {
layer.msg("登录成功，正在跳转…", { icon: 1 });
window.location.href = "/UsersLianXi/Index"
}
}
})
})
</script>
2、接下来开始邮箱的配置，这一步还是非常重要的，如果没有成功的话就会得不到发送邮件的权限，导致验证码发送不了，所以我们接下来要按照步骤完成，我这里用的是QQ邮箱为例子，大家也可以用别的邮箱：
按照上面的步骤弄好之后，一定要记住他给你弹出的那个验证码，因为我们在接下来的后台中会用到切记切记！！！
3、我们上面的东西做好后，我们就可以在控制器中写我们的后台方法了，控制器的名字和前台请求的名字一定要一样！！！方法名字也一定要一样否则请求不到！！！
- 在下面这个控制器中一共有三个方法
- 一个是得到随机验证码的方法是数字加字母的；需要存一下然后给请求邮箱方法
- 一个是请求邮箱的，把我们生成的验证码通过这个方法请求
- 一个是登录验证的，大家不需要的可以删除，上方的那个实体也可以删除如果不需要的话但是验证码和邮箱请求别删除
using Core.DB.Models;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Net.Mail;
using System.Net;
using System.Drawing;
using System.Text;
using System.Drawing.Imaging;
using Microsoft.AspNetCore.Http;
using ARC.Common.Help;
namespace Core.AdminUI.Controllers
{
public class EmailController : BaseController
{
//数据库实体，如果不需要删除就行了
public EmailController(MADbContext db) : base(db)
{
}
//RandomHelper aaa = new RandomHelper();
//六位验证码
static string cood = createrandom(6).ToLower();
string cood2 = cood;
private static string createrandom(int codelengh)
{
int rep = 0;
string str = string.Empty;
long num2 = DateTime.Now.Ticks + rep;
rep++;
Random random = new Random(((int)(((ulong)num2) & 0xffffffffL)) | ((int)(num2 >> rep)));
for (int i = 0; i < codelengh; i++)
{
char ch;
int num = random.Next();
if ((num % 2) == 0)
{
ch = (char)(0x30 + ((ushort)(num % 10)));
}
else
{
ch = (char)(0x41 + ((ushort)(num % 0x1a)));
}
str = str + ch.ToString();
}
return str;
}
public IActionResult Index()
{
return View();
}
/// <summary>
/// 发送验证码
/// </summary>
[HttpPost]
public ActionResult Code(string email_r)
{
if (email_r.Contains("@"))
{
//实例化一个发送邮件类。
MailMessage mailMessage = new MailMessage();
//发件人邮箱地址，方法重载不同，可以根据需求自行选择。
mailMessage.From = new MailAddress("填写你设置好的邮箱账号");
//收件人邮箱地址。
mailMessage.To.Add(new MailAddress(email_r));
//邮件标题。
mailMessage.Subject = "这是你的验证码为：";
//邮件内容。
mailMessage.Body = "验证码：" + cood + "。此验证码只用于登录微博验证身份，请勿转发他人。【微博】";
//实例化一个SmtpClient类。
SmtpClient client = new SmtpClient();
//在这里我使用的是qq邮箱，所以是smtp.qq.com，如果你使用的是126邮箱，那么就是smtp.126.com。
client.Host = "smtp.qq.com";
//使用安全加密连接。
client.EnableSsl = true;
//不和请求一块发送。
client.UseDefaultCredentials = false;
//验证发件人身份(发件人的邮箱，邮箱里的生成授权码);
client.Credentials = new NetworkCredential("填写你设置好的邮箱账号", "ijnbqqifmxjwdahg");
//发送
client.Send(mailMessage);
return Content("发送成功");
}
return Content("邮箱格式有误，请重新输入。");
}
[HttpPost]
public ActionResult Login(string email_r, string password, string code)
{
if (email_r == null || password ==null)
{
return Content("邮箱、密码、验证码不能为空！！");
}
if (code == null && code != cood2)
{
return Content("验证码不匹配！！");
}
var user = dbContext.User_tbs.FirstOrDefault(m => m.Email == email_r && m.Password == password);
if (user == null)
{
return Content("登录失败");
}
return Content("true");
//Session["user"] = user;
}
}
}
1174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
