جار التحديث ...
جار التحديث ...

برمجة صفحة تسجيل عضويه جديده وتحقق بواسطة رقم الهاتف OTP اندرويد ستوديو

  • 1

اسعد الله اوقاتكم جميعا


ماذا احتاج حتى ابرمج صفحة تسجيل عضويه وتحقق يكون بواسطة رقم الهاتف وارسال sms otp مع العلم ان التطبيق متصل بقاعدة بيانات mysql على سيرفر محلي لوكل هوست Wamp Server


(اندرويد ستوديو)


هل يوجد شرح لعمل ذلك؟

إجابات المستخدمين (1)


  • مسؤول
  • عضو جديد
  • قبل أشهر 3

يحصل مستخدمو مصادقة رقم هاتف Firebase على رسالة نصية قصيرة تحتوي على رمز لمرة واحدة لتسجيل الدخول.

لبدء مصادقة رقم الهاتف ، نحتاج أولاً إلى إعداد مشروع Firebase وإضافة تطبيقنا إليه

اتبع هذه الخطوات:

--    اذهب إلى  https://console.firebase.google.com

--    اضغط على Add project

--    ادخل اسم المشروع واختر البلد/المنطقة ثم اضغط على Create Project

--    اضغط على Add Firebase to your Android app

--    أدخل التفاصيل التالية في النافذة المنبثقة :

** اسم حزمة مشروع الأندرويد

** مفتاح SHA-1  لنظامك

** اعطِ اسماً لتطبيقك

** اضغط على REGISTER APP

الآن بعد أن قمت بتسجيل التطبيق الخاص بك ؛ قم بتنزيل google-services.json ووضعه في مجلد التطبيق الخاص بالتطبيق.

مشروعك جاهز الآن لاستخدام خدمات Firebase ، لذلك دعونا نبدأ ببعض الإضافات إلى Gradle.

1- في مستوى المشروع build.gradle  نضيف ما يلي :

buildscript {
dependencies {
// Add this line

classpath
'com.google.gms:google-services:3.1.0' }
}

2- في مستوى التطبيق build.gradle  نضيف ما يلي :

apply plugin: 'com.google.gms.google-services'

ونقوم بمزامنة المشروع.

بمجرد اكتمال إعداد Firebase ، انتقل إلى وحدة console Firebase واتبع الخطوات التالية:

أضغط على Develop  من القائمة اليسارية ثم اضغط على Authentication

انتقل إلى SIGN-IN METHOD

قم بتفعيل مصادقة الهاتف

أضف هذه الإضافة وقم بمزامنة التطبيق

compile 'com.google.firebase:firebase-auth:11.6.2'

لنبدأ بإنشاء واجهة مستخدم أساسية للغاية مع اثنين من EditText ، أحدهما للحصول على رقم الهاتف والآخر للحصول على رمز التحقق المستلم. أضف أيضًا زرين لبدء كلتا العمليتين (إرسال OTP والتحقق من OTP).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:layout_margin="8dp"
android:orientation="vertical"
tools:context="com.fobbles.firebasephoneauthsample.FirebasePhoneActivity">
<EditText
android:id="@+id/et_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="22dp"
android:ems="10"
android:inputType="phone"
android:hint="Enter phone number" />
<Button
android:id="@+id/bt_send_otp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="Send Otp" />
<Button
android:id="@+id/bt_resend_otp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="Resend OTP" />
<EditText
android:id="@+id/et_otp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:ems="6"
android:inputType="number"
android:hint="Enter verification OTP" />
<Button
android:id="@+id/bt_verify_otp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="Verify OTP" />
</LinearLayout>

في ملف Java ، لنبدأ من خلال إعداد البنية الأساسية:

