QQ互联为网页的 QQ 登录提供了统一接口,但是其样式比较固定,风格陈旧,没有提供完全自定义的接口。在此介绍一种自定义按钮风格的方法。
准备:
在 QQ 互联 申请网站介入 详见:http://wiki.connect.qq.com/
扩展:
javascript 中增加方法 qqLogin
<script type="text/javascript">
function qqLogin() {
var url = 'https://graph.qq.com/oauth2.0/authorize?client_id=' + QC.getAppId() + '&response_type=token&redirect_uri=' + encodeURIComponent(你的CALLBACK地址);
return window.open(url, 'oauth2Login_qq' ,'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes');
}
</script>
未HTML元素增加点击事件
<span onclick="javascript:qqLogin()" class="btn btn-block btn-social btn-primary btn-flat"><i class="fa fa-qq"></i> 使用QQ登录</span>
完整如下
<!DOCTYPE html>
<html>
<!-- head -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>tonglei0429 | 登录</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<!-- /head -->
<body>
<div style="width:200px;margin:auto;">
<span onclick="javascript:qqLogin()" class="btn btn-block btn-social btn-primary btn-flat"><i class="fa fa-qq"></i> 使用QQ登录</span>
<span id="qqLoginBtn"></span>
</div>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"></script>
<script type="text/javascript">
function qqLogin() {
var url = 'https://graph.qq.com/oauth2.0/authorize?client_id=' + QC.getAppId() + '&response_type=token&redirect_uri=' + encodeURIComponent(你的CALLBACK页面);
return window.open(url, 'oauth2Login_qq' ,'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes');
}
</script>
</body>
</html>
效果对比:
官方提供样式
自定义后的样式
另外腾讯官网没有提供 JS-SDK 的下载,如有需要请留言。