使用邮箱发送验证码前端完成登录

这篇具有很好参考价值的文章主要介绍了使用邮箱发送验证码前端完成登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

在前一篇使用C#发送邮箱验证码已经完成使用.net core web api写了完成往登录邮箱发送验证码的接口。现在就用前端调用接口模拟登录功能。

接口

 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")//模拟数据库读取 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,后端C#,前端

引入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写调用发送邮箱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; // 邮箱格式不正确,停止执行发送邮件操作
							}
							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}秒后可重发`; // 更新按钮文本
									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('发送成功', {
											time: 500,
											icon: 6,
											shade: [0.5, '#000'],
											shadeClose: true,
											end: function() {
												console.log("验证码" + data.data);
												localStorage.setItem('remalistr', data.data);
											}

										});
									} else {
										layer.msg('发送失败', {
											time: 1000,
											icon: 5,
											shade: [0.5, '#000'],
											shadeClose: true
										});
									}
								})
								.catch(error => {
								  console.log(error);
								  layer.msg('发送失败,请检查网络连接', {
								    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>

结果

使用邮箱发送验证码前端完成登录,前端Vue,后端C#,前端
右侧那验证码是缓存中的验证码,一般是看不见的。

主要逻辑

前端调用后端发送验证码的方法,传入username和邮箱。username是唯一,在数据库不可重复。
后端返回JSON格式给前端,前端解析返回的验证码以及其他用户信息可以进行验证码的读取,然后用户收到邮箱发来的验证码可以进行登录,进行用户输入的验证码和浏览器缓存的验证码进行比对然后登录成功。
还可以添加进行验证码的过期策略以及添加多种验证登录。文章来源地址https://www.toymoban.com/news/detail-803260.html

到了这里,关于使用邮箱发送验证码前端完成登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java发送(QQ)邮箱、验证码发送

    使用Java应用程序发送 E-mail 十分简单,但是首先需要在项目中导入 JavaMail API 和Java Activation Framework (JAF) 的jar包。 菜鸟教程提供的下载链接: JavaMail mail.jar 1.4.5 JAF(版本 1.1.1) activation.jar 1.1 导包 在基础Java工程中 首先在项目目录下创建 libs 文件夹后将下载好的 jar包 复制进去

    2024年02月09日
    浏览(42)
  • 个人商城系统开源(发送邮箱验证码!)

    原文地址:个人商城系统开源(发送邮箱验证码!) - Pleasure的博客 下面是正文内容: 由于近期实在没有什么话题可写和一些有趣的项目教程可以分享。所以我只能决定将我自己亲手编写的一个迷你迷你商城系统进行开源。 也就是放在我博客右边的“我的另一个网站”(由

    2024年03月08日
    浏览(46)
  • 【后端学习笔记·Golang】邮箱邮件验证

    流程: 接收用户请求后生成随机验证码,并将验证码存入Redis中,并设置TTL 通过gomail发送验证码给用户邮箱 接收用户输入的验证码,与Redis中存放的验证码进行比对 ​ 随机种子通过 time.Now().UnixNano() 进行设置,以确保对于同一个用户每次请求都使用不同的种子。然后,定义

    2024年04月26日
    浏览(50)
  • node后端+vue前端实现接口请求时携带authorization验证

    我们在写web项目时,后端写好接口,前端想要调用后端接口时,除了登录注册页面,所有的请求都需要携带authorization,这样是为了避免随意通过接口调取数据的现象发生。这是写web项目时最基础的点,但是也挺麻烦的,涉及前后端好几个地方的编码,经常忘记怎么写的,现在

    2024年02月02日
    浏览(47)
  • SpringBoot整合QQ邮箱发送验证码

    基于SpringBoot + QQ邮箱服务 + Hutools实现的获取验证码功能,接下来从如何申请授权码,如何配置项目,如何启动项目,如何测试项目进行讲解,下面的图片是一个测试案例,使用postman进行测试,在测试上填写发送人的邮箱,即可收到验证码邮箱 1.从仓库拉取代码 2.需要申请邮

    2024年02月07日
    浏览(59)
  • 引入QQ邮箱发送验证码进行安全校验

    其他方案=引入短信服务发送手机验证码进行安全校验 操作相对复杂且收费,详细教程可供参考选择 在我们进行登录注册等等敏感操作时,为了保证用户信息的安全性,常常会碰到需要接收手机短信验证码进行验证的场景,虽然它的安全系数相对较高,但是引入手机验证码使

    2024年02月04日
    浏览(44)
  • JeecgBoot Vue3 版本前端后端设置免登录-不登录直接访问页面-前端免登录直接访问

    jeecgboot Vue3 版本做出了巨大的更新,前端项目的变动最大,在使用的时候官网文档有的地方没有介绍,如果您想做官网,前台的项目,这个时候需要绕过登录,直接进入项目,这个时候需要一下的配置,即可实现对应的功能。 在学习编程的时候不光要和老师,教程一一的学习

    2024年02月10日
    浏览(40)
  • vue前端实现登录时加验证码

    vue移动端(PC端)图形验证码 vue2-verify 地址:vue2-verify的npmjs地址 安装使用: 支持的验证码类型: 常规验证码picture 常规的验证码由数字和字母构成,用户输入不区分大小写,可变形成汉字验证。 运算验证码compute 运算验证码主要通过给出数字的加减乘运算,填写运算结果进

    2024年02月07日
    浏览(34)
  • 前端Vue自定义验证码密码登录切换tabs选项卡标签栏标题栏 验证码登录模版 密码登录模版

    前端Vue自定义验证码密码登录切换tabs选项卡标签栏标题栏 验证码登录模版 密码登录模版, 请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13221 效果图如下: 实现代码如下: 使用方法 HTML代码实现部分 组件实现代码

    2024年02月11日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包