基于antd pro的企微验证码登录功能（前后端）

已于 2023-04-19 21:22:04 修改
阅读量1.9k 收藏 3
点赞数
分类专栏： Java JS 文章标签： typescript
于 2022-05-31 12:14:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lonelymanontheway/article/details/125060776
版权
Java 同时被 2 个专栏收录
86 篇文章 6 订阅
订阅专栏
JS
10 篇文章 0 订阅
订阅专栏

概述

企业微信作为一款即时办公通讯工具，在企业级应用中有很多功能场景，如：告警触达，数据推送，登录验证。其中登录验证方式，可以替换手机短信验证码登录方式，能够一定程度上为公司节约一笔费用支出。本文就登录验证这一功能，设计较为详细的一整套解决方案。

设计

登录界面设计：
在这里插入图片描述
大致交互设计：

  1. 登录账号，即域账户；密码为域账号密码，即开机密码。两者皆不可为空。前后端都需要拦截校验；
  2. 只有输入账号和密码后，才能点击获取验证码；即：点击获取验证码，需要拦截校验账号密码是否为空。为空，则不进入60s倒计时；不为空，则进入倒计时，并调用后端接口；
  3. 后端响应获取验证码，即getWechatCode，将验证码发送到用户的企微，验证码为4位随机数字
  4. 验证码不可为空，点击登录按钮前，前后端都需要校验；
  5. 登录成功，则跳转到首页；登录失败，弹窗展示失败信息；

实现

需求很明确，功能实现就不难。

登录界面是一个系统或者平台应用的first sight，需要给用户留一个好的印象。

前端

antd中并没有自带能够倒计时的按钮，但antd pro的ProForm components中倒是提供针对验证码相关的组件ProFormCaptcha。

前端代码：
service.ts文件：

export async function getWechatCode(params: any) {
  return request('/api/login/wechatCode', {
    method: 'POST',
    data: params,
  });
}

export async function accountLogin(params: LoginParamsType2) {
  return request('/api/login/login', {
    method: 'POST',
    data: params,
  });
}

model.ts文件：

import { stringify } from 'querystring';
import { history, Reducer, Effect } from 'umi';
import { accountLogin } from '@/services/login';
import { setAuthority, setCookie } from '@/utils/authority';
import { getPageQuery } from '@/utils/utils';
import { message } from 'antd';

export interface StateType {
  status?: 'ok' | 'error';
  type?: string;
  logMsg?: string;
  currentAuthority?: 'user' | 'guest' | 'admin';
}

export interface LoginModelType {
  namespace: string;
  state: StateType;
  effects: {
    login: Effect;
  };
  reducers: {
    changeLoginStatus: Reducer<StateType>;
    setLoginErrorMsg: Reducer<StateType>;
  };
}

