Django商城項目筆記No.11用戶部分-QQ登陸1獲取QQ登陸網址

Django商城項目筆記No.11用戶部分-QQ登陸

QQ登陸，亦即咱們所說的第三方登陸，是指用戶能夠不在本項目中輸入密碼，而直接經過第三方的驗證，成功登陸本項目。

若想實現QQ登陸，須要成爲QQ互聯的開發者，審覈經過纔可實現。註冊方法可參考連接http://wiki.connect.qq.com/%E6%88%90%E4%B8%BA%E5%BC%80%E5%8F%91%E8%80%85

成爲QQ互聯開發者後，還需建立應用，即獲取本項目對應與QQ互聯的應用ID，建立應用的方法參考連接http://wiki.connect.qq.com/__trashed-2

QQ登陸開發文檔鏈接http://wiki.connect.qq.com/%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C_oauth2-0

QQ登陸流程圖

建立QQ登陸模型類

建立一個新的應用oauth，用來實現QQ第三方認證登陸。總路由前綴 oauth/

建立應用

註冊應用

註冊路由

 

再建立qq模型類以前，咱們來搞一個基類：

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:
        # 說明是抽象模型類，用於繼承使用,數據庫遷移時不會建立BaseModel的表
        abstract = True

View Code

而後建立qq模型類：

 

from django.db import models

# Create your models here.
from md_mall.utils.models import BaseModel


class OAuthQQUser(BaseModel):
    """
    QQ登陸用戶數據
    """
    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 = 'QQ登陸用戶數據'
        verbose_name_plural = verbose_name

 

數據庫遷移

python manage.py makemigrations
python manage.py migrate

獲取QQ登陸網址實現

接下來處理第一步：點擊qq登陸以後，要跳轉到掃描登陸界面，而咱們如今就須要來獲取一下掃描登陸界面的地址。

接口設計

在配置文件中添加關於QQ登陸的應用開發信息

# QQ登陸參數
QQ_CLIENT_ID = '101474184'
QQ_CLIENT_SECRET = 'c6ce949e04e12ecc909ae6a8b09b637c'
QQ_REDIRECT_URI = 'http://www.meiduo.site:8080/oauth_callback.html'
QQ_STATE = '/index.html'

新建oauth/utils.py文件，建立QQ登陸輔助工具類

import json
from urllib.request import urlopen
import logging
from django.conf import settings
import urllib.parse
from itsdangerous import TimedJSONWebSignatureSerializer as TJWSSerializer, BadData
from .exceptions import OAuthQQAPIError
from . import constants

logger = logging.getLogger('django')

class OAuthQQ(object):
    """
    QQ認證輔助工具類
    """
    def __init__(self, client_id=None, client_secret=None,redirect_uri=None, state=None):
        self.client_id = client_id or settings.QQ_CLIENT_ID
        self.client_secret = client_secret or settings.QQ_CLIENT_SECRET
        self.redirect_uri = redirect_uri or settings.QQ_REDIRECT_URI
        self.state = state or settings.QQ_STATE

    def get_login_url(self):
        url = 'https://graph.qq.com/oauth2.0/authorize?'
        params = {
            'response_type': 'code',
            'client_id': self.client_id,
            'redirect_uri': self.redirect_uri,
            'state': self.state
        }

        url += urllib.parse.urlencode(params)

        return url

View Code

在oauth/view.py中實現

class QQAuthURLView(APIView):
    """
    獲取QQ登陸的URL
    """
    def get(self, request):
        # 獲取next參數
        next = request.query_params.get('next')

        # 獲取QQ登陸的網址
        oauth_qq = OAuthQQ(state=next)
        login_url = oauth_qq.get_login_url()

        # 返回
        return Response({'login_url': login_url})

View Code

 修改login.js，在methods中增長qq_login方法

        // qq登陸
        qq_login: function(){
            var next = this.get_query_string('next') || '/';
            axios.get(this.host + '/oauth/qq/authorization/?next=' + next, {
                    responseType: 'json'
                })
                .then(response => {
                    location.href = response.data.login_url;
                })
                .catch(error => {
                    console.log(error.response.data);
                })
        }

View Code

測試