【Django开发】django美多商城项目完整开发4.0第7篇：登录,使用登录的流程【附代码文档】...

烟圈0o

于 2024-08-27 02:14:38 发布

阅读量18

点赞数

文章标签： django python 后端

本教程的知识点为：项目准备项目准备配置 1. 修改settings/dev.py 文件中的路径信息 2. INSTALLED_APPS 3. 数据库用户部分图片 1. 后端接口设计：视图原型 2. 具体视图实现用户部分使用Celery完成发送判断帐号是否存在 1. 判断用户名是否存在后端接口设计：用户部分 JWT 什么是JWT 起源传统的session认证用户部分登录 1. 业务说明 2. 后端接口设计 3. 后端实现登录使用登录的流程创建模型类 urllib使用说明登录回调处理登录使用登录的流程创建模型类 urllib使用说明绑定用户身份接口邮件与验证学习目标：业务说明：技术说明：保存邮箱并发送验证邮件省市区地址查询数据库建表说明页面静态化注意定时任务安装部分详情页异步任务的触发。后端接口设计收货地址使用缓存安装使用方法为省市区视图添加缓存数据库表设计表结构数据表结构首页数据表结构 Docker使用 Docker简介用户浏览历史记录 1. 保存后端接口设计后端实现搜索 1. 需求分析 2. 搜索引擎原理 3. Elasticsearch 部分业务需求分析技术实现数据存储设计 1. Redis保存已登录用户商品部分业务需求分析技术实现查询数据 1. 后端接口设计部分业务需求分析技术实现登录合并修改登录视图部分保存 1. 后端接口设计 2. 后端实现保存的思路创建数据库模型类接入开发平台登录沙箱环境 Xadmin 1. 安装 2. 使用站点的全局配置站点Model管理。在Ubuntu中安装 2. 启动与停止 3. 镜像操作端与自定义文件存储系统 1. 的Python客户端安装使用。

完整笔记资料代码->： https://gitee.com/yinuo112/Backend/tree/master/Django/django美多商城项目完整开发4.0/note.md

感兴趣的小伙伴可以自取哦~

全套教程部分目录：

部分文件图片：

from django.db import models

class BaseModel(models.Model):
    """为模型类补充字段"""
    create_time = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")
    update_time = models.DateTimeField(auto_now=True, verbose_name="更新时间")

    class Meta:
        abstract = True  # 说明是抽象模型类, 用于继承使用，数据库迁移时不会创建BaseModel的表

在oauth/models.py中定义身份（openid）与用户模型类User的关联关系

from django.db import models
from meiduo_mall.utils.models import BaseModel

class OAuthUser(BaseModel):
    """
    登录用户数据
    """
    user = models.ForeignKey('users.User', on_delete=models.CASCADE, verbose_name='用户')
    openid = models.CharField(max_length=64, verbose_name='openid', db_index=True)

    class Meta:
        db_table = 'tb_oauth_qq'
        verbose_name = '登录用户数据'
        verbose_name_plural = verbose_name

进行数据库迁移

urllib使用说明

在后端接口中，我们需要向服务器发送请求，查询用户的信息，Python提供了标准模块urllib可以帮助我们发送http请求。

urllib.parse.urlencode(query)

将query字典转换为url路径中的查询字符串

urllib.parse.parse_qs(qs)

将qs查询字符串格式数据转换为python的字典

urllib.request.urlopen(url, data=None)

发送http请求，如果data为None，发送GET请求，如果data不为None，发送POST请求

返回response响应对象，可以通过read()读取响应体数据，需要注意读取出的响应体数据为bytes类型

登录回调处理

用户在登录成功后，会将用户重定向回我们配置的回调callback网址，在本项目中，我们申请登录开发资质时配置的回调地址为：

