Python的Flask框架实现QQ账号登录

不念不忘少年蓝@ 2023-01-19 14:54 10阅读 0赞

前期准备  
因为注册QQ互联需要已备案的网站，所以需要准备一个已备案的网站与域名。首先访问QQ互联平台[https://connect.qq.com/][https_connect.qq.com]，注册成为开发者。然后创建一个网站应用，等审核成功后会得到一个APP ID与APP KEY，后面会使用到。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70][]

开发流程

前端放置登录按钮

在网站找一个合适的位置放置登录按钮(建议放置在首页、登录页以及注册页)。登录按钮图标在QQ互联平台下载，上面提供了多种样式。效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70 1][]

具体HTMl代码如下：

<table style="margin-left:6.75pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> &lt;a href="https://graph.qq.com/oauth2.0/authorize?response_type=code&amp;client_id=YOURAPPID&amp;<a rel="nofollow">redirect_uri</a>=URL"&gt; &lt;img src="{ {url_for('static',filename'base/images/Connect_logo_7.png')}}"&gt;&lt;/a&gt; </td> 
 </tr> 
 </tbody> 
</table>

其中a标签中 client\_id 是最开始申请的APPID，redirect\_uri是申请网站填写的网站回调域。

这样点开QQ登录按钮，就能跳转到QQ登录的界面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70 2][]

获取Access Toke

