一、在QQ互联上注册成为开发者
注册指南地址: http://wiki.connect.qq.com/%E6%88%90%E4%B8%BA%E5%BC%80%E5%8F%91%E8%80%85
二、创建应用,获取APP ID和APP Key
创建应用指南地址:http://wiki.connect.qq.com/__trashed-2
1、进入QQ互联后台创建网站应用
https://connect.qq.com/manage.html#/
2、网站基本信息
此处主要填写网站名字、选择网站类别、网站简介、以及上传网站的log图片
3、平台信息
网站地址:请填写可访问的域名,不能是IP地址
网站回调域:请填写可访问的域名,不能是IP地址
主办单位以及网站备案号
注:请注意网站回调域,这个地址需要对应到后面SDK配置回调地址的域匹配
三、下载对应SDK
我这里使用PHP SDK,下载地址: http://wiki.connect.qq.com/sdk%E4%B8%8B%E8%BD%BD
下载完SDK,需要使用SDK提供的网页配置参数,如下截图说明:
假设APP ID:123456789
假设APP Key:abcdefghl
假设第二步中申请的网站回调域为 www.testqqlogin.com,
那么回调可以设置为:http://www.testqqlogin.com/?r=member/qqcallback
ps:
1、重点关注第二步中回调域的设置,需要设置为域名形式,如www.xxx.com,test.yyy.com等,而非www.aaaa.com/test.php
2、同样,重点关注SDK配置回调设置,前面域名必须和QQ互联回调域设置一致,比如:
假如回调域设置为:www.testqqlogin.com
那么SDK回调必须设置为 http://www.testqqlogin.com/oauth/callback.php 或者 http://www.testqqlogin.com/?r=member/qqcallback
但是,不能把SDK回调域设置为以下
http://www.testqqlogin.com/index.php?r=member/qqcallback
当完成以上配置之后,它会自动在SDK目录下的API\comm生成一个名为inc.php的配置文件,开发人员只需要把SDK中的API这个目录提取到自己的项目中即可
4.2、PHP后端处理代码,处理前端QQ三方登录按钮
4.3、QQ登录成功,回调
4.4、处理回调中的QQ第一次登录,需要写入数据库
六、总结
注册指南地址: http://wiki.connect.qq.com/%E6%88%90%E4%B8%BA%E5%BC%80%E5%8F%91%E8%80%85
二、创建应用,获取APP ID和APP Key
创建应用指南地址:http://wiki.connect.qq.com/__trashed-2
1、进入QQ互联后台创建网站应用
https://connect.qq.com/manage.html#/
2、网站基本信息
此处主要填写网站名字、选择网站类别、网站简介、以及上传网站的log图片
3、平台信息
网站地址:请填写可访问的域名,不能是IP地址
网站回调域:请填写可访问的域名,不能是IP地址
主办单位以及网站备案号
注:请注意网站回调域,这个地址需要对应到后面SDK配置回调地址的域匹配
三、下载对应SDK
我这里使用PHP SDK,下载地址: http://wiki.connect.qq.com/sdk%E4%B8%8B%E8%BD%BD
下载完SDK,需要使用SDK提供的网页配置参数,如下截图说明:
假设APP ID:123456789
假设APP Key:abcdefghl
假设第二步中申请的网站回调域为 www.testqqlogin.com,
那么回调可以设置为:http://www.testqqlogin.com/?r=member/qqcallback
ps:
1、重点关注第二步中回调域的设置,需要设置为域名形式,如www.xxx.com,test.yyy.com等,而非www.aaaa.com/test.php
2、同样,重点关注SDK配置回调设置,前面域名必须和QQ互联回调域设置一致,比如:
假如回调域设置为:www.testqqlogin.com
那么SDK回调必须设置为 http://www.testqqlogin.com/oauth/callback.php 或者 http://www.testqqlogin.com/?r=member/qqcallback
但是,不能把SDK回调域设置为以下
http://www.testqqlogin.com/index.php?r=member/qqcallback
当完成以上配置之后,它会自动在SDK目录下的API\comm生成一个名为inc.php的配置文件,开发人员只需要把SDK中的API这个目录提取到自己的项目中即可
四、代码配置
4.1、前端网页QQ三方登录按钮(按钮ID为login_qq)事件配置
<script>$(document).ready(function () {$('#login_qq').click(function () {window.location.href = "<?=\yii\helpers\Url::to(['member/qqlogin'])?>";
// window.open("<?//=\yii\helpers\Url::to(['member/qqlogin'])?>//","TencentLogin","width=800,height=600,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");});});</script>
4.2、PHP后端处理代码,处理前端QQ三方登录按钮
/*** 跳转QQ登录页面*/
public function actionQqlogin(){require_once ("../vendor/qqlogin/qqConnectAPI.php");$qc = new \QC();$qc->qq_login();
}
4.3、QQ登录成功,回调
/*** 处理QQ登录之后QQ服务器的回调callback*/
public function actionQqcallback(){require_once ('../vendor/qqlogin/qqConnectAPI.php');//获取登录QQ的信息$auth = new \OAuth();$access_token = $auth->qq_callback();$openid = $auth->get_openid();$qc = new \QC($access_token, $openid);$userInfo = $qc->get_user_info();//获取用户信息数组,包括昵称,头像等//写session$session = \Yii::$app->session;$session['userinfo'] = $userInfo;$session['openid'] = $openid;//QQ登录前,判断QQ对应用户是否已经在数据库中,否则先插入数据库,并跳到actionQqreg这个函数执行$model = new User();if(!$model->findQqUser($openid)){//没找到,先注册return $this->redirect(['member/qqreg']);}//QQ登录if($model->qqlogin()){return $this->redirect(['/']);}else{\Yii::$app->session->setFlash('thirdparty_info', '登录失败');return $this->render('auth',['model'=>$model]);}
}
4.4、处理回调中的QQ第一次登录,需要写入数据库
/*** QQ注册,写入数据库*/
public function actionQqreg(){$this->layout = 'layout_second';$model = new User();if(\Yii::$app->request->isPost){$model->scenario = User::SCENARIO_REG_QQ;//组装$post = \Yii::$app->request->post();$post['User']['openid'] = \Yii::$app->session['openid'];if($model->load($post) && $model->validate()){//QQ用户添加if($model->regQqUser() !== false){//QQ登录if($model->qqlogin()){return $this->redirect(['/']);}else{\Yii::$app->session->setFlash('info', '注册失败');}}else{\Yii::$app->session->setFlash('info', '注册失败');}$model->userpass = '';$model->useremail = '';$model->repass = '';}}return $this->render('qqreg', ['model'=>$model]);
}
五、问题
5.1、点击qq登录按钮,但页面却是一片空白,这是什么原因呢
这是QQ插件的问题,需要调整其SDK源码qq_login函数,把header改为js方式跳转,如下
//header("Location:$login_url");
echo "<script>window.location.href='$login_url'</script>";
六、总结
PHP集成QQ网页登录功能,整体上都很简单。主要花费的时间在回调域和回调地址设置上,这导致我花了很长时间去调整,这和之前集成支付宝支付很类似,同样在回调地址的设置出错,导致整体集成进度延后。这也是我为什么在第三步中详细描述设置的原因,希望能帮助到集成QQ网页登录的同学