我们在front_end_pc目录中新建oauth_callback.html文件，用于接收登录成功的用户回调请求。在该页面中，提供了用于用户首次使用登录时需要绑定用户身份的表单信息。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns=" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-绑定用户</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/host.js"></script>
    <script type="text/javascript" src="js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="is_show_waiting" class="pass_change_finish">请稍后...</div>
        <div v-else>
            <div class="register_con">
                <div class="l_con fl">
                    <a class="reg_logo"><img src="images/logo.png"></a>
                    <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
                    <div class="reg_banner"></div>
                </div>

                <div class="r_con fr">
                    <div class="reg_title clearfix">
                        绑定用户
                    </div>
                    <div class="reg_form clearfix" id="app" v-cloak>
                        <form id="reg_form" v-on:submit.prevent="on_submit">
                        <ul>
                            <li>
                                <label>手机号:</label>
                                <input type="text" v-model="mobile" v-on:blur="check_phone" name="phone" id="phone">
                                <span v-show="error_phone" class="error_tip">{{ error_phone_message }}</span>
                            </li>
                            <li>
                                <label>密码:</label>
                                <input type="password" v-model="password" v-on:blur="check_pwd" name="pwd" id="pwd">
                                <span v-show="error_password" class="error_tip">密码最少8位，最长20位</span>
                            </li>
                            <li>
                                <label>图形验证码:</label>
                                <input type="text" v-model="image_code" v-on:blur="check_image_code" name="pic_code" id="pic_code" class="msg_input">
                                <img v-bind:src="image_code_url" v-on:click="generate_image_code" alt="图形验证码" class="pic_code">
                                <span v-show="error_image_code" class="error_tip">{{ error_image_code_message }}</span>
                            </li>
                            <li>
                                <label>短信验证码:</label>
                                <input type="text" v-model="sms_code" v-on:blur="check_sms_code" name="msg_code" id="msg_code" class="msg_input">
                                <a v-on:click="send_sms_code" class="get_msg_code">{{ sms_code_tip }}</a>
                                <span v-show="error_sms_code" class="error_tip">{{ error_sms_code_message }}</span>
                            </li>
                            <li class="reg_sub">
                                <input type="submit" value="保 存" name="">
                            </li>
                        </ul>                
                        </form>
                    </div>
                </div>
            </div>

            <div class="footer no-mp">
                <div class="foot_link">
                    <a rel="nofollow" href="#">关于我们</a>
                    <span>|</span>
                    <a rel="nofollow" href="#">联系我们</a>
                    <span>|</span>
                    <a rel="nofollow" href="#">招聘人才</a>
                    <span>|</span>
                    <a rel="nofollow" href="#">友情链接</a>        
                </div>
                <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
                <p>电话：010-****888    京ICP备*******8号</p>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/oauth_callback.js"></script>
</body>
</html>

在js目录中新建oauth_callback.js文件

