SpringCloud微服务实战——搭建企业级开发框架（二十四）：集成行为验证码和图片验证码实现登录功能-摩杜云开发者社区

随着近几年技术的发展，人们对于系统安全性和用户体验的要求越来越高，大多数网站系统都逐渐采用行为验证码来代替图片验证码。行为验证码指的是通过用户行为来验证用户身份的验证码，如滑动拼图、识别图片中的特定物品等。

行为验证码的重要性在于可以有效地防止机器人和恶意程序对网站或应用程序进行恶意攻击、刷流量、撞库等行为，从而保障了用户和网站的安全。相较于传统的图形验证码等方式，行为验证码更难被破解，同时也更加方便用户操作。

另外，行为验证码还可以提高用户的使用体验，减少用户的操作负担，提高网站或应用程序的可用性和用户留存率。因此，采用行为验证码是保护用户和网站安全的重要手段，也是提高用户体验的有效途径。

以下是几个常用的 Java 开源验证码库：

JCaptcha：Java下的开源验证码库，采用Java Servlet 技术，基于Apache标准的Jakarta项目Struts和Ant应用程序框架。
Kaptcha：Java开发的验证码库，可以生成随机数字、字母和汉字等验证码。
SimpleCaptcha：使用Java语言编写的开源验证码库，支持生成数字、字母和简单的数学运算验证码。
Google Authenticator：由Google发布的一种开源身份验证器，可以生成一次性密码，常用于二步验证。
AJ-Captcha：是一种人机验证码，用于在Web应用程序中保护用户免受恶意攻击和垃圾邮件。它是一种基于JavaScript的验证码，可在不需要重新加载页面或使用外部API的情况下生成和验证验证码。它使用了多种技术，包括画布渲染和随机化，使攻击者难以识别和破解验证码。 AJ-Captcha易于集成，自适应不同的屏幕大小，并且可以自定义外观和行为。
EasyCaptcha：是一种简单易于使用的验证码生成器，用于添加人类验证来防止恶意自动化行为。它是使用PHP编写的，提供多种验证码类型，包括基于文本、数字、数学等方法。EasyCaptcha支持自定义样式和语言，并且具有良好的可扩展性。它可以用于各种Web应用程序，例如登录页面、注册页面、联系表单等，以增强网站的安全性。

除此之外，还有一些商业验证码库，例如Turing Image、Secure Image等。

GitEgg-Cloud集成了开源行为验证码组件和图片验证码，并在系统中添加可配置项来选择具体使用哪种验证码。

AJ-Captcha：行为验证码
EasyCaptcha: 图片验证码

1、在我们的gitegg-platform-bom工程中增加验证码的包依赖

        <!-- AJ-Captcha滑动验证码 -->
        <captcha.version>1.2.7</captcha.version>
        <!-- Easy-Captcha图形验证码 -->
        <easy.captcha.version>1.6.2</easy.captcha.version>

        <!-- captcha 滑动验证码-->
        <dependency>
           <groupId>com.github.anji-plus</groupId>
           <artifactId>captcha-spring-boot-starter</artifactId>
           <version>${captcha.version}</version>
       </dependency>
       <!-- easy-captcha 图形验证码-->
       <dependency>
             <groupId>com.github.whvcse</groupId>
             <artifactId>easy-captcha</artifactId>
          <version>${easy.captcha.version}</version>
      </dependency>

2、新建gitegg-platform-captcha工程，用于配置及自定义方法，行为验证码用到缓存是需要自定义实现CaptchaCacheService，自定义类CaptchaCacheServiceRedisImpl:

public class CaptchaCacheServiceRedisImpl implements CaptchaCacheService {

    @Override
    public String type() {
        return "redis";
    }

    @Autowired
    private StringRedisTemplate stringRedisTemplate;

    @Override
    public void set(String key, String value, long expiresInSeconds) {
        stringRedisTemplate.opsForValue().set(key, value, expiresInSeconds, TimeUnit.SECONDS);
    }

