个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com

QQ互联避坑指南

申请APPID

在QQ互联官网h【ttp://connect.qq.com/】申请,根据项目需要，申请相应的接入。

按照官网指示操作注册成为开发者

注册成功后就可以创建自己的应用

审核成功后就可以得到自己的APPID与APP KEY 这两个都会在后续接入中用到

放置QQ登录按钮

网站需要下载“QQ登录”按钮图片，并按照UI规范将按钮放置在页面合适的位置。

获取Authorization Code

打开浏览器，访问如下地址（请将client_id，redirect_uri，scope等参数值替换为你自己的）：

https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=[YOUR_APPID]&redirect_uri=[YOUR_REDIRECT_URI]&scope=[THE_SCOPE]

如果用户已经有登录态，会弹出提示一个确认页。如果还没有登录，会弹出登录页

成功登录后，弹出授权框引导用户授权（仅在第一次成功登录，以及第一次访问某个未授权的OpenAPI时会出现授权页）

注： 如果用户点击“跳过”，则跳转到回调地址，返回默认的头像、昵称和性别。 建议第三方应用控制授权项，即参数scope中只传入必须使用的OpenAPI名称。因为授权项越多，用户越有可能拒绝授权。

如果用户点击“确认”授权，则成功跳转到指定的redirect_uri，并跟上Authorization Code（注意此code会在10分钟内过期）。

例如回调地址是：www.qq.com/qq，则会跳转到： www.qq.com/qq?code=520…

通过Authorization Code获取Access Token

发送请求到如下地址（请将参数值替换为你自己的）：

https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id=[YOUR_APP_ID]&client_secret=[YOUR_APP_Key]&code=[The_AUTHORIZATION_CODE]&redirect_uri=[YOUR_REDIRECT_URI]

即可获取到Access Token：

access_token=YOUR_ACCESS_TOKEN&expires_in=3600

示例

let AccessToken = await axios({
        url:
            "https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id=101905280&client_secret=[自己的APPKEY]&code=" +
            req.query.code +
            "&redirect_uri=" +
            encodeURI("http://www.xkongkeji.com/qq"),
        method: "GET",
    }).catch((err) => {
        return;
    });

注：返回值需要自己根据需要重新处理

使用Access Token来获取用户的OpenID

发送请求到如下地址（请将access_token等参数值替换为你自己的）：

https://graph.qq.com/oauth2.0/me?access_token=YOUR_ACCESS_TOKEN

获取到用户OpenID，返回包如下：

callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} );

示例

 let OpenId = await axios({
        url: "https://graph.qq.com/oauth2.0/me?access_token=" + AccessToken,
        method: "get",
    }).catch((err) => {
        return;
    });

注：返回值需要自己根据需要重新处理

使用Access Token以及OpenID来访问用户数据

建议网站在用户登录后，即调用get_user_info接口，获得该用户的头像、昵称并显示在网站上，使用户体验统一。

发送请求到get_user_info的URL（请将access_token，appid等参数值替换为你自己的）：

https://graph.qq.com/user/get_user_info?access_token=YOUR_ACCESS_TOKEN&oauth_consumer_key=YOUR_APP_ID&openid=YOUR_OPENID

成功返回后，即可获取到用户数据：

{
   "ret":0,
   "msg":"",
   "nickname":"YOUR_NICK_NAME",
   ...
}

示例

let UserInfo = await axios({
            url: `https://graph.qq.com/user/get_user_info?access_token=${AccessToken}&oauth_consumer_key=${APPID}&openid=${
                OpenIdObj.openid
            }`,
            method: "get",
        }).catch((err) => {
            return;
        });

至此我们就得到了用户信息，可以进行自己的相关逻辑操作