当登录成功后，会跳转到刚刚所填写的回调地址。并且url后面会跟上Authorization Code（此Code在10分钟内过期）。接着通过Code值去获取Access Token（Access Token是应用在调用OpenAPI访问和修改用户数据时必须传入的参数）。为了获取Access Token需要请求[https://graph.qq.com/oauth2.0/token][https_graph.qq.com_oauth2.0_token],方式为GET，请求参数包括以下：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:63.7pt;"> 参数 </td> 
 <td style="vertical-align:top;width:70.75pt;"> 是否必须 </td> 
 <td style="vertical-align:top;width:290.25pt;"> 含义 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.7pt;"> grant_type </td> 
 <td style="vertical-align:top;width:70.75pt;"> 必须 </td> 
 <td style="vertical-align:top;width:290.25pt;"> 值为“authorization_code”。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.7pt;"> client_id </td> 
 <td style="vertical-align:top;width:70.75pt;"> 必须 </td> 
 <td style="vertical-align:top;width:290.25pt;"> 申请QQ登录成功后，分配给网站的appid。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.7pt;"> client_secret </td> 
 <td style="vertical-align:top;width:70.75pt;"> 必须 </td> 
 <td style="vertical-align:top;width:290.25pt;"> 申请QQ登录成功后，分配给网站的appkey。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.7pt;"> code </td> 
 <td style="vertical-align:top;width:70.75pt;"> 必须 </td> 
 <td style="vertical-align:top;width:290.25pt;"> 上一步返回的authorization code </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:63.7pt;"> redirect_uri </td> 
 <td style="vertical-align:top;width:70.75pt;"> 必须 </td> 
 <td style="vertical-align:top;width:290.25pt;"> 与上面一步中传入的redirect_uri保持一致。 </td> 
 </tr> 
 </tbody> 
</table>

如果成功返回，就可以得到Access Token。这一步具体代码如下

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> @home.route('/mycb') def mycb(): &nbsp;&nbsp;&nbsp; data = request.args.to_dict() &nbsp;&nbsp;&nbsp; code = data.get('code') #获取authorization code &nbsp;&nbsp;&nbsp; url = 'https://graph.qq.com/oauth2.0/token' body={'grant_type': 'authorization_code', 'client_id': '101860781','client_secret':'0f5a014e13e7d35fbcca51ecc2ff6745','code':code,'redirect_uri':'https://yujl.top/mycb'} #body为上面所说的请求参数 &nbsp;&nbsp;&nbsp; response = requests.get(url, params=body) #发送GET请求 &nbsp;&nbsp;&nbsp; token = response.text 得到返回包 &nbsp;&nbsp;&nbsp; token_url = '?' + token &nbsp;&nbsp;&nbsp; requests.session().close() #关闭请求 &nbsp;&nbsp;&nbsp; return redirect('/token' + token_url) </td> 
 </tr> 
 </tbody> 
</table>

由于返回回来的包格式为：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> access_token=61897CE***************D444F968BD2A&amp;expires_in=77**000&amp;refresh_token=0018693**************6009D9C2EFBE </td> 
 </tr> 
 </tbody> 
</table>

这样不能直接转换为json格式，所以我将这个包作为参数然后转发到/token，以此来得到json格式的token。

通过access\_token来获取open\_id

接着需要通过access\_token来获取open\_id（openid是此网站上唯一对应用户身份的标识，网站可将此ID进行存储便于用户下次登录时辨识其身份）请求地址为[https://graph.qq.com/oauth2.0/me][https_graph.qq.com_oauth2.0_me]，方法还是GET，参数就是上面获取到的access\_token。具体方法为：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> def get_openid(data): data为token得到的数据包 &nbsp;&nbsp;&nbsp; url = 'https://graph.qq.com/oauth2.0/me' &nbsp;&nbsp;&nbsp; body = {'access_token': data.get('access_token')} &nbsp;&nbsp;&nbsp; response = requests.get(url, params=body) &nbsp;&nbsp;&nbsp; open_id = json.loads(response.text[10:-4]) &nbsp;&nbsp;&nbsp; open_id = open_id.get('openid') &nbsp;&nbsp;&nbsp; requests.session().close() &nbsp;&nbsp;&nbsp; return open_id </td> 
 </tr> 
 </tbody> 
</table>

调用OpenAPI

得到open\_id就可以调用OpenAPI了，API列表如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70 3][]

接下来以get\_user\_info 为例：

还是以GET方式请求[https://graph.qq.com/user/get\_user\_info][https_graph.qq.com_user_get_user_info]，需要的参数有access\_token、oauth\_consumer\_key（APP ID）、openid。代码示例：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> def get_user_info(data, open_id): &nbsp;&nbsp;&nbsp; url = 'https://graph.qq.com/user/get_user_info' &nbsp;&nbsp;&nbsp; body={'access_token':data.get('access_token'), 'oauth_consumer_key': '101860781', 'openid': open_id} &nbsp;&nbsp;&nbsp; response = requests.get(url, params=body) &nbsp;&nbsp;&nbsp; user_info = response.json() &nbsp;&nbsp;&nbsp; requests.session().close() &nbsp;&nbsp;&nbsp; return user_info </td> 
 </tr> 
 </tbody> 
</table>

返回的参数说明：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70 4][]

保存用户数据

到这一步，基本就完成了。接着就是根据自己的需要，可以在user界面展示昵称和头像，和选择存进数据库了。我选择将open\_id作为用户的唯一标识符存进数据库，这样用户在后面登录的时候可以得到上次保存的信息。以下是这部分代码：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> @home.route('/token') def token(): &nbsp;&nbsp;&nbsp; data = request.args.to_dict() &nbsp;&nbsp;&nbsp; open_id = get_openid(data) &nbsp;&nbsp;&nbsp; user_info = get_user_info(data, open_id) uuid_count=User.query.filter_by(uuid=open_id).count() #查询openid是否存在。 if uuid_count == 1: #如果存在就根据openid查到用户信息，并添加到session空间里。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name = User.query.filter_by(uuid=open_id).first() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; session['home'] = name.name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return redirect('/user') else: #如果不存在，也就是第一次登录，给一个默认的密码（经过hash加密） &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; password = generate_password_hash('123456') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; hash_name = str(hash(random.randint(1000,9999))) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name = user_info.get('nickname') + hash_name #因为我的网站是不允许重名的，所以在qq的昵称后面加上一个随机数。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; user = User( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name=name, #添加了随机数的用户名 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; uuid=open_id, #唯一标识符 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; pwd = password, #密码 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; face=user_info.get('figureurl_1') #头像 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; )#将相关信息存进数据库 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; db.session.add(user) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; db.session.commit() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; session['home'] = name #将用户名添加到session空间中。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return redirect('/user') # 重定向到user界面。 </td> 
 </tr> 
 </tbody> 
</table>

[https_connect.qq.com]: https://connect.qq.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70]: /images/20221021/f3ea12bbee464240bdb91b09b39d2f5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70 1]: /images/20221021/984fa84b6a0e4ebe81603efafdda2502.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70 2]: /images/20221021/1a812efee9a04ef88c98d603991ec2e5.png
[https_graph.qq.com_oauth2.0_token]: https://graph.qq.com/oauth2.0/token
[https_graph.qq.com_oauth2.0_me]: https://graph.qq.com/oauth2.0/me
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70 3]: /images/20221021/23726efd8b5a4e39ac8f86cd5c68aa57.png
[https_graph.qq.com_user_get_user_info]: https://graph.qq.com/user/get_user_info
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70 4]: /images/20221021/2a4f0c04610f4f86a7096bce952f580b.png