自定义网页QQ登录按钮

tonglei0429

发布于 2019-07-22 13:51:33

1.7K0

发布于 2019-07-22 13:51:33

文章被收录于专栏：信息安全小学生信息安全小学生

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>

效果对比：

官方提供样式