“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Slider verification is more common means of man-machine identification, but their own do half will really do not come out, think about this thing is still very difficult to consider, how to identify whether it is man-machine? This article introduces Vue+ Ali cloud verification to make this small function.

Integrated Aliyun verification

What the front end needs

  1. appkey
  2. scene
  3. The back-end to cooperate

The introduction of Ali Cloud verification

public/index.html

<head>
  <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
</head>
Copy the code

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      AWSC: 'AWSC',
    },
  }
}
Copy the code

Encapsulate a validation component

Train of thought is very simple actually, function is unitary also.

  • Initialize loading ali cloud verification control
  • Refresh the validation control

There are two main points

1. In Mounted, an error occurs when the Dom is not fully loaded. 2. Check whether the monitor inside the Watch is refreshed 3.. Remember to customize the styles

Let’s start writing the component

NoCaptcha.vue

<template>
  <div>
    <div id="nc">

    </div>
  </div>
</template>

<script>
export default {
  // After the authentication succeeds, the server reports an error (such as an account or password error), and you need to reset the slider
  props: {
    reload: {
      type: Boolean.default: false,}},data() {
    return {
      ic: ' './ / noCaptcha instance
    };
  },
  watch: {
    reload: {
      handler(newV) {
        console.log(newV);
        if (newV) {
          this.nc.reset();  // Reset the slider}}},},mounted() {
    this.init(); // Initialize method
  },
  methods: {
    init() {
      const self = this;
      // instantiate nc
      // eslint-disable-next-line no-undef
      AWSC.use('nc'.function(state, module) {
        / / initialization
        self.nc = module.init({
          // You can find the corresponding appKey field value on the configuration management TAB of ali Cloud verification code console. Be sure to fill in the value correctly.
          appkey: 'FFFF0N00000000005CE9'.// You can find the corresponding scene value on the configuration management TAB page of ali Cloud verification code console, please be sure to fill in the correct value.
          scene: 'nc_login'.// The DOM ID of the slider rendering.
          renderTo: 'nc'.// you can record the sessionId (sessionId), signature string (sig), request unique identifier (token) fields in this callback parameter, and send the business request together with your server invocation check.
          success: function(data) {
            data.scene = 'nc_login'
            self.$emit('slideCallback', data);
          },
          // Trigger this callback parameter when sliding validation fails.
          fail: function(failCode) {
            this.$message('Sliding verification failed, failure number${failCode}`);
            console.log(failCode);
          },
          // This callback parameter is triggered when the verification code is not loaded correctly.
          error: function(errorCode) {
            this.$message(Verification code loading exception, exception number${errorCode}`);
            console.log(errorCode);
            self.$emit('slideCallback', {cls:false}); }}); }); ,}}};</script>

<style lang="scss" scoped>
#nc {
  width: 100%;
  display: contents;
}
/deep/.nc-container #nc_1_wrapper {
  width: 100%;
  height: 36px;
  line-height: 36px;
  #nc_1_n1t.#nc_1__bg.#nc_1_n1z.#nc_1__scale_text..nc-lang-cnt {
    height: 36px;
    line-height: 36px; }}</style>
Copy the code

Using the component

Questions to consider

  1. What if the validation control is not loaded? (For example, IE does not support it)
  2. Operations personnel are not required
  3. Use the username password and then verify that the automatic login event is invoked

It’s very simple to verify that the control failed to load and there is a callback, let the back end add a parameter, did not load the validation component, let him know to pass

<template>
  // Other code omitted
  <NoCaptcha @slideCallback="finishSlide" :reload="reload" />
</template>

<script>
// Other code omitted
import NoCaptcha from '@/components/NoCaptch.vue';

data() {
  return {
    reload: false,}},method: {
  // Click login
  login() {
    / / verification slightly
    this.reload = false; // After validation, reset the slider to false
    // Back-end login interface
    xx()
    .then(() = > {
       // The login success code is omitted
    })
    .catch((err) = > {
       // Other code omitted
       this.reload = true; // The slider needs to be reset
       console.log(err || 'This user has no menu permission, please contact the administrator.'); // Error message
    });
  },
  // Complete the slide
  finishSlide(data) {
    // Use return values as needed
    console.log('the session ID', data.sessionId)
    console.log('Signature string', data.sig)
    console.log('Slider request token', data.token)
    
     if (data.cls === false) {// Verify load failed
        this.loginForm.cls = false
      }

      if (data.sessionId) {// Non-man-machine operation
        this.loginForm.scene = data.scene
        this.loginForm.ncToken = data.token
        this.loginForm.sig = data.sig
        this.loginForm.sessionId = data.sessionId
        delete this.loginForm.cls
      }

      if (this.loginForm.username && this.loginForm.password) {// Enter the user name and password
        this.login()
      }
  },
}
</script>
Copy the code

thinking

  1. Can this control be implemented if the front end does it or the back end does it?
  2. Do you understand the sliding verification mechanism?
  3. Can this be achieved with absolute security?

PS: I have thought about it for a while. The front end needs to introduce the SDK of Aliyun, which will collect user data. Then after the slider is completed, the data will be analyzed to determine whether it is man-machine. The algorithm is a secret, of course, because there’s money to be made. In fact, the sliding algorithm can be simulated, not absolutely safe, just an additional step.

Write in the last

I am Liangcheng A, a front-end, love technology and love life.

I’m very happy to meet you.

If you want to learn more, please click here and look forward to your little ⭐⭐

  • If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊

  • This article was first published in nuggets. Reprint is prohibited without permission 💌