第三方插件使用以及qq，新浪微博登录
2016-03-15 22:30
525 查看
写这些东西，第一是为了记录，第二是为了分享
多说评论的使用：
多说评论使用后如上图，可以用qq，微信，新浪微博，人人网等登录进行评论，那么现在教你如何使用：
第一：进入多说官网，http://duoshuo.com/ ，不用注册，用qq登录就行
第二：进入这个网址：http://duoshuo.com/create-site 创建多说站点
如图，1.名称就是你自己网站的名称（自己开心填）
2.站点地址是你所要使用多说插件的网站地址（如果你没有自己的域名，可以百度搜索新浪云，对于新浪云建站我以前写过一篇博客———>这里：http://blog.csdn.net/ipogrammer/article/details/45918873）
3.多说域名自己开心填，多说会自己检测是否重复
4.电子邮箱，qq号，手机号填写完成后点击创建
创建成功后，你会看到左侧，点击工具，就可以看到多说插件的js，html代码，将其粘贴到你的网站之后，你的网站就可以使用多说评论了，方便快捷，对于其中的设置，自己去设置就好，很easy
美恰客服插件使用：
第一：进入美恰官网：http://meiqia.com/，注册登录
第二：登录后你就会看到如下页面
点击左下角的设置图标
你会看到上图，点击网站插件，就会看到插件代码，将其复制粘贴到你网站js代码中就可以使用，对于其修改，自己去修改按钮样式就好完成后，就会如下图漂亮的界面：
qq第三方登录：
现在这种第三方登录的应用很广泛也很方便。省得用户进行注册了。现在把ＱＱ登录的方法和步骤记录一下，以备使用时方便。
第一步，到http://connect.qq.com/intro/login/这里去申请ＱＱ登录，添加自己的信息。按步骤来就行。要说的一点是什么呢，就是回调地址，这里只要写域名就行，别的什么都不用，而且你添写主域名之后，子域名也能用，格式一般是这样的，www.sohu.com这种格式的，注意一点是前面不要有http://。
申请成功之后，你会得到一个APP ID和一个key了。只有这二个值都在，你才可以进行后面的步骤。
第二步，申请完成之后，你就需要在你的网站页面中加上相应的登录按钮与回调页面参数了。
这里先说一下回调页面，从字面上就很好理解，就是登录ＱＱ之后，ＱＱ给你返回值的接收页面，这个页面可以是一个单独的页面，也可以和登录页面是一个。
ＱＱ为我们提供了最简单了ＪＳＳＤＫ。我们只要简单的调用一下就行了。
１，在需要加入QQ登录按钮的页面引入JS SDK库
[javascript] view
plain copy
<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页面就是接收ＱＱ登录之后给的返回值的页面，当然了，你的登录页面和返回页面也可以是一个
2, 请在html页面需要插入QQ登录按钮的位置，粘贴如下示例代码
[javascript] view
plain copy
<span id="qq_login_btn"></span>
<script type="text/javascript">
QC.Login({//按默认样式插入QQ登录按钮
btnId:"qq_login_btn" //插入按钮的节点id
});
</script>
这里ＱＱ给了一个已经定义好的ＱＱ登录按钮，当然了，你也可以自己去定义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这个地址是告诉你如何自定义一个和你网站风格一样的登录按钮
到这里，你的登录页面，添加的东西就ＯＫ了，下面来看一下你的回调页面
第三步，回调页面的处理
１， JS SDK的回调地址页，在回调地址页面插入如下示例代码
[javascript] view
plain copy
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>
和第二步里的一样，把这代码放到<head></head>这间
２， 就是调用相JS SDK相应的方法，来取得你要知道的信息了，一般来讲，我们想要得到的信息，最多就是用户昵称和用户登录成功之后，ＱＱ给我们返回的用户唯一标识。我们只要得到这二个值，就一切都好办了。
得到昵称
[html] view
plain copy
<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是表示当前用户在此网站/应用的登录状态与授权信息，也可以保存在本地。
[javascript] view
plain copy
<script type="text/javascript">
if(QC.Login.check()){//如果已登录
QC.Login.getMe(function(openId, accessToken){
alert(["当前登录用户的", "openId为："+openId, "accessToken为："+accessToken].join("\n"));
});
//这里可以调用自己的保存接口
//...
}
</script>
下面是我做测试的一个页面。代码
Default.aspx
[html] view
plain copy
<%@ 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
[csharp] view
plain copy
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还方便
http://open.weibo.com/wiki/Weibo-JS_V2 看他们官方文档就够了
多说评论的使用：
多说评论使用后如上图，可以用qq，微信，新浪微博，人人网等登录进行评论，那么现在教你如何使用：
第一：进入多说官网，http://duoshuo.com/ ，不用注册，用qq登录就行
第二：进入这个网址：http://duoshuo.com/create-site 创建多说站点
如图，1.名称就是你自己网站的名称（自己开心填）
2.站点地址是你所要使用多说插件的网站地址（如果你没有自己的域名，可以百度搜索新浪云，对于新浪云建站我以前写过一篇博客———>这里：http://blog.csdn.net/ipogrammer/article/details/45918873）
3.多说域名自己开心填，多说会自己检测是否重复
4.电子邮箱，qq号，手机号填写完成后点击创建
创建成功后，你会看到左侧，点击工具，就可以看到多说插件的js，html代码，将其粘贴到你的网站之后，你的网站就可以使用多说评论了，方便快捷，对于其中的设置，自己去设置就好，很easy
美恰客服插件使用：
第一：进入美恰官网：http://meiqia.com/，注册登录
第二：登录后你就会看到如下页面
点击左下角的设置图标
你会看到上图，点击网站插件，就会看到插件代码，将其复制粘贴到你网站js代码中就可以使用，对于其修改，自己去修改按钮样式就好完成后，就会如下图漂亮的界面：
qq第三方登录：
现在这种第三方登录的应用很广泛也很方便。省得用户进行注册了。现在把ＱＱ登录的方法和步骤记录一下，以备使用时方便。
第一步，到http://connect.qq.com/intro/login/这里去申请ＱＱ登录，添加自己的信息。按步骤来就行。要说的一点是什么呢，就是回调地址，这里只要写域名就行，别的什么都不用，而且你添写主域名之后，子域名也能用，格式一般是这样的，www.sohu.com这种格式的，注意一点是前面不要有http://。
申请成功之后，你会得到一个APP ID和一个key了。只有这二个值都在，你才可以进行后面的步骤。
第二步，申请完成之后，你就需要在你的网站页面中加上相应的登录按钮与回调页面参数了。
这里先说一下回调页面，从字面上就很好理解，就是登录ＱＱ之后，ＱＱ给你返回值的接收页面，这个页面可以是一个单独的页面，也可以和登录页面是一个。
ＱＱ为我们提供了最简单了ＪＳＳＤＫ。我们只要简单的调用一下就行了。
１，在需要加入QQ登录按钮的页面引入JS SDK库
[javascript] view
plain copy
<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页面就是接收ＱＱ登录之后给的返回值的页面，当然了，你的登录页面和返回页面也可以是一个
2, 请在html页面需要插入QQ登录按钮的位置，粘贴如下示例代码
[javascript] view
plain copy
<span id="qq_login_btn"></span>
<script type="text/javascript">
QC.Login({//按默认样式插入QQ登录按钮
btnId:"qq_login_btn" //插入按钮的节点id
});
</script>
这里ＱＱ给了一个已经定义好的ＱＱ登录按钮，当然了，你也可以自己去定义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这个地址是告诉你如何自定义一个和你网站风格一样的登录按钮
到这里，你的登录页面，添加的东西就ＯＫ了，下面来看一下你的回调页面
第三步，回调页面的处理
１， JS SDK的回调地址页，在回调地址页面插入如下示例代码
[javascript] view
plain copy
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>
和第二步里的一样，把这代码放到<head></head>这间
２， 就是调用相JS SDK相应的方法，来取得你要知道的信息了，一般来讲，我们想要得到的信息，最多就是用户昵称和用户登录成功之后，ＱＱ给我们返回的用户唯一标识。我们只要得到这二个值，就一切都好办了。
得到昵称
[html] view
plain copy
<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是表示当前用户在此网站/应用的登录状态与授权信息，也可以保存在本地。
[javascript] view
plain copy
<script type="text/javascript">
if(QC.Login.check()){//如果已登录
QC.Login.getMe(function(openId, accessToken){
alert(["当前登录用户的", "openId为："+openId, "accessToken为："+accessToken].join("\n"));
});
//这里可以调用自己的保存接口
//...
}
</script>
下面是我做测试的一个页面。代码
Default.aspx
[html] view
plain copy
<%@ 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
[csharp] view
plain copy
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还方便
http://open.weibo.com/wiki/Weibo-JS_V2 看他们官方文档就够了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Xcode7编译打包后，iOS9设备无法打开http网址的问题
- App版本号定义与说明基础知识
- 对Trie单词树的实现与思考
- 动态规划(DP),最大矩阵和
- 给网站设置目标关键词
- iOS个人整理27-SQLite3和基础的sql语句,bind,blob
- Android中5大数据存储（二）---文件存储
- jQuery中的事件
- 3月15日 传址
- Fiddler抓取手机数据包（315晚会上出现了它的影子。。。）
- 深入理解JVM（2）—Java虚拟机内存区域
- View的位置--top, left, bottom, right
- Python基础--流程控制
- WebX实践指南_WebX RPC
- Python基础--流程控制
- 【tarjan求割顶】BZOJ2730-[HNOI2012]矿场搭建
- 最近要看两本书
- Cookie和Session详解
- 十个开源库分享(二)
- linux命令经典用法与配置收录