登录 ×

梨花寨前端技术交流平台!

html,css,js,html5,css3等

web实现QQ第三方登录

2016-06-06 15:11:26 | 浏览量:392
一、准备工作
接入QQ第三方登录前,需首先进行申请,注册成为QQ互联平台开发者,获得对应的appID与appKey,以保证后续流程中可正确对网站与用户进行验证与授权。
申请appID和appKey的用途
appID:应用的唯一标识。在OAuth2.0认证过程中,appID的值即为oauth_consumer_key的值。
appKey:appID对应的密钥,访问用户资源时用来验证应用的合法性。在OAuth2.0认证过程中,appKey的值即为oauth_consumer_secret的值。
申请地址: http://connect.qq.com/

二、放置“QQ登录按钮”

下载图片素材,通常放在登录按钮附近,参考放置规范。这里是通过在按钮添加a链接实现跳转登录.

三、实现方式(client-side)
流程:
前端页面通过Implict方式 登录授权 -> 回调获得accessToken -> 获取openid -> 同步用户信息并登录。
为了保证数据安全,在获取用户信息并登录这一步必须由服务端实现。
这种方式的开发相对便捷,也是后面的实战案例将要采取的方式。


四、案例实战
1:获取Access Token
var appID = [用你自己appID];
var redirectURI = [用你自己回调地址];

要个网站基本信息配置那里保持一致,否则请求不成功的;

执行下面代码:


var path = "https://graph.qq.com/oauth2.0/authorize?";
var queryParams = [
	'response_type=token',
	'client_id=' + appID,
	'redirect_uri=' + redirectURI,
	'state=lihuazhai'
];
var query = queryParams.join('&');
var url = path + query;
window.location.href = url;


码执行,调转到下面页面:

用户点击接受后,调转至回调页面。

http://www. example.com/?#access_token=YOUR_ACCESS_TOKEN&expires_in=3600
2:使用access_token来获取用户的openid
接上面,回调页面载入时,带着access_token参数,可以通过hash轻松获取。
有了Access Token,再去请求
https://graph.qq.com/oauth2.0/me?access_token=YOUR_ACCESS_TOKEN
返回值为 callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} );
实用jsop跨域的方法处理,即可获取openid。

主要代码如下:


//获得openid的回调
function callback(obj) {
	var openid = obj.openid;
	$("#openid").text(openid);
	//跳转服务端登录url
	var resulturl = "http://www.lihuazhai.com/qihang/index.php/User/qqlogin";
	var accessToken = $("#accessToken").text();
	document.cookie = "openid=" + openid;
	//向服务端传输access_token及openid参数
	document.location.href = resulturl + "?access_token=" + accessToken + "&openid=" + openid;
}

//隐式获取url响应内容(JSONP)
function openImplict(url) {
	var script = document.createElement('script');
	script.src = url;
	document.body.appendChild(script);
}

//使用Access Token来获取用户的OpenID
var path = "https://graph.qq.com/oauth2.0/me?";
var queryParams = ['access_token=' +access_token, 'callback=callback'];
var query = queryParams.join('&');
var url = path + query;

openImplict(url);

测试用户已经登录成功,可以跳转至登录后的页面,如果需要显示用户信息或拿用户的信息完成网站会员注册的话,还需要获取用户信息,如昵称、头像等待。

跳转至登录处理页面
如Callback方法中的代码
var resulturl = "http://www.lihuazhai.com/qihang/index.php/User/qqlogin";
document.location.href = resulturl + "?access_token=" + accessToken + "&openid=" + openid;
这一部需要后端来处理,这里依据PHp为例:

载入http://www.lihuazhai.com/qihang/index.php/User/qqlogin页面是带有access_token、openid两个参数。即get请求后端接口,
如下代码后端可以获取参数:


$accessToken = $_GET['access_token'];
$openid = $_GET['openid'];
$appId = $_GET['app_id'];
$url = 'https://graph.qq.com/user/get_user_info?access_token=' . $accessToken . '&oauth_consumer_key='. $appId .'&openid=' . $openid;
$json = file_get_contents($url);
$obj = json_decode($json);

$obj->nickname;//用户qq昵称

获得这些信息后,后期的处理就看自己的业务了。


需求及问题提交:

点击图片更换数字

0.6240s