var vm = new Vue({
    el: '#app',
    data: {
        host: host,
        is_show_waiting: true,

        error_password: false,
        error_phone: false,
        error_image_code: false,
        error_sms_code: false,
        error_image_code_message: '',
        error_phone_message: '',
        error_sms_code_message: '',

        image_code_id: '', // 图片验证码id
        image_code_url: '',

        sms_code_tip: '获取短信验证码',
        sending_flag: false, // 正在发送短信标志

        password: '',
        mobile: '', 
        image_code: '',
        sms_code: '',
        access_token: ''
    },
    mounted: function(){

    },
    methods: {
        // 获取url路径参数    
        get_query_string: function(name){ 
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            }
            return null;
        },
        // 生成uuid
        generate_uuid: function(){
            var d = new Date().getTime();
            if(window.performance && typeof window.performance.now === "function"){
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = (d + Math.random()*16)%16 | 0;
                d = Math.floor(d/16);
                return (c =='x' ? r : (r&0x3|0x8)).toString(16);
            });
            return uuid;
        },
        // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
        generate_image_code: function(){
            // 生成一个编号
            // 严格一点的使用uuid保证编号唯一， 不是很严谨的情况下，也可以使用时间戳
            this.image_code_id = this.generate_uuid();

            // 设置页面中图片验证码img标签的src属性
            this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";
        },
        check_pwd: function (){
            var len = this.password.length;
            if(len<8||len>20){
                this.error_password = true;
            } else {
                this.error_password = false;
            }        
        },
        check_phone: function (){
            var re = /^1[345789]\d{9}$/;
            if(re.test(this.mobile)) {
                this.error_phone = false;
            } else {
                this.error_phone_message = '您输入的手机号格式不正确';
                this.error_phone = true;
            }
        },
        check_image_code: function (){
            if(!this.image_code) {
                this.error_image_code_message = '请填写图片验证码';
                this.error_image_code = true;
            } else {
                this.error_image_code = false;
            }    
        },
        check_sms_code: function(){
            if(!this.sms_code){
                this.error_sms_code_message = '请填写短信验证码';
                this.error_sms_code = true;
            } else {
                this.error_sms_code = false;
            }
        },
        // 发送手机短信验证码
        send_sms_code: function(){
            if (this.sending_flag == true) {
                return;
            } 
            this.sending_flag = true;

            // 校验参数，保证输入框有数据填写
            this.check_phone();
            this.check_image_code();

            if (this.error_phone == true || this.error_image_code == true) {
                this.sending_flag = false;
                return;
            }

            // 向后端接口发送请求，让后端发送短信验证码
            axios.get(this.host + '/sms_codes/' + this.mobile + '/?text=' + this.image_code+'&image_code_id='+ this.image_code_id, {
                    responseType: 'json'
                })
                .then(response => {
                    // 表示后端发送短信成功
                    // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                    var num = 60;
                    // 设置一个计时器
                    var t = setInterval(() => {
                        if (num == 1) {
                            // 如果计时器到最后, 清除计时器对象
                            clearInterval(t);
                            // 将点击获取验证码的按钮展示的文本回复成原始文本
                            this.sms_code_tip = '获取短信验证码';
                            // 将点击按钮的onclick事件函数恢复回去
                            this.sending_flag = false;
                        } else {
                            num -= 1;
                            // 展示倒计时信息
                            this.sms_code_tip = num + '秒';
                        }
                    }, 1000, 60)
                })
                .catch(error => {
                    if (error.response.status == 400) {
                        this.error_image_code_message = '图片验证码有误';
                        this.error_image_code = true;
                    } else {
                        console.log(error.response.data);
                    }
                    this.sending_flag = false;
                })
        },
        // 保存
        on_submit: function(){
            this.check_pwd();
            this.check_phone();
            this.check_sms_code();

        }
    }
});

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.

在将用户重定向到此网页的时候，重定向的网址会携带提供的code参数，用于获取用户信息使用，我们需要将这个code参数发送给后端，在后端中使用code参数向请求用户的身份信息，并查询与该用户绑定的用户。

后端接口设计

请求方式 ： GET /oauth/qq/user/?code=xxx

请求参数：查询字符串参数

参数	类型	是否必传	说明
code	str	是	qq返回的授权凭证code

返回数据： JSON

{
    "access_token": xxxx,
}
或
{
    "token": "xxx",
    "username": "python",
    "user_id": 1
}

返回值	类型	是否必须	说明
access_token	str	否	用户是第一次使用登录时返回，其中包含openid，用于绑定身份使用，注意这个是我们自己生成的
token	str	否	用户不是第一次使用登录时返回，登录成功的JWT token
username	str	否	用户不是第一次使用登录时返回，用户名
user_id	int	否	用户不是第一次使用登录时返回，用户id

使用itsdangerous生成凭据access_token

