在实现acwing一键登录的基础上实现qq一键登录

acwing题解地址

需项目在自己的备案域名上运行

我实现好的网站地址：

http://game.ilotus.top

1、前往qq互联进行开发者资料审核

/devuser.html#/create/1/

选择个人接入后填入个人信息

注：手持照片得用后置摄像头拍摄，前置摄像头有镜像功能

2、创建应用

1.在应用管理界面点击创建应用，选择创建网站应用。

2.网站名称一栏填写备案的网站名称

3.网站回调地址填写处理qq返回的请求路径

就是对应acwing一键登录中的:https://game.ilotus.top/settings/acwing/web/receive_code/

注：此处末尾不能加 /

4.填写提供方和备案号

可前往查询： /

5.点击创建应用等待审核

3、实现代码

官方教程： https://wiki./%e4%bd%bf%e7%94%a8authorization_code%e8%8e%b7%e5%8f%96access_token

点击操作中的查看，可以看到APP ID 和 APP Key

1.实现views

创建文件夹 mkdir game/views/settings/qq创建文件 touch __init__.py创建申请code文件 vim apply_code.py

apply_code.py文件中写入以下代码

from django.http import JsonResponsefrom urllib.parse import quotefrom random import randintfrom django.core.cache import cachedef get_state():res = ""for i in range(8):res += str(randint(0, 9))return resdef apply_code(request):client_id = "" # 填写 APP IDredirect_uri = quote("https://game.ilotus.top/settings/qq/receive_code") # 处理网址中的特殊字符scope = "get_user_info"state = get_state()cache.set(state, True, 600) # 有效期十分钟response_type = "code"apply_code_url = "/oauth2.0/authorize"return JsonResponse({'result': 'success','apply_code_url': apply_code_url + "?response_type=%s&client_id=%s&redirect_uri=%s&scope=%s&state=%s" % (response_type, client_id, redirect_uri, scope, state)})

创建接收文件 vim receive_code.py

在receive_code.py中写入以下代码

from django.shortcuts import redirectfrom django.core.cache import cacheimport requestsfrom django.contrib.auth.models import Userfrom django.contrib.auth import loginfrom game.models.player.player import Playerfrom random import randintdef receive_code(request):data = request.GETcode = data.get('code')state = data.get('state')# 改成自己的回调地址redirect_uri = "https://game.ilotus.top/settings/qq/receive_code" # 此处不用处理网址中的特殊字符if not cache.has_key(state): # 若无此state返回主页面return redirect("index")cache.delete(state)apply_access_token_url = "/oauth2.0/token"params = {'grant_type': 'authorization_code','client_id': "", # 填入APP ID'client_secret': "", # 填入APP Key'code': code,'redirect_uri': redirect_uri,'fmt': "json"}access_token_res = requests.get(apply_access_token_url, params=params).json()access_token = access_token_res['access_token']apply_openid_url = "/oauth2.0/me"params = {'access_token': access_token,'fmt': "json"}openid_res = requests.get(apply_openid_url, params=params).json()openid = openid_res['openid']players = Player.objects.filter(openid=openid)if players.exists(): # 如果该用户已存在，则无需获取信息，直接登录login(request, players[0].user)return redirect("index")get_user_info_url = "/user/get_user_info"params = {'access_token': access_token,'oauth_consumer_key': "",# 填入APP ID'openid': openid}userinfo_res = requests.get(get_user_info_url, params=params).json()username = userinfo_res['nickname']photo = userinfo_res['figureurl_qq_1']while User.objects.filter(username=username).exists(): # 给重名的用户找一个不重名的名字username += str(randint(0, 9))user = User.objects.create(username=username)player = Player.objects.create(user=user, photo=photo, openid=openid)login(request, user)return redirect("index")

2.实现urls

创建文件夹 mkdir game/urls/settings/qq创建文件 touch __init__.py创建路由文件 vim index.py

在index.py文件中写入以下代码

from django.urls import pathfrom game.views.settings.qq.apply_code import apply_codefrom game.views.settings.qq.receive_code import receive_codeurlpatterns = [path("apply_code/", apply_code, name="settings_qq_apply_code"),path("receive_code", receive_code, name="settings_qq_receive_code"),]

在game/urls/settings/index.py中添加路由

from django.urls import path, includefrom game.views.settings.getinfo import getinfofrom game.views.settings.login import signinfrom game.views.settings.logout import signoutfrom game.views.settings.register import registerurlpatterns = [path("getinfo/", getinfo, name="settings_getinfo"),path("login/", signin, name="settings_login"),path("logout/", signout, name="settings_logout"),path("register/", register, name="settings_register"),path("acwing/", include("game.urls.settings.acwing.index")),path("qq/", include("game.urls.settings.qq.index")), # 添加这句话即可]

3.实现前端

(1) 修改game/static/js/src/settings/zbase.js中的内容

上传qq的图标到game/static/image/settings/qq_logo.png

图标下载链接 https://game.ilotus.top/static/image/settings/qq_logo.png

官方资源库 https://wiki./%e8%a7%86%e8%a7%89%e7%b4%a0%e6%9d%90%e4%b8%8b%e8%bd%bd

在acwing一键登录的代码下添加上

<div class="ac-game-settings-qq"><img width="30" src="https://game.ilotus.top/static/image/settings/qq_logo.png"><br><div>QQ一键登录</div></div>

this.$acwing_login = this.$settings.find('.ac-game-settings-acwing img')//添加上下面这句话this.$qq_login = this.$settings.find('.ac-game-settings-qq img')

修改监听函数,加上qq点击的事件

add_listening_events() {let outer = this;this.add_listening_events_login();this.add_listening_events_register();this.$acwing_login.click(function () {outer.acwing_login();});this.$qq_login.click(function () {outer.qq_login();});}

添加上qq登录函数

qq_login() {var url = window.location.href;$.ajax({url: url + "settings/qq/apply_code/",type: "GET",success: function (resp) {if (resp.result === "success") {window.location.replace(resp.apply_code_url);}}});}

(2) 修改game/static/css/game.css文件中的内容

修改.ac-game-settings-acwing

使得acwing一键登录靠左，给qq登录腾出空间

.ac-game-settings-acwing {display: block;height: 7vh;float: left;padding-left: 1vw;}

添加上qq的css

.ac-game-settings-qq > img {position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: pointer;}.ac-game-settings-qq > div {color: white;font-size: 1.5vh;text-align: center;display: block;}.ac-game-settings-qq {display: block;height: 7vh;float: right;padding-right: 1vw;}

完成！！！

注：记得在apply_code.py 和 receive_code.py对应位置中写入自己的APP ID 和 APP Key