1. The verification code

NPM I SVG-captcha // Install dependenciesCopy the code

1.1 Front-end Code

 <el-form >
 <el-form-item prop="captcha" label="Verification code" class="captcha-container" >
      <div class="captcha">
        <img :src="code.captcha" @click="resetCaptcha">
      </div>
      <el-input v-model="form.captcha" placeholder="Please enter the verification code."></el-input>
    </el-form-item>
 </el-form>
    methods:{
        resetCaptcha(){
          this.code.captcha = '/api/captcha? _t'+new Date().getTime()
        },
    },
     data(){
    return {
      form: {captcha:""
      },
      rules: {captcha:[
          { required:true.message:"Please enter the verification code."},],},code: {captcha:"/api/captcha"}}Copy the code

1.2 Back-end code

// app/router.js 
module.exports = app= > {
  const { router, controller } = app
  const jwt = app.middleware.jwt({ app })
  router.get('/', controller.home.index)

  / / verification code
  router.get('/captcha', controller.util.captcha)
}
// app/controller/util.js
class UtilController extends BaseController { 
  async captcha() {
    const captcha = svgCaptcha.create({
      size: 4.fontSize: 50.width: 100.height: 40.noise: 3,})console.log('captcha=>', captcha.text)
    this.ctx.session.captcha = captcha.text
    this.ctx.response.type = 'image/svg+xml'
    this.ctx.body = captcha.data
  }  
}
Copy the code

2. Verify emails

NPM I nodemailer // Install dependenciesCopy the code

2.1 Front-end Code

 <el-form> 
    <el-form-item prop="email" label="Email">
      <el-input v-model="form.email" placeholder="Please enter email address"></el-input>
    </el-form-item>
     <el-form-item prop="emailcode" label="Verification code" >
        <el-button @click="sendEmailCode" :disabled="send.timer>0" type='primary'>
        {{sendText}}
        </el-button>
      <el-input v-model="form.emailcode" placeholder="Please enter email verification code"></el-input>
    </el-form-item>
 </el-form> 
 
    methods:{
         async sendEmailCode(){
          // The button cannot be clicked within 10 seconds
          await this.$http.get('/sendcode? email='+this.form.email)
          this.send.timer = 10
          this.timer = setInterval(() = >{
            this.send.timer -= 1
            if(this.send.timer===0) {clearInterval(this.timer)
            }
          },1000)}},computed: {sendText(){// Display time of time refresh
      if(this.send.timer<=0) {return 'send'
      }
      return `The ${this.send.timer}Send 'after s}},data(){
    return {
      send: {timer:0
      },
      form: {email:"[email protected]",},rules: {email:[
          { required:true.message:"Please enter email address" },
          { type:'email'.message:"Please enter the correct email format"},].emailcode:[
          { required:true.message:"Please enter your email verification code"},],},}}Copy the code

2.2 Back-end code

// app/router.js 
module.exports = app= > {
  const { router, controller } = app
  const jwt = app.middleware.jwt({ app })
  router.get('/', controller.home.index)
  // Send an email
  router.get('/sendcode', controller.util.sendcode)
}
// app/controller/util.js
class UtilController extends BaseController {  
  async sendcode() {
    const { ctx } = this
    const email = ctx.query.email
    const code = Math.random().toString().slice(2.6)
    console.log('email' + email + 'Verification code :' + code)
    ctx.session.emailcode = code

    const subject = 'Captcha'
    const text = ' '
    const html = `<h2>xxxx</h2><span>${code}</span></a>`
    const hasSend = await this.service.tools.sendMail(email, subject, text, html)
    if (hasSend) {
      this.message('Sent successfully')}else {
      this.error('Send failed')}}}//app/service/tools.js
const nodemailer = require('nodemailer')
const userEmail = '[email protected]'
const transporter = nodemailer.createTransport({
  service: '163'.secureConnection: true.auth: {
    user: userEmail,
    pass: 'xxxxx',}})class ToolService extends Service {
  async sendMail(email, subject, text, html) {
    console.log(email, subject, html)
    const mailOptions = {
      from: userEmail,
      cc: userEmail,
      to: email,
      subject,
      text,
      html,
    }
    try {
      await transporter.sendMail(mailOptions)
      return true
    } catch (err) {
      console.log('email error', err)
      return false}}}Copy the code

3. Verify the format

npm i egg-validate -s
Copy the code

//config/plugin.js
exports.validate = {
  enable: true.package: 'egg-validate',}//app/controller/user.js 
const BaseController = require('./base')
const createRule = {
  email: { type: 'email' },
  nickname: { type: 'string' },
  passwd: { type: 'string' },
  captcha: { type: 'string'}},//app/controller/user.js
class UserController extends BaseController {
  async register() {
    const { ctx } = this
    try {
      // Verify the passed parameters
      ctx.validate(createRule)
    } catch (e) {
      // console.log(e)
      return this.error('Parameter verification failed', -1, e.errors)
    } 
    ...
    // this.success({name:'xxx'})}}module.exports = UserController
Copy the code