【版主分享】融云教程第一篇登录（获取token）

川哥哥

本帖最后由川哥哥于 2017-8-4 19:07 编辑

融云即时通信系列和教程
1、【版主分享】融云教程第一篇登录（获取token）
2、【版主分享】融云教程第二篇消息发送与接收（文字消息）
3、【版主分享】融云教程第三篇消息发送与接收（图像消息）
4、【版主分享】融云教程第四篇消息发送与接收（语音消息）
5、【版主分享】融云教程第五篇聊天记录
6、【版主分享】融云教程第六篇会话列表（最近会话消息）

   融云和环信都可以实现及时聊天的功能，这两个模块的机制有很大不同。环信有完整的会员系统，有登录、注册、管理等接口，文档思路比较清晰。融云没有会员系统，也可以说没有会员以及好友这些概念，融云也没有提供会员注册、登录、管理、删除等接口。没有会员系统很多刚接触融云的朋友大多都蒙了，也不知道使用融云需不需要登录，以及怎么添加好友...........没有开发思路。
   在APICloud开发平台中为什么融云模块使用率高于环信，我觉得可能有两个原因。1、融云模块先在模块库发布，2、融云官方只掌握会员聊天数据没有会员详细信息，不用担心会员信息泄露。

   回到正题，使用融云模块第一步肯定是去官网注册申请key，完了之后在后台添加融云模块以及配置config文件。使用融云模块最重要是获取token，这个是很重要。一个会员对应一个唯一的token，而获取token必须提供我们自己数据库里面会员的userId（会员id）、name（会员昵称）、portraitUr（会员头像）三个数据。
   获取token文档有说明，但是没有具体demo代码，这个很多人也看着恼火。一般推荐在用户登录app时去获取token。代码如下。

var userId = ret.id; //会员id
var name = zh; //会员昵称
var portraitUri = ret.tx; //会员头像
var appKey = "pkfcgjstpwii8";
var appSecret = "HCnCOqS4CiLH";
var nonce = Math.floor(Math.random() * 1000000);//随机数
var timestamp = Date.now(); //时间戳
var signature = sha1("" + appSecret + nonce + timestamp);//数据签名(通过哈希加密计算)
api.ajax({
url : "http://**.****.**/user/getToken.json",
method : "post",
headers : {
"RC-App-Key" : appKey,
"RC-Nonce" : "" + nonce,
"RC-Timestamp" : "" + timestamp,
"RC-Signature" : "" + signature,
"Content-Type" : "application/x-www-form-urlencoded"
},
data : {
values : {
userId : userId,
name : name,
portraitUri : portraitUri
}
}
}, function(ret, err) {
if (ret) {
$api.setStorage('token', ret.token);//将token存储到本地
} else {
alert("获取token失败")
}
});

复制代码

结合登录页面做一个实例demo 这里用我申请的key做测试，页面frame_login.html代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link type="text/css" rel="stylesheet" href="../css/login.css" />
</head>
<body >
<div class="login">
<div class="login_box">
<div class="form_item">
<label class="icon-my" for="username"></label>
<div class="input_box">
<input type="number" id="id" placeholder="userId (4001)">
<span class="icon_delete icon-delete"></span>
</div>
</div>
<div class="form_item">
<label class="icon-password" for="password"></label>
<div class="input_box">
<input type="text" id="zh" placeholder="请输入昵称">
<span class="icon_delete icon-delete"></span>
</div>
</div>
</div>
<div class="remember_login">
<input id="checkbox" type="checkbox" checked>
<label for="checkbox">记住密码</label>
</div>
<div class="login_btn">
<a id="login-btn" class="btn" onclick="login() ">登录</a>
</div>
<div class="other__login" style="padding-top:1rem ">
<h2><span>其他登录方式</span></h2>
<ul>
<li style="width: 33.3%;">
<a class="icon-weibo"></a>
</li>
<li style="width: 33.3%;">
<a class="icon-qq"></a>
</li>
<li style="width: 33.3%;">
<a class="icon-weixin"></a>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/sha1.min.js"></script>
<script type="text/javascript">
apiready = function() {
}
function login() {
var zh = $api.val($api.byId('zh'));
var id = $api.val($api.byId('id'));
if (id == 3001) {
var tx = '../res/tx1.jpg';
} else if (id == 3002) {
var tx = '../res/tx2.jpg';
} else if (id == 3003) {
var tx = '../res/tx3.jpg';
} else if (id == 3004) {
var tx = '../res/tx4.jpg';
} else if (id == 3005) {
var tx = '../res/tx5.jpg';
} else if (id == 3006) {
var tx = '../res/tx6.jpg';
} else if (id == 3007) {
var tx = '../res/tx7.jpg';
} else if (id == 3008) {
var tx = '../res/tx8.jpg';
} else if (id == 3009) {
var tx = '../res/tx9.jpg';
} else if (id == 3018) {
var tx = '../res/tx0.jpg';
} else {
var tx = '../res/tx00.jpg';
}
if (zh.length < 2 || zh.length > 20) {
api.toast({
msg : '昵称长度为2-20字符',
duration : 3000,
location : 'bottom'
});
} else if (id.length < 2 || id.length > 5) {
api.toast({
msg : 'id长度为4个字符如4001',
duration : 3000,
location : 'bottom'
});
} else {
//获取token
var userId = id;
//会员id
var name = zh;
//会员昵称
var portraitUri = tx;
//会员头像
var appKey = "pkfcgjstpwii8";
var appSecret = "HCnCOqS4CiLH";
var nonce = Math.floor(Math.random() * 1000000);
//随机数
var timestamp = Date.now();
//时间戳
var signature = sha1("" + appSecret + nonce + timestamp);
//数据签名(通过哈希加密计算)
api.ajax({
url : "http://**.****.**/user/getToken.json",
method : "post",
headers : {
"RC-App-Key" : appKey,
"RC-Nonce" : "" + nonce,
"RC-Timestamp" : "" + timestamp,
"RC-Signature" : "" + signature,
"Content-Type" : "application/x-www-form-urlencoded"
},
data : {
values : {
userId : userId,
name : name,
portraitUri : portraitUri
}
}
}, function(ret, err) {
if (ret) {
$api.setStorage('token', ret.token);
//将token存储到本地
alert("你的token是："+ret.token);
} else {
alert("获取token失败")
}
});
}
}
</script>
</html>

复制代码

后台模块添加

config文件配置

效果图如下

演示地址

源码文件

瑞柯

多谢分享！

zhou1

好东西！感谢分享！

海量哥

学习了，感谢分享！

川哥哥

海量哥发表于 2017-7-29 22:17
学习了，感谢分享！

后面继续更新

als24

xuexile谢谢

禅中说缠

谢谢川哥回去看看去

YonBIP社区

感谢分享

APICloud--玲玲

谢谢欧巴

hbshow

感谢分享

【版主分享】融云教程第一篇 登录（获取token）

【版主分享】融云教程第一篇登录（获取token）