django+vue实现钉钉群机器人验证码
又是忙碌的一天，今天给大家带来的教程是使用钉钉群机器人发送随机验证码，
在vue中输入然后在后端进行判断并返回相应的返回值，首先我们去看官方文档
然后开始操作
我们需要django+vue跨域 点击查看
一、创建钉钉群机器人
首先明确一点，钉钉自定义机器人早就不支持在手机端创建了，所以打开你的pc端或者mac端的钉钉客户端，在需要机器人的聊天群界面，点击智能群助手
需要注意的是，在安全设置一栏里，我们选择加签的方式来验证，在此说明一下，钉钉机器人的安全策略有三种，第一种是使用关键字，就是说你推送的消息里必须包含你创建机器人时定义的关键字，如果不包含就推送不了消息，第二种就是使用加密签名，第三种是定义几个ip源，非这些源的请求会被拒绝，综合来看还是第二种又安全又灵活。
创建成功后，系统会分配给你一个webhook地址，这个地址需要保存一下，地址中有唯一的accesstoken
ok，那么怎么利用这个地址让你的机器人推送消息呢？查看官方文档
二、测试发送信息
发现文档居然还是python2.0的版本，好吧，我们自己来翻译成3.0
-
在项目下新建包utils/dindin.py
import time import hmac import hashlib import base64 import urllib.parse import requests, json # 导入依赖库 # https://oapi.dingtalk.com/robot/send?access_token=e2e7db9c547beff2f8f93ee06fec87c1a354594045d49fbf30669d7e05b23c38 timestamp = str(round(time.time() * 1000)) #这里的secret是我们cp备份的 secret = 'SECc96a44d409036efafe8645c659a551e3ad3ad15bdfd8a408b6254927a2d0d1ca' secret_enc = secret.encode('utf-8') string_to_sign = '{}\n{}'.format(timestamp, secret) string_to_sign_enc = string_to_sign.encode('utf-8') hmac_code = hmac.new(secret_enc, string_to_sign_enc, digestmod=hashlib.sha256).digest() sign = urllib.parse.quote(base64.b64encode(hmac_code)) print(sign) # eu4Q16kFubncXuZprXxwRuvDx3Yh/roFWEPn0T5MRPo%3D # print(timestamp) # print(sign) headers = {'Content-Type': 'application/json'} # 定义数据类型 #这里webhook是我们创建成功后 webhook地址 webhook = 'https://oapi.dingtalk.com/robot/send?access_token=e2e7db9c547beff2f8f93ee06fec87c1a354594045d49fbf30669d7e05b23c38×tamp=' + timestamp + "&sign=" + sign # 定义要发送的数据 # "at": {"atMobiles": "['"+ mobile + "']" def dindin_post(text): data = { "msgtype": "text", "text": {"content": text}, "isAtAll": True} res = requests.post(webhook, data=json.dumps(data), headers=headers) # 发送post请求 print(res.text) dindin_post(134235) -
测试发送成功
三、创建user（app）
-
user/models.py
from django.contrib.auth.models import AbstractUser from django.db import models from utils.basemodel import Base # Create your models here. # 用户表 class User(AbstractUser): username = models.CharField(max_length=32, unique=True) password = models.CharField(max_length=132) email = models.CharField(max_length=32, null=True, blank=True) class Meta: db_table = "用户" def __str__(self): return self.username -
我们这里重写了django自带的用户表，所以要在settings中重新定义
AUTH_USER_MODEL = 'user.User' -
user/views.py
# 解密 from django.contrib.auth.hashers import check_password, make_password # 返回HttpResponse from django.http import HttpResponse # 解码 from django.utils.baseconv import base64 # 返回Response from rest_framework.response import Response # from rest_framework.views import APIView from .models import * import time import hmac import base64 from hashlib import sha256 import urllib import json import requests from utils.dindin import dindin_post import random from rest_framework.permissions import AllowAny import jwt from mydjango import settings # 注册 class RegisterAPIView(APIView): permission_classes = (AllowAny,) def post(self, request): # 获取信息 username = request.data.get("username") password = request.data.get("password") try: # 存储数据 User.objects.create(username=username, password=make_password(password)) return Response({"msg": "ok", "code": 200}) except Exception as e: print("user.view--16", e) return Response({"msg": "no", "code": 400}) # 登录 class LoginAPIView(APIView): permission_classes = (AllowAny,) def post(self, request): # 获取信息 username = request.data.get("username") password = request.data.get("password") user_obj = User.objects.filter(username=username).first() # 判断密码 if user_obj: if check_password(password, user_obj.password): # jwt加密 encode_jwt = jwt.encode({"uid": user_obj.id}, settings.SECRET_KEY, algorithm='HS256') print(encode_jwt) return Response({"msg": "ok", "code": 200, "token": encode_jwt}) else: return Response({"msg": "no", "code": 400}) else: return Response({"msg": "no", "code": 400}) # 发送验证码 class VerificationAPIView(APIView): permission_classes = (AllowAny,) def get(self, request): # 生成随机验证码6位 code = '%06d' % random.randint(0, 999999) # 存储到session request.session["code"] = code # 存储的也是 key-value 键值对 request.session.set_expiry(120) # 设置 session 存活期 单位是秒 # 调用钉钉接口 发送验证码 dindin_post(code) return Response({"msg": "ok", "code": 200}) # 校验验证码 class IsVerificationAPIView(APIView): permission_classes = (AllowAny,) def get(self, request): verification = request.GET.get("verification") code = request.session.get("code") print(code) if verification == code: return Response({"msg": "ok", "code": 200}) else: return Response({"msg": "no", "code": 400}) -
配置子路由user/urls.py
from django.urls import path from django.contrib.staticfiles.urls import staticfiles_urlpatterns from .views import * from rest_framework.routers import SimpleRouter, DefaultRouter from rest_framework_jwt.views import obtain_jwt_token, refresh_jwt_token # ... the rest of your URLconf goes here ... urlpatterns = [ # 定义超链接路由 # re_path('^static/upload/(?P<path>.*)$',serve,{'document_root':'/static/upload/'}), path('register/', RegisterAPIView.as_view()), # 注册 path('mylogin/', LoginAPIView.as_view()), # 登录自定义token path('dindin_url/', DingDingAPIView.as_view()), # 钉钉三方登录路由 path('dindin_back/', DingBackApiView.as_view()), # 三方登录回调地址 path('verification/', VerificationAPIView.as_view()), # 发送验证码接口 path('isverification/', IsVerificationAPIView.as_view()), # 判断验证码接口 path('login/', obtain_jwt_token), # 全局token，登录视图 使用djangorestframework-jwt==1.11.0 ] -
配置主路由django/urls.py
from django.urls import path, re_path, include urlpatterns = [ path('user/', include('user.urls')) ]
三、前端vue构建登录注册页面
-
src/http/apis.js
/* eslint-disable */ // 用户登录 import {get, post, put, del} from './index' export const postRegister = (params, headers) => post("/user/register/", params, headers) export const getVerification = (params, headers) => get("/user/verification/", params, headers) export const getisVerification = (params, headers) => get("/user/isverification/", params, headers) export const postLogin = (params, headers) => post("/user/login/", params, headers) export const postDinDin = (params, headers) => post("/user/dindin_url/", params, headers) -
注册页面src/components/register.vue
<template> <div> <center><h1>用户注册</h1></center> <a-form-item label="用户名" v-bind="formlayout"> <a-input ref="userNameInput" v-model="username" placeholder="Basic usage"> <a-icon slot="prefix" type="user"/> <a-tooltip slot="suffix" title="Extra information"> <a-icon type="info-circle" style="color: rgba(0,0,0,.45)"/> </a-tooltip> </a-input> </a-form-item> <a-form-item label="密码" v-bind="formlayout"> <a-input prefix="*" suffix="" v-model="password"/> </a-form-item> <a-form-item v-bind="buttonlayout"> <a-button type="primary" @click="submit">注册</a-button> </a-form-item> </div> </template> <script type="text/javascript"> import {postRegister} from "../http/apis"; export default { data() { return { username: "", password: "", //表单样式 formlayout: { //标签 labelCol: { xs: {span: 10}, sm: {span: 8} }, //文本框 wrapperCol: { xs: {span: 10}, sm: {span: 3} } }, //按钮样式 buttonlayout: { //按钮 wrapperCol: { xs: { span: 24, offset: 0 }, sm: {span: 16, offset: 8} } } } }, //自定义方法 methods: { submit: function () { let params = { username: this.username, password: this.password, } postRegister(params).then(res => { console.log(res) if (res.code == 200) { this.$router.push('/login') } else { alert("失败") } }).catch(err => { console.log(err) }) } } }; </script> <style type="text/css"> </style> -
登录页面src/components/login.vue
<template> <div> <center><h1>用户登录</h1></center> <a-form-item label="用户名" v-bind="formlayout"> <a-input ref="userNameInput" v-model="username" placeholder="Basic usage"> <a-icon slot="prefix" type="user"/> <a-tooltip slot="suffix" title="Extra information"> <a-icon type="info-circle" style="color: rgba(0,0,0,.45)"/> </a-tooltip> </a-input> </a-form-item> <a-form-item label="密码" v-bind="formlayout"> <a-input prefix="*" suffix="" v-model="password"/> </a-form-item> <a-form-item label="验证码" v-bind="formlayout"> <a-input v-model="verification" @blur="isVerification"/> <span v-if="isverification">验证码错误</span> <a-button type="primary" @click="clickVerification">点击发送验证码</a-button> </a-form-item> <a-form-item v-bind="buttonlayout"> <a-button type="primary" @click="submit">登录</a-button> <img style="margin-left:20px;cursor:pointer;" @click="dingding" src="http://localhost:8000/static/dingding.png"/> </a-form-item> </div> </template> <script type="text/javascript"> import {getisVerification, getVerification, postDinDin, postLogin} from "../http/apis"; export default { data() { return { selected: "", startdate: "", dinDinUrl: "", username: "", password: "", verification: "", isverification: false, //表单样式 formlayout: { //标签 labelCol: { xs: {span: 24}, sm: {span: 8} }, //文本框 wrapperCol: { xs: {span: 24}, sm: {span: 3} } }, //按钮样式 buttonlayout: { //按钮 wrapperCol: { xs: { span: 24, offset: 0 }, sm: {span: 16, offset: 8} } } } }, //自定义方法 methods: { //判断验证码 isVerification() { getisVerification({verification: this.verification}).then(res => { console.log(res) if (res.code == 200) { this.isverification = false } else { this.isverification = true } }).catch(err => { console.log(err) }) }, //发送钉钉验证码 clickVerification() { getVerification().then(res => { console.log(res) }).catch(err => { console.log(err) }) }, //钉钉登录 dingding: function () { postDinDin().then(res => { console.log(res) this.dinDinUrl = res.dindin_url //打开新窗口跳转到此地址 window.open(res.dindin_url) }) }, submit: function () { // let just = true; // just = this.isVerification() & just; if (this.isverification === false) { let params = { username: this.username, password: this.password, } //登录 postLogin(params).then(res => { console.log(res) if (res.token) { localStorage.setItem("token", res.token) localStorage.setItem("username", res.username) localStorage.setItem("id", res.id) } else { alert("登录失败") } }).catch(err => { console.log(err) }) } }; </script> <style type="text/css"> </style> -
src/router/index.js
import Vue from 'vue' import Router from 'vue-router' import register from '@/components/register' import login from '@/components/login' Vue.use(Router) var routes = [ { path:'/register', name:'register', component:register }, { path:'/login', name:'login', component:login }, ] export default new Router({ routes:routes, mode:'history' /*hash*/ })
4517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
