网站使用QQ互联接入第三方登录，实现qq快捷登录网站的功能

百度搜索 ‘QQ互联开放平台’

https://connect.qq.com/devuser.html?agreement#/

 

文档地址 ： QQ互联开放平台

 

操作步骤如下：

一、准备工作_OAuth2.0

本步骤的作用：
接入QQ登录前，网站需首先进行申请，获得对应的appid与appkey，以保证后续流程中可正确对网站与用户进行验证与授权。
本步骤在整个流程中的位置：

 

1. 申请appid和appkey

申请appid和appkey的用途

appid：应用的唯一标识。在OAuth2.0认证过程中，appid的值即为oauth_consumer_key的值。
appkey：appid对应的密钥，访问用户资源时用来验证应用的合法性。在OAuth2.0认证过程中，appkey的值即为oauth_consumer_secret的值。

申请地址

https://connect.qq.com/manage.html#/

申请流程

1.开发者资质审核
参考文章：开发者注册流程
2. 申请appid（oauth_consumer_key/client_id）和appkey（auth_consumer_secret/client_secret）；
（1）进入https://connect.qq.com/manage.html#/页面，点击“创建应用”，在弹出的对话框中填写网站或应用的详细资料（名称，域名，回调地址）；
（2）点击“确定”按钮，提交资料后，获取appid和appkey。
注意：申请appid时，登录的QQ号码将与申请到的appid绑定，后续维护均需要使用该号码。
注意:对appid和appkey信息进行保密，不要随意泄漏。

2. 保证连接畅通

接入QQ登录时，网站需要不停的和Qzone进行交互，发送请求和接受响应。
1. 对于PC网站：
请在你的服务器上ping graph.qq.com ，保证连接畅通。
2.移动应用无需此步骤

 

 

二、放置“QQ登录”按钮_OAuth2.0

 
 
本步骤的作用：
在网站页面上放置“QQ登录”按钮，并为按钮添加前台代码，实现点击按钮即弹出QQ登录对话框。
本步骤在整个流程中的位置：

 

1. 下载“QQ登录”按钮图片，并将按钮放置在页面合适的位置

按钮图片下载： 点击这里下载 。
按照UI规范，将按钮放置在页面合适的位置：点击这里查看。

2. 为“QQ登录”按钮添加前台代码

2.1 效果演示

用户在页面上点击“QQ登录”按钮，将触发QQ登录对话框，效果如下图所示：

 

2.2 前台代码

为了实现上述效果，应该为“QQ登录”按钮图片添加如下前台代码：
 

 

2.3 代码示例

1. 写一个函数“toLogin()”，该函数通过调用“index.php”中的qq_login函数来实现将页面跳转到QQ登录页面。
（示例中的oauth/index.php，请参见从SDK下载页面下载PHP SDK，在Connect2.1文件夹下的index.php文件。
）

2. 为按钮添加“toLogin()”事件：

 

 

三、使用Authorization_Code获取Access_Token

本步骤的作用：
通过用户验证登录和授权，获取Access Token，为下一步获取用户的OpenID做准备；
同时，Access Token是应用在调用OpenAPI访问和修改用户数据时必须传入的参数。
移动端应用可以直接获得AccessToken，请参考使用Implicit_Grant方式获取Access_Token
本步骤在整个流程中的位置：

 

1. 简介

即server-side模式，是OAuth2.0认证的一种模式，又称Web Server Flow；
适用于需要从web server访问的应用，例如Web网站。
其授权验证流程示意图如下（图片来源：OAuth2.0协议草案V21的4.1节 ）

对于应用而言，需要进行两步：
1. 获取Authorization Code；
2. 通过Authorization Code获取Access Token

2. 过程详解

Step1：获取Authorization Code

请求地址：
PC网站：https://graph.qq.com/oauth2.0/authorize
请求方法：
GET
请求参数：
请求参数请包含如下内容：