itsdangerous模块的参考资料连接[

安装

`TimedJSONWebSignatureSerializer`的使用

使用TimedJSONWebSignatureSerializer可以生成带有有效期的token

from itsdangerous import TimedJSONWebSignatureSerializer as Serializer
from django.conf import settings

  
  
# serializer = Serializer(秘钥, 有效期秒)
  
  
serializer = Serializer(settings.SECRET_KEY, 300)
  
  
# serializer.dumps(数据), 返回bytes类型
  
  
token = serializer.dumps({'mobile': '18512345678'})
token = token.decode()

  
  
# 检验token
  
  
  
  
# 验证失败，会抛出itsdangerous.BadData异常
  
  
serializer = Serializer(settings.SECRET_KEY, 300)
try:
    data = serializer.loads(token)
except BadData:
    return None

后端实现

在OAuth辅助类中添加方法：

def get_access_token(self, code):
        """
        获取access_token
        :param code: qq提供的code
        :return: access_token
        """
        params = {
            'grant_type': 'authorization_code',
            'client_id': self.client_id,
            'client_secret': self.client_secret,
            'code': code,
            'redirect_uri': self.redirect_uri
        }
        url = ' + urlencode(params)
        response = urlopen(url)
        response_data = response.read().decode()
        data = parse_qs(response_data)
        access_token = data.get('access_token', None)
        if not access_token:
            logger.error('code=%s msg=%s' % (data.get('code'), data.get('msg')))
            raise APIError

        return access_token[0]

    def get_openid(self, access_token):
        """
        获取用户的openid
        :param access_token: qq提供的access_token
        :return: open_id
        """
        url = ' + access_token
        response = urlopen(url)
        response_data = response.read().decode()
        try:
            # 返回的数据 callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} )\n;
            data = json.loads(response_data[10:-4])
        except Exception:
            data = parse_qs(response_data)
            logger.error('code=%s msg=%s' % (data.get('code'), data.get('msg')))
            raise APIError
        openid = data.get('openid', None)
        return openid

    @staticmethod
    def generate_save_user_token(openid):
        """
        生成保存用户数据的token
        :param openid: 用户的openid
        :return: token
        """
        serializer = Serializer(settings.SECRET_KEY, expires_in=constants.SAVE__USER_TOKEN_EXPIRES)
        data = {'openid': openid}
        token = serializer.dumps(data)
        return token.decode()

在oauth/views.py中实现视图

class AuthUserView(APIView):
    """
    登录的用户
    """
    def get(self, request):
        """
        获取qq登录的用户数据
        """
        code = request.query_params.get('code')
        if not code:
            return Response({'message': '缺少code'}, status=status.HTTP_400_BAD_REQUEST)

        oauth = OAuth()

        # 获取用户openid
        try:
            access_token = oauth.get_access_token(code)
            openid = oauth.get_openid(access_token)
        except APIError:
            return Response({'message': '服务异常'}, status=status.HTTP_503_SERVICE_UNAVAILABLE)

        # 判断用户是否存在
        try:
            qq_user = OAuthUser.objects.get(openid=openid)
        except OAuthUser.DoesNotExist:
            # 用户第一次使用登录
            token = oauth.generate_save_user_token(openid)
            return Response({'access_token': token})
        else:
            # 找到用户, 生成token
            user = qq_user.user
            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)

            response = Response({
                'token': token,
                'user_id': user.id,
                'username': user.username
            })
            return response

前端

在oauth_callback.js 中修改

mounted: function(){
        // 从路径中获取qq重定向返回的code
        var code = this.get_query_string('code');
        axios.get(this.host + '/oauth/qq/user/?code=' + code, {
                responseType: 'json',
            })
            .then(response => {
                if (response.data.user_id){
                    // 用户已绑定
                    sessionStorage.clear();
                    localStorage.clear();
                    localStorage.user_id = response.data.user_id;
                    localStorage.username = response.data.username;
                    localStorage.token = response.data.token;
                    var state = this.get_query_string('state');
                    location.href = state;
                } else {
                    // 用户未绑定
                    this.access_token = response.data.access_token;
                    this.generate_image_code();
                    this.is_show_waiting = false;
                }
            })
            .catch(error => {
                console.log(error.response.data);
                alert('服务器异常');
            })
    },

原创作者: u_16958431 转载于: https://blog.51cto.com/u_16958431/11845102

烟圈0o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Django开发】django美多商城项目完整开发4.0第7篇：登录,使用登录的流程【附代码文档】...

本教程的知识点为：项目准备项目准备配置 1. 修改settings/dev.py 文件中的路径信息 2. INSTALLED_APPS 3. 数据库用户部分图片 1. 后端接口设计：视图原型 2. 具体视图实现用户部分使用Celery完成发送判断帐号是否存在 1. 判断用户名是否存在后端接口设计：用...
复制链接

扫一扫