Tutorial One Time Password

Kode OTP merupakan salah satu cara transaksi dalam dunia digital sekarang yang di fungsikan sebagai pin untuk keamanan. Biasanya Kode OTP (One time password — kunci digital sekali pakai ) atau pin tersebut di kirim ke nomor telepon atau di hubungi ke telepon kita langsung.

Pada kesempatan kali ini kita akan belajar membuat One Time Password sederhana, tujuan tutorial ini adalah memberikan bayangan untuk teman-teman cara kerja dan pembuatan aplikasi dengan menggunakan kode OTP.

Langsung saja teman-teman buat project baru seperti biasa dan pilih template EmtyActivity.

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<com.chaos.view.PinView
android:id="@+id/pinOtp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="65dp"
android:inputType="number"
app:hideLineWhenFilled="true"
app:itemCount="6"
app:itemWidth="32dp"
app:lineColor="@color/colorPrimary"
app:viewType="line" />

<TextView
android:layout_marginTop="@dimen/pv_pin_view_cursor_width"
android:gravity="center"
android:text="01:30"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</LinearLayout>

</android.support.constraint.ConstraintLayout>
MainActivity.Java
public class MainActivity extends AppCompatActivity {

PinView pinView;

public static final String EXTRA_SMS_NO = "extra_sms_no";
public static final String EXTRA_SMS_MESSAGE = "extra_sms_message";

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

pinView = findViewById(R.id.pinOtp);
pinView.setAnimationEnable(true);
pinView.setCursorVisible(false);

inputOtp();
}

private void inputOtp() {
final String senderMessage = getIntent().getStringExtra(EXTRA_SMS_MESSAGE);
pinView.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {

}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if (s.toString().equals(senderMessage)) {
Intent intent = new Intent(MainActivity.this, HomeActivity.class);
startActivity(intent);
finish();
}
}

@Override
public void afterTextChanged(Editable s) {

}
});
}
}

Akan terjadi beberapa error, biarkan saja dulu, sekarang lanjut buat Activity baru dan beri nama HomeActivity, jadi nanti alurnya ketika kode otp terkirim dan terinput maka langsung pindah ke Activity Home.

activity_home.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context=".HomeActivity">

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

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="HOME"
android:textSize="20sp" />

</LinearLayout>
</android.support.constraint.ConstraintLayout>
HomeActivity.java
package juniafirdaus.com.otpactivity;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class HomeActivity extends AppCompatActivity {

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

sebenernya gak usah saya cantumin codenya karena code tersebut sudah default saat pembuatan class baru :D , biar agak panjangan ajah tutornya :P

selanjutnya kita buat Class Receiver, caranya New -> Other -> Broadcast Receiver, kemudian beri nama OtpReceiver.

OtpReceiver.java
package juniafirdaus.com.otpactivity;

import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.telephony.SmsMessage;
import android.util.Log;

public class OtpReceiver extends BroadcastReceiver {

public OtpReceiver(){

}

@Override
public void onReceive(Context context, Intent intent) {
final Bundle bundle = intent.getExtras();

try {
if (bundle != null) {
final Object[] objects = (Object[]) bundle.get("pdus");
for (int i = 0; i < objects.length; i++) {
SmsMessage smsMessage = getIncomingMessage(objects[i], bundle);
String phoneNumber = smsMessage.getDisplayOriginatingAddress();
String sendNumber = phoneNumber;
String message = smsMessage.getDisplayMessageBody();
Log.i("ISI_SMS", "senderNum: " + sendNumber + "; message: " + message);
Intent showIntent = new Intent(context, MainActivity.class);
showIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
showIntent.putExtra(MainActivity.EXTRA_SMS_NO, phoneNumber);
showIntent.putExtra(MainActivity.EXTRA_SMS_MESSAGE, message);
context.startActivity(showIntent);

}
}
} catch (Exception e) {
Log.e("SmsReceiver", "Exception smsReceiver" + e);
}
}

private SmsMessage getIncomingMessage(Object aObject, Bundle bundle) {
SmsMessage currentSms;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
String format = bundle.getString("format");
currentSms = SmsMessage.createFromPdu((byte[]) aObject, format);
} else {
currentSms = SmsMessage.createFromPdu((byte[]) aObject);
}
return currentSms;
}
}

Selanjutnya masuk ke bagian gradle, tambahkan plugin di antara tag depedency

implementation 'com.chaos.view:pinview:1.4.2'
build.gradle(Modul:app)
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
//add gradle
implementation 'com.chaos.view:pinview:1.4.2'
}

kemudian beralih ke kelas Manifest, dan tambahkan permission di dalamnya

<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.READ_SMS" />

DONE, silahkan running aplikasinya kemudian kirimkan sms berupa kode OTP 6 digit , kemudian masukan kodenya, untuk source code silahkan download di sini

hasil akhir