专栏首页信息安全小学生自定义网页QQ登录按钮

自定义网页QQ登录按钮

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 的下载,如有需要请留言。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vanilla JS——最轻快的JavaScript框架

    Vanilla JS团队维护每个字节的代码框架,每天努力工作,以确保它是小的和直观的。使用Vanilla JS是谁?很高兴你发问!他被应用于:

    tonglei0429
  • 学习 Phaser.js HTML5游戏开发-DAY3

    3. 构建基本的子弹对象,fire 方法用来初始化子弹实例,update方法用来绘制子弹轨迹

    tonglei0429
  • CraftyJS 学习四 -- 2D Graphics

    很容易吧!我们已经绘制了一个红色的矩形,现在我们要让它动起来,"2D"组件里面有个 rotation 属性,要让它旋转,我们可以通过绑定 "EnterFrame...

    tonglei0429
  • 抓取IOS的apsd进程流量

    IOS的apsd是Apple Push Service的相关进程,很多系统服务都跟他有关,比如iMessage、Homekit,因此想抓包查看他是怎么实现的。

    ascii0x03
  • Bwapp漏洞平台答案全解-A3(第二篇)

    前言 接上篇XSS,没啥好讲的,直接看答案吧 A3 - Cross-Site Scripting (XSS) -3.11-XSS - Reflected(ph...

    用户1467662
  • 自媒体运营技巧:如何成功申请今日头条号?

    王小婷
  • SwiftUI:创建自定义绑定

    由于SwiftUI将绑定更新发送到属性包装器的方式,分配与属性包装器一起使用的属性观察器将无法正常工作,这意味着即使模糊半径发生变化,此类代码也不会打印任何内容...

    韦弦zhy
  • jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

    最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案。因此我就在这里做一个demo,供大家相互...

    业余草
  • 你应该这个姿势学习php(3)

    1、ob_start() 开启文件缓存 2、ob_get_contents() 得到缓存中的内存 3、ob_get_length() 得到缓冲区的长度 4、ob...

    思梦php
  • Python使用K-means聚类算法进行分类案例一则

    K-means算法是经典的基于划分的聚类方法,是十大经典数据挖掘算法之一,其基本思想是:以空间中k个点为中心进行聚类,对最靠近它们的对象归类。通过迭代的方法,逐...

    Python小屋屋主

扫码关注云+社区

领取腾讯云代金券