参数	是否必须	含义
response_type	必须	授权类型，此值固定为“code”。
client_id	必须	申请QQ登录成功后，分配给应用的appid。
redirect_uri	必须	成功授权后的回调地址，必须是注册appid时填写的主域名下的地址，建议设置为网站首页或网站的用户中心。注意需要将url进行URLEncode。
state	必须	client端的状态值。用于第三方应用防止CSRF攻击，成功授权后回调时会原样带回。请务必严格按照流程检查用户与state参数状态的绑定。
scope	可选	请求用户授权时向用户显示的可进行授权的列表。 可填写的值是API文档中列出的接口，以及一些动作型的授权（目前仅有：do_like），如果要填写多个接口名称，请用逗号隔开。 例如：scope=get_user_info,list_album,upload_pic,do_like 不传则默认请求对接口get_user_info进行授权。 建议控制授权项的数量，只传入必要的接口名称，因为授权项越多，用户越可能拒绝进行任何授权。
display	可选	仅PC网站接入时使用。 用于展示的样式。不传则默认展示为PC下的样式。 如果传入“mobile”，则展示为mobile端下的样式。

 
返回说明：
1. 如果用户成功登录并授权，则会跳转到指定的回调地址，并在redirect_uri地址后带上Authorization Code和原始的state值。如：
PC网站：http://graph.qq.com/demo/index.jsp?code=9A5F************************06AF&state=test
注意：此code会在10分钟内过期。
2. 如果用户在登录授权过程中取消登录流程，对于PC网站，登录页面直接关闭；对于WAP网站，同样跳转回指定的回调地址，并在redirect_uri地址后带上usercancel参数和原始的state值，其中usercancel值为非零，如：
http://open.z.qq.com/demo/index.jsp?usercancel=1&state=test
错误码说明：
接口调用有错误时，会返回code和msg字段，以url参数对的形式返回，value部分会进行url编码（UTF-8）。
PC网站接入时，错误码详细信息请参见：100000-100031：PC网站接入时的公共返回码。

Step2：通过Authorization Code获取Access Token

请求地址：
PC网站：https://graph.qq.com/oauth2.0/token
请求方法：
GET
请求参数：
请求参数请包含如下内容：

参数	是否必须	含义
grant_type	必须	授权类型，在本步骤中，此值为“authorization_code”。
client_id	必须	申请QQ登录成功后，分配给网站的appid。
client_secret	必须	申请QQ登录成功后，分配给网站的appkey。
code	必须	上一步返回的authorization code。 如果用户成功登录并授权，则会跳转到指定的回调地址，并在URL中带上Authorization Code。 例如，回调地址为www.qq.com/my.php，则跳转到： http://www.qq.com/my.php?code=520DD95263C1CFEA087****** 注意此code会在10分钟内过期。
redirect_uri	必须	与上面一步中传入的redirect_uri保持一致。

 
返回说明：

如果成功返回，即可在返回包中获取到Access Token。 如：

access_token=FE04************************CCE2&expires_in=7776000&refresh_token=88E4************************BE14

 

参数说明	描述
access_token	授权令牌，Access_Token。
expires_in	该access token的有效期，单位为秒。
refresh_token	在授权自动续期步骤中，获取新的Access_Token时需要提供的参数。

 
错误码说明：
接口调用有错误时，会返回code和msg字段，以url参数对的形式返回，value部分会进行url编码（UTF-8）。
PC网站接入时，错误码详细信息请参见：100000-100031：PC网站接入时的公共返回码。
 

Step3：（可选）权限自动续期，获取Access Token

Access_Token的有效期默认是3个月，过期后需要用户重新授权才能获得新的Access_Token。本步骤可以实现授权自动续期，避免要求用户再次授权的操作，提升用户体验。
请求地址：
PC网站：https://graph.qq.com/oauth2.0/token
请求方法：
GET
请求参数：
请求参数请包含如下内容：

参数	是否必须	含义
grant_type	必须	授权类型，在本步骤中，此值为“refresh_token”。
client_id	必须	申请QQ登录成功后，分配给网站的appid。
client_secret	必须	申请QQ登录成功后，分配给网站的appkey。
refresh_token	必须	在Step2中，返回的refres_token。

 
返回说明：
如果成功返回，即可在返回包中获取到Access Token。 如：
access_token=FE04************************CCE2&expires_in=7776000&refresh_token=88E4************************BE14。
 

参数说明	描述
access_token	授权令牌，Access_Token。
expires_in	该access token的有效期，单位为秒。
refresh_token	在授权自动续期步骤中，获取新的Access_Token时需要提供的参数。

 
错误码说明：
接口调用有错误时，会返回code和msg字段，以url参数对的形式返回，value部分会进行url编码（UTF-8）。
PC网站接入时，错误码详细信息请参见：100000-100031：PC网站接入时的公共返回码。