【Django开发】django美多商城项目完整开发4.0第7篇:登录,登录回调处理【附代码文档】

67 阅读1分钟

🏆🏆🏆教程全知识点简介:1.邮件验证系统包括Django发送邮件、保存邮箱并发送验证邮件、Celery使用Django配置文件设置。2. 地址管理涵盖收货地址、省市区地址查询、数据库建表、后端接口设计、前端实现、缓存使用(安装、使用方法、省市区视图缓存、缓存数据保存位置和有效期设置)、用户地址管理。3. 数据库设计包括用户部分、商品部分、数据库表设计、表结构、数据库模型类。4. 容器化部署涵盖Docker使用(Ubuntu安装、启动停止、镜像操作)、FastDFS客户端与自定义文件存储系统、页面静态化、定时任务、静态化首页脚本。5. 商品系统包括商品详情页、异步任务触发、脚本工具、用户浏览历史记录(保存、查看)。6. 商业模式涵盖B2B企业对企业、C2C个人对个人、O2O线上到线下、开发流程、需求分析。7. 购物车系统包括购物车管理、购物车数据存储设计(Redis保存已登录用户)、添加到购物车、查询购物车数据、登录合并购物车。8. 订单系统涵盖提交订单、我的订单、订单评价、订单结算、保存订单、MySQL事务隔离级别修改、下单成功页面。9. 搜索系统包括商品搜索、搜索引擎原理、Elasticsearch、Docker安装Elasticsearch扩展、前端实现。10. 支付系统涉及 集成、Xadmin管理后台。11. 项目配置包括项目准备、配置文件修改、数据库配置、Redis配置、本地化语言时区、异常处理、日志记录。12. 用户认证系统涵盖图片验证码、域名设置、前端Vue代码、跨域CORS、Celery发送短信、账号存在判断、JWT认证(JWT概念、构成、应用、Django REST framework JWT)、 登录(登录流程、模型类创建、urllib使用、回调处理)、用户中心个人信息。


📚📚👉👉👉   gitee.com/yinuo112/Ba… 🍅🍅


🎯🎯🎯全教程总章节


🚀🚀🚀本篇主要内容

登录

登录,亦即我们所说的第三方登录,是指用户可以不在本项目中输入 ,而直接通过第三方的验证,成功登录本项目。

若想实现登录,需要成为互联的开发者,审核通过才可实现。注册方法可参考链接wiki.connect.qq.com/%E6%88%90%E…

成为互联开发者后,还需创建应用,即获取本项目对应与互联的应用ID,创建应用的方法参考链接wiki.connect.qq.com/__trashed-2

登录开发文档连接wiki.connect.qq.com/%E5%87%86%E…

使用登录的流程

创建模型类

创建一个新的应用oauth,用来实现第三方认证登录。总路由前缀 oauth/

meiduo/meiduo_mall/utils/models.py文件中创建模型类基类,用于增加数据新建时间和更新时间。

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

进行数据库迁移

python manage.py makemigrations
python manage.py migrate

urllib使用说明

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

  • urllib.parse.urlencode(query)

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

  • urllib.parse.parse_qs(qs)

Flask 官方文档

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

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

loguru 文档

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

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

登录回调处理

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

http://www.meiduo.site:8080/oauth_callback.html

Django 测试客户端

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

passlib 文档

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多mall-绑定用户</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">
                        <h1>绑定用户</h1>
                    </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">