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

然後創建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

在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})

修改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);
                })
        }

測試

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