    @Override
    public boolean exists(String key) {
        return stringRedisTemplate.hasKey(key);
    }

    @Override
    public void delete(String key) {
        stringRedisTemplate.delete(key);
    }

    @Override
    public String get(String key) {
        return stringRedisTemplate.opsForValue().get(key);
    }
}

3、在gitegg-platform-captcha的resources目录新建META-INF.services文件夹，参考resource/META-INF/services中的写法。

com.gitegg.platform.captcha.service.impl.CaptchaCacheServiceRedisImpl

4、在GitEgg-Cloud下的gitegg-oauth中增加CaptchaTokenGranter自定义验证码令牌授权处理类

/**
 * 验证码模式
 */
public class CaptchaTokenGranter extends AbstractTokenGranter {

    private static final String GRANT_TYPE = "captcha";

    private final AuthenticationManager authenticationManager;

    private RedisTemplate redisTemplate;

    private CaptchaService captchaService;

    private String captchaType;

    public CaptchaTokenGranter(AuthenticationManager authenticationManager,
        AuthorizationServerTokenServices tokenServices, ClientDetailsService clientDetailsService,
        OAuth2RequestFactory requestFactory, RedisTemplate redisTemplate, CaptchaService captchaService,
        String captchaType) {
        this(authenticationManager, tokenServices, clientDetailsService, requestFactory, GRANT_TYPE);
        this.redisTemplate = redisTemplate;
        this.captchaService = captchaService;
        this.captchaType = captchaType;
    }

    protected CaptchaTokenGranter(AuthenticationManager authenticationManager,
        AuthorizationServerTokenServices tokenServices, ClientDetailsService clientDetailsService,
        OAuth2RequestFactory requestFactory, String grantType) {
        super(tokenServices, clientDetailsService, requestFactory, grantType);
        this.authenticationManager = authenticationManager;
    }

    @Override
    protected OAuth2Authentication getOAuth2Authentication(ClientDetails client, TokenRequest tokenRequest) {
        Map<String, String> parameters = new LinkedHashMap<>(tokenRequest.getRequestParameters());
        // 获取验证码类型
        String captchaType = parameters.get(CaptchaConstant.CAPTCHA_TYPE);

        // 判断传入的验证码类型和系统配置的是否一致
        if (!StringUtils.isEmpty(captchaType) && !captchaType.equals(this.captchaType)) {
            throw new UserDeniedAuthorizationException(ResultCodeEnum.INVALID_CAPTCHA_TYPE.getMsg());
        }

        if (CaptchaConstant.IMAGE_CAPTCHA.equalsIgnoreCase(captchaType)) {
            // 图片验证码验证
            String captchaKey = parameters.get(CaptchaConstant.CAPTCHA_KEY);
            String captchaCode = parameters.get(CaptchaConstant.CAPTCHA_CODE);
            // 获取验证码
            String redisCode = (String)redisTemplate.opsForValue().get(CaptchaConstant.IMAGE_CAPTCHA_KEY + captchaKey);
            // 判断验证码
            if (captchaCode == null || !captchaCode.equalsIgnoreCase(redisCode)) {
                throw new UserDeniedAuthorizationException(ResultCodeEnum.INVALID_CAPTCHA.getMsg());
            }
        } else {
            // 滑动验证码验证
            String captchaVerification = parameters.get(CaptchaConstant.CAPTCHA_VERIFICATION);
            String slidingCaptchaType = parameters.get(CaptchaConstant.SLIDING_CAPTCHA_TYPE);
            CaptchaVO captchaVO = new CaptchaVO();
            captchaVO.setCaptchaVerification(captchaVerification);
            captchaVO.setCaptchaType(slidingCaptchaType);
            ResponseModel responseModel = captchaService.verification(captchaVO);
            if (null == responseModel || !RepCodeEnum.SUCCESS.getCode().equals(responseModel.getRepCode())) {
                throw new UserDeniedAuthorizationException(ResultCodeEnum.INVALID_CAPTCHA.getMsg());
            }
        }

        String username = parameters.get(TokenConstant.USER_NAME);
        String password = parameters.get(TokenConstant.PASSWORD);
        // Protect from downstream leaks of password
        parameters.remove(TokenConstant.PASSWORD);

        Authentication userAuth = new UsernamePasswordAuthenticationToken(username, password);
        ((AbstractAuthenticationToken)userAuth).setDetails(parameters);
        try {
            userAuth = authenticationManager.authenticate(userAuth);
        } catch (AccountStatusException | BadCredentialsException ase) {
            // covers expired, locked, disabled cases (mentioned in section 5.2, draft 31)
            throw new InvalidGrantException(ase.getMessage());
        }
        // If the username/password are wrong the spec says we should send 400/invalid grant

        if (userAuth == null || !userAuth.isAuthenticated()) {
            throw new InvalidGrantException("Could not authenticate user: " + username);
        }

        OAuth2Request storedOAuth2Request = getRequestFactory().createOAuth2Request(client, tokenRequest);
        return new OAuth2Authentication(storedOAuth2Request, userAuth);
    }
}

