用Abp实现两步验证(Two-Factor Authentication,2FA)登录(二):Vue网页端开发

这篇具有很好参考价值的文章主要介绍了用Abp实现两步验证(Two-Factor Authentication,2FA)登录(二):Vue网页端开发。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

@

目录
  • 发送验证码
  • 登录
  • 退出登录
  • 界面控件
  • 获取用户信息功能
  • 项目地址

前端代码的框架采用vue.js + elementUI 这套较为简单的方式实现,以及typescript语法更方便阅读。

首先添加全局对象:

loginForm: 登录表单对象
twoFactorData: 两步验证数据,
showTwoFactorSuccess: 是否显示两步验证成功提示

loginForm: {
    //登录对象
    username: "",
    password: "",
    twoFactorAuthenticationToken: "",
    twoFactorAuthenticationProvider: "Phone",
},
twoFactorData: null,
showTwoFactorSuccess: false,

发送验证码

编写发送验证码函数sendVerificationCode,发送验证码后,启动定时器,60秒后可以再次发送验证码。

   async sendVerificationCode() {
      this.smsSendCd = 60;
      this.timer = setInterval(() => {
        this.smsSendCd--;
        if (this.smsSendCd <= 0) {
          clearInterval(this.timer);
        }
      }, 1000);
      await request(
        `${this.host}api/TokenAuth/SendTwoFactorAuthenticateCaptcha`,
        "post",
        {
          provider: "Phone",
          userId: this.twoFactorData.userId,
        }
      )
        .catch((re) => {
          var res = re.response.data;
          this.errorMessage(res.error.message);
        })
        .then((re) => {
          var res = re.data.result;
          this.showTwoFactorSuccess = true;
          this.showTwoFactorSuccess = false;
          this.successMessage("发送验证码成功");
        });
    },

request 是利用axios库发送带有访问凭证Header请求功能的封装 ,ajaxRequest.ts请参考博文使用 Abp.Zero 搭建第三方登录模块(三):网页端开发

这里使用js-cookie库获取cookie中的访问凭证,并添加到Header中

import { request } from "@/ajaxRequire";
import Cookies from "js-cookie";

const tokenKey = "main_token";
const setToken = (token: string) => Cookies.set(tokenKey, token);
const cleanToken = () => Cookies.remove(tokenKey);
const getToken = () => Cookies.get(tokenKey);

登录

编写登录函数handleLogin:

 async handleLogin() {
      this.loading = true;

      var userNameOrEmailAddress = this.loginForm.username;
      var password = this.loginForm.password;

      var twoFactorAuthenticationToken =
        this.loginForm.twoFactorAuthenticationToken;
      var twoFactorAuthenticationProvider =
        this.loginForm.twoFactorAuthenticationProvider;

      userNameOrEmailAddress = userNameOrEmailAddress.trim();
      await request(`${this.host}api/TokenAuth/Authenticate`, "post", {
        userNameOrEmailAddress,
        password,
        twoFactorAuthenticationToken,
        twoFactorAuthenticationProvider,
      })
        .catch((re) => {
          var res = re.response.data;
          this.errorMessage(res.error.message);
        })
        .then(async (res) => {
          var data = res.data.result;
          if (data.requiresTwoFactorAuthenticate) {
            this.twoFactorData = data;
          } else {
            setToken(data.accessToken);
            setRememberClientToken(data.rememberClientToken);
            await this.getCurrentUser();
          }
        })
        .finally(() => {
          setTimeout(() => {
            this.loading = false;
          }, 1.5 * 1000);
        });
    },

请注意,当需要进行两步验证时,requiresTwoFactorAuthenticate会返回true,同时返回
twoFactorAuthenticationProviders。

退出登录

登出, 将Token以及用户信息置空

<el-button
    :loading="loading"
    type="danger"
    style="width: 100%"
    @click.native.prevent="logout">
    退出登录
</el-button>
logout() {
    setToken(null);
    this.token = null;
    this.userInfo = null;
},

界面控件

在登录表单的HTML中,添加两步验证控件:
显示规则为,当需要两步验证时(即twoFactorData不为空),显示两步验证控件,否则显示登录控件。