public class FirebasePhoneActivity extends AppCompatActivity implements View.OnClickListener {
EditText etPhone, etOtp;
Button btSendOtp, btResendOtp, btVerifyOtp;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_firebase_phone);
initFields();
}
void initFields() {
etPhone = findViewById(R.id.
et_phone);
etOtp = findViewById(R.id.
et_otp);
btSendOtp = findViewById(R.id.
bt_send_otp);
btResendOtp = findViewById(R.id.
bt_resend_otp);
btVerifyOtp = findViewById(R.id.
bt_verify_otp);
btResendOtp.setOnClickListener(this);
btVerifyOtp.setOnClickListener(this);
btSendOtp.setOnClickListener(this);
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.
bt_send_otp:
break;
case R.id.
bt_resend_otp:
break;
case R.id.
bt_verify_otp:
break;
}
}
}

الآن ، للبدء في تهيئة Firebase auth أضف التعليمات البرمجية التالية:

//Add it below the lines where you declared the fields
private FirebaseAuth mAuth;
//Add it in the onCreate method, after calling method initFields()
mAuth = FirebaseAuth.
getInstance();

أضف الطريقة التالية من Firebase للحصول على تحديثات حول حالة عملية التحقق:

PhoneAuthProvider.OnVerificationStateChangedCallbacks mCallbacks;///Add this method below auth initialization in the onCreate method.

void initFireBaseCallbacks() {

    mCallbacks = new PhoneAuthProvider.OnVerificationStateChangedCallbacks() {

        @Override

        public void onVerificationCompleted(PhoneAuthCredential credential) {

            Toast.

makeText(FirebasePhoneActivity.this, "Verification Complete", Toast.LENGTH_SHORT).show();

        }

        @Override

        public void onVerificationFailed(FirebaseException e) {

            Toast.

makeText(FirebasePhoneActivity.this, "Verification Failed", Toast.LENGTH_SHORT).show();

        }

        @Override

        public void onCodeSent(String verificationId,

                               PhoneAuthProvider.ForceResendingToken token) {

            Toast.

makeText(FirebasePhoneActivity.this, "Code Sent", Toast.LENGTH_SHORT).show();

        }

    };

}


يتم استدعاء هذه الطرق في حالات مختلفة:

onVerificationCompleted  : تستدعى هذه الطريقة عند إجراء التحقق دون تفاعلات المستخدم ؛ على سبيل المثال - يتم التحقق من المستخدم دون رمز أو عندما يتم اعتراض خدمات الرسائل القصيرة من Google Play والتحقق منها من تلقاء نفسها.

onVerificationFailed  : يتم استدعاء هذه الطريقة في حالات الفشل مثل إرسال الرسائل النصية القصيرة أو فشل تنسيق الأرقام.

onCodeSent  : تستدعى هذه الطريقة عندما يتم إرسال الرسائل القصيرة بنجاح إلى الرقم.

الآن لنبدأ عملية التحقق: عند النقر على زر إرسال OTP ، نحتاج إلى الحصول على رقم الهاتف الذي تم إدخاله ونقله إلى PhoneAuthProvider.verifyPhoneNumber واطلب رسالة طلب Firebase للتحقق منه.

case R.id.bt_send_otp:
PhoneAuthProvider.
getInstance().verifyPhoneNumber(
etPhone.getText().toString(), // Phone number to verify
1, // Timeout duration
TimeUnit.MINUTES, // Unit of timeout
this, // Activity (for callback binding)
mCallbacks); // OnVerificationStateChangedCallbacks
break;

البارمترات المطلوبة :

Phone number(String), Timeout duration(long), Unit for timeout(TimeUnit(Enum)), Context of the activity, Object of OnVerificationStateChangedCallbacks

لنقم باختبار الرمز المكتوب. قم بتشغيل التطبيق وأدخل رقم هاتفك. انقر على زر إرسال OTP. سوف تتلقى رسالة نصية قصيرة إذا كنت قد اتبعت الخطوات بشكل صحيح.

للتحقق من الرسائل القصيرة ، نحتاج إلى الرمز الفريد الذي تم استلامه في SMS ، والتحقق الذي حصلنا عليه في طريقة onCodeSent عندما يتم إرسال الرسائل القصيرة بنجاح.

