欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

django项目中使用手机号登录

程序员文章站 2022-03-20 16:49:21
本文使用聚合数据的短信接口,需要先获取到申请接口的appkey和模板id 项目目录下创建ubtils文件夹,定义返回随机验证码和调取短信接口的函数 function.py文件 sendMsg.py文件 路由 方法 前端登录的表单 前端登录的jquery 前端效果 done。 ......

本文使用聚合数据的短信接口,需要先获取到申请接口的appkey和模板id

项目目录下创建ubtils文件夹,定义返回随机验证码和调取短信接口的函数

function.py文件

import random
import re
# 随机数
def range_num(num):
    # 定义一个种子,从这里面随机拿出一个值,可以是字母
    seeds = "1234567890"
    # 定义一个空列表,每次循环,将拿到的值,加入列表
    random_num = []
    # choice函数:每次从seeds拿一个值,加入列表
    for i in range(num):
        random_num.append(random.choice(seeds))
    # 将列表里的值,变成四位字符串
    return "" . join(random_num)#5454

sendmsg.py文件

import json, urllib
from urllib.parse import urlencode
# 发送短信
def request2(mobile,num, m="get"):
    appkey = '6bba3e7dffa71b79483002e1d92f4d00'
    url = "http://v.juhe.cn/sms/send"
    params = {
        "mobile": mobile,  # 接收短信的手机号码
        "tpl_id": "167106",  # 短信模板id,请参考个人中心短信模板设置
        "tpl_value": "#code#=%s"%num,
    # 变量名和变量值对。如果你的变量名或者变量值中带有#&=中的任意一个特殊符号,请先分别进行urlencode编码后再传递,<a href="http://www.juhe.cn/news/index/id/50" target="_blank">详细说明></a>
        "key": appkey,  # 应用appkey(应用详细页查询)
        "dtype": "",  # 返回数据的格式,xml或json,默认json
    }
    params = urlencode(params)#mobile=15038062130&tpl_id=166467&tpl_value=%23code%23%3d431515&key=dabf6ecaebfa9554395dad7dcc6be7c8
    if m == "get":
        f = urllib.request.urlopen("%s?%s" % (url, params))
    else:
        f = urllib.request.urlopen(url, params)
    content = f.read()#{"reason":"操作成功","result":{"sid":"201906200911371223162juhe6hy","fee":1,"count":1},"error_code":0}
    res = json.loads(content)#json转字典
    if res:
        error_code = res["error_code"]
        if error_code == 0:
            # 成功请求
            return 'ok'
            # print(res["result"])
        else:
            return "%s:%s" % (res["error_code"], res["reason"])
            # print("%s:%s" % (res["error_code"], res["reason"]))
    else:
        return "request api error"

路由

# 手机验证码登录
path('logintel/', login.logintel,name='logintel'),

方法

from blog.utils import sendmsg  
from blog.utils import function  # 引入自定义的验证码

# 手机验证登陆
def logintel(request):
    res = {'status': none, 'info': none}
    # 点击发送短信执行以下程序
    if request.post.get('sendsms') == '1':

        tel = request.post.get('user_tel')
        print(tel)
        range_num = function.range_num(4);  # 5454

        request.session['validcode'] = range_num

        result = sendmsg.request2(tel, range_num, "get")
        # result='ok'

        if result == 'ok':
            res['status'] = 1
            # res['info']='发送成功%s'%range_num
            res['info'] = '发送成功'
            print(res)
            return httpresponse(json.dumps(res))  # 把这个结果告诉给前台,ajax
        else:
            res['status'] = 0
            res['info'] = '发送失败'
            return httpresponse(json.dumps(res))  # 把这个结果告诉给前台,ajax

    # 点击登录按钮执行以下程序:
    if request.post.get('dosubmit') == '1':
        validcode_form = request.post.get('validcode')
        validcode_session = request.session.get('validcode')  # 获取session

        if validcode_form:
            if validcode_form != validcode_session:
                res['status'] = 0
                res['info'] = '短信验证码不正确'
                return httpresponse(json.dumps(res))  # 把这个结果告诉给前台,ajax
        else:
            res['status'] = 0
            res['info'] = '短信验证码不存在'
            return httpresponse(json.dumps(res))  # 把这个结果告诉给前台,ajax

        # 写判断手机号是否在会员表中
        member_obj = member.objects.filter(member_tel=request.post.get('user_tel')).first()
        if member_obj:
            request.session['member_id'] = member_obj.member_id
            request.session['member_name'] = member_obj.member_name
            res['status'] = 1
            res['info'] = '登录成功'
            return httpresponse(json.dumps(res))  # 把这个结果告诉给前台,ajax
    return render(request, 'blog/logintel.html', locals())

前端登录的表单

{#手机登陆的表单#}
<form method="post">

    <input type="text" name="user_tel" placeholder="请输入手机号">

    <input type="text" name="validcode" placeholder="请输入短信验证码">


    <div class="am-g">
        <input id="yanzhengma" type="button" value="获取验证码"/>
        <input id="nowyanzhengma" style="display: none;" type="button" value=""/>
        <input class="submit " type="button" id="btn_login" value="登录"/>

    </div>
</form>

{#手机登陆的表单#}

前端登录的jquery

{#手机号登陆的jquery#}
//校验用户名
$("#btn_login").click(function () {
    var user_tel = $.trim($("input[name='user_tel']").val());
    var validcode = $.trim($("input[name='validcode']").val());

    $.post("/blog/logintel/", {
        "user_tel": user_tel,
        "validcode": validcode,
        "dosubmit": 1,
        "csrfmiddlewaretoken": "{{ csrf_token }}"
    }, function (data) {
        if (data['status'] == 1) {
            layer.msg("登录成功!即将跳转至首页~");
            location.href = "{% url 'index' %}";
        } else {

            layer.msg(data['info']);
        }

        return false;
    }, "json");
});
//点击获取验证码按钮
$("#yanzhengma").click(function () {
    getsmscode();
});

//获取短信验证码
function getsmscode() {

    var user_tel = $.trim($("input[name='user_tel']").val());//得到页面里的手机号码
    var reguser = /^[1][3-8]\d{9}$/;
    if (user_tel == "") {
        layer.msg("请填写手机号码");
        return false;
    }
    if (!reguser.test(user_tel)) {
        layer.msg("手机号码格式不正确");
        return false;
    }
    {#$("#yanzhengma").off('click');#}
    $.post("/blog/logintel/", {
        "user_tel": user_tel,
        'sendsms': 1,
        "csrfmiddlewaretoken": "{{ csrf_token }}"
    }, function (data) {
        if (data['status'] == 1) {
            timeout();
            layer.msg(data['info']);
        } else {
            layer.msg(data['content']);
        }
    }, 'json');
}

var sec = 60;
var interval = null;

//开启定时器
function timeout() {
    interval = setinterval(run, 1000);
}

function run() {
    if (sec >= 1) {
        sec--;
        $("#yanzhengma").hide();
        $("#nowyanzhengma").show();
        $("#nowyanzhengma").val("倒计时(" + sec + ")s");

    } else {
        $("#yanzhengma").off('click');
        $('#yanzhengma').on("click", function (event) {
            getsmscode();
        });
        $("#yanzhengma").show();
        $("#nowyanzhengma").hide();
        clearinterval(interval);//关闭定时器
        sec = 60;
    }

}

{#手机号登陆的jquery结束#}

前端效果

django项目中使用手机号登录

done。