利用Bmob公司的云服务实现获取短信验证码登录操作

/**
 * 目标要求：输入手机号，点击获取验证码，用户把验证码填写完毕，点击登录
 * 细节：
 * 1、输入手机号时，判断是不是11位手机号，不是11位，当点击获取
 * 验证码按钮时则提示-->请输入11位有效手机号码，是11位，则进行点击获取验
 * 证码操作，并提示验证码已发送，请尽快使用
 * 2、当进行获取验证码操作后，获取验证码按钮变成灰色，且不可点击，并进行
 * 倒计时操作，倒计时1分钟后可以重新点击，再次发送验证码
 * 3、点击登录按钮时，若手机号和验证码有一个为空，则提示手机号与验证码
 * 不能为空，若验证码已填写，则判断用户填写所验证码与系统发送验证码是否一致，
 * 一致则提示登录成功，错误则提示验证码输入错误*/

准备工作：首先要在bmob公司注册一个帐号，然后进入bmob网站的下载页面，下载Android短信SDK压缩包到本地，解压之后有一个

BmobSMS_V1.0.1_20150710.jar文件，把这个jar包放到IDE的libs目录下，eclipse直接放到libs目录下即可，android studio导入jar包的操作见我之前的文章有详细的步骤，jar包导入成功之后进行BmobSMS的初始化：

BmobSMS.initialize(MainActivity.this, "336be8699869f10b984f71c0c3cdb91a");第一个参数为上下文，第二个参数为你在bmob所建立的网络应用的application Id，那么怎么在bmob网站建立网络应用呢，用文字也说不清楚，大家去慕课网看一个视频就会了，这是视频地址点击打开链接，初始化完毕之后，第二个应该考虑的就是如何获取短信验证码以及相关判断的问题，这个问题直接用代码说明，第三个应该考虑的就是倒计时的问题，这里倒计时利用的是android自己的api：CountDownTimer()，用这个类的时候要实现两个方法，这个类的用法以及两个方法的说明在代码中会有详细注释，这里不再赘述，同时为了界面美观好看，用到了自定义控件，下面上代码:

MainActivity.java代码：
<pre name="code" class="java">package com.example.administrator.demo;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import cn.bmob.sms.BmobSMS;
import cn.bmob.sms.exception.BmobException;
import cn.bmob.sms.listener.RequestSMSCodeListener;
import cn.bmob.sms.listener.VerifySMSCodeListener;

public class MainActivity extends Activity implements View.OnClickListener {
    private EditText userName_et, passWord_et;
    private Button Message_btn, login_btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initBomb();
        initView();
        initEvent();
    }

    private void initEvent() {
        login_btn.setOnClickListener(this);
        Message_btn.setOnClickListener(this);
    }

    /**
     * 目标要求：输入手机号，点击获取验证码，用户把验证码填写完毕，点击登录
     * 细节：
     * 1、输入手机号时，判断是不是11位手机号，不是11位，当点击获取
     * 验证码按钮时则提示-->请输入11位有效手机号码，是11位，则进行点击获取验
     * 证码操作，并提示验证码已发送，请尽快使用
     * 2、当进行获取验证码操作后，获取验证码按钮变成灰色，且不可点击，并进行
     * 倒计时操作，倒计时1分钟后可以重新点击，再次发送验证码
     * 3、点击登录按钮时，若手机号和验证码有一个为空，则提示手机号与验证码
     * 不能为空，若验证码已填写，则判断用户填写所验证码与系统发送验证码是否一致，
     * 一致则提示登录成功，错误则提示验证码输入错误
     */
    private void initBomb() {
        BmobSMS.initialize(MainActivity.this, "336be8699869f10b984f71c0c3cdb91a");
    }

    @Override
    public void onClick(View v) {
        Log.e("MESSAGE:", "1");
        String userName = userName_et.getText().toString();
        String passWord = passWord_et.getText().toString();
        switch (v.getId()) {
            case R.id.Message_btn:
                Log.e("MESSAGE:", "2");
                if (userName.length() != 11) {
                    Toast.makeText(this, "请输入11位有效手机号码", Toast.LENGTH_SHORT).show();
                }
                else {
                    Log.e("MESSAGE:", "3");
                    //进行获取验证码操作和倒计时1分钟操作
                    BmobSMS.requestSMSCode(this, userName, "短信模板", new RequestSMSCodeListener() {
                        @Override
                        public void done(Integer integer, BmobException e) {
                            if (e == null) {
                                //发送成功时，让获取验证码按钮不可点击，且为灰色
                                Message_btn.setClickable(false);
                                Message_btn.setBackgroundColor(Color.GRAY);
                                Toast.makeText(MainActivity.this, "验证码发送成功，请尽快使用", Toast.LENGTH_SHORT).show();
                                /**
                                 * 倒计时1分钟操作
                                 * 说明：
                                 * new CountDownTimer(60000, 1000),第一个参数为倒计时总时间，第二个参数为倒计时的间隔时间
                                 * 单位都为ms，其中必须要实现onTick()和onFinish()两个方法，onTick()方法为当倒计时在进行中时，
                                 * 所做的操作，它的参数millisUntilFinished为距离倒计时结束时的时间，以此题为例，总倒计时长
                                 * 为60000ms,倒计时的间隔时间为1000ms，然后59000ms、58000ms、57000ms...该方法的参数
                                 * millisUntilFinished就等于这些每秒变化的数，然后除以1000，把单位变成秒，显示在textView
                                 * 或Button上，则实现倒计时的效果，onFinish()方法为倒计时结束时要做的操作，此题可以很好的
                                 * 说明该方法的用法，最后要注意的是当new CountDownTimer(60000, 1000)之后，一定要调用start()
                                 * 方法把该倒计时操作启动起来，不调用start()方法的话，是不会进行倒计时操作的
                                 */
                                new CountDownTimer(60000, 1000) {
                                    @Override
                                    public void onTick(long millisUntilFinished) {
                                        Message_btn.setBackgroundResource(R.drawable.button_shape02);
                                        Message_btn.setText(millisUntilFinished / 1000 + "秒");
                                    }

                                    @Override
                                    public void onFinish() {
                                        Message_btn.setClickable(true);
                                        Message_btn.setBackgroundResource(R.drawable.button_shape);
                                        Message_btn.setText("重新发送");
                                    }
                                }.start();
                                Log.e("MESSAGE:", "4");
                            }
                            else {
                                Toast.makeText(MainActivity.this, "验证码发送失败，请检查网络连接", Toast.LENGTH_SHORT).show();
                            }
                        }
                    });

                }
                break;
            case R.id.login_btn:
                Log.e("MESSAGE:", "5");
                if (userName.length() == 0 || passWord.length() == 0 || userName.length() != 11) {
                    Log.e("MESSAGE:", "6");
                    Toast.makeText(this, "手机号或验证码输入不合法", Toast.LENGTH_SHORT).show();
                }
                else {
                    BmobSMS.verifySmsCode(this, userName, passWord, new VerifySMSCodeListener() {
                        @Override
                        public void done(BmobException e) {
                            if (e == null) {
                                Log.e("MESSAGE:", "7");
                                Toast.makeText(MainActivity.this, "登录成功", Toast.LENGTH_SHORT).show();
                            }
                            else {
                                Log.e("MESSAGE:", "8");
                                Toast.makeText(MainActivity.this, "验证码错误", Toast.LENGTH_SHORT).show();
                            }
                        }
                    });
                }
                break;
        }
    }

    private void initView() {
        userName_et = (EditText) findViewById(R.id.userName_et);
        passWord_et = (EditText) findViewById(R.id.passWord_et);
        Message_btn = (Button) findViewById(R.id.Message_btn);
        login_btn = (Button) findViewById(R.id.login_btn);
    }

}

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <EditText
        android:id="@+id/userName_et"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="手机号码"
        android:layout_marginTop="100dp"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp"
        android:inputType="number"
        android:maxLength="11"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/passWord_et"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="验证码"
            android:layout_marginLeft="20dp"
            android:inputType="number"
            android:layout_weight="1"
            />

        <Button
            android:id="@+id/Message_btn"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:layout_alignParentRight="true"
            android:text="获取验证码"
            android:textSize="8sp"
            android:layout_marginRight="20dp"
            android:textColor="@android:color/white"
            android:background="@drawable/button_shape"
            android:layout_gravity="center"
            android:clickable="true"
            />
    </LinearLayout>

    <Button
        android:id="@+id/login_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"
        android:layout_marginRight="50dp"
        android:layout_marginLeft="50dp"
        android:background="@drawable/button_style"
        android:textColor="@android:color/white"
        android:layout_marginTop="30dp"/>
</LinearLayout>
下面是自定义控件的代码：

button_style.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_shape"
          android:state_pressed="false"
        />

    <item android:drawable="@drawable/button_shape01"
          android:state_pressed="true"/>

</selector>
button_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- 填充的颜色 -->
         <solid android:color="#6495ED"/>
    <!-- 设置按钮的四个角为弧形 -->
    <!-- android:radius 弧形的半径 -->
    <corners android:radius="5dp"/>
    <!--<stroke
        android:width="0.5dp"
        android:color="@android:color/white"
        />-->
    <!--android:color=""给边界线赋颜色，android:width="0.5dp"给边界线赋宽度-->

    <!-- padding：Button里面的文字与Button边界的间隔 -->
   <!-- <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"
        />-->
</shape>
button_shape01.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- 填充的颜色 -->
         <solid android:color="@android:color/holo_red_light"/>
    <!-- 设置按钮的四个角为弧形 -->
    <!-- android:radius 弧形的半径 -->
    <corners android:radius="5dp"/>
    <!--<stroke
        android:width="0.5dp"
        android:color="@android:color/white"
        />-->
    <!--android:color=""给边界线赋颜色，android:width="0.5dp"给边界线赋宽度-->

    <!-- padding：Button里面的文字与Button边界的间隔 -->
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"
        />
</shape>
button_shape02.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- 填充的颜色 -->
         <solid android:color="@android:color/darker_gray"/>
    <!-- 设置按钮的四个角为弧形 -->
    <!-- android:radius 弧形的半径 -->
    <corners android:radius="5dp"/>
    <!--<stroke
        android:width="0.5dp"
        android:color="@android:color/white"
        />-->
    <!--android:color=""给边界线赋颜色，android:width="0.5dp"给边界线赋宽度-->

    <!-- padding：Button里面的文字与Button边界的间隔 -->
   <!-- <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"
        />-->
</shape>
代码部分完毕，下面看看运行效果：

初始界面：

获取验证码界面：

倒计时完毕界面：



输入验证码登录界面：