قم بإنشاء متغير سلسلة خاص بالحزمة (mVerificationId) لحفظ معرف التحقق لاستخدامه مرة أخرى. قم بتحديث الكود كما يلي:

//Add this on top where other variables are declared

String mVerificationId;

@Override

public void onCodeSent(String verificationId,

                       PhoneAuthProvider.ForceResendingToken token) {

    Toast.

makeText(FirebasePhoneActivity.this, "Code Sent", Toast.LENGTH_SHORT).show();

    mVerificationId = verificationId; //Add this line to save //verification Id

}


أضف الكود التالي للتحقق من المستخدم:


case R.id.bt_verify_otp:

    PhoneAuthCredential credential = PhoneAuthProvider.

getCredential(mVerificationId, etOtp.getText().toString());    mAuth.signInWithCredential(credential)

            .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {

                @Override

                public void onComplete(@NonNull Task<AuthResult> task) {

                    if (task.isSuccessful()) {

                        Toast.

makeText(FirebasePhoneActivity.this, "Verification Success", Toast.LENGTH_SHORT).show();

                    } else {

                        if (task.getException() instanceof FirebaseAuthInvalidCredentialsException) {

                            Toast.

makeText(FirebasePhoneActivity.this, "Verification Failed, Invalid credentials", Toast.LENGTH_SHORT).show();

                        }

                    }

                }

            });

    break;





عندما تقوم بإنشاء كائن PhoneAuthCredential باستخدام verificationId ورمز فريد تتلقاه في الرسالة القصيرة.

هذا الكائن يحتاج أن يمرر إلى الطريقة signInWithCredential من FirebaseAuth للتحقق من التفاصيل. للتحقق من النجاح أو الفشل نحتاج إلى تنفيذ addOnCompleteListener كما هو الحال في الكود أعلاه. للحصول على كائن المستخدم عند تسجيل الدخول بنجاح ، استخدم الكود أدناه:

if (task.isSuccessful()) {
FirebaseUser user = task.getResult().getUser();
}

لتسجيل خروج مستخدم بعد تسجيل دخول ناجح ، استخدم الكود أدناه:

case R.id.bt_sign_out:
FirebaseAuth.getInstance().signOut();
Toast.makeText(FirebasePhoneActivity.this, "Signing out ", Toast.LENGTH_SHORT).show();
break;


إذا فشل المستخدمون في تلقي رمز التحقق SMS ، فسوف يرغبون في إعادة إرسال رسالة التحقق SMS. لتنفيذ هذا ، نحن بحاجة إلى استدعاء الطريقة verifyPhoneNumber  ثانيةً الآن مع resendToken التي تلقيناها في طريقة onCodeSent:

//Add this on top where other variables are declared

PhoneAuthProvider.ForceResendingToken mResendToken;

@Override

public void onCodeSent(String verificationId,

                       PhoneAuthProvider.ForceResendingToken token) {

    Toast.

makeText(FirebasePhoneActivity.this, "Code Sent", Toast.LENGTH_SHORT).show();

    mVerificationId = verificationId;

    mResendToken = token; //Add this line to save the resend token

}


الآن استخدم الطريقة verifyPhoneNumber  مع البارامتر الإضافي resendToken

case R.id.bt_resend_otp:
PhoneAuthProvider.
getInstance().verifyPhoneNumber(
etPhone.getText().toString(), // Phone number to verify
1 , // Timeout duration
TimeUnit.
MINUTES, // Unit of timeout
this, // Activity (for callback binding)
mCallbacks, // OnVerificationStateChangedCallbacks
mResendToken); // Force Resending Token from callbacks
break;

ملاحظة: سيتم إعادة إرسال رمز OTP فقط عند انتهاء صلاحية رمز OTP الأصلي أو انقضاء مهلة ، والتي ستكون في هذه الحالة دقيقة واحدة.



  • 0
رد على التعليق (0)

الردود :


لا يوجد ردود بعد


سجل الدخول لاضافة رد
سجل الدخول لاضافة اجابة جديدة