Vue+Django REST framework實戰

搭建一個前后端分離的生鮮超市網站
Django rtf 完成 手機注冊和用戶登錄（中）

Json Web Token的原理

因為我們的drf 的token auth有它的缺點。所以最常用的還是JWT的方式

以下內容轉載于: http://lion1ou.win/2017/01/18/

http是一種無狀態的協議，前后兩次請求它會不知道這是從同一個人還是不同的人發的。

傳統方式： 采用session和cookie結合的方式

前后端分離的傳統: 用戶信息生成token token 和對于的用戶id保存到數據庫或session中。我們的drf 的 token auth 就是這種。

接著把token傳給用戶，存入瀏覽器cookie。之后的請求帶上這個cookie，后端根據這個cookie值查詢用戶，驗證過期的邏輯需要表里多一個字段，以及后端的邏輯驗證。

問題: xss漏洞: cookie可以被js讀取。作為后端識別用戶的標識，cookie的泄露意味著用戶信息不再安全。特別是drf我們的token auth沒有過期時間

設置cookie時兩個更安全的選項: httpOnly以及secure項.

• httponly的不能被js讀取，瀏覽器會自動加在請求header中
• secure就只通過https

httponly 問題。很容易被xsrf攻擊，因為cookie會默認發出去。

如果將驗證信息保存數據庫。每次都要查詢。保存session，加大了服務器端存儲壓力。

那我們可以不要服務器去查詢呢？

只要我們生成的token遵循一定的規律，比如使用對稱加密算法來加密id 形成token。
服務端只需要解密token 就能知道id。

• 這樣做的問題在于如果他知道你是怎么加密的。那么它可以通過這種加密方式偽造token

此時我們使用非對稱加密算法。

對稱加密，加密和解密使用的是同一個密鑰。服務器把token傳給用戶，以及用戶拿著token來服務器進行解密。加密解密都在服務器端。

JWT 是一個開放標準(RFC 7519)，它定義了一種用于簡潔，自包含的用于通信雙方之間以 JSON 對象的形式安全傳遞信息的方法。JWT 可以使用 HMAC 算法或者是 RSA 的公鑰密鑰對進行簽名。它具備兩個特點

• 簡潔(Compact)

可以通過URL, POST 參數或者在 HTTP header 發送，因為數據量小，傳輸速度快

• 自包含(Self-contained)

負載中包含了所有用戶所需要的信息，避免了多次查詢數據庫

mark

頭部包含兩部分，token和加密算法。會進行Base64加密。但是會很容易反解出來

• Header 頭部

頭部包含了兩部分，token 類型和采用的加密算法

{"alg": "HS256","typ": "JWT" }

它會使用 Base64 編碼組成 JWT 結構的第一部分。

• Payload 負載

這部分就是我們存放信息的地方了，你可以把用戶 ID 等信息放在這里，JWT 規范里面對這部分有進行了比較詳細的介紹，常用的由 iss（簽發者），exp（過期時間），sub（面向的用戶），aud（接收方），iat（簽發時間）。

{"iss": "lion1ou JWT","iat": 1441593502,"exp": 1441594722,"aud": "www.example.com","sub": "lion1ou@163.com" }

同樣的，它會使用 Base64 編碼組成 JWT 結構的第二部分

• Signature 簽名

前面兩部分都是使用 Base64 進行編碼的，即前端可以解開知道里面的信息。Signature 需要使用編碼后的 header 和 payload 以及我們提供的一個密鑰，然后使用 header 中指定的簽名算法（HS256）進行簽名。簽名的作用是保證 JWT 沒有被篡改過。

可以解開就是指前端可以通過token拿到用戶的一部分非敏感信息。

JWT不會再保存數據了。a關注b，發郵件給b。b直接點擊帶回來串和action。就不需要登錄了。

設計用戶認證和授權系統(獨立)，以及單點登錄。

mark

單點登錄，多個子域名通過一個統一的授權認證接口進行登錄。

https://github.com/GetBlimp/django-rest-framework-jwt

首先要安裝

pip install djangorestframework-jwt

使用:

需要將jsonWebAuth加入到drf 的default auth class中

'rest_framework_jwt.authentication.JSONWebTokenAuthentication',

對于用戶post過來的token進行驗證，將user取出來

• path中的配置