根据twoFactorAuthenticationProviders。我们采用了两种方式,一种是短信验证码,一种是邮箱验证码,这里我们采用了elementUI的tab组件,来实现两种方式的切换。

     <el-form
        ref="loginForm"
        :model="loginForm"
        class="login-form"
        autocomplete="on"
        label-position="left"
      >
        <template v-if="twoFactorData == null">
            ...
        </template>
        <template v-else>
          <p>您的账号开启了两步验证,请选择一种认证方式以继续登录</p>
          <el-tabs
            v-model="loginForm.twoFactorAuthenticationProvider"
            tab-position="top"
          >
            <el-tab-pane
              :lazy="true"
              label="SMS短信验证"
              name="Phone"
              :disabled="
                twoFactorData.twoFactorAuthenticationProviders.indexOf(
                  'Email'
                ) == -1
              "
            >
              <el-row>
                <el-col
                  :span="24"
                  style="
                     {
                      margin-bottom: 10px;
                    }
                  "
                >
                  <el-alert
                    v-if="showTwoFactorSuccess"
                    title="验证码已发送至用户的手机号,请查收"
                    type="info"
                  >
                  </el-alert>
                </el-col>
                <el-col :span="24">
                  <el-form-item
                    class="item"
                    prop="twoFactorAuthenticationToken"
                  >
                    <el-input
                      v-model="loginForm.twoFactorAuthenticationToken"
                      :placeholder="'发送验证码后键入验证码'"
                      tabindex="2"
                      autocomplete="on"
                      @blur="capsTooltip = false"
                    >
                      <el-button
                        slot="append"
                        :disabled="smsSendCd > 0"
                        @click="sendVerificationCode"
                        >{{
                          smsSendCd == 0 ? "发送验证码" : smsSendCd + "后重试"
                        }}</el-button
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>

            <el-tab-pane
              :lazy="true"
              label="邮箱验证"
              name="Email"
              :disabled="
                twoFactorData.twoFactorAuthenticationProviders.indexOf(
                  'Email'
                ) == -1
              "
            >
              <el-row>
                <el-col :span="24">
                  <el-alert
                    v-if="showTwoFactorSuccess"
                    title="验证码已发送至登录用户对应的邮箱,请查收"
                    type="info"
                  >
                  </el-alert>
                </el-col>
                <el-col :span="24">
                ...
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </template>

        <el-row type="flex" class="row-bg" justify="center" :gutter="10">
          <el-col :span="10" v-if="twoFactorData != null">
            <el-button
              :loading="loading"
              style="width: 100%"
              @click.native.prevent="twoFactorData = null"
            >
              返回
            </el-button>
          </el-col>
          <el-col :span="10">
            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleLogin"
            >
              {{ twoFactorData == null ? "登录" : "继续" }}
            </el-button>
          </el-col>
        </el-row>
      </el-form>

用Abp实现两步验证(Two-Factor Authentication,2FA)登录(二):Vue网页端开发

获取用户信息功能

登录成功后我们要拿到当前用户的信息,存入userInfo对象,并在页面上简单展示

<span>{{ userInfo }}</span>

创建一个获取当前用户的函数

async getCurrentUser() {
    await request(
    `${this.host}${this.prefix}/User/GetCurrentUser`,
    "get",
    null
    )
    .catch((re) => {
        var res = re.response.data;
        this.errorMessage(res.error.message);
    })
    .then(async (re) => {
        var result = re.data.result as any;
        this.userInfo = result;
        this.token = getToken();
        clearInterval(this.timer);

        this.smsSendCd = 0;
        this.currentVerifyingType = null;

        this.successMessage("登录成功");
    });
}

最终效果

用Abp实现两步验证(Two-Factor Authentication,2FA)登录(二):Vue网页端开发

项目地址

Github:matoapp-samples文章来源地址https://www.toymoban.com/news/detail-411392.html