5、gitegg-oauth中GitEggOAuthController新增获取验证码的方法

    @Value("${captcha.type}")
    private String captchaType;

    @ApiOperation("获取系统配置的验证码类型")
    @GetMapping("/captcha/type")
    public Result captchaType() {
        return Result.data(captchaType);
    }

    @ApiOperation("生成滑动验证码")
    @PostMapping("/captcha")
    public Result captcha(@RequestBody CaptchaVO captchaVO) {
        ResponseModel responseModel = captchaService.get(captchaVO);
        return Result.data(responseModel);
    }

    @ApiOperation("滑动验证码验证")
    @PostMapping("/captcha/check")
    public Result captchaCheck(@RequestBody CaptchaVO captchaVO) {
        ResponseModel responseModel = captchaService.check(captchaVO);
        return Result.data(responseModel);
    }

    @ApiOperation("生成图片验证码")
    @RequestMapping("/captcha/image")
    public Result captchaImage() {
        SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
        String captchaCode = specCaptcha.text().toLowerCase();
        String captchaKey = UUID.randomUUID().toString();
        // 存入redis并设置过期时间为5分钟
        redisTemplate.opsForValue().set(CaptchaConstant.IMAGE_CAPTCHA_KEY + captchaKey, captchaCode, GitEggConstant.Number.FIVE,
            TimeUnit.MINUTES);
        ImageCaptcha imageCaptcha = new ImageCaptcha();
        imageCaptcha.setCaptchaKey(captchaKey);
        imageCaptcha.setCaptchaImage(specCaptcha.toBase64());
        // 将key和base64返回给前端
        return Result.data(imageCaptcha);
    }

6、将滑动验证码提供的前端页面verifition目录copy到我们前端工程的compoonents目录，修改Login.vue，增加验证码

<a-row :gutter="0"
                 v-if="loginCaptchaType === 'image' && grantType !== 'password'">
            <a-col :span="14">
              <a-form-item>
                <a-input v-decorator="['captchaCode', validatorRules.captchaCode]"
                         size="large"
                         type="text"
                         :placeholder="$t('user.verification-code.required')">
                  <a-icon v-if="inputCodeContent == verifiedCode"
                          slot="prefix"
                          type="safety-certificate"
                          :style="{ fontSize: '20px', color: '#1890ff' }" />
                  <a-icon v-else
                          slot="prefix"
                          type="safety-certificate"
                          :style="{ fontSize: '20px', color: '#1890ff' }" />
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="10">
              <img :src="captchaImage"
                   class="v-code-img"
                   @click="refreshImageCode">
            </a-col>
          </a-row>

    <Verify @success="verifySuccess"
            :mode="'pop'"
            :captchaType="slidingCaptchaType"
            :imgSize="{ width: '330px', height: '155px' }"
            ref="verify"></Verify>

      grantType: 'password',
      loginCaptchaType: 'sliding',
      slidingCaptchaType: 'blockPuzzle',
      loginErrorMsg: '用户名或密码错误',
      captchaKey: '',
      captchaCode: '',
      captchaImage: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAICRAEAOw==',
      inputCodeContent: '',
      inputCodeNull: true

