QQ第三方登录的应用
现在这种第三方登录的应用很广泛也很方便。省得用户进行注册了。现在把QQ登录的方法和步骤记录一下,以备使用时方便。
第一步,到http://connect.qq.com/intro/login/这里去申请QQ登录,添加自己的信息。按步骤来就行。要说的一点是什么呢,就是回调地址,这里只要写域名就行,别的什么都不用,而且你添写主域名之后,子域名也能用,格式一般是这样的,www.sohu.com这种格式的,注意一点是前面不要有http://。
申请成功之后,你会得到一个APP ID和一个key了。只有这二个值都在,你才可以进行后面的步骤。
第二步,申请完成之后,你就需要在你的网站页面中加上相应的登录按钮与回调页面参数了。
这里先说一下回调页面,从字面上就很好理解,就是登录QQ之后,QQ给你返回值的接收页面,这个页面可以是一个单独的页面,也可以和登录页面是一个。
QQ为我们提供了最简单了JSSDK。我们只要简单的调用一下就行了。
1,在需要加入QQ登录按钮的页面引入JS SDK库
- <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
- data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8">
- </script>
上面这代码,放到<head></head>之间
这里的data-appid就是你申请的appid把它写进去,data-redirecturi这个就是回调页面的地址。一般写法如下http://www.sohu.com/Default.aspx这个default.aspx页面就是接收QQ登录之后给的返回值的页面,当然了,你的登录页面和返回页面也可以是一个
2, 请在html页面需要插入QQ登录按钮的位置,粘贴如下示例代码
- <span id="qq_login_btn"></span>
- <script type="text/javascript">
- QC.Login({//按默认样式插入QQ登录按钮
- btnId:"qq_login_btn" //插入按钮的节点id
- });
- </script>
这里QQ给了一个已经定义好的QQ登录按钮,当然了,你也可以自己去定义http://wiki.opensns.qq.com/wiki/%E3%80%90QQ%E7%99%BB%E5%BD%95%E3%80%91JS_SDK%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E#3._.E8.87.AA.E5.AE.9A.E4.B9.89.E7.99.BB.E5.BD.95.E6.8C.89.E9.92.AE这个地址是告诉你如何自定义一个和你网站风格一样的登录按钮
到这里,你的登录页面,添加的东西就OK了,下面来看一下你的回调页面
第三步,回调页面的处理
1, JS SDK的回调地址页,在回调地址页面插入如下示例代码
- <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>
和第二步里的一样,把这代码放到<head></head>这间
2, 就是调用相JS SDK相应的方法,来取得你要知道的信息了,一般来讲,我们想要得到的信息,最多就是用户昵称和用户登录成功之后,QQ给我们返回的用户唯一标识。我们只要得到这二个值,就一切都好办了。
得到昵称
- <script type="text/javascript">
- //从页面收集OpenAPI必要的参数。get_user_info不需要输入参数,因此paras中没有参数
- var paras = {};
- //用JS SDK调用OpenAPI
- QC.api("get_user_info", paras)
- //指定接口访问成功的接收函数,s为成功返回Response对象
- .success(function(s){
- //成功回调,通过s.data获取OpenAPI的返回数据
- alert("获取用户信息成功!当前用户昵称为:"+s.data.nickname);
- })
- //指定接口访问失败的接收函数,f为失败返回Response对象
- .error(function(f){
- //失败回调
- alert("获取用户信息失败!");
- })
- //指定接口完成请求后的接收函数,c为完成请求返回Response对象
- .complete(function(c){
- //完成请求回调
- alert("获取用户信息完成!");
- });
- </script>
获取openId 与 accessToken:
用户通过“QQ登录”登录成功后,可以调用示例代码取到openId与accessToken
openId是用户身份的唯一标识,可以保存在本地,以便用户下次登录时可对应到其之前的身份信息,不需要重新授权。 accessToken是表示当前用户在此网站/应用的登录状态与授权信息,也可以保存在本地。
- <script type="text/javascript">
- if(QC.Login.check()){//如果已登录
- QC.Login.getMe(function(openId, accessToken){
- alert(["当前登录用户的", "openId为:"+openId, "accessToken为:"+accessToken].join("\n"));
- });
- //这里可以调用自己的保存接口
- //...
- }
- </script>
下面是我做测试的一个页面。代码
Default.aspx
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WirelessCity_Web.Default" %>
- <!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 runat="server">
- <title></title>
- <script src="/js/jquery-1.4.2.js" type="text/javascript"></script>
- <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="100359262" data-redirecturi="http://b.am89.com/Default.aspx" charset="utf-8"></script>
- <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>
- </head>
- <body>
- <form id="form1" runat="server">
- <span id="qqLoginBtn"></span>
- <script type="text/javascript">
- QC.Login({
- btnId: "qqLoginBtn" //插入按钮的节点id
- });
- </script>
- <script type="text/javascript">
- //从页面收集OpenAPI必要的参数。get_user_info不需要输入参数,因此paras中没有参数
- var paras = {};
- //用JS SDK调用OpenAPI
- QC.api("get_user_info", paras)
- //指定接口访问成功的接收函数,s为成功返回Response对象
- .success(function(s) {
- //成功回调,通过s.data获取OpenAPI的返回数据
- alert("获取用户信息成功!当前用户昵称为:" + s.data.nickname);
- })
- //指定接口访问失败的接收函数,f为失败返回Response对象
- .error(function(f) {
- //失败回调
- alert("获取用户信息失败!");
- })
- //指定接口完成请求后的接收函数,c为完成请求返回Response对象
- .complete(function(c) {
- //完成请求回调
- alert("获取用户信息完成!");
- });
- </script>
- <script type="text/javascript">
- if (QC.Login.check()) {//如果已登录
- QC.Login.getMe(function(openId, accessToken) {
- alert(["当前登录用户的", "openId为:" + openId, "accessToken为:" + accessToken].join("\n"));
- $("#hidopenId").attr("value", openId);
- $("#hidaccessToken").attr("value", accessToken);
- });
- //这里可以调用自己的保存接口
- //...
- }
- function ContAdd() {
- var openId = $("#hidopenId").val();
- var accessToken = $("#hidaccessToken").val();
- $.ajax({
- type: "POST",
- url: "ajaxbackInfo.aspx",
- data: "openId=" + openId + "&accessToken=" + accessToken + "",
- success: function(result) {
- alert("aa" + result);
- }
- });
- }
- </script>
- </div>
- <asp:HiddenField ID="hidopenId" runat="server" />
- <asp:HiddenField ID="hidaccessToken" runat="server" />
- <br />
- <input type="button" value="提 交" id="btnSubmit" onclick="ContAdd();" />
- </form>
- </body>
- </html>
ajaxbackInfo.aspx
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- namespace WirelessCity_Web
- {
- public partial class ajaxbackInfo : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- string openId = Request.Form["openId"] ?? Request.QueryString["openId"];
- string accessToken = Request.Form["accessToken"] ?? Request.QueryString["accessToken"];
- Response.Write("openid:" + openId + " accessToken:" + accessToken);
- Response.End();
- }
- }
- }
QQ第三方登录的应用相关推荐
- QQ第三方登录报错error=-1
qq 第三方登录报错error=-1 再次实例化qc类.
- python调用qq互联_Django项目中实现使用qq第三方登录功能
使用qq登录的前提是已经在qq互联官网创建网站应用并获取到QQ互联中网站应用的APP ID和APP KEY 1,建路由 # qq登录 path('loginQq/',qq.loginQq,name=' ...
- 一步一步实现iOS QQ第三方登录
前言 最近在公司应用中集成QQ登录的时候遇到一些波折(坑点),觉得还是有必要记录一下. 一.集成SDK 1.集成官方Framework 首先下载官网SDK iOS_SDK下载,目前来说最新的包是V3. ...
- php第三方登录代码,thinkPHP5项目中实现QQ第三方登录功能
本文实例讲述了thinkPHP5项目中实现QQ第三方登录功能.分享给大家供大家参考,具体如下: 最近用thinkPHP 5框架做了一个婚纱店的项目,在开发过程中需要用到第三方登录,腾讯官方给的案例是几 ...
- java实现支付宝第三方登录_Java 实现QQ第三方登录(附赠:完整代码)
老铁,转发+关注+私信 获取完整代码 前言:很多时候我们都需要如下的第三方登录,用QQ帐号快速登录你的网站,降低注册门槛,为你的网站带来海量新用户. 下面让我们来实现吧,可以参考官网文档,也可以看我下 ...
- php如何实现qq第三方登录,PHP实现qq第三方登录
除了qq第三方登录外.还有微博,微信等第三方登录 qq第三方登录,遵循oauth2.0协议 这里是说明http://www.cnblogs.com/yx520zhao/p/6616686.html q ...
- python实现QQ第三方登录
应用接入前,首先需进行申请,获得对应的appid与appkey,以保证后续流程中可正确对网站与用户进行验证与授权.http://wiki.connect.qq.com/__trashed-2 QQ登录 ...
- QQ第三方登录-QQ互联开发者申请的坑(个人接入,时间:2019-6-3)
本人博客全部迁至个人博客,柒情博客:http://www.ityw.club ,后续所有博客将在柒情博客上进行更新. 前阵子项目准备使用QQ第三方登录,需要使用QQ第三方登录的话需要申请QQ互联认证, ...
- 使用QQ互联完成网站的QQ第三方登录(详解+坑)
前言:网站收尾工作,就只剩下第三方登录,去QQ互联注册,提交资料,审核了快一周,创建应用,一直创建不了,后来才发现是QQ互联的问题,耽误了两天又开始创建应用,终于弄好了,建议大家使用QQ第三方的,一定 ...
- web接入QQ第三方登录
原文地址:https://blog.csdn.net/cwfjimogudan/article/details/54135957 这是第三方登录的第二篇,关于web接入微博第三方登录可以参考我之前的博 ...
最新文章
- 图灵奖得主杨立昆:人工智能比你更聪明吗?
- WIN7 Wireshark: There are no interfaces on which a capture can be done
- 查看linux IO地址范围
- RedisTemplate常用集合使用说明-opsForList(三)
- html中隐式转换成数字,关于 JS 类型隐式转换的完整总结
- [渝粤教育] 广东-国家-开放大学 21秋期末考试土力学与地基基础10445k1
- VC2013/MFC,异常: 0xC0000005
- 计算机ftp怎么登陆新用户,ftp登录
- C++学习第九课--类的成员函数、对象复制与私有成员笔记
- 调和平均数,几何平均数,算数平均数,平方平均数
- 还有一周就解放了,无心撸码,着急回家
- OSChina 周五乱弹 ——程序员看火影忍者被女同事鄙视了
- 【liunxptp协议栈详解第一部分】
- Outlook html 图片白色空白,outlook签名设置_解决Outlook中的签名和邮件图片都显示空白的办法_outlook邮件空白...
- ansible自动化部署nginx艾艾贴
- Java8 ,LocalDate,LocalDateTime处理日期和时间工具类,
- 智能手机的发展演变,智能手机对人类带来的影响
- Danger Scavenger 《致命游民复仇者》 for Mac v2.0.3 中文版 好玩的赛博朋克动作游戏
- 乐高无限最好玩的服务器联机打怪,乐高无限游戏玩法大全多种模式任你选择
- 2016河北省职称计算机考试试题,2016年最新河北省职称计算机考试试题及答案(参考).doc...
热门文章
- GitLab 中编辑 Markdown 写README技巧
- 提供数据接口公司总结
- html标签 lt heavy gt,HTML Purifier:转换&lt; body&gt;到&lt; div&gt;
- isfinite函数_isfinite()函数以及C ++中的示例
- 删除 文件夹出现0x80070091错误提示目录不是空的.txt
- 洞悉物联网发展1000问之为什么虚拟现实技术将迎来春天?
- python实现SCP文件上传服务器
- 每日小技巧~教你如何用 Python 快速批量转换 HEIC 文件
- ACM 常用思维技巧
- 阿里巴巴发布AliGenie 语音开放平台 “智联网”战略又落一子