到了这里,关于用Abp实现两步验证(Two-Factor Authentication,2FA)登录(二):Vue网页端开发的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 基于TOTP算法的Github两步验证2FA(双因子)机制Python3.10实现

    从今年(2023)三月份开始,Github开始强制用户开启两步验证2FA(双因子)登录验证,毫无疑问,是出于安全层面的考虑,毕竟Github账号一旦被盗,所有代码仓库都会毁于一旦,关于双因子登录的必要性请参见:别让你的服务器(vps)沦为肉鸡(ssh暴力破解),密钥验证、双向因子登录值

    2024年02月08日
    浏览(56)
  • 两步轻松实现ChatGPT联网

            在谷歌应用商店网站下载 “webChatGPT” 插件         Chrome 应用商店 - webchatgpt (google.com)         登录ChatGPT会发现搜索栏新增了很多东西。         Web access按钮打开:使得ChatGPT可以联网搜索。         3results:代表GPT只会展现3条符合的信息。        

    2023年04月11日
    浏览(39)
  • 【 AI 两步实现文本 转 语音】

    基于hugging face 中 XTTS-v2 模型做文本转语音,此模型支持17种语言 https://huggingface.curated.co/ 或者 https://hf-mirror.com/models 找到models处下载XTTS-V2 如果你全程可以联网(/huggingface.co)直接步骤2 搜索模型XTTS-V2,选Files and Versions下载所有文件,其中红框选出来的是训练好的模型 如果不

    2024年02月19日
    浏览(36)
  • 企业如何两步实现数据资产化?

    企业完成建设数据存储和算力基础平台后,再将数据资源归集,下一步就需要将数据资源转化为数据资产。那么什么样的数据资源是数据资产?企业数据管理者需要提升数据质量、消除数据孤岛,并逐步积累数据价值?本篇将从数据平台建设和团队建设两个角度来介绍如何实

    2024年02月05日
    浏览(44)
  • 两步实现Pandas合并相同索引行的秘籍

    在Pandas处理数据的过程中,我们常常会遇到需要对相同索引行进行汇总和统计的情况。那么如何高效地实现DataFrame相同索引行的合并呢? 在Pandas中,可以使用.groupby()和.agg()方法合并相同索引行。 例如,有这样一张DataFrame: 要合并2020-01-01这天的行,可以这样操作: 此时categ

    2024年02月06日
    浏览(37)
  • 【Python Flask+Nginx】实现HTTP、WS (两步实现,简单易懂)

    目录 一、创建Flask应用  二、部署Nginx 2.1 下载Nginx  2.2 修改Nginx配置文件 2.3 启动Nginx 三、测试         首先我写了如下一个基于Flask的Demo,该Demo包含两个接口一个是 HTTP 接口(http://127.0.0.1:5000),一个是 Websocket 接口(ws://127.0.0.1:5000/test) 如果调用HTTP接口,会返回一个

    2024年02月11日
    浏览(35)
  • vue 两步实现点击导航栏,滚动页面到指定位置的功能

    当编写好html部分后,我们创建一个可以获取当前滚轮位置的方法handleScroll(),并在mounted钩子函数中添加该方法的监听事件 创建好监听事件后,我们手动滑动网页右侧滚动条到各版块位置,并打印当前板块的滚轮高度 1、具体思路   ① 获取到当前滚轮位置后,计算其位置与

    2024年02月08日
    浏览(37)
  • 用Abp实现找回密码和密码强制过期策略

    @ 目录 重置密码 找回密码 发送验证码 校验验证码 发送重置密码链接 创建接口 密码强制过期策略 改写接口 Vue网页端开发 重置密码页面 忘记密码控件 密码过期提示 项目地址 用户找回密码,确切地说是 重置密码 ,为了保证用户账号安全,原始密码将不再以明文的方式找回

    2023年04月14日
    浏览(28)
  • Ubuntu的SSH安全配置,查看SSH登录日志文件,修改默认端口,UFW配置防火墙,禁止root用户登录,禁用密码登陆,使用RSA私钥登录,使用 Fail2ban 工具,使用两步验证(2FA)

    环境是Ubuntu 22.04 LTS 不出意外会看到很多类似如下的日志 然后可以统计有多少人在暴力破解root密码错误登录,展示错误次数和ip 因为腾讯云还有个默认用户Ubuntu,也可以一起看看,或是查看一下自己其他用户的错误登录 统计有多少暴力猜用户名的 这台才买回来3天就被扫了

    2024年02月14日
    浏览(54)
  • abp(net core)+easyui+efcore实现仓储管理系统——模块管理升级(六十)

    abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) abp(net core)+easyui+efcore实现仓储管理系统——领域层创建实体(三)   abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四) abp(net core)+easyui+efcore实

    2023年04月09日
    浏览(61)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包