اضافة خاصية التسجيل عبر رقم الهاتف لتطبيقك _ Sketchware Pro
السلام عليكم
في هذه التدوينة اقدم لك فيها كيف تقوم باضافة خاصية التسجيل الى تطبيقك ويكون عبر رقم الهاتف وكما نعرف ان هذه الخاصية شائعة الاستخدام وتوجد حالياً في تطبيقات مشهورة كواتساب وتليجرام فنبدأ الشرح على بركة الله .
اولاً : نقوم بربط التطبيق بالفايرباس وانتبه على الحزمة ان تكون متشابهة مع الحزمة التي ادخلتها في فايرباس .
ثانياً : نقوم نتوجه الى تطبيق سكيتشوير والى صفحة التصميم وتصمم الشكل الذي يعجبك فنحتاج الى زرين وصندوق ادخال عدد اثنين .
للعلم يمكنك استخدم زر واحد وصندوق واحد سيتم شرحها ان شاء الله .
ثالثاً : ننشئ كتلة اضافية بأي اسم يعجبك ولتكن sendCode وواحدة اخرى بأسم verifyCode
رابعاً : ندخل الى الكتلة الاولى sendCode وستكون خاصة بارسال الكود بعد ادخال رقم الهاتف فننشئ متغير نوع سترنج والاسم يكون phone فنضيف بلوك set الخاص بمتغير سترنج ونضيف في المربع بلوك getText ونعين صندوق الادخال الذي سنكتب به رقم الهاتف وبعدها نضيف بلوك add source directly ونضيف البلوك ادناه .
com.google.firebase.auth.PhoneAuthProvider.getInstance().verifyPhoneNumber(phone, 60, java.util.concurrent.TimeUnit.SECONDS, this, mCallbacks);
}
com.google.firebase.auth.PhoneAuthProvider.OnVerificationStateChangedCallbacks mCallbacks = new com.google.firebase.auth.PhoneAuthProvider.OnVerificationStateChangedCallbacks() {
@Override
public void onVerificationCompleted(com.google.firebase.auth.PhoneAuthCredential phoneAuthCredential) {
SketchwareUtil.showMessage(getApplicationContext(), "تم ارسال كود التحقق");
}
@Override
public void onVerificationFailed(com.google.firebase.FirebaseException e) {
showMessage(e.toString());
}
@Override
public void onCodeSent(String s, com.google.firebase.auth.PhoneAuthProvider.ForceResendingToken forceResendingToken) {
super.onCodeSent(s, forceResendingToken);
codeSent = s;
}
};
{
الصورة ادناه توضح طريقة الاضافة
خامساً : ندخل الى الكتلة الاضافية الثانية verifyCode وستكون مختصة بالتحقق من الكود الذي تم ارساله فننشئ متغيرين نوع سترنج الاول اسمه code والثاني اسمه codeSent فنضيف بلوك set الخاص بمتغير سترنج ونعين الاسم وهو code ونضيف في المربع الخاص به بلوك getText ونعين صندوق الادخال الذي سيكون مختص بأدخال كود التحقق .
بعدها نضيف بلوك add source directly ونضيف الكود ادناه .
com.google.firebase.auth.PhoneAuthCredential credential = com.google.firebase.auth.PhoneAuthProvider.getCredential(codeSent, code);
signInWithPhoneAuthCredential(credential);
}
private void signInWithPhoneAuthCredential(com.google.firebase.auth.PhoneAuthCredential credential) {
auth.signInWithCredential(credential) .addOnCompleteListener(this, _auth_sign_in_listener);
}
{
الصورة ادناه توضح طريقة الاضافة
سادساً : بعد الانتهاء من الخطوات اعلاه نتوجه الى قسم المكونات ونضيف مكون firebase auth ويكون بأسم auth ونضيف مكون انتينت بأي اسم يعجبك .
سابعاً : نتوجه الى حدث onCreate وهنا سنضيف بلوكات للتحقق اذا قمنا بعملية تسجبل الدخول فسيوجهنا تلقائياً الى الصفحة الرئيسية طبعاً تنشئ صفحة ثانية وستكون رئيسية فنضيف بلوك if ونضيف فيه بلوك FirebaseAuth isLoggedIn وهذا البلوك موجود في قسم component اما بالنسبة للبلوكات التي ستضاف داخل بلوك if فستكون بلوكات الانتقال الى الصفحة الرئيسية فتضيف بلوكات الانتقال وتحدد الصفحة الرئيسية كما في الصورة .
ثامناً : واخيراً تجمع التطبيق لكن لم ننتهي الى الان انتهينا حالياً من برمجة التطبيق فحالياً تحتاج الى تحميل تطبيق Dev Tools يمكنك تحميله بالضغط هنا بعد تحميل التطبيق تفتح التطبيق وتضغط على قسم App Info ومن ثم تبحث عن تطبيقك وتدخل اليه فهنا تجد معلوكات عن تطبيقك ما يهمنا هنا هو كودين الاول الصور ادناه توضح الدخول للقسم واظهار الاكواد .
تقوم بنسخ الكودين التي تم توضيحها بالاسهم كما في الصورة أعلاه .
بعد التوصل الى الاكواد تتوجه الى مشروعك على فايرباس وتتوجه الى اعدادات المشروع والى الاسفل تجد نص بلون ازرق Add FingerPrint فتضغط وتضيف الاكواد التي حصلنا عليها من تطبيق Dev Tools الصور ادناه توضح الطريقة .
واخيراً تجرب التطبيق
او يمكنك مشاهدة الشرح على قناتنا
