apicloud apicloud

注册
查看: 28028|回复: 103

[新手教程] 【版主分享】融云教程第一篇 登录(获取token)

 

主题:
36
帖子:
1240
云币:
16979

我李白贼6

[新手教程] 【版主分享】融云教程第一篇 登录(获取token)

 
28028 103 | 发表于 2017-7-28 23:03:12 |阅读模式 | |
本帖最后由 川哥哥 于 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。代码如下。

  1.         var userId = ret.id;      //会员id
  2.         var name = zh;            //会员昵称
  3.         var portraitUri = ret.tx; //会员头像
  4.         var appKey = "pkfcgjstpwii8";
  5.         var appSecret = "HCnCOqS4CiLH";
  6.         var nonce = Math.floor(Math.random() * 1000000);//随机数
  7.         var timestamp = Date.now(); //时间戳
  8.         var signature = sha1("" + appSecret + nonce + timestamp);//数据签名(通过哈希加密计算)
  9.         api.ajax({
  10.                 url : "http://api.cn.ronghub.com/user/getToken.json",
  11.                 method : "post",
  12.                 headers : {
  13.                         "RC-App-Key" : appKey,
  14.                         "RC-Nonce" : "" + nonce,
  15.                         "RC-Timestamp" : "" + timestamp,
  16.                         "RC-Signature" : "" + signature,
  17.                         "Content-Type" : "application/x-www-form-urlencoded"
  18.                 },
  19.                 data : {
  20.                         values : {
  21.                                 userId : userId,
  22.                                 name : name,
  23.                                 portraitUri : portraitUri
  24.                         }
  25.                 }
  26.         }, function(ret, err) {
  27.                 if (ret) {
  28.                         $api.setStorage('token', ret.token);//将token存储到本地
  29.                 } else {
  30.                         alert("获取token失败")
  31.                 }
  32.         });
复制代码

结合登录页面做一个实例demo  这里用我申请的key做测试 ,页面frame_login.html代码
  1. <!DOCTYPE HTML>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.                 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.                 <link type="text/css" rel="stylesheet" href="../css/login.css" />
  8.         </head>
  9.         <body >
  10.                 <div class="login">
  11.                         <div class="login_box">
  12.                                 <div class="form_item">
  13.                                         <label class="icon-my" for="username"></label>
  14.                                         <div class="input_box">
  15.                                                 <input type="number" id="id" placeholder="userId (4001)">
  16.                                                 <span class="icon_delete icon-delete"></span>
  17.                                         </div>
  18.                                 </div>
  19.                                 <div class="form_item">
  20.                                         <label class="icon-password" for="password"></label>
  21.                                         <div class="input_box">
  22.                                                 <input type="text" id="zh" placeholder="请输入昵称">
  23.                                                 <span class="icon_delete icon-delete"></span>
  24.                                         </div>
  25.                                 </div>
  26.                         </div>
  27.                         <div class="remember_login">
  28.                                 <input id="checkbox" type="checkbox" checked>
  29.                                 <label for="checkbox">记住密码</label>
  30.                         </div>
  31.                         <div class="login_btn">
  32.                                 <a id="login-btn" class="btn"  onclick="login() ">登 录</a>
  33.                         </div>
  34.                         <div class="other__login" style="padding-top:1rem ">
  35.                                 <h2><span>其他登录方式</span></h2>
  36.                                 <ul>
  37.                                         <li style="width: 33.3%;">
  38.                                                 <a class="icon-weibo"></a>
  39.                                         </li>
  40.                                         <li style="width: 33.3%;">
  41.                                                 <a class="icon-qq"></a>
  42.                                         </li>
  43.                                         <li style="width: 33.3%;">
  44.                                                 <a class="icon-weixin"></a>
  45.                                         </li>
  46.                                 </ul>
  47.                         </div>
  48.         </body>
  49.         <script type="text/javascript" src="../script/api.js" ></script>
  50.         <script type="text/javascript" src="../script/sha1.min.js"></script>
  51.         <script type="text/javascript">
  52.                 apiready = function() {
  53.                 }
  54.                 function login() {
  55.                         var zh = $api.val($api.byId('zh'));
  56.                         var id = $api.val($api.byId('id'));
  57.                         if (id == 3001) {
  58.                                 var tx = '../res/tx1.jpg';
  59.                         } else if (id == 3002) {
  60.                                 var tx = '../res/tx2.jpg';
  61.                         } else if (id == 3003) {
  62.                                 var tx = '../res/tx3.jpg';
  63.                         } else if (id == 3004) {
  64.                                 var tx = '../res/tx4.jpg';
  65.                         } else if (id == 3005) {
  66.                                 var tx = '../res/tx5.jpg';
  67.                         } else if (id == 3006) {
  68.                                 var tx = '../res/tx6.jpg';
  69.                         } else if (id == 3007) {
  70.                                 var tx = '../res/tx7.jpg';
  71.                         } else if (id == 3008) {
  72.                                 var tx = '../res/tx8.jpg';
  73.                         } else if (id == 3009) {
  74.                                 var tx = '../res/tx9.jpg';
  75.                         } else if (id == 3018) {
  76.                                 var tx = '../res/tx0.jpg';
  77.                         } else {
  78.                                 var tx = '../res/tx00.jpg';
  79.                         }
  80.                         if (zh.length < 2 || zh.length > 20) {
  81.                                 api.toast({
  82.                                         msg : '昵称长度为2-20字符',
  83.                                         duration : 3000,
  84.                                         location : 'bottom'
  85.                                 });
  86.                         } else if (id.length < 2 || id.length > 5) {
  87.                                 api.toast({
  88.                                         msg : 'id长度为4个字符 如4001',
  89.                                         duration : 3000,
  90.                                         location : 'bottom'
  91.                                 });
  92.                         } else {
  93.                                 //获取token
  94.                                 var userId = id;
  95.                                 //会员id
  96.                                 var name = zh;
  97.                                 //会员昵称
  98.                                 var portraitUri = tx;
  99.                                 //会员头像
  100.                                 var appKey = "pkfcgjstpwii8";
  101.                                 var appSecret = "HCnCOqS4CiLH";
  102.                                 var nonce = Math.floor(Math.random() * 1000000);
  103.                                 //随机数
  104.                                 var timestamp = Date.now();
  105.                                 //时间戳
  106.                                 var signature = sha1("" + appSecret + nonce + timestamp);
  107.                                 //数据签名(通过哈希加密计算)
  108.                                 api.ajax({
  109.                                         url : "http://api.cn.ronghub.com/user/getToken.json",
  110.                                         method : "post",
  111.                                         headers : {
  112.                                                 "RC-App-Key" : appKey,
  113.                                                 "RC-Nonce" : "" + nonce,
  114.                                                 "RC-Timestamp" : "" + timestamp,
  115.                                                 "RC-Signature" : "" + signature,
  116.                                                 "Content-Type" : "application/x-www-form-urlencoded"
  117.                                         },
  118.                                         data : {
  119.                                                 values : {
  120.                                                         userId : userId,
  121.                                                         name : name,
  122.                                                         portraitUri : portraitUri
  123.                                                 }
  124.                                         }
  125.                                 }, function(ret, err) {
  126.                                         if (ret) {
  127.                                                 $api.setStorage('token', ret.token);
  128.                                                 //将token存储到本地
  129.                                                 alert("你的token是:"+ret.token);
  130.                                         } else {
  131.                                                 alert("获取token失败")
  132.                                         }
  133.                                 });
  134.                         }
  135.                 }
  136.         </script>
  137. </html>
复制代码


后台模块添加





config文件配置






效果图如下




演示地址




源码文件










本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

新手上路

UID:470853

主题:
2
帖子:
72
云币:
317

APICloud粉丝女朋友强者

发表于 2017-7-29 09:06:12 来自手机 |
多谢分享!

转正司机

UID:495038

主题:
141
帖子:
621
云币:
300
发表于 2017-7-29 20:08:34 来自手机 |
好东西!感谢分享!

新手上路

UID:524520

主题:
5
帖子:
115
云币:
1198

足球狗儿童节快乐

发表于 2017-7-29 22:17:13 |
学习了,感谢分享!

主题:
36
帖子:
1240
云币:
16979

我李白贼6

 楼主| 发表于 2017-7-29 22:55:11 |
海量哥 发表于 2017-7-29 22:17
学习了,感谢分享!

后面继续更新

驾校小白

UID:225503

主题:
6
帖子:
36
云币:
19
发表于 2017-7-30 22:01:30 |
xuexile谢谢

主题:
150
帖子:
832
云币:
2548

足球狗

发表于 2017-7-31 09:34:49 |
谢谢川哥回去看看去

主题:
1148
帖子:
5389
云币:
2147208217

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2017-7-31 09:39:42 |
感谢分享

主题:
3
帖子:
525
云币:
340

社会摇圣诞节你吃屎!托马斯全旋装逼侠

发表于 2017-7-31 10:30:00 |
谢谢欧巴

马路杀手

UID:219869

主题:
15
帖子:
246
云币:
436
发表于 2017-7-31 15:30:55 |
感谢分享
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表