本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
前期准备
因为注册QQ互联需要已备案的网站，所以需要准备一个已备案的网站与域名。
首先访问QQ互联平台https://connect.qq.com/，注册成为开发者；
然后创建一个网站应用，等审核成功后会得到一个APP ID与APP KEY，后面会使用到。
开发流程
图1 准备网站应用
1 前端放置登录按钮
在网站找一个合适的位置放置登录按钮(建议放置在首页、登录页以及注册页)。登录按钮图标在QQ互联平台下载，上面提供了多种样式。效果如下：
图2 登陆页
具体HTMl代码如下：
<ahref="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=YOURAPPID&redirect_uri=URL">
<img src="{{url_for('static',filename'base/images/Connect_logo_7.png')}}"></a>
其中a标签中 client_id 是最开始申请的APPID，redirect_uri是申请网站填写的网站回调域。
这样点开QQ登录按钮，就能跳转到QQ登录的界面：
图3 转跳后页面
2 获取Access Toke
当登录成功后，会跳转到刚刚所填写的回调地址。并且url后面会跟上Authorization Code（此Code在10分钟内过期）。接着通过Code值去获取Access Token（Access Token是应用在调用OpenAPI访问和修改用户数据时必须传入的参数）。
为了获取Access Token需要请求：
https://graph.qq.com/oauth2.0/token,方式为GET，请求参数包括以下：
参数 | 是否必须 | 含义 |
|---|---|---|
grant_type | 必须 | 值为“authorization_code”。 |
client_id | 必须 | 申请QQ登录成功后，分配给网站的appid。 |
client_secret | 必须 | 申请QQ登录成功后，分配给网站的appkey。 |
code | 必须 | 上一步返回的authorization code |
redirect_uri | 必须 | 与上面一步中传入的redirect_uri保持一致。 |
如果成功返回，就可以得到Access Token。这一步具体代码如下：
@home.route('/mycb')
def mycb():
data = request.args.to_dict()
code = data.get('code') #获取authorization code
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为上面所说的请求参数
response = requests.get(url, params=body) #发送GET请求
token = response.text 得到返回包
token_url = '?' + token
requests.session().close() #关闭请求
return redirect('/token' + token_url)</code></pre></div></div><p>由于返回回来的包格式为：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">access_token=61897CE***************D444F968BD2A&expires_in=77**000&refresh_token=0018693**************6009D9C2EFBE</code></pre></div></div><p>这样不能直接转换为json格式，所以将这个包作为参数然后转发到/token，以此来得到json格式的token。</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">@home.route('/token')
def token():
data = request.args.to_dict() #得到access_token、expires_in、refresh_token</code></pre></div></div><p><strong>3 通过access_token来获取open_id</strong></p><p>接着需要通过access_token来获取open_id<strong>（openid是此网站上唯一对应用户身份的标识，网站可将此ID进行存储便于用户下次登录时辨识其身份）。</strong></p><p>请求地址为https://graph.qq.com/oauth2.0/me，方法还是GET，参数就是上面获取到的access_token。具体方法为：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">def get_openid(data): data为token得到的数据包
url = 'https://graph.qq.com/oauth2.0/me'
body = {'access_token': data.get('access_token')}
response = requests.get(url, params=body)
open_id = json.loads(response.text[10:-4])
open_id = open_id.get('openid')
requests.session().close()
return open_id</code></pre></div></div><p><strong>4 调用OpenAPI</strong></p><p>得到open_id就可以调用OpenAPI了，API列表如下：</p><figure class=""><div class="rno-markdown-img-url" style="text-align:center"><div class="rno-markdown-img-url-inner" style="width:90.44%"><div style="width:100%"><img src="https://cdn.static.attains.cn/app/developer-bbs/upload/1723012356189262917.png" /></div></div></div></figure><p>图4 API列表
接下来以get_user_info 为例：
还是以GET方式请求:
https://graph.qq.com/user/get_user_info,
需要的参数有access_token、oauth_consumer_key（APP ID）、openid。代码示例：
代码语言：javascript复制def get_user_info(data, open_id):
url = 'https://graph.qq.com/user/get_user_info'
body={'access_token':data.get('access_token'), 'oauth_consumer_key': '101860781', 'openid': open_id}
response = requests.get(url, params=body)
user_info = response.json()
requests.session().close()
return user_info</code></pre></div></div><p>返回的参数说明：</p><figure class=""><div class="rno-markdown-img-url" style="text-align:center"><div class="rno-markdown-img-url-inner" style="width:90.44%"><div style="width:100%"><img src="https://cdn.static.attains.cn/app/developer-bbs/upload/1723012356624861541.png" /></div></div></div></figure><p><strong>图5 参数说明</strong></p><p><strong>5 保存用户数据</strong></p><p>到这一步，基本就完成了。接着就是根据自己的需要，可以在user界面展示昵称和头像，和选择存进数据库了。选择将open_id作为用户的唯一标识符存进数据库，这样用户在后面登录的时候可以得到上次保存的信息。以下是这部分代码：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">@home.route('/token')
def token():
data = request.args.to_dict()
open_id = get_openid(data)
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空间里。
name = User.query.filter_by(uuid=open_id).first()
session['home'] = name.name
return redirect('/user')
else:
#如果不存在，也就是第一次登录，给一个默认的密码（经过hash加密）
password = generate_password_hash('123456')
hash_name = str(hash(random.randint(1000,9999)))
name = user_info.get('nickname') + hash_name
#因为我的网站是不允许重名的，所以在qq的昵称后面加上一个随机数。
user = User(
name=name, #添加了随机数的用户名
uuid=open_id, #唯一标识符
pwd = password, #密码
face=user_info.get('figureurl_1') #头像
)#将相关信息存进数据库
db.session.add(user)
db.session.commit()
session['home'] = name #将用户名添加到session空间中。
return redirect('/user') # 重定向到user界面。</code></pre></div></div>
