簡訊驗證碼應用

安卓開發 · 發表 2018-11-16 21:49:31

摘要： 1. 案例概述此案例主要是簡訊獲取驗證碼的使用。當應用處於登入註冊模組時常常會用到簡訊驗證碼這一服務功能。 Demo執行效果如下：簡訊驗證碼.gif 2. 實現步驟在實現這一功能之前，先簡單介紹一個平臺： Mob平臺。 ...

1. 案例概述

此案例主要是簡訊獲取驗證碼的使用。當應用處於登入註冊模組時常常會用到簡訊驗證碼這一服務功能。

Demo執行效果如下：

簡訊驗證碼.gif

2. 實現步驟

在實現這一功能之前，先簡單介紹一個平臺： ofollow,noindex">Mob平臺。

Mob具有第三方登入分享、簡訊驗證、訊息推送等功能，適合於個人開發者測試使用。

Line"/>

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點選下載處~