const Model: LoginModelType = {
  namespace: 'login',

  state: {
    status: undefined,
  },

  effects: {
    *login({ payload, callback }, { call, put, select }) {
      const response = yield call(accountLogin, {...payload});
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
      // Login successfully
      if (response.status === 'success') {
        setCookie("token", response.data?.jwtToken);
        const urlParams = new URL(window.location.href);
        const params = getPageQuery();
        message.success('登录成功！');
        let { redirect } = params as { redirect: string };
        if (redirect) {
          const redirectUrlParams = new URL(redirect);
          if (redirectUrlParams.origin === urlParams.origin) {
            redirect = redirect.substr(urlParams.origin.length);
            if (redirect.match(/^\/.*#/)) {
              redirect = redirect.substr(redirect.indexOf('#') + 1);
            }
          } else {
            window.location.href = '/';
            return;
          }
        }
        history.replace(redirect || '/');
      } else if (response.status === 'error' && callback) {
        callback()
      }
    },
  },

  reducers: {
    changeLoginStatus(state, { payload }) {
      setAuthority(payload.currentAuthority);
      return {
        ...state,
        status: payload.status,
        logMsg: payload.msg,
        type: 'account',
      };
    },
  },
};

export default Model;

Login.tsx文件，其中核心代码为throw new Error("获取验证码错误");：

import React, {useState} from "react";
import {Form, message} from 'antd';
import {connect, Dispatch, FormattedMessage, useIntl} from "umi";
import type {StateType} from '@/models/login';
import ProForm, {ProFormCaptcha, ProFormText} from '@ant-design/pro-form';
import type {ConnectState} from '@/models/connect';
import type {LoginParamsType2} from "@/services/login";
import {getWechatCode} from "@/services/login";
import styles from './index.less';
import {PasswordIcon, UserIdIcon, WechatCodeIcon} from './svg/svg';

interface LoginProps {
  dispatch: Dispatch;
  userLogin: StateType;
  submitting?: boolean;
}

const LoginMessage: React.FC<{
  content: string;
}> = ({content}) => (
  <div className={styles.loginMessage}>
    {content}
  </div>
);

const Login: React.FC<LoginProps> = (props) => {
  const {userLogin = {}, submitting} = props;
  const {status, type: loginType,} = userLogin;
  const [type] = useState<string>('account');
  const intl = useIntl();
  const [form] = Form.useForm();
  const [wechatCodeInfo, setWechatCodeInfo] = useState<any>({})
  const handleSubmit = (values: LoginParamsType2) => {
    const {dispatch} = props;
    dispatch({
      type: 'login/login',
      payload: {...values, type},
      callback: () => {
        dispatch({
          type: 'imagecode/getImgCode',
        })
      }
    })
  };

  return (
    <div className={styles.main}>

      <ProForm
        form={form}
        initialValues={{
          autoLogin: true,
        }}
        submitter={{
          render: (_, dom) => dom.pop(),
          submitButtonProps: {
            loading: submitting,
            size: 'large',
            style: {
              width: '100%',
              background: '#3F81EE',
              borderColor: '#3F81EE',
            },
          },
          searchConfig: {
            submitText: '登录',
          },
        }}
        onFinish={async (values) => {
          handleSubmit(values);
        }}
      >

        {status === 'error' && (
          <LoginMessage
            content={userLogin.logMsg ?? ''}
          />
        )}
        {wechatCodeInfo.status === 'error' && (
          <LoginMessage
            content={wechatCodeInfo.msg ?? ''}
          />
        )}
        {type === 'account' && (
          <>
            <ProFormText
              name="loginName"
              fieldProps={{
                size: 'large',
                prefix: <UserIdIcon className={styles.prefixIcon}/>,
              }}
              placeholder={intl.formatMessage({
                id: 'pages.login.username.placeholder',
                defaultMessage: '请输入账号',
              })}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="pages.login.username.required"
                      defaultMessage="请输入账号!"
                    />
                  ),
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <PasswordIcon className={styles.prefixIcon}/>,
              }}
              placeholder={intl.formatMessage({
                id: 'pages.login.password.placeholder',
                defaultMessage: '请输入您的密码',
              })}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="pages.login.password.required"
                      defaultMessage="请输入密码！"
                    />
                  ),
                },
              ]}
            />
            <ProFormCaptcha
              name="wechatCode"
              fieldProps={{
                size: 'large',
                prefix: <WechatCodeIcon className={styles.prefixIcon}/>,
              }}
              captchaProps={{
                size: 'small',
              }}
              placeholder={intl.formatMessage({
                id: 'pages.login.wechatCode.placeholder',
                defaultMessage: '请输入企微验证码',
              })}
              captchaTextRender={(timing, count) => {
                if (timing) {
                  return `${count} 获取验证码`;
                }
                return '获取验证码';
              }}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="pages.login.wechatCode.required"
                      defaultMessage="请输入企微验证码!"
                    />
                  ),
                },
                {
                  pattern: /^\d{4}$/,
                  message: '请输入4位数字企微验证码！',
                },
              ]}
              onGetCaptcha={async () => {
                if (!form.getFieldValue('loginName') || !form.getFieldValue('password')) {
                  message.error('请输入用户名密码');
                  // 满足拦截条件时,不触发60s倒计时
                  throw new Error("获取验证码错误");
                  return;
                }
                const values = form.getFieldsValue();
                getWechatCode({
                  loginName: values.loginName,
                  password: values.password,
                }).then((res: any) => {
                  setWechatCodeInfo(res)
                })
              }}
            />
          </>
        )}

      </ProForm>
    </div>
  );
}