methods: {
    ...mapActions(['Login', 'Logout']),
    // handler
    handleUsernameOrEmail (rule, value, callback) {
      const { state } = this
      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
      if (regex.test(value)) {
        state.loginType = 0
      } else {
        state.loginType = 1
      }
      callback()
    },
    // 滑动验证码二次校验并提交登录
    verifySuccess (params) {
      // params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证
      const {
        form: { validateFields },
        state,
        customActiveKey,
        Login
      } = this

      state.loginBtn = true
      const validateFieldsKey = customActiveKey === 'tab_account' ? ['username', 'password', 'captchaCode', 'captchaKey'] : ['phoneNumber', 'captcha', 'captchaCode', 'captchaKey']
      validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
          const loginParams = { ...values }
          delete loginParams.username

          loginParams[!state.loginType ? 'email' : 'username'] = values.username
          loginParams.client_id = process.env.VUE_APP_CLIENT_ID
          loginParams.client_secret = process.env.VUE_APP_CLIENT_SECRET

          if (this.grantType === 'password' && customActiveKey === 'tab_account') {
              loginParams.grant_type = 'password'
              loginParams.password = values.password
          } else {
            if (customActiveKey === 'tab_account') {
              loginParams.grant_type = 'captcha'
              loginParams.password = values.password
            } else {
              loginParams.grant_type = 'sms_captcha'
              loginParams.phone_number = values.phoneNumber
              loginParams.code = values.captcha
              loginParams.smsCode = 'aliLoginCode'
            }
            // loginParams.password = md5(values.password)
            // 判断是图片验证码还是滑动验证码
            if (this.loginCaptchaType === 'sliding') {
              loginParams.captcha_type = 'sliding'
              loginParams.sliding_type = this.slidingCaptchaType
              loginParams.captcha_verification = params.captchaVerification
            } else if (this.loginCaptchaType === 'image') {
              loginParams.captcha_type = 'image'
              loginParams.captcha_key = this.captchaKey
              loginParams.captcha_code = values.captchaCode
            }
          }
          Login(loginParams)
            .then((res) => this.loginSuccess(res))
            .catch(err => this.requestFailed(err))
            .finally(() => {
              state.loginBtn = false
            })
        } else {
          setTimeout(() => {
            state.loginBtn = false
          }, 600)
        }
      })
    },
    // 滑动验证码校验
    captchaVerify (e) {
      e.preventDefault()
      const {
        form: { validateFields },
        state,
        customActiveKey
      } = this

      state.loginBtn = true
      const validateFieldsKey = customActiveKey === 'tab_account' ? ['username', 'password', 'vcode', 'verkey'] : ['phoneNumber', 'captcha', 'vcode', 'verkey']
      validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
          if (this.grantType === 'password') {
            this.verifySuccess()
          } else {
            if (this.loginCaptchaType === 'sliding') {
              this.$refs.verify.show()
            } else {
              this.verifySuccess()
            }
          }
        } else {
          setTimeout(() => {
            state.loginBtn = false
          }, 600)
        }
      })
    },
    queryCaptchaType () {
      getCaptchaType().then(res => {
        this.loginCaptchaType = res.data
        if (this.loginCaptchaType === 'image') {
          this.refreshImageCode()
        }
      })
    },
    refreshImageCode () {
      getImageCaptcha().then(res => {
        const data = res.data
        this.captchaKey = data.captchaKey
        this.captchaImage = data.captchaImage
      })
    },
    handleTabClick (key) {
      this.customActiveKey = key
      // this.form.resetFields()
    },
    handleSubmit (e) {
      e.preventDefault()
    },
    getCaptcha (e) {
      e.preventDefault()
      const { form: { validateFields }, state } = this

      validateFields(['phoneNumber'], { force: true }, (err, values) => {
        if (!err) {
          state.smsSendBtn = true

          const interval = window.setInterval(() => {
            if (state.time-- <= 0) {
              state.time = 60
              state.smsSendBtn = false
              window.clearInterval(interval)
            }
          }, 1000)

          const hide = this.$message.loading('验证码发送中..', 0)
          getSmsCaptcha({ phoneNumber: values.phoneNumber, smsCode: 'aliLoginCode' }).then(res => {
            setTimeout(hide, 2500)
            this.$notification['success']({
              message: '提示',
              description: '验证码获取成功，您的验证码为：' + res.result.captcha,
              duration: 8
            })
          }).catch(err => {
            setTimeout(hide, 1)
            clearInterval(interval)
            state.time = 60
            state.smsSendBtn = false
            this.requestFailed(err)
          })
        }
      })
    },
    stepCaptchaSuccess () {
      this.loginSuccess()
    },
    stepCaptchaCancel () {
      this.Logout().then(() => {
        this.loginBtn = false
        this.stepCaptchaVisible = false
      })
    },
    loginSuccess (res) {
     // 判断是否记住密码
      const rememberMe = this.form.getFieldValue('rememberMe')
      const username = this.form.getFieldValue('username')
      const password = this.form.getFieldValue('password')
      if (rememberMe && username !== '' && password !== '') {
          storage.set(process.env.VUE_APP_TENANT_ID + '-' + process.env.VUE_APP_CLIENT_ID + '-username', username, 60 * 60 * 24 * 7 * 1000)
          storage.set(process.env.VUE_APP_TENANT_ID + '-' + process.env.VUE_APP_CLIENT_ID + '-password', password, 60 * 60 * 24 * 7 * 1000)
          storage.set(process.env.VUE_APP_TENANT_ID + '-' + process.env.VUE_APP_CLIENT_ID + '-rememberMe', true, 60 * 60 * 24 * 7 * 1000)
      } else {
         storage.remove(process.env.VUE_APP_TENANT_ID + '-' + process.env.VUE_APP_CLIENT_ID + '-username')
         storage.remove(process.env.VUE_APP_TENANT_ID + '-' + process.env.VUE_APP_CLIENT_ID + '-password')
         storage.remove(process.env.VUE_APP_TENANT_ID + '-' + process.env.VUE_APP_CLIENT_ID + '-rememberMe')
      }
      this.$router.push({ path: '/' })
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`
        })
      }, 1000)
      this.isLoginError = false
    },
    requestFailed (err) {
      this.isLoginError = true
      if (err && err.code === 427) {
        // 密码错误次数超过最大限值，请选择验证码模式登录
        if (this.customActiveKey === 'tab_account') {
            this.grantType = 'captcha'
        } else {
            this.grantType = 'sms_captcha'
        }
        this.loginErrorMsg = err.msg
        if (this.loginCaptchaType === 'sliding') {
            this.$refs.verify.show()
        }
      } else if (err) {
            this.loginErrorMsg = err.msg
      }
    }
  }

7、在Nacos中增加配置项，默认使用行为验证码

#验证码配置
captcha:
  #验证码的类型 sliding: 滑动验证码 image: 图片验证码
  type: sliding

8、登录效果

登录页安全验证尝试过多，账号被锁

使用行为验证码的主要优势有：

防止机器人或自动化软件攻击：使用行为验证码可以有效地防止机器人或自动化软件攻击，因为这些程序无法模拟用户的真实行为。
不需要人工干预：行为验证码可以自动检测用户行为，不需要用户输入任何额外信息或完成任何任务。
更好的用户体验：与传统的验证码相比，行为验证码更容易完成，减少了用户的不便和不愉快的体验。
更安全：行为验证码可以有效地防止“中间人”攻击，因为它们生成的令牌与用户的特定设备相关联。
更难被破解：行为验证码使用的是复杂的算法和人工智能技术，使得即使攻击者得到了验证码令牌，也很难重现用户的行为模式，从而使攻击变得更加困难。