js如何调用qq互联api实现第三方登录

qq互联js SDK：http://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E


代码如下:

<script type=text/javascript>

在页面header中引入：<script type="text/javascript"
src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="appid" data-redirecturi="huidiaodizhi(带http)"
charset="utf-8"></script>

在body中加入下面信息：

//设置qq分享按钮
QC.Login(
{
btnId : "qqLoginBtn" //插入按钮的节点id
},
function(reqData, opts) {//登录成功

//根据返回数据，更换按钮显示状态方法
var dom = document.getElementById(opts['btnId']), _logoutTemplate = [
//头像
'<span><img src="{figureurl}" class="{size_key}"/></span>',
//昵称
'<span>{nickname}</span>',
//退出
'<span><a href="javascript:QC.Login.signOut();">退出</a></span>' ]
.join("");
dom
&& (dom.innerHTML = QC.String
.format(
_logoutTemplate,
{
nickname : QC.String
.escHTML(reqData.nickname), //做xss过滤
figureurl : reqData.figureurl
}));
},
function(opts) {//注销成功
alert("注销成功！！");
});
//调用api授权
QC.api("get_info", {
"oauth_consumer_key" : "appid" //这个可以不用传递
}).success(function(s) {
if (QC.Login.check()) {//检测是否成功登录，并弹出openid和accessToken
QC.Login.getMe(function(openId, accessToken) {
alert(openid+" "+accessToken);
});
}
});

</script>
<div class="lib_tiv shadow">
<h3 class="logo">QQ登录</h3>
</div>

赞 (0)

