django與小程式實現登入驗證功能

葉袖清風發表於2019-02-19
Django

之前用小程式做專案，因為後臺使用的java開發，一切順利，但切換成django做RESTful API介面時，在登陸註冊時一直出現問題，網上搜尋，藉助一個網友的回答，找到了一種可行的解決方案，現記錄如下。

具體流程

  • 使用者點選小程式頁面上的登入授權認證
  • 通過微信自帶的認證獲取code
  • 調取登入介面，將code傳入後臺
  • 後臺拿到code呼叫微信介面獲取openid等使用者資訊
  • 後臺將openid作為使用者名稱，若存在則去校驗使用者資訊，否則以此使用者名稱建立新使用者，密碼隨機生成
  • 將校驗結果或者建立資訊返回給微信小程式端
  • 根據返回的資訊完成使用者登入校驗

django的使用者許可權認證

django有一套自己的完善使用者模型，由於Django Auth自帶的User模型欄位有限，我們需要對其進行擴充(直接使用也可以)

nickname = models.CharField(verbose_name=u'暱稱',max_length=50, blank=True)
user_avatar =  models.ImageField(verbose_name=u'使用者頭像', upload_to='image/%Y/%m/%d', default=u'image/default.png', max_length=500)
user_email = models.EmailField(verbose_name=u'使用者郵箱',max_length=254)
user_phone = models.BigIntegerField(verbose_name=u'手機號', null=True,blank=True)
user_birthday = models.DateField(verbose_name=u'出生日期', default = timezone.now)
user_sex = models.CharField(verbose_name=u'性別',max_length=6,choices=(('male','男'),('female','女')),default='male')
user_address = models.CharField(verbose_name=u'地址',max_length=550, blank=True,null=True)
signature = models.CharField(verbose_name=u'個性簽名',max_length=550, blank=True,null=True)
複製程式碼

使用者介面序列化

from rest_framework import serializers

class UserSerializer(serializers.ModelSerializer):
class Meta:
    model = User
    fields = "__all__"
複製程式碼

登陸介面設計

class UserLogin(APIView):
    def post(self,request):
        params = request.data
        userName = get_openid(params.get('code'))
        userInfo = params.get('userinfo')
        try:
            user = User.objects.get(username = userName)
        except Exception as e:
            user = None
        if user:
            # 更新使用者資訊
            user = User.objects.get(username = userName)
        else:
            #註冊新使用者
            user = User.objects.create_user(username=userName,password=random_str(10))    
        #手動生成JWT
        # 手動生成token驗證
        jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
        jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER
        payload = jwt_payload_handler(user)
        token = jwt_encode_handler(payload)

        ret = {'code': '00000', 'msg': None,'data':{}}
        
        ret['msg'] = '授權成功'
        ret['data'] = {
            'token': token,
            'user_id': user.id,
            'nickname': user.nickname
        }
        return JsonResponse(ret)
複製程式碼

解析code獲取openid

class OpenidUtils(object):
    def __init__(self, jscode):
        self.url = "https://api.weixin.qq.com/sns/jscode2session"
        self.appid = APPID
        self.secret = SECRET
        self.jscode = jscode    # 前端傳回的動態jscode

    def get_openid(self):
        url = self.url + "?appid=" + self.appid + "&secret=" + self.secret + "&js_code=" + self.jscode + "&grant_type=authorization_code"
        r = requests.get(url)
        openid = r.json()['openid']
        return openid
複製程式碼

小程式的登陸驗證

具體登入流程可以查閱官方文件。

function getWXUserInfo() {
    const login = promisify(wx.login);
    const getUserInfo = promisify(wx.getUserInfo);

    return new Promise(function (resolve, reject) {
        _wxLogin();
        function _wxLogin() {
            login().then(function (res) {
                getUserInfo().then(function (r) {
                    let userInfo = r;
                    userInfo.code = res.code;
                    try {
                        wx.setStorageSync('userInfo', userInfo);
                    } catch (e) {
                        console.log(e)
                    }
                    if (userInfo && userInfo.code && userInfo.iv) {
                        resolve(userInfo);
                    }
                    else {
                        reject('wx login fail');
                    }
                }).catch(function (error) {
                    reject(error);
                });
            }).catch(function (error) {
                reject(error);
            });
        }
    });
}

//登入介面驗證
getWXUserInfo().then(function (data) {
    var result = {
        code: 0,
        data: {}
    };
    var params = {
        'code':data.code,
        'userinfo':data.userInfo
    }
    wx.request({
        url: '/api/login',
        data: params,
        dataType: 'json',
        method: 'POST',
        success: function (response) {
            // 返回成功
            if (response.data && response.data.code == '00000') {
                try {
                    var resData = {
                        custNo: data.user_id,
                        nickname: data.nickname
                    };
                    result.code = 0;
                    result.data = resData;
                    resolve(result);
                }
                catch (e) {
                    console.warn(result)
                    // 登入失敗
                    result.code = 2;
                    resolve(result);
                }
            }
            else {
                // 獲取 customNum 失敗
                console.warn(result)
                result.code = 1;
                result.data = 'get customNum fail';
                resolve(result);
            }
        }
    })
}
複製程式碼

相關文章