容联云 手机验证码

官方模板

地址

Python SDK

模板

from ronglian_sms_sdk import SmsSDK

accId = '容联云通讯分配的主账号ID'
accToken = '容联云通讯分配的主账号TOKEN'
appId = '容联云通讯分配的应用ID'

def send_message():
    sdk = SmsSDK(accId, accToken, appId)
    tid = '容联云通讯创建的模板ID'
    mobile = '手机号1,手机号2'
    datas = ('变量1', '变量2')
    resp = sdk.sendMessage(tid, mobile, datas)
    print(resp)

django实例

sms_code.py

from ronglian_sms_sdk import SmsSDK
import random
import redis

accId = '8aaf0708827c8fd50182aad56c550895'
accToken = '1afad367614148bbaa2261a287b9b4e0'
appId = '8aaf0708827c8fd50182aad56d54089c'


def send_message(mobile):
    sdk = SmsSDK(accId, accToken, appId)
    tid = '1'
    # 生成随机验证码
    code = random.randint(1000, 9999)
    # 连接redis数据库
    conn = redis.Redis(host="127.0.0.1", port=6379, password="123456")
    # 将验证码存入redis
    conn.set('sms_%s' % mobile, code, ex=300)
    datas = (code, '5')
    resp = sdk.sendMessage(tid, mobile, datas)
    print("发送短信验证码的响应", resp, type(resp))
    return resp

view.py

import json
from utils.sms_code import send_message
from rest_framework.response import Response
from rest_framework.views import APIView

class SmsCodeView(APIView):
    def get(self, request):
        """生成短信验证码"""
        mobile = request.query_params.get('mobile')
        print("手机号>>>", mobile)
        resp = send_message(mobile)
        # 根据容联云的响应状态来判断短信是否发送成功
        if  json.loads(resp)['statusCode'] == "112310" or json.loads(resp)["statusCode"] == "000000":
            return Response({"code": 200, "msg": "发送短信验证码成功"})
        else:
            return Response({"code": 500, "msg": "短信验证码发送失败"})

urls.py

from django.urls import path
from . import views

urlpatterns = [
    # 发送短信验证码
    path('sms_code/', views.SmsCodeView.as_view())
]

Vuex

<template>
  <div class="container">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="手机号" prop="mobile">
        <el-input
          type="text"
          v-model="ruleForm.mobile"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="smsCode">
        <el-input
          type="text"
          v-model="ruleForm.smsCode"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="send">发送验证码</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">
          登录
        </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    var validateMobile = (rule, value, callback) => {
      console.log(rule, value, callback);
      if (value == "") {
        return callback(new Error("手机号不能为空"));
      } else {
        const re = /^1[3-9]\d{9}$/;
        if (re.test(value)) {
          return callback();
        } else {
          return callback(new Error("手机号11位"));
        }
      }
    };
    var validateCode = (rule, value, callback) => {
      console.log(rule, value, callback);
      if (value == "") {
        return callback(new Error("验证码不能为空"));
      } else {
        const re = /^\d{4}$/;
        if (re.test(value)) {
          return callback();
        } else {
          return callback(new Error("验证码4位"));
        }
      }
    };
    return {
      ruleForm: {
        mobile: "",
        smsCode: "",
      },
      rules: {
        mobile: [{ validator: validateMobile, trigger: "blur" }],
        smsCode: [{ validator: validateCode, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post("/login/", this.ruleForm)
          .then((resp) => {
            console.log(resp);
            if (resp.data.code == 200) {
              this.$message({
                message: resp.data.msg,
                type: "success",
              });
              localStorage.setItem("token",resp.data.token)
              localStorage.setItem("mobile",resp.data.mobile)
              this.$router.push("/info")
            } else {
              this.$message(resp.data.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    send() {
      this.$axios
        .get("/sms_code/", {
          params: {
            mobile: this.ruleForm.mobile,
          },
        })
        .then((resp) => {
          console.log(resp);
          if (resp.data.code == 200) {
            this.$message({
              message: resp.data.msg,
              type: "success",
            });
          } else {
            this.$message(resp.data.msg);
          }
        });
    },
  },
};
</script>

<style scoped></style>