from rest_framework_jwt.views import obtain_jwt_token #...urlpatterns = ['',# ...url(r'^api-token-auth/', obtain_jwt_token), ]

配置path中的jwt

# jwt的token認證path('jwt-auth/', obtain_jwt_token ) mark mark curl -H "Authorization: JWT <your_token>" http://localhost:8000/protected-url/ mark

jwt的加密認證方式可以參照jwt的源碼進行學習。

vue和jwt接口調試

• vue中登錄的邏輯

//登錄 export const login = params => {return axios.post(`${host}/login/`, params) }

vue中的登錄post到login接口

要么改前端，要么改后端，畢竟我們現在在寫后端。改后端url為login

# jwt的token認證path('login/', obtain_jwt_token )

前往login.vue中查看登錄的具體邏輯

login({username:this.userName, //當前頁碼password:this.parseWord}).then((response)=> {console.log(response);//本地存儲用戶信息cookie.setCookie('name',this.userName,7);cookie.setCookie('token',response.data.token,7)//存儲在store// 更新store數據that.$store.dispatch('setInfo');//跳轉到首頁頁面this.$router.push({ name: 'index'})})

獲取到當前的用戶名和密碼 這個用戶名和密碼來自當前的data()中

data中的值又通過v-model進行了與輸入框中值的綁定(我猜的啊)

本地存儲設置了cookie的名字和值，token和值。并設置了7天過期

mark

可以看到我們的vue數據中已經有了name 和 token

setInfo會進行實時數據同步更新的操作

[types.SET_INFO] (state) {state.userInfo = {name:cookie.getCookie('name'),token:cookie.getCookie('token')}console.log(state.userInfo);},

我們的jwt 調用的是django自帶的auth與userProfile中數據進行對比。而我們如果使用手機注冊，就會導致驗證失敗。因為默認是用用戶名和密碼去查的。

自定義django用戶認證函數

首先在setting中設置變量:

# 設置郵箱和用戶名和手機號均可登錄 AUTHENTICATION_BACKENDS = ('users.views.CustomBackend',)

在user/view中

class CustomBackend(ModelBackend):"""自定義用戶驗證規則"""def authenticate(self, username=None, password=None, **kwargs):try:# 不希望用戶存在兩個，get只能有一個。兩個是get失敗的一種原因# 后期可以添加郵箱驗證user = User.objects.get(Q(username=username) | Q(mobile=username))# django的后臺中密碼加密：所以不能password==password# UserProfile繼承的AbstractUser中有def check_password(self,# raw_password):if user.check_password(password):return userexcept Exception as e:return None mark

通過斷點測試可以成功的進入了我們的這段邏輯。

JWT的過期時間設置

# 與drf的jwt相關的設置 JWT_AUTH = {'JWT_EXPIRATION_DELTA': datetime.timedelta(seconds=20),'JWT_AUTH_HEADER_PREFIX': 'JWT', }

這里的header前綴我們要保持與前端的一致。

src/axios/index.js:

config.headers.Authorization = `Bearer ${store.state.userInfo.token}`;

云片網發送短信驗證碼

注冊會用到一些高級的Serializer。

寫一個接口：發送短信

form的驗證。

云片網

可以有很多子賬號，每個子賬號都會有一個api key 這個api key就會很重要。

發送短信驗證碼這個key是必須要用到的。

文本短信 & 語音短信

發送國內短信申請簽名。短信模板。

• 新建簽名(審核), 新建模板(可包含變量，審核)

api文檔中使用說明。

國內短信api文檔: https://www.yunpian.com/doc/zh_CN/domestic/list.html

單條發送，批量發送(相同內容，不同內容)

https://www.yunpian.com/doc/zh_CN/domestic/single_send.html

參數。必填字段填過來。示例代碼

utils下yunpian.py

線上部署時一定要將自己服務器的ip加入ip白名單中。測試時搜索本機ip地址。

# encoding: utf-8 __author__ = 'mtianyan' __date__ = '2018/3/8 0008 09:28' import json import requestsclass YunPian(object):def __init__(self, api_key):self.api_key = api_keyself.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)}response = requests.post(self.single_send_url, data=parmas)re_dict = json.loads(response.text)return re_dictif __name__ == "__main__":yun_pian = YunPian("apikey的值")yun_pian.send_sms("2017", "手機號碼")

注意text內容必須要與后臺已申請過簽名并審核通過的模板保持一致

drf實現發送短信驗證碼接口

# 發送驗證碼是創建model中一條記錄的操作 from rest_framework.mixins import CreateModelMixin

用戶傳過來的手機號碼我們要進行兩次驗證:

• 是否有效
• 有沒有被注冊過

Serializer和django里的form modelform 是一樣的，所以這個驗證我們把它放到我們的Serializer里面來做。

• 為什么不像goods中一樣使用serializers.ModelSerializer

因為我們model中的code也是必填項，而我們擁有的只有手機號，所以會導致驗證失敗

setting.py中

# 手機號碼正則表達式 REGEX_MOBILE = "^1[358]\d{9}$|^147\d{8}$|^176\d{8}$"

users/serializers.py:

# encoding: utf-8 __author__ = 'mtianyan' __date__ = '2018/3/8 0008 09:41' import re from datetime import datetime, timedelta from VueDjangoFrameWorkShop.settings import REGEX_MOBILE from users.models import VerifyCode from rest_framework import serializers from django.contrib.auth import get_user_model User = get_user_model()class SmsSerializer(serializers.Serializer):mobile = serializers.CharField(max_length=11)def validate_mobile(self, mobile):"""驗證手機號碼(函數名稱必須為validate_ + 字段名)"""# 手機是否注冊if User.objects.filter(mobile=mobile).count():raise serializers.ValidationError("用戶已經存在")# 驗證手機號碼是否合法if not re.match(REGEX_MOBILE, mobile):raise serializers.ValidationError("手機號碼非法")# 驗證碼發送頻率one_mintes_ago = datetime.now() - timedelta(hours=0, minutes=1, seconds=0)# 添加時間大于一分鐘以前。也就是距離現在還不足一分鐘if VerifyCode.objects.filter(add_time__gt=one_mintes_ago, mobile=mobile).count():raise serializers.ValidationError("距離上一次發送未超過60s")return mobile

然后views中class SmsCodeViewset(CreateModelMixin, viewsets.GenericViewSet):

重寫CreateModelMixin中的create方法

原本的create方法

def create(self, request, *args, **kwargs):serializer = self.get_serializer(data=request.data)serializer.is_valid(raise_exception=True)self.perform_create(serializer)headers = self.get_success_headers(serializer.data)return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers)

serializer.is_valid(raise_exception=True)有效性驗證失敗會直接拋異常。
被drf捕捉到返回400狀態碼。

其中的APIKEY需要我們添加到setting.py中

# 云片網設置 APIKEY = 'apikey值'

生成四位數的驗證碼值

def generate_code(self):"""生成四位數字的驗證碼"""seeds = "1234567890"random_str = []for i in range(4):random_str.append(choice(seeds))return "".join(random_str)

改寫后的自定義方法:

def create(self, request, *args, **kwargs):serializer = self.get_serializer(data=request.data)serializer.is_valid(raise_exception=True)mobile = serializer.validated_data["mobile"]yun_pian = YunPian(APIKEY)code = self.generate_code()sms_status = yun_pian.send_sms(code=code, mobile=mobile)if sms_status["code"] != 0:return Response({"mobile":sms_status["msg"]}, status=status.HTTP_400_BAD_REQUEST)else:code_record = VerifyCode(code=code, mobile=mobile)code_record.save()return Response({"mobile":mobile}, status=status.HTTP_201_CREATED) mark mark

將返回的json在yunpian中loads成dict

然后取出dict中的code和msg進行判斷與返回。我們不需要向前端返回status。而是遵循restful api的規范。http狀態碼即可區分成功或失敗。消息并不代表。

發送成功之后再保存驗證碼

調試是否正確

調試之前配置好對應的url

from users.views import SmsCodeViewset # 配置codes的url router.register(r'codes', SmsCodeViewset, base_name="codes")

http://127.0.0.1:8000/codes/

mark mark

返回中既設置了400的http code 又有和form類似的字段信息錯誤

字段名稱 : 數組(告訴你該字段的錯誤)

發送成功(201)

mark

總結

以上是生活随笔為你收集整理的10- vue django restful framework 打造生鲜超市 -用户登录和手机注册（中）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。