export default connect(({login, loading}: ConnectState) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);

后端

Controller类，个人认为不应该有任何数据校验逻辑，应该足够轻量化：

@RequestMapping("wechatCode")
public String getWechatCode(@RequestBody JSONObject jsonObject) {
    return userService.getWechatCode(jsonObject);
}

@RequestMapping("login")
public String login(@RequestBody JSONObject jsonObject) {
    return userService.login(jsonObject);
}

发送验证码接口，前端传参loginName和password。主要逻辑：

  1. 前端传参非空校验
  2. 用户是否是数据库合法记录
  3. 用户名密码能否通过LDAP域检查
  4. 检查通过，则生成随机验证码，将验证码缓存到Redis，过期时间1分钟
  5. 验证码发送到用户企微
@Override
public String getWechatCode(JSONObject jsonObject) {
    String loginName = jsonObject.getString("loginName");
    String password = jsonObject.getString("password");
    if (StringUtils.isEmpty(loginName) || StringUtils.isEmpty(password)) {
        return JSONObject.toJSONString(ServiceUtil.returnError("用户名或密码不能为空!"));
    }
    try {
        // 判断用户是否存在
        DashboardUser user = userMapper.findUserByName(loginName);
        if (user == null) {
            return JSONObject.toJSONString(ServiceUtil.returnError(Constant.USERNAME_PASSWORD_ERR_MSG));
        }
        // 判断密码是否正确
        if (adminUserId.equals(user.getUserId()) || 1 == user.getUserType()) {
            // 普通用户
            if (!StringUtil.getMd5(password).equals(user.getUserPassword())) {
                return JSONObject.toJSONString(ServiceUtil.returnError(Constant.USERNAME_PASSWORD_ERR_MSG));
            }
        } else {
            // 域用户
            Boolean status = HttpUtil.checkDomain("CORP\\" + loginName, password, domainIp, domainPort);
            if (!status) {
                return JSONObject.toJSONString(ServiceUtil.returnError(Constant.USERNAME_PASSWORD_ERR_MSG));
            }
        }
        // 生成4位随机数字验证码并放入缓存中，缓存key是用户名_login_valid_qiwei,value是验证码,有效期1分钟
        String wechatCode = DataUtil.getRandomNum(4);
        log.info("4位随机数字验证码是：{}", wechatCode);
        String wechatKey = loginName.concat("_login_valid_qiwei");
        RedisTool.setKeyValueExpire(jedisCluster, wechatKey, wechatCode, 60);
        // 发送验证码到用户企微
        SendWeChatUtil.sendWeChat("你的账号正在尝试登录http://report.teslacorp.com，验证码：" + wechatCode + "，有效期1分钟，请及时处理。", user.getUserQiwei());
        return JSONObject.toJSONString(ServiceUtil.returnSuccess(wechatCode));
    } catch (Exception e) {
        return JSONObject.toJSONString(ServiceUtil.returnError(e.getMessage()));
    }
}

登录接口，前端传参：

  • username：用户名，可以是普通账户，也可以是域账户；
  • password：密码；
  • weChatCode：用户收到的企微验证码

主要有如下逻辑：

  1. 前端传参不为空检查
  2. 验证码不能是过期的，即必须和缓存里设置的带有过期时间的验证码相等
  3. 用户是否存在，是否是user表里的有效记录
  4. 用户名密码登录LDAP域检查
  5. 登录成功，则查询其权限role信息
  6. 生成jwt token
@Override
public String login(JSONObject jsonObject) {
    String wechatCode = jsonObject.getString("wechatCode");
    String loginName = jsonObject.getString("loginName");
    String password = jsonObject.getString("password");
    if (StringUtils.isEmpty(wechatCode)) {
		return JSONObject.toJSONString(ServiceUtil.returnError("企微验证码为空，请重试"));
    }
    if (StringUtils.isEmpty(loginName) || StringUtils.isEmpty(password)) {
        return JSONObject.toJSONString(ServiceUtil.returnError("用户名或密码不能为空!"));
    }
    // 验证企业微信验证码
    String wechatKey = loginName.concat("_login_valid_qiwei");
    try {
        String cacheWechatCode = RedisTool.getValueByKey(jedisCluster, wechatKey);
        // 验证企业微信验证码是否过期
        if (StringUtils.isEmpty(cacheWechatCode)) {
			return JSONObject.toJSONString(ServiceUtil.returnError("企微验证码过期，请重试"));
        }
        // 验证企业微信验证码是否正确
        if(!cacheWechatCode.equals(wechatCode)){
            return JSONObject.toJSONString(ServiceUtil.returnError("企微验证码错误，请重试"));
        }
        RedisTool.delKey(jedisCluster,wechatKey);
    } catch (Exception e) {
        return JSONObject.toJSONString(ServiceUtil.returnError(e.getMessage()));
    } finally {
        RedisTool.delKey(jedisCluster, wechatKey);
    }
    try {
        // 判断用户是否存在
        DashboardUser user = userMapper.findUserByName(loginName);
        if (user == null) {
            return JSONObject.toJSONString(ServiceUtil.returnError(Constant.USERNAME_PASSWORD_ERR_MSG));
        }
        // 普通用户
        if (adminUserId.equals(user.getUserId()) || 1 == user.getUserType()) {
            if (!StringUtil.getMd5(password).equals(user.getUserPassword())) {
                return JSONObject.toJSONString(ServiceUtil.returnError(Constant.USERNAME_PASSWORD_ERR_MSG));
            }
        } else {
            // 域用户
            Boolean status = HttpUtil.checkDomain("CORP\\" + loginName, password, domainIp, domainPort);
            if (!status) {
                return JSONObject.toJSONString(ServiceUtil.returnError(Constant.USERNAME_PASSWORD_ERR_MSG));
            }
        }
        // 登录成功
        List<DashboardRole> roleList = dashboardRoleResMapper.getRoleIdByUserId(user.getUserId());
        List<String> roleIds = roleList.stream().map(DashboardRole::getRoleId).collect(Collectors.toList());
        List<String> roleNames = roleList.stream().map(DashboardRole::getRoleName).collect(Collectors.toList());
        String jwtToken = JwtUtil.createJwt(user.getUserName(), user.getLoginName(), user.getUserId(), clientId, roleIds, roleNames,
                name, expiresSecond * 1000L, base64Secret);
        JSONObject resultJson = new JSONObject();
        resultJson.put("jwtToken", jwtToken);
        return JSONObject.toJSONString(ServiceUtil.returnSuccessData(resultJson));
    } catch (Exception e) {
        return JSONObject.toJSONString(ServiceUtil.returnError(e.getMessage()));
    }
}

进阶

注：本来我们的这款企业级内部平台应用是采用滑动验证码登录方案，后来应部门要求，所有内部应用风格统一化，如都加上watermark水印（纯前端改造优化），登录界面的登录功能统一为发送企微验证码。

回顾一下上面的后端代码，login接口本来是已有的，在此基础之上增加一个getWechatCode接口，这个改造是另一个所谓资深开发写的。

仅仅分析这两个接口，不难发现有很多重复的逻辑，参数校验就不说了。检查前端传参用户名是否是数据库的合法记录，以及检查LDAP域合法性都是可以复用的代码。可复用的代码应该抽取出来，比如放在一个private bool checkUser(String username, String password)方法里。

参考

JWT入门教程
LDAP实战之登录验证、用户查询、获取全量有效用户及邮件组

johnny233
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Spring WebFlux + React搭建后台管理系统（3）: antd pro v5实现登入登出
泛泛之素
08-28 1889
antdpro是蚂蚁金服开发的后台管理框架模板，继承了许多组建，可以满足快速开发，组建使用的antd，组建种类比较多，功能比较全，设计也挺好看的，但是封装程度有点高，用起来可能不是很灵活，一些功能需要研究一下。 1. 创建antd项目 官方创建项目说明 1.1 命令行键入： yarn create umi 1.2 选择Pro v5： 这时项目文件全部拉下来了： 1.3 下载依赖 通过yarn下载，时间会比较长 yarn 1.4 运行项目 通过键入yarn start启动项目 通过浏览器
antd-admin:基于antd pro开发的 后台管理系统框架实例
05-02
antd-admin基于antd pro开发的 后台管理系统框架实例antd pro 基于dva开发首先要学习 dva，学习dva之前 要了解ES6的基本语法，此教程较为全面，比较适合入门prettier gitcommit 时检查用 husky 和 lint-staged 构建...
ProForm 验证码ProFormCaptcha timing控制
runrun117的博客
08-10 2435
<ProFormCaptcha fieldProps={{ size: 'large', // prefix: <MailTwoTone className={styles.prefixIcon} />, }} captchaProps={{ size.
获取验证码功能
最新发布
追风也追己
05-17 259
在日常的开发中，我们可能经常会做获取验证码的功能，市场上也有很多已经封装好的第三方组件，但很多时候需要我们二开。下面是基于Ant Design组件来进行二开的。
使用ant-design-pro实现简单的登录页
m0_67388537的博客
07-29 1868
相关代码: react-demo-02。
AntD Pro登录页面，调用接口实现与服务器的交互
热门推荐
Gloria的博客
01-10 3万+
**AntD Pro登录**实现的功能登录界面样式部分随机获取数组中的色值***实现的功能： ***步骤如下总结 实现的功能 登录界面样式 判断登录信息是否正确，并给于提示 将填写的用户名和密码传给后台，调用后台接口 后台返回结果，对结果进行判断 正确则进入首页，错误则给于相应的提示 登录界面样式部分 1.登录界面样式部分（src -&amp;amp;amp;gt;pages-&amp;amp;amp;gt;user-&amp;amp;amp;gt;login
ANTD react 手机号(验证码)登陆 + 账号登陆(图形验证码)
weixin_64064932的博客
10-24 3160
login页面 react hooks
antd登录
Schao_的博客
05-12 745
import React from ‘react’ import { Form, Icon, Input, Button } from ‘antd’; export default @Form.create({ mapPropsToFields(props) { return { }; }, }) class App extends React.Component { handleSubmit = e => { e.preventDefault(); this.props.form.validate
antd-pro-hapijs-user：基于antd pro + hapi-api的带权限用户管理
02-03
restful前一级分离架构前端：基于ant design pro的Reacr web相关文章： 最初：基于hapijs的rest api服务器相关文章： 截图 用户列表编辑用户增加用户 查询用户删除用户 登录和验证 登录是采取令牌验证的方式 登录的...
基于Go-Zero + Ant Design Pro的前后端分离微服务管理系统的前端模
07-03
在构建现代Web应用程序时，前后端分离是一种常见的架构模式，它可以提高开发效率并优化系统性能。Go-Zero是一个全面的微服务框架，而Ant Design Pro则是一个强大的前端UI解决方案。结合这两者，我们可以构建出高效、...
FAQ: antd pro/umi 添加区块错误
01-08
虽然按照antd pro/umi官网构建的项目， 执行添加模块操作时： $ umi block add EmptyPage 或 $ umi block add https://github.com/umijs/umi-blocks/tree/master/demo 报出异常类似： × error AssertionError [ERR...
20_ant_完整操作一个用户管理的小例子_实现了验证码
10-26
20_ant_完整操作一个用户管理的小例子_实现了验证码20_ant_完整操作一个用户管理的小例子_实现了验证码
生成网站验证码图片组件
11-06
1.随机生成不同颜色和字体的验证码； 2.生成指定颜色的噪点； 3.可指定生成验证码的位数； 4.可指定生成噪点的个数； 调用示例： checkcode.cc.PColor = Color.Bisque; checkcode.cc.PNumber = 50; checkcode.cc.DrawImage4, "session的键");
AntDesign学习手册
03-08
AntDesign快速开发手册，满足基于React开发web前端应用
stand-admin-antdpro-demo:适用于Ant Design Pro的CRUD演示
04-07
StandAdmin is CRUD framework work perfectly with Antd Pro. 标准 CRUD 选取控件 多实例 批量操作 异形列表 异形查询 记录复制 多编辑 关联展开 新建初始值 数据转换-新建/编辑 数据转换-查询
【React】【Ant Deign】手机验证码登录效果实现
是光の谢宣骞博客
09-14 1547
React使用Ant Design实现手机验证码登录，仅前端实现，里面包含Form的用法以及倒计时的实现。
React之antd登录图形校验码与短信校验码
weixin_42227075的博客
04-22 452
在前端开发中，用户登录时常见有图形校验码或手机短校验码。 此类功能可通过后台协助来完成，也可由前端react独立完成。 本例模拟真实用户登录情况来实现 图形校验证即时动态生成，录入时即时校验。 短信校验码即时动态生成，录入时即时校验。
ant design pro 使用图片随机码
好气嗷，但仍要保持微笑!
12-01 366
class 【ComponentName 】 extends Component{ state={ loadings:false, code:undefined, codeLength:4, fontSizeMin:28, fontSizeMax:30, backgroundColorMin:240, backgroundColorMax:250, colorMin:10, colorMax:20, li
在Ant Design Pro登录功能中集成图形验证码组件
hanxiaozhang的博客
05-22 4266
前言： 本篇文章只介绍在Ant Design Pro登录功能中集成图形验证码组件的方法步骤，服务端方法请参考《基于OAuth2.0授权系统的验证码功能》 正文： 在Ant Design Pro模板中，使用账号密码登录功能部分（如下图），并没有做图形验证码的开发，所以这部分功能就需要我们自己去实现。这里登录功能其实本质是一个表单提交，所以我们只需自己开发一个图形验证码表单控件就可以，具体实现如下。 1.图形验证码表单控件代码CaptchaInput.tsx： import React, {u.
antd pro基于antd封装一个loading工具类
05-27
Ant Design Pro 是一个基于 Ant Design 的企业级中后台前端/设计解决方案，提供了丰富的组件和工具，包括 Loading 组件。 在 Ant Design Pro 中，Loading 组件已经封装好了，可以直接使用。以下是一个示例： ```jsx import { useState } from 'react'; import { Button } from 'antd'; import { PageLoading } from '@ant-design/pro-layout'; function MyComponent() { const [loading, setLoading] = useState(false); const handleButtonClick = () => { setLoading(true); // 异步操作 setTimeout(() => { setLoading(false); }, 2000); }; return ( <div> <h1>My Component</h1> <Button onClick={handleButtonClick}>Fetch Data</Button> {loading && <PageLoading />} </div> ); } export default MyComponent; ``` 在上面的代码中，当用户点击按钮触发异步操作时，设置 `loading` 状态为 `true`，同时在 JSX 中根据 `loading` 状态来决定是否渲染 Loading 组件。 Ant Design Pro 提供了多种 Loading 组件，如 `PageLoading`、`CardLoading` 等，可以根据需要选择使用。同时，Ant Design Pro 还提供了更多的企业级组件和工具，如表格、表单、图表、国际化等，可供开发者使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

johnny233

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值