Discuz! Board

 找回密码
 注册
查看: 2218|回复: 10

APP开发有障碍?一分钟搞定注册和登录功能!

  [复制链接]

主题

帖子

0

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
0
发表于 2016-3-10 19:41:32 | 显示全部楼层 |阅读模式

使用心得:如何在369Cloud上快速开发一个简单应用的APP?如果你是第一次看,建议先去了解下概念,IDE整合做的还不错。其他的就不说了,今天主要想和大家分享下怎么快速搞定注册和登录功能(当然是简化版的)。

准备工作

第1步:你要有一个369Cloud的开发帐号
第3步:获取要创建APP所需要的APPId、APPKey和MasterKey

为嘛一定要注册账号呢?是为了获取APPId、APPKey和MasterKey。有了这些东西后,你才能在369Cloud上创建APP应用。

如图:

1.png

下面我们就来看看怎么快速搞定注册和登录功能。

创建一个注册页面

一个简单的注册页面即可,其中注意导入jquery模块插件,喜欢放哪就看个人喜好了。

2.png

[AppleScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="/static/bootstrap/js/jquery-1.11.3.js"></script>
        <title>注册页面</title>
    </head>
    <body>
        <div>
            <p>
              用户名: <input id="name" type="text"/>
            </p>
            <p>
              密码:<input id="pwd" type="text"/>
            </p>

          <input id="idregister" type="button" value="注册"/>
        </div>
    </body>
    <script type="text/javascript">
        <!--注册方法-->
         function register(){
        <!--首先判断不为空-->
        if(!$('#name').val()) return alert("用户名不能为空") 
        if(!$('#pwd').val()) return alert("密码不能为空") ;
         $.ajax({
            url: 'https://test-api.369cloud.com/v1/auth/reg',
            type: 'post',
            async: false,//使用同步的方式,true为异步方式
            dataType:'json',
            headers:{
                "X-369Cloud-APP-Id":"702855332707434496"//这个就是获取到的APPId
                 ,"X-369Cloud-APP-Key":"c2f1ca8d115b45ffb6d07559f93eaebd"//这个就是获取到的APPKey
            },
            data: {
                "name": $('#name').val()
                ,"pwd":$('#pwd').val()
            },//这里使用json对象
            success: function (data) {
                if(data.status === 1) return alert("注册成功");
                alert("注册失败");
            },
            fail: function () {
                //code here...
            }
        });
         }
    </script>
</html>

当然,这个注册有时还会出现什么要验证手机的。这个问题呢,可以在你创建的应用上设置,默认是不开启验证的,如下图所示:

3.png

手机注册方式

当然使用手机号注测的话,首先要通过验证码验证手机

4.png

[AppleScript] 纯文本查看 复制代码
<div>
            <p>
             用户名: <input id="name" type="text"/>
            </p>
            <p>
              手机号: <input id="tel" type="text"/>
              <input id="gettelcode" type="button" value="获取验证码"/>
            </p>
             <p>
              验证码:<input id="pwd" type="text"/>
            </p>
            <p>
              密码:<input id="pwd" type="text"/>
            </p>

          <input id="idregister" type="button" value="注册"        />
</div>

在上面的块中需要加入一个获取验证码和验证验证码的方法,值得说明的是发送的消息的模板可以自己去定义(不知道在哪的,打开应用,然后选择baas,找到短信服务,都可以找到):

[AppleScript] 纯文本查看 复制代码
function getcode(){
        <!--首先判断不为空-->
        if(!$('#tel').val()) return alert("手机号不能为空")
    /*如果username是电话则url=/v1/auth/mobilecode/:type/:tel,type:表示您发送短信的模版方式(定义自己需要的模板,我这里使用默认的),tel:则是您的电话。 */
         $.ajax({
            url: 'https://test-api.369cloud.com/v1/auth//mobilecode/default/'+$('#tel').val(),
            type: 'get',
            async: false,//使用同步的方式,true为异步方式
            dataType:'json',
            headers:{
                "X-369Cloud-APP-Id":"702855332707434496"
                 ,"X-369Cloud-APP-Key":"c2f1ca8d115b45ffb6d07559f93eaebd"
            },
            data: {
                "tel": $('#username').val()
            },//这里使用json对象
            success: function (data) {
                if(data.status === 1) return alert("注册成功");
                alert("注册失败");
            },
            fail: function () {
                //code here...
            }
        });
         }
         //提交手机注册内容
         function registerByMobileByOne(){
         //首先验证那些值
         //其次主要的还是url改为 url:'https://test-api.369cloud.com/v1/auth/regmobilebyone'
         //判断返回结果
         }

OK,这样我们就完成了通过手机去注册账号。

创建一个登录页面

登录有两种方式一种是用户名和密码登录,另一种就是通过收验证码进行验证登录。创建一个与注册页面差不多的登录页面:
5.png

[AppleScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="/static/bootstrap/js/jquery-1.11.3.js"></script>
        <title>登录页面</title>
    </head>
    <body>
        <div>
            <p>
              用户名: <input id="name" type="text"/>
            </p>
            <p>
              密码:<input id="pwd" type="text"/>
            </p>

          <input id="idlogin" type="button" value="登录"/>
        </div>
    </body>
    <script type="text/javascript">
        <!--登录方法-->
     function login(){
        <!--首先判断不为空-->
        if(!$('#name').val()) return alert("用户名不能为空")
        if(!$('#pwd').val()) return alert("密码不能为空") ;
         $.ajax({
            url: 'https://test-api.369cloud.com/v1/auth/login',
            type: 'post',
            async: false,//使用同步的方式,true为异步方式
            dataType:'json',
            headers:{
                "X-369Cloud-APP-Id":"702855332707434496"//这个就是获取到的APPId
                 ,"X-369Cloud-APP-Key":"c2f1ca8d115b45ffb6d07559f93eaebd"//这个就是获取到的APPKey
            },
            data: {
                "code": $('#name').val()
                ,"pwd":$('#pwd').val()
            },//这里使用json对象
            success: function (data) {
                if(data.status === 1) return alert("登录成功");
                alert("登录失败");
            },
            fail: function () {
                //code here...
            }
        });
         }
    </script>
</html>

上面这个就是简单的通过用户名和密码登录的方法分享。发现在请求的data中用的是code了吧,这个意思就是这个用户名,可以是你的用户名或者手机。所以当你不记得用户名了没关系,用你手机号也一样。

下面则介绍使用验证码登录:得改改上面的模块,页面如下:
6.png

[AppleScript] 纯文本查看 复制代码
<body>
    <div>
            <p>
              手机号: <input id="tel" type="text"/>
               <input id="gettelcode" type="button" value="获取验证码"/>
            </p>
            <p>
              验证码:<input id="code" type="text"/>
            </p>

          <input id="idlogin" type="button" value="登录"/>

        </div>
</body>

首先还是获取验证码,方法就是上面注册时使用的方法(忘记的往上看),然后根据验证码进行登陆:

[AppleScript] 纯文本查看 复制代码
<script type="text/javascript">
        <!--登录方法-->
     function LoginByMobile(){
        <!--首先判断不为空-->
        if(!$('#tel').val()) return alert("手机号不能为空")
        if(!$('#code').val()) return alert("验证码不能为空") ;
         $.ajax({
            url: 'https://test-api.369cloud.com/v1/auth/mobilelogin',
            type: 'post',
            async: false,//使用同步的方式,true为异步方式
            dataType:'json',
            headers:{
                "X-369Cloud-APP-Id":"702855332707434496"//这个就是获取到的APPId
                 ,"X-369Cloud-APP-Key":"c2f1ca8d115b45ffb6d07559f93eaebd"//这个就是获取到的APPKey
            },
            data: {
                "tel": $('#tel').val()
                ,"code":$('#code').val()
            },//这里使用json对象
            success: function (data) {
                if(data.status === 1) return alert("登录成功");
                alert("登录失败");
            },
            fail: function () {
                //code here...
            }
        });
         }
    </script>

这里的code可是验证码,而不是像上面那个code一样。

好了,以上就是简单的关于注册和登录功能这块的分享了,欢迎大家吐槽。。。

回复

使用道具 举报

主题

帖子

0

积分

版主

Rank: 7Rank: 7Rank: 7

积分
0
发表于 2016-3-10 20:02:18 | 显示全部楼层
抢个沙发
回复

使用道具 举报

主题

帖子

0

积分

新手上路

Rank: 1

积分
0
发表于 2016-3-11 16:20:03 | 显示全部楼层
围观
回复

使用道具 举报

主题

帖子

0

积分

新手上路

Rank: 1

积分
0
发表于 2016-3-14 15:53:02 | 显示全部楼层
很棒的分享,围观
回复 支持 反对

使用道具 举报

主题

帖子

0

积分

新手上路

Rank: 1

积分
0
发表于 2016-3-14 17:08:06 | 显示全部楼层
好货,漂亮
回复

使用道具 举报

主题

帖子

0

积分

新手上路

Rank: 1

积分
0
发表于 2016-3-15 10:09:54 | 显示全部楼层
不错 不错
回复

使用道具 举报

主题

帖子

0

积分

新手上路

Rank: 1

积分
0
发表于 2016-3-17 13:55:12 | 显示全部楼层
回复

使用道具 举报

主题

帖子

0

积分

新手上路

Rank: 1

积分
0
发表于 2016-3-29 13:25:40 | 显示全部楼层
看帖回帖是一种美德
回复 支持 反对

使用道具 举报

主题

帖子

0

积分

新手上路

Rank: 1

积分
0
发表于 2016-3-31 17:05:06 | 显示全部楼层
分享的不错,挺清晰,一目了然
回复 支持 反对

使用道具 举报

主题

帖子

0

积分

新手上路

Rank: 1

积分
0
发表于 2016-5-5 09:44:26 | 显示全部楼层
学起来
回复

使用道具 举报

12下一页
发帖
您需要登录后才可以回帖 登录 | 注册

本版积分规则

站内搜索
搜索

官方①群:491311335


技术培训:458029322

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