web端登录页面 弹框 --短信防盗链

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Healer_JJJ/article/details/78584664

为了减少网站的盗刷,减少损失,采用发送按钮点击后 谈出验证码 输入验证码 以防止盗刷短信的功能。


代码如下:

import Ember from 'ember'
import ajax from 'ic-ajax'
import sendcode from '../../utils/sendcode'


export default Ember.Controller.extend({
  queryParams: ['target'],
  phone_code_token: '',
  flag: true,
  proceed1: false,
  proceed2: false,
  //会员提示弹窗配置
  btn_type: 'xufei',
  btn_tip: '申请购买',
  agree: true, //是否同意服务条款,
  tel: '', //手机号码
  token: '', //手机token
  count: '',
  toggle: null, //判断是注册页面还是忘记密码页面
  init() {
    // 同意服务条款
    let isAgree = $.cookie('isAgree')
    if (isAgree) {
      this.agree = true
    }
  },


  actions: {
    tabClick(e) {
      let target = $(e.target).attr('target')
      this.set('target', target)
    },


    showPsd() {
      let dom = $(event.target)
      let type = dom.prev().attr('type')
      if (type == 'text') {
        dom.prev().attr('type', 'password')
      } else {
        dom.prev().attr('type', 'text')
      }
    },


    login() {
      if ($('#login').validate() !== true || this.get('proceed1')) {
        return
      }
      if (!this.get('agree')) {
        $.toastr.error('请勾选服务条款.')
        return
      }
      this.set('proceed1', true)
      let userName = $('#username').val()
      let psd = $('#psd').val()
      ajax(this.config.apiUrl + 'users/' + userName + '/check', {
        method: 'GET'
      })
        .then(res => {
          console.log(res)
          this.auth.login(userName, psd).then(obj => {
            if (!obj) {
              window.location.href = '/index'
              $.cookie('isAgree', '1', { expires: 365, path: '/' }) // 同意服务条款


              this.get('router').transitionTo('index') //登陆成功跳转
            } else {
              let status = obj.jqXHR.status
              switch (status) {
                case 421:
                  $('#xsd-dl-block').hide()
                  $('#xsd-img-block').show()
                  break
                case 422:
                  $.toastr.error('用户已经停用')
                  break
                case 423:
                  this.set('phone', userName)
                  $('#publicModal #needBuyTrigger').trigger('click')
                  break
                default:
                  $.toastr.error('密码和账户不匹配')
              }
            }
            this.set('proceed1', false)
          })
        })
        .catch((xhr, err) => {
          // console.log('obj',err.jqXHR.responseJSON);
          $.toastr.error('账号不存在!')
          this.set('proceed1', false)
        })
    },
    register() {
      let reg_psd = $('#reg_psd').val()
      if (reg_psd.length < 6 || reg_psd.length > 18) {
        $.toastr.error('密码长度不可小于 6或大于 18位')
        return
      }
      if ($('#reg').validate() !== true || this.get('proceed2')) {
        return
      }
      if (!this.get('agree')) {
        $.toastr.error('请勾选服务条款.')
        return
      }
      this.set('proceed2', true)
      let phone = $('#phone').val()
      let reg_code = $('#reg_code').val()
      let reg_recommend = $('#reg_recommend').val()
      let url = this.config.apiUrl + 'users'
      ajax(url, {
        data: {
          phone: phone,
          username: phone,
          password: reg_psd,
          code: reg_code,
          referral: reg_recommend
        },
        method: 'POST'
      })
        .then(res => {
          this.auth.getInfo(res.data)
          $.toastr.success('注册成功')
          this.get('router').transitionTo('index')
          this.set('proceed2', false)
          // $("#xsd-dl-block").hide();
          // $("#xsd-img-block").show();
        })
        .catch(err => {
          $.toastr.error(err.jqXHR.responseJSON.errors.detail)
          this.set('proceed2', false)
        })
    },


    psdStep() {
      if ($('#forgetPsd').validate() !== true) {
        return
      }
      let name = $('#f_name').val()
      let f_code = $('#f_code').val()
      let url = this.config.apiUrl1 + 'validate_phone_code'
      ajax(url, {
        data: {
          username: name,
          code: f_code
        },
        method: 'GET'
      })
        .then(res => {
          this.set('phone_code_token', res.phone_code_token)
          $('#forgetPsdContainer').hide()
          $('#nextContainer').show()
        })
        .catch(err => {
          $.toastr.error(err.jqXHR.responseJSON.errors.detail)
        })
    },
    //修改密码
    resetPsd() {
      if ($('#next').validate() !== true) {
        return
      }
      let name = $('#f_name').val()
      let f_code = $('#f_code').val()
      let new_pwd = $('#new_pwd').val()
      let url = this.config.apiUrl1 + 'users/reset_password'
      ajax(url, {
        data: {
          username: name,
          code: f_code,
          phone_code_token: this.get('phone_code_token'),
          new_pwd: new_pwd
        },
        method: 'Post'
      })
        .then(res => {
          this.set('phone_code_token', '')
          this.set('target', 'login')
          $.toastr.success('密码修改成功')
        })
        .catch(err => {
          $.toastr.error(err.jqXHR.responseJSON.errors.detail)
        })
    },


    tabPrev() {
      $('#forgetPsd').show()
      $('#next').hide()
    },


    verification(e) {
      let dom = $(e.target)
      let phone = dom
        .parent()
        .prev()
        .find('input')
        .val()
      let Mobile = /^1[3,5,8,4,7]\d{9}$/
      if (!Mobile.test(phone)) {
        $.toastr.error('请输入正确的手机号码!')
        return
      }
      let txt = dom.text()
      if (txt != '发送验证码' && txt != '重新发送') {
        return
      }
      this.get('auth').registerTokenToAjaxHeader()
      ajax(this.config.apiUrl + 'users/' + phone + '/check', {
        method: 'GET'
      })
        .then(res => {
          $.toastr.error('手机号已注册!')
          return
        })
        .catch((xhr, err) => {
          sendcode(phone, dom, this.config.apiUrl + 'verifycode')
        })
    },


    //首页 忘记密码短信
    verificationPsd(e) {
      this.toggle = true//
      var f_name = $('#f_name').val() //手机号
      if (f_name == '' || typeof f_name == 'undefined') {
        $.toastr.error('手机号未填写!')
        return
      }
      let dom = $(event.target)
      let phone = dom
        .parent()
        .prev()
        .find('input')
        .val()
      let txt = dom.text()
      if (txt != '发送验证码' && txt != '重新发送') {
        return
      }
      this.get('auth').registerTokenToAjaxHeader()
      ajax(this.config.apiUrl + 'users/' + phone + '/check', {
        method: 'GET'
      })
        .then(res => {
          ajax(this.config.apiUrl1 + 'account/check_phone_code', {
            data: {
              phone: phone
            },
            method: 'GET'
          })
            .then(res => {
              this.token = res.data.token
              this.count = res.data.count
              if (res.data.count != 0) {
                $('#captchaMask').show()
                let imgData = res.data.captcha_img
                $('#captchaImg').attr('src', imgData)///
                this.count = res.data.count
              } else {
                sendcode(
                  phone,
                  this.token,
                  this.count,
                  dom,
                  this.config.apiUrl1 + 'account/send_verify_code'
                )
              }
              this.tel = phone
            })
            .catch(err => {
              $.toastr.error('手机号今日已超过发送次数!')
            })
          //判断是第几次发送验证码
        })
        .catch((xhr, err) => {
          $.toastr.error('手机号未注册!')
        })
    },


    download() {
      if (this.get('flag')) {
        this.set('flag', false)
        $('#download').text('点击返回操作')
        $('#user-func').fadeOut()
        $('#appCode').fadeIn(function () {
          $(this)
            .find('.ios')
            .animate({ left: '30px' }, function () {
              $(this).addClass('animation')
            })
          $(this)
            .find('.anzhuo')
            .animate({ right: '30px' }, function () {
              $(this).addClass('animation')
            })
        })
      } else {
        $('#appCode').fadeOut(function () {
          $(this)
            .find('.ios')
            .animate({ left: '203px' }, function () {
              $(this).removeClass('animation')
            })
          $(this)
            .find('.anzhuo')
            .animate({ right: '203px' }, function () {
              $(this).removeClass('animation')
            })
        })
        $('#user-func').fadeIn()
        this.set('flag', true)
        $('#download').text('点击下载APP')
      }
    },


    //验证码弹窗
    captcha(e) {
      this.toggle = false//
      let dom = $(e.target)
      let phone = dom.parent().prev().find('input').val()
      let Mobile = /^1[3,5,8,4,7]\d{9}$/
      if (phone == '' || typeof phone == 'undefined') {
        $.toastr.error('手机号未填写!')
        return
      }
      if (!Mobile.test(phone)) {
        $.toastr.error('请输入正确的手机号码!')
        return
      }
      let txt = dom.text()
      if (txt != '发送验证码' && txt != '重新发送') {
        return
      }
      this.tel = phone
      this.get('auth').registerTokenToAjaxHeader()
      ajax(this.config.apiUrl + 'users/' + phone + '/check', {
        method: 'GET'
      })
        .then(res => {
          $.toastr.error('手机号已注册!')
          return
        })
        .catch((xhr, err) => {
          ajax(this.config.apiUrl1 + 'account/check_phone_code', {
            data: {
              phone: phone
            },
            method: 'GET'
          })
            .then(res => {
              console.log(res)
              this.token = res.data.token
              this.count = res.data.count
              this.count = res.data.count
              if (res.data.count != 0) {
                $('#captchaMask').show()
                let imgData = res.data.captcha_img
                console.log(imgData)
                $('#captchaImg').attr('src', imgData)///
              } else {
                sendcode(
                  phone,
                  this.token,
                  this.count,
                  dom,
                  this.config.apiUrl1 + 'account/send_verify_code'
                )
              }
            })
            .catch(err => {
              $.toastr.error('手机号今日已超过发送次数!')
            })
        })


      //判断是第几次发送验证码
    },
    //关闭验证弹窗
    close() {
      $('#captchaMask').hide()
    },
    //点击发送验证码
    clickCaptcha() {
      ajax(this.config.apiUrl1 + 'account/check_phone_code', {
        data: {
          phone: this.tel,
          token: this.token
        },
        method: 'GET'
      }).then(res => {
        let imgData = res.data.captcha_img
        $('#captchaImg').attr('src', imgData)///
      })
    },
    //点击确认按钮
    clickModalBtn() {
      var captchaCode = $('#captchaInput')
      if (this.toggle) {
        var sendCaptcha = $('#resetCode') //忘记密码倒计时
      } else {
        var sendCaptcha = $('.sendCaptcha') //注册倒计时
      }
      var val = captchaCode.val()
      var num = 60
      if (val == '' || typeof val == 'undefined') {
        $.toastr.error('请输入验证码!')
        return
      }
      ajax(this.config.apiUrl1 + 'account/send_verify_code', {
        data: {
          phone: this.tel,
          token: this.token,
          count: this.count,
          captcha: val
        },
        method: 'GET'
      })
        .then(res => {
          //验证成功则发送短信
          console.log(res)
          $.toastr.success('验证码发送成功!')
          $('#captchaMask').hide()
          sendCaptcha.text(num + '秒后重新获取').addClass('code_btn')
          var interval = setInterval(function () {
            num = num - 1
            sendCaptcha.text(num + '秒后重新获取')
          }, 1000)
          setTimeout(function () {
            clearInterval(interval)
            sendCaptcha.text('重新发送')
            sendCaptcha.removeClass('code_btn')//
          }, 60000)
        })
        .catch(err => {
          $.toastr.error('验证码出错!')
        })
    }
  }
})


展开阅读全文

没有更多推荐了,返回首页