相关推荐

  • javascript仿qq界面的折叠菜单实现代码

    最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,上网查了一下,发现已经有不少类似的菜单效果,不管那么多,先写着再说吧. 以下是html结构: <div id="a"><div id="h1">sdfds</div><div id="b1">dsfdsfsdfsd</div><div id="h2">dsf</div&

  • js QQ客服悬浮效果实现代码

    代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

  • js canvas实现QQ拨打电话特效

    js canvas实现QQ拨打电话特效

    首先呢,先给特效.自己找手机录的,有点不清楚,请见谅! 本来是打算做 腾讯的贝塞尔曲线下拉刷新图.然后和朋友打了个QQ电话,稍微注意了一下未接通时候的动画.然后就想着实现以下. 这里要注意的就是: canvas的中心点经过变化到canvas的正中后 canvas的 Y轴由上至下 是从(-,+):而数学坐标系的Y轴由上至下 是从(+,-)的. 首先看一下html代码.就至少简单的添加一个canvas,基本没进行其他操作. HTML代码 <canvas id="canvas1" wi

  • 用js实现QQ在线查询功能

    这段程序的方法是利用XMLHTTP来读取腾讯网站的相应HTML代码获取QQ的头像,根据这个想法,我们还可以抓取很多其他网站的信息,如天气预报.新闻等等. <script language="JavaScript">  <!--   function getFaceImg(QQcode)   {   var Re=new RegExp("^[1-9]{1}\d+$","g");   if (!QQcode !Re.test(QQc

  • JS判断客服QQ号在线还是离线状态的方法

    本文实例讲述了JS判断客服QQ号在线还是离线状态的方法.分享给大家供大家参考.具体分析如下: 不知道从什么时候开始,原来QQ官方自带的在线离线状态的代码已经不能准确显示在线或离线状态了,现在自己用JS判断QQ在线离线状态值,根据状态值输出在线图片还是离线图片. 复制代码 代码如下: <script src="JS/jquery-1.5.1.min.js"></script> <div class="kfli" onclick="

  • js仿QQ中对联系人向左滑动、滑出删除按钮的操作

    js仿QQ中对联系人向左滑动、滑出删除按钮的操作

    本文实例为大家分享实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

  • js如何调用qq互联api实现第三方登录

    qq互联js SDK:http://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E 复制代码 代码如下: <script type=text/javascript> 在页面header中引入:<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"

  • PHP调用QQ互联接口实现QQ登录网站功能示例

    PHP调用QQ互联接口实现QQ登录网站功能示例

    本文实例讲述了PHP调用QQ互联接口实现QQ登录网站功能.分享给大家供大家参考,具体如下: 调用QQ登录接口,首先要到QQ互联完善开发者认证信息,并通过审核,然后创建一个网站应用,获得APP ID和APP Key,通过审核后即可调用基本接口get_user_info(获得用户信息),实现QQ登录网站功能. 废话不多,上示例代码(QQ登录李维山博客): <?php header("Content-Type: text/html;charset=utf-8"); //应用APP ID

  • 修复ShopNC使用QQ 互联时提示100010 错误

    修复ShopNC使用QQ 互联时提示100010 错误

    QQ 互联不允许 URL 有 Hash 存在,而 ShopNC 默认下是 ?act=toqq&op=g 这样的链接回调的,所以会导致设置失败,或者 100010 错误. 1. 建立 /shop/api_qq.php 文件 2. 修改 /shop/api/qq/comm/config.php $_SESSION["callback"] = SHOP_SITE_URL."/api_qq.php"; 3. QQ 互联填写 http://域名/shop/api_qq

  • JS通过调用微信API实现微信支付功能的方法示例

    JS通过调用微信API实现微信支付功能的方法示例

    本文实例讲述了JS通过调用微信API实现微信支付功能的方法.分享给大家供大家参考,具体如下: 最近在做微信公众号开发,在微信支付上遇到一些问题,困惑了3天,今天终于搞定.期间要感谢一些大神的帮助,趁热下面分享一下我的经验. 在实现微信支付之前,需要到微信开发平台认证,这些认证和配置信息我就不多说了,这里主要从代码层面实现支付. function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId&quo

  • vue 使用外部JS与调用原生API操作示例

    vue 使用外部JS与调用原生API操作示例

    本文实例讲述了vue 使用外部JS与调用原生API操作.分享给大家供大家参考,具体如下: vue 使用外部JS 概要 在开发时我们会经常需要使用到外部的JS,这样我们需要引入外部js,然后进行使用. 实现方法 我们在开发的过程中需要使用到 sha256 将用户的密码进行加密传输. 我们对js进行一点点改造. function sha256_digest(data) { sha256_init(); sha256_update(data, data.length); sha256_final();

  • Vue.js中Line第三方登录api的实现代码

    国际化的项目就会用用到一些第三方的登录api,这次记录一下Line 的! 按步骤来: 注册Line账号就不说了,虽然麻烦,这就自己去想办法了! demo 请狠狠的戳这里 http://download.lllomh.com/cliect/#/product/J417081951162505 一:开发者平台配置 去Line 的开发者平台 新建一个App: https://developers.line.biz/en/ ​ ​ 顺便写好资料: ​ 动态演示: ​ 这要 用到的 就是2个: Chann

  • 浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑

    前言 绝大多数网站都集成了第三方登录,降低了注册门槛,增强了用户体验.最近看了看 QQ 互联上 QQ 登录的接口文档.接入 QQ 登录的一般流程呢,是这样的:先申请开发者 -> 然后创建应用(拿到一组 AppId 和 AppKey)-> 获取 access_token -> 获取 openid -> 调用 openApi 访问或修改用户信息. 然而,从申请个人开发者开始,坑就来了. 1. 申请(个人)开发者 QQ 互联中申请开发者信息的页面,一些重点太过简陋,缺失细节,比如身份证正

  • Android第三方登录之腾讯QQ登录的实例代码

    布局文件 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="登录成功" android:textSize="25sp" android:layout_marginTop="100dp" /> 清单文件中的配置 <activity android:n

  • Django项目中实现使用qq第三方登录功能

    使用qq登录的前提是已经在qq互联官网创建网站应用并获取到QQ互联中网站应用的APP ID和APP KEY 1,建路由 # qq登录 path('loginQq/',qq.loginQq,name='loginQq/'), path('returns/',qq.returns,name='returns/'), 2,前端页面写qq登录的链接,本文没有用图标,暂时使用a链接请求. <a data-wow-delay=".5s" href="/blog/loginQq/&q

  • vue2.x 通过后端接口代理,获取qq音乐api的数据示例

    前言: 部分qq音乐的api接口不能直接通过jsonp访问,需要通过官方的代理才能获取,如:歌词,推荐歌单等 1. webpack.dev.conf.js中创建接口: // 开头调用: var express = require('express') var axios = require('axios') var app = express() var apiRoutes = express.Router() app.use('/api', apiRoutes) // devServer的最后

随机推荐