django 發送手機驗證碼

一、流程分析：

1.用戶在項目前端，輸入手機號，然后點擊【獲取驗證碼】，將手機號發到post到后台。

2.后台驗證手機號是否合法，是否已被占用，如果通過驗證，則生成驗證碼，並通過運行腳本，讓短信運營商向該手機號，發送該驗證碼，如果沒通過驗證，則返回錯誤信息

3.用戶收到短信驗證碼以后，再次將所有信息post到后台。

4.后台驗證各個數據，通過驗證則完成實名制認證，如果沒通過則返回錯誤信息。

總結，一次實名驗證，需要兩次ajax+post

二、對接短信商：

1.在雲片網端：

1.注冊雲片網

地址：https://www.yunpian.com/

后台管理控制台頁面：其中最重要的信息是APIKEY

 

 2.開發者備案、新增簽名、新增模板（模板管理）

1.雲片網后台的【測試】是沒有意義的，所謂的測試，就是直接給你手機發送一條短信，這算哪門子測試？

2.【簽名/模板設備】頁，【簽名管理】點擊【新增簽名】，到這里會被提醒完善【開發者信息】，認證分為開發者的【公司】和【個人】，現在是開發測試階段，可以先選擇【個人】，【個人】要身份證的照片，提交照片。

3.等待認證完成的短信通知，然后按照后台的操作指引，在【簽名管理】頁【新增簽名】，在【模板管理】頁【新增模板】，這些都要等待雲片網的審核，審核通過會有短信通知。

 

 4.在雲片網后台設置ip白名單，將外網ip加入白名單

 

 獲取本機外網ip最簡單的方法，就是百度ip

2.在django項目中寫發送短信的腳本

在 項目目錄下 新建utils目錄 新建yunpian.py 

import requests
class YunPian(object):
    def __init__(self,api_key):
        self.api_key=api_key
        self.single_send_url='https://sms.yunpian.com/v2/sms/single_send.json'

    def send_sms(self,code,mobile):
        parmas={
            'apikey':self.api_key,
            'mobile':mobile,
            'text':'【**網】您的驗證碼是{code}。如非本人操作，請忽略本短信'.format(code=code)
        }
        #text必須要跟雲片后台的模板內容 保持一致，不然發送不出去！
        r=requests.post(self.single_send_url,data=parmas)
        print(r)

if __name__=='__main__':
    yun_pian=YunPian('***************（你的apikey）')
    yun_pian.send_sms('***（驗證碼）','*******（手機號）')

三、在項目中寫發送手機驗證碼相關代碼：

1.前端相關代碼：

<!--發送按鈕倒計時代碼-->
<script type="text/javascript">
var countdown=60;
function settime(obj) {
    if (countdown == 0) {
        obj.removeAttribute("disabled");
        obj.value="免費獲取驗證碼";
        countdown = 60;
        return;
    } else {
        obj.setAttribute("disabled", true);
        obj.value="重新發送(" + countdown + ")";
        countdown--;
    }
setTimeout(function() {
    settime(obj) }
    ,1000)
}

</script>


<!--手機號碼輸入框代碼-->

<div class="form-group">
                    <label for="mobile" class="col-lg-2 col-sm-2 control-label">手機號碼:</label>
                    <div class="col-lg-10">
                        <div class="input-group m-bot15">
                    <input type="text" class="form-control" id="mobile" name="mobile" placeholder="手機號碼">
                    <span class="input-group-btn">
                         <input type="button" id="forcode" onclick="settime(this)" value="免費獲取驗證碼" class="btn btn-success">
                    </span>
                        </div>
                    <p class="help-block">請填寫綁定手機號</p>
                    </div>
                </div>


<!--向后台通過ajax發送手機號碼數據-->
<script>
    $('#forcode').click(function () {
        $.ajax({
            cache:false,
            type:"POST",
            url:"{% url 'users:forcode' %}",
            data:{
               csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val(),
               mobile:$("#mobile").val()
            },
            async:true,
            success:function (data) {
                alert(data)
            }
        })
    })
</script>

效果圖：

2.在users/views.py中寫發送驗證碼相關代碼：

import re
import random
from xyw.settings import APIKEY
from .models import VerifyCode


class ForCodeView(View):
    """獲取手機驗證碼"""
    def post(self,request):
        mobile=request.POST.get('mobile','')
        if mobile:
            #驗證是否為有效手機號
            mobile_pat=re.compile('^(13\d|14[5|7]|15\d|166|17\d|18\d)\d{8}$')
            res=re.search(mobile_pat,mobile)
            if res:
                #生成手機驗證碼
                code=VerifyCode()
                code.mobile=mobile
                c=random.randint(1000,9999)
                code.code=str(c)
                code.save()
                code=VerifyCode.objects.filter(mobile=mobile).first().code
                yunpian=YunPian(APIKEY)
                sms_status=yunpian.send_sms(code=code,mobile=mobile)
                msg=sms_status.msg
                return HttpResponse(msg)
            else:
                msg='請輸入有效手機號碼!'
                return HttpResponse(msg)
        else:
            msg='手機號不能為空！'
            return HttpResponse(msg)

3.在users/urls.py中：

from .views import ForCodeView
......

urlpatterns = [

    ......
    path('forcode/',ForCodeView.as_view(),name='forcode'),
]

4.在settings.py中增加代碼：

#雲片網apikey
APIKEY=‘你雲片網的apikey’

至此，完成了發送手機驗證碼功能。

其實也有可以優化的地方：

1.雖然前端設置了60秒才可以重新發送，但是這個驗證在后端也應該有，以防被有心人利用。

2.沒有驗證手機號碼是否已經被發送過驗證碼

3.驗證碼沒有生命周期，應該各一段時間讓驗證碼失效

 我的博客即將搬運同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=h8mmoufw70zz