填写您的邮件地址,订阅我们的精彩内容:

使用QQ号登陆WordPress开发原理及详解

718

为了让朋友们登陆乌徒帮,不必麻烦的注册过程,乌徒帮集成了QQ登陆,虽然目前有不少社会化媒体登陆的插件,但功能相对复杂,我仅仅希望得到一个登陆的功能,至于同步内容、回推等,在必要的时候再来开发。本文就来介绍下使用QQ登陆wordpress的原理及其实现过程。

准备工作:QQ互联的应用ID和KEY

第一步要做的是,申请一个有用的QQ互联应用ID,先打开QQ互联,申请一个应用。这个过程不需要太多介绍,如果你已经使用过类似的服务,肯定很容易理解,如果你还是第一次申请此类服务,可以根据QQ文档进行操作。

因为我们是使用QQ来登录我们的wordpress,可以选择网站接入。在申请成功后,你可以获得这个应用的APPID,如图1。

2014-10-29-204250

图1 申请好应用之后在管理中找到应用的APP ID

申请获得这个信息之后,把它们记录下来。

现在QQ互联需要通过审核才有资格让所有人登录你的网站,没有经过审核的应用只有测试用户能够登录,因此,你还需要提交申请。(注意:这个应用的形式最好选择“网站接入”,因为“网站接入”是你自己的网站,而选择应用的话,可能是需要托管的。

了解OAuth2.0授权模式

目前社交账号授权模式几乎都是使用的OAuth2.0,这种模式其实存在权限问题,但由于有一些补救措施,所以仍然被广泛使用。那么什么是OAuth2.0呢?这种授权模式是怎么样的呢?

说的简单点,就是:

  1. 通过被允许的网站进入第三方供应商(如腾讯、微博等)的平台
  2. 登录第三方账号
  3. 登录后返回原网站,并且携带了一些认证信息
  4. 通过这些认证信息,网站可以从第三方平台获取用户在第三方平台上的资料

而通常的认证信息就是access token,通常而言遵循下面的公式:

access token = 一个应用(你的网站) + 一个用户

因此,access token是唯一的,你只要获得了这个access token,并且在应用上使用,就可以获取这个access token背后的用户的资料。有的时候,这个access token没有域名现在,只要有它,在任何地方(不一定非得在那个应用上)都能使用。这是获取用户信息。

而对于应用而言,这个access token只能对这个应用中的某些功能进行使用,不能使用其他应用的功能。例如,你使用了“美图秀秀+新浪微博账号”产生的access token,那么只能操作美图秀秀的功能,不能去使用暴风影音的功能,虽然暴风影音也可以用微博账号登陆。

为了防止access token泄露造成的数据危害,一般一个access token都有有效期,大部分为三个月,甚至一个月。也就是说如果你用微博账号登陆了某个discuz论坛,在一个月内这个论坛可以利用你的账号发布微博(虽然这是被禁止的,且无耻的),而一个月后这个access token失效,它就不能使用你的账号了。

QQ互联的oauth2.0授权请阅读这里

我们来程序实现下:

define('QQ_CONNECT_APPID','你的APPID');
define('QQ_CONNECT_APPKEY','你的APPKEY');
define("QQ_CALLBACK_URL",home_url('/?callback=fromqq'));

$oauth_url = "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=".QQ_CONNECT_APPID
?? ??? ?."&redirect_uri=".urlencode(QQ_CALLBACK_URL)
?? ??? ?."&state=".md5(uniqid(rand(),true))
?? ??? ?."&scope=get_user_info,get_info";

echo "<a href='$oauth_url'>QQ登陆</a>";

代码1 创建QQ登录按钮

这段代码就可以帮助你进入到QQ账号授权登陆页面。具体参数请看上面的那篇文章。

获取QQ互联授权Access Token

虽然按理通过授权就可以获得Access Token,但QQ互联不会,为了安全起见,它只返回给网站一个code,这个code的有效期只有30秒,只有通过这个code才能获得access token。

通过代码1进入到授权页面,登录后会返回到QQ_CALLBACK_URL这个URL,也就是你的网站中。根据这个URL中的参数(同时会有从QQ返回的上述code值)来判断是否要执行access token的获取动作。

if(isset($_GET['callback']) && $_GET['callback']=='fromqq' && isset($_GET['code']) && !empty($_GET['code'])){
    执行。。
}

代码2 是否执行和QQ登录有关的动作

下面的所有工作都都在这个if条件内执行。

接下来我们就开始获取access token吧。

$oauth_code = $_GET['code'];
$token_url = "https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id=".QQ_CONNECT_APPID
	."&redirect_uri=".urlencode(QQ_CALLBACK_URL)
	."&client_secret=".QQ_CONNECT_APPKEY
	."&code=".$oauth_code;
$response = qq_connect_curl_get($token_url);
$params = array();
parse_str($response,$params);
if(isset($params['code']) && isset($params['msg'])){
	wp_die('授权失败<br />'.$params['msg']);
	exit;
}
$access_token = $params["access_token"];

代码3 获取QQ授权的Access Token

上面的代码帮助我们获取access token。其中有一个函数qq_connect_curl_get是我创建的一个用CURL[GET]来抓取页面的函数,及其简单,这里就不解释了。

这样我们就获得了access token。

获取QQ用户的OPEN ID

虽然上面说获取了access token就万事大吉,但这里不是,在QQ的授权体系里面,还必须获取用户的OPEN ID。什么是open id呢?在前几年的时候这个概念特别火,很多机构希望用户只有一个公开的账号,可以用它来登录所有的网站,这个公开账号又相对隐私,不是用户所使用的账号。有了open id,就可以在互联网上畅通无阻。但这个项目没有发展起来,至今仍然没有一个统一的open id,所以oauth 2.0才如此受到青睐。一个QQ号可以用于QQ、QQ邮箱、QQ空间、微信等等,在腾讯的产品链上就有一个open id。

要获得用户的信息,我们必须获得他的open id,这时我们可以使用上面得到的access token来获取这个open id,它的功能体现出来了。

$graph_url = "https://graph.qq.com/oauth2.0/me?access_token=".$access_token;
$user_info = qq_connect_curl_get($graph_url);
$user_info = str_replace('callback(','',$user_info);
$user_info = str_replace(');','',$user_info);
$user_info = json_decode(trim($user_info));
$user_id = $user_info->openid;

代码4 获取QQ用户的OPEN ID

当然,上面的代码不一定都返回有效值的,你需要自己做一些判断,有的时候code过期了,有的时候access token是非法的,总之,你得确保这个openid是你想要的。

获取QQ用户的基本信息

上面的代码已经让我们获得了QQ用户的open id和access token,接下来,我们就要获取他的基本信息,我们这里唯一需要的就是昵称和头像,所以使用了下面的代码:

$catch_url = "https://graph.qq.com/user/get_user_info?access_token=$access_token"
	."&oauth_consumer_key=".QQ_CONNECT_APPID
	."&openid=$user_id&format=json";
$user_data = qq_connect_curl_get($catch_url);
$user_data = json_decode($user_data,true);

这个时候$user_data内就有我们想要的昵称和头像信息了。

用QQ账号信息登录WordPress

获得上面的信息我们基本上就已经确定了这个QQ用户,如果这个QQ用户从来没有登录过我们的wordpress,就为他新建一个用户,如果他已经登录过了,我们就用之前为他创建的这个用户登录。

global $wpdb;
$is_user_exists = $wpdb->get_var("SELECT ID FROM $wpdb->users WHERE user_login='qq_{$user_id}'");
if(!$is_user_exists){
	$is_user_exists = $wpdb->get_var("SELECT user_id FROM $wpdb->usermeta WHERE meta_key='qq_user_id' AND meta_value='$user_id'");
}
if(!$is_user_exists){
	$user_meta = array(
		'user_login' => 'qq_'.$user_id,
		'user_pass' => wp_generate_password(),
		'display_name' => $user_data['nickname'],
		'user_nicename' => $user_data['nickname'],
		'nickname' => $user_data['nickname'],
		'user_email' => $user_id.'_'.rand().'@connect.qq.com'
	);
	$user_id = wp_insert_user($user_meta);
	update_user_meta($user_id,'qq_user_id',$user_id);
	update_user_meta($user_id,'qq_user_avatar',$user_data['figureurl_qq_1']);
}else{
	$user_id = $is_user_exists;
}
wp_set_auth_cookie($user_id,true,false);
wp_set_current_user($user_id);

从上面的代码你可以发现,其实我们网站要使用到的就是这个用户的open id,以此来确认他的唯一身份,如果这个open id是某一个用户,那么就确定他曾经登录过网站了,他曾经的评论、文章还是他的。

好了,这个过程你理解之后,后面的开发就看你自己了。如果你对开发一点兴趣都没有,只是想使用它的话,你可以购买这个插件,虽然它的功能确实非常少。

插件实现了基本功能,不是很完善,因此如果你需要对应的功能,请通过页面右上角红色区域中的QQ链接和我联系,咨询开发费用。

如果你还有什么疑问,或对这个思路存有疑虑,请在下方留言,让我们一起探讨这个问题。

目前该插件还不能绑定已经注册了的用户,如需这个功能,还需要另外开发。

下面我简单说几句