Android技术知识Android开发Android开发经验谈

短信验证码应用

2018-11-16  本文已影响9人  Jennyni1122

1. 案例概述

此案例主要是短信获取验证码的使用。当应用处于登录注册模块时常常会用到短信验证码这一服务功能。

Demo运行效果如下：

短信验证码.gif

2. 实现步骤

在实现这一功能之前，先简单介绍一个平台：Mob平台。
Mob具有第三方登录分享、短信验证、消息推送等功能，适合于个人开发者测试使用。

Mob平台

主要实现步骤：
1.注册Mob账号，进入后台。
2.获取mob的appkey。（ Mob用户后台使用指南）
3.点击“文档中心”，找到“SMSSDK/Android集成文档”。

文档帮助中心
4.参考Mob文档中心的产品文档/Android/快速集成，进行配置和初始化的操作。

3.关于配置

1.在配置gradle时，切换到Project根目录的build.gradle（注意这里的build.gradle不是app里的），在buildscrip–>dependencies 模块下面添加 classpath ‘com.mob.sdk:MobSDK:+’


build.gradle
配置文件1.png

2、在使用SMSSDK模块的app中的build.gradle中，添加MobSDK插件和扩展。

app中的build.gradle

在android{…… }中的buildTypes{……}下面添加以下代码：

MobSDK

在android{……}最上端添加：

apply plugin

最后，点击Sync Now进行更新，就配置好啦！

4.关于界面

界面只有有两个：短信验证码测试界面和登录界面。

activity_login

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.administrator.testsms.LoginActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:text="测试后显示界面"
        android:textSize="25sp"
        android:textColor="@color/btnCodeColor"/>
</RelativeLayout>

activity_main

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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="25dp"
        app:cardCornerRadius="5dp"
        app:cardElevation="3dp"
        app:cardPreventCornerOverlap="false"
        app:cardUseCompatPadding="true">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <EditText
                android:id="@+id/ed_phone"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/register_edittext_top_radius"
                android:drawablePadding="10dp"
                android:gravity="center_vertical"
                android:hint="请输入手机号码"
                android:paddingLeft="8dp"
                android:singleLine="true"
                android:textColor="#000000"
                android:textColorHint="@color/register_hint_text_color"
                android:textCursorDrawable="@null"
                android:textSize="14sp"/>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/divider_line_color"/>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:gravity="center_vertical">
                <EditText
                    android:id="@+id/ed_code"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity = "center_horizontal"
                    android:background="@drawable/register_edittext_bottom_radius"
                    android:drawablePadding="10dp"
                    android:hint="请输入验证码"
                    android:inputType="textPassword"
                    android:paddingLeft="8dp"
                    android:singleLine="true"
                    android:textColor="#000000"
                    android:textColorHint="@color/register_hint_text_color"
                    android:textCursorDrawable="@null"
                    android:textSize="14sp"/>
                <Button
                    android:id="@+id/btn_getSMSCode"
                    android:onClick="getSMSCode"
                    android:layout_width="wrap_content"
                    android:layout_height="35dp"
                    android:textColor="@android:color/white"
                    android:text="获取验证码"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="8dp"
                    android:background="@drawable/register_btn_getcode"/>
            </RelativeLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>

    <Button
        android:id="@+id/btn_register"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="25dp"
        android:layout_marginTop="15dp"
        android:background="@drawable/register_btn_getcode"
        android:text="测试验证码"
        android:textColor="@android:color/white"
        android:onClick="compareSMSCode"
        android:textSize="18sp"/>

</LinearLayout>

这其中涉及到CardView库的应用。
添加CardView库的方法：
右击项目弹出Opening Moudle Settings/Dependencies/在+中选择Library Dependence/搜索cardview找到其库进行添加。

5.关于逻辑程序

MobSDK初始化

public class MyApplication extends MobApplication {
    @Override
    public void onCreate() {
        super.onCreate();
        MobSDK.init(this);
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private EditText ed_phone;
    private EditText ed_code;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ed_phone = (EditText) findViewById(R.id.ed_phone);
        ed_code = (EditText) findViewById(R.id.ed_code);

        //初始化短信模块
        EventHandler eventHandler = new EventHandler() {
            public void afterEvent(int event, int result, Object data) {
                // afterEvent会在子线程被调用，因此如果后续有UI相关操作，需要将数据发送到UI线程
                Message msg = new Message();
                msg.arg1 = event;
                msg.arg2 = result;
                msg.obj = data;
                new Handler(Looper.getMainLooper(), new Handler.Callback() {
                    @Override
                    public boolean handleMessage(Message msg) {
                        int event = msg.arg1;
                        int result = msg.arg2;
                        Object data = msg.obj;
                        if (event == SMSSDK.EVENT_GET_VERIFICATION_CODE) {
                            Log.e("handleMessage: ", data == null ? "" : data.toString());
                            if (result == SMSSDK.RESULT_COMPLETE) {
                                // TODO 处理成功得到验证码的结果
                                // 请注意，此时只是完成了发送验证码的请求，验证码短信还需要几秒钟之后才送达

                                Toast.makeText(MainActivity.this, "验证码已发送", Toast.LENGTH_SHORT).show();
                            } else {
                                // TODO 处理错误的结果
                                ((Throwable) data).printStackTrace();
                                Toast.makeText(MainActivity.this, "验证码发送失败", Toast.LENGTH_SHORT).show();
                            }
                        } else if (event == SMSSDK.EVENT_SUBMIT_VERIFICATION_CODE) {
                            Log.e("handleMessage: ", data == null ? "" : data.toString());
                            if (result == SMSSDK.RESULT_COMPLETE) {
                                // TODO 处理验证码验证通过的结果
                                Toast.makeText(MainActivity.this, "验证码验证成功", Toast.LENGTH_SHORT).show();

                                Intent intent = new Intent(MainActivity.this,LoginActivity.class);
                                startActivity(intent);
                            } else {
                                // TODO 处理错误的结果
                                ((Throwable) data).printStackTrace();
                                Toast.makeText(MainActivity.this, "验证码验证失败", Toast.LENGTH_SHORT).show();
                            }
                        }
                        // TODO 其他接口的返回结果也类似，根据event判断当前数据属于哪个接口
                        return false;
                    }
                }).sendMessage(msg);
            }
        };
        SMSSDK.registerEventHandler(eventHandler);

    }

    /**
     * 获取验证码
     *
     * @param view
     */
    public void getSMSCode(View view) {
        if (ed_phone.getText().toString().length() == 0 && ed_phone.getText().toString().length() != 11) {
            Toast.makeText(this, "请输入手机号", Toast.LENGTH_SHORT).show();
            return;
        }
        SMSSDK.getVerificationCode("86", ed_phone.getText().toString());
    }

    /**
     * 验证验证码
     *
     * @param view
     */
    public void compareSMSCode(View view) {
        if (ed_phone.getText().toString().length() == 0 && ed_phone.getText().toString().length() != 11) {
            Toast.makeText(this, "请输入手机号", Toast.LENGTH_SHORT).show();
            return;
        }
        if (ed_phone.getText().toString().length() == 0) {
            Toast.makeText(this, "请输入手机号", Toast.LENGTH_SHORT).show();
            return;
        }
        SMSSDK.submitVerificationCode("86", ed_phone.getText().toString(), ed_code.getText().toString());
    }
}

LoginMainActivity暂不用编写。

权限设置

    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.READ_PROFILE" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />

彩蛋：短信验证码Demo点击下载处~

上一篇 下一篇

猜你喜欢

热点阅读