欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在Ant Design Pro登录功能中集成图形验证码组件的方法步骤

程序员文章站 2022-03-07 09:12:42
前言:本篇文章只介绍在ant design pro登录功能中集成图形验证码组件的方法步骤,服务端方法请参考《基于oauth2.0授权系统的验证码功能》正文:在ant design pro模板中,使用账...

前言:

本篇文章只介绍在ant design pro登录功能中集成图形验证码组件的方法步骤,服务端方法请参考《基于oauth2.0授权系统的验证码功能》

正文:

在ant design pro模板中,使用账号密码登录功能部分(如下图),并没有做图形验证码的开发,所以这部分功能就需要我们自己去实现。这里登录功能其实本质是一个表单提交,所以我们只需自己开发一个图形验证码表单控件就可以,具体实现如下。

在Ant Design Pro登录功能中集成图形验证码组件的方法步骤

1. 图形验证码表单控件代码captchainput.tsx:

2.登录页面集成组件:

 3.使用:

集成之后的效果如下:

在Ant Design Pro登录功能中集成图形验证码组件的方法步骤

以上就是在ant design pro登录功能中集成图形验证码组件的详细内容,更多关于ant design pro登录的资料请关注其它相关文章!