使用apicloud实现注册功能和短信验证功能

一、建立注册页面

1.首先打开APICloudStudio,新建apicloud项目,选择空百应用。
2.然后写注册页面,截图如下:

注册页面.jpg

二、加载短信模块和使用短信验证码功能

var isinerval, times;
        var smsVerify = null;
        
        apiready = function() {
            api.parseTapmode();
            smsVerify = api.require('smsVerify');
            // 初始化
            register();
        }
        // 注册,初始化
        function register() {
            smsVerify.register(function(ret, err) {
                if (ret.status) {
                    //api.alert({msg: '注册成功'});
                    console.log('注册成功');
                } else {
                    api.alert({
                        msg : err.code + ' 注册失败'
                    });
                }
            });
        }

// 发短信验证码
        function sms() {
            var mobile = document.getElementById("mobile").value;
            smsVerify.sms({
                phone : mobile,
            }, function(ret, err) {
                if (ret.status) {
                    // 新增的安卓智能验证功能
                    api.alert({
                        msg : '短信发送成功'
                    });
                    var sendVerify = $api.byId('sendVerify');
                    var status = $api.attr(sendVerify, 'status');
                    
                    if (status != 1) {
                        return;
                    }
                    
                    $api.removeAttr(sendVerify, 'onclick');
                    api.parseTapmode();
                    $api.html(sendVerify, '<span id="GetVerify">20</span>S');
                    times = 19;
                    
                    isinerval = setInterval("CountDown()", 1000);
                } else {
                    api.alert({
                        msg : err.code + ' 短信发送失败'
                    });
                }
            });
        }

二、注册页面功能实现

1.当点击下一步的时候判断手机号 和验证码,密码,和确认密码的是否为空.
写if判断

function next() {
            var mobile = $api.byId('mobile').value;
            var password = $api.byId("password").value;
            var password2 = $api.byId("password2").value;
            var code = $api.byId("code").value;
            
            if ($api.byId('mobile').value.length == 0) {
                $api.byId('mobile').focus();
                api.toast({
                    msg : '手机号不能为空!'
                });
                return;
            } else if ($api.byId('code').value.length == 0) {
                $api.byId('code').focus();
                api.toast({
                    msg : '请输入验证码!'
                });
                return;
            } else if ($api.byId('password').value.length == 0) {
                $api.byId('password').focus();
                api.toast({
                    msg : '密码不能为空!'
                });
                return;
            } else if ($api.byId('password2').value.length == 0) {
                $api.byId('password2').focus();
                api.toast({
                    msg : '请输入确认密码!'
                });
                return;
            } else if ($api.byId('password').value != $api.byId('password2').value) {
                $api.byId('password').focus();
                api.toast({
                    msg : '两次密码不一致,请重新输入!'
                });
                return;
            }
            

2.当验证码等信息输入正确后,会向服务器发起ajax,然后数据库里插入注册的数据,具体代码如下;

//html端代码
    api.ajax({
            url : 'xxl',
            method : 'post',
            cache : false,
            timeout : 30,
            dataType : 'json',
            data : {
                values : {
                    mobile : mobile,
                    password : password
                }
            }
        }, function(ret, err) {
            if (ret.msg == 1) {
                //存储新注册的用户id到本地storage中
                $api.setStorage('user_id', ret.id);
                alert('注册成功')
            } else {
                api.alert({
                    msg : ('错误码:' + err.code + ';错误信息:' + err.msg + '网络状态码:' + err.statusCode)
                });
            };
        });
//服务端代码
public function index() {

        // echo "获取数据中";
        $mobile=json_decode($_POST['mobile']);
        $password=json_decode($_POST['password']);  
     
        $users_model=M("Users");
        $where['mobile']=$mobile;
        $result=$users_model->where($where)->count();

        if($result){
           $res=array('msg'=>"手机号已经被注册");
            echo json_encode($res);
        }else{

            $data=array(
                'user_login' => '',
                'user_email' => '',
                'mobile' =>$mobile,
                'user_nicename' =>'',
                'user_pass' => sp_password($password),
                'last_login_ip' => '',
                'create_time' => date("Y-m-d H:i:s"),
                'last_login_time' => date("Y-m-d H:i:s"),
                'user_status' => 1,
                "user_type"=>2,//会员
            );

            $rst = $users_model->add($data);


            if($rst){
                //注册成功后页面跳转
                $res=array('msg'=>1,'id'=>$rst);
                echo json_encode($res);
            
            }else{
                $res=array('msg'=>"注册失败");
                echo json_encode($res);
            }
        
    
        }

    }

三、 短信功能的实现步骤

1、先去mob官网注册帐号;
2、进入短信管理后台分别添加Android和iOS应用,并获取应用的AppKey和AppSecret(老以前创建的应用不能使用此模块,因为此模块SDK为2.0+,不兼容SDK1.x时代创建的应用。);
3、在APICloud应用控制台的模块列表里搜索smsVerify并添加;
4、以源码方式打开你的项目config.xml文件,在里面添加smsVerify模块的配置,配置内容为上面获取的AppKey和AppSecret,格式如下:

1.  <feature name="smsVerify">

2.  <param name="android_app_key" value="xxl"/>

3.  <param name="android_app_secret" value="xxl"/>

4.  <param name="ios_app_key" value="xxl"/>

5.  <param name="ios_app_secret" value="xxl"/>

6.  </feature>

5、SVN提交源码到APICloud的云端;
6、在 APICloud Studio 上编译自定义loader;
7、现在你就可以使用smsVerify模块进行开发了,不过需要注意的是,<font color="#ff0000" style="word-wrap: break-word;">在调用sms、voice、verify这三个接口前,必须先调用register接口注册应用(调用一次就行了);</font>
8、新版的smsVerify模块(1.1.0及以上)sms接口Android上支持“智能验证”功能,可以通过回调中的 smart 参数的 true|false 进行判断,由于iOS不支持此功能,所以在iOS上 smart 永远返回false。智能验证不会下发短信,通过智能验证的手机号开发者可以直接让用户跳转到验证成功的界面;
PS:验证码的有效时长是5分钟。
<font size="4" style="word-wrap: break-word;"><font color="#ff0000" style="word-wrap: break-word;">另外:iOS版上架的注意事项请看下面链接:</font></font>
http://bbs.mob.com/forum.php?mod=viewthread&tid=20580
http://wiki.mob.com/idfa%E7%9A%8 ... %E5%AE%A1%E6%A0%B8/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容