عملية تسجيل الدخول لتطبيقك الأندرويد بواسطة Google Firebase Auth

بسم الله الرحمن الرحيم

إن شاء الله في هذا الدرس سوف نتعلم كيفية إنشاء نموذج تسجيل الدخول, بإستخدام جوجل فايربيس . وفي دروس متقدمة سوف نتعلم كيف نتعامل مع هذا المستخدم ..

مثلاً : تغيير الإيميل, تغيير كلمة المرور, انشاء اسم مستخدم, وضع صورة شخصية, التحقق من وجود الإيميل, أو اسم المستخدم مسبقاً في القاعدة, إلخ. كذلك سوف نتعلم لاحقاً كيفية تسجيل الدخول عن طريق الفيس بوك أو التويتر بإستخدام جوجل فايربيس.

الآلية التي سوف نقوم بها : اكتفتي رئيسية + اكتفتي اخرى يتم الدخول إليها بعد تسجيل الدخول, في اللياوت الرئيسية يوجد حقل نصي لكتابة البريد الإلكتروني وآخر لكتابة كلمة المرور, في الاكتفتي الرئيسية تم ربط العناصر مع اللياوت, ووضع عدة دوال وعددها (3) واحدة لعملية تسجيل مستخدم, واخرى لعملية تسجيل الدخول, وثالثة للتأكد من إن حقل الإيميل يحتوي على @ + . / ليتم ادخال بريد الكتروني صحيح.

كذلك يوجد زرين, الأول لتطبيق دالة التسجيل, والأخر للدخول. بعد الضغط على الزر الاول لتسجيل العضوية يتأكد من إن حقل الايميل وكلمة المرور ليس فارغاً, إذا كان أحدها فارغاً, تخرج رسالة توست تخبره بذلك, واذا كانت جميع الحقوق ممتلئة, يتم الفحص إذا كان الإيميل سليم ويحتوي على علامة (**@**.**), إذا كان الادخال سليم, يتم الفحص إذا كانت كلمة المرور أطول من 6 أحرف, إذا كانت أطول فسوف تتم عملية التسجيل بنجاح.

وفي حال تم التسجيل بنجاح, يتم اخفاء زر التسجيل, وبعد عملية تسجيل الدخول, إذا كان الادخال خاطئ إي ليس هناك حساب بالمعلومات التي تم تسجيلها تظهر رسالة خطأ, إما في حال تم تسجيل الدخول يتم الانتقال الى الاكتفتي الثاني الذي يحتوي فقط على ترحيب و كذلك جلب الايميل الذي تم التسجيل به.

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

# هذا المثال هو ما سوف نتعلم كيفية انشاءه اليوم, بسيط جداً ولكن أخذ الوقت والجهد لتنفيذه بشكل سليم, بقي عليك الأمور الأخرى لتطوير البرنامج مثل : يتم التحقق اذا كان المستخدم مسجل من قبل ! , لا يتم تفعيل المستخدم إلا بعد الضغط على رابط التفعيل الذي تم ارساله الى بريده الإلكتروني ! , زيادة خانات التسجيل وتخزينها بسيرفر الفايربيس مثل اسم المستخدم والصورة الشخصية, إلخ .. وان شاء الله نتعلم المزيد في دروس قادمة.

في البداية يجب عليك متابعة الدرس التالي وتطبيقه لتجهيز مشروعك الأندرويد : تجهيز مشروعك الأندرويد لاستقبال خدمات جوجل فايربيس Firebase Google

بعد القيام بالخطوات السابقة, سوف نقوم بصنع لياوت نموذج لعملية تسجيل الدخول, ويحتوي على اداة حقل نصي لاسم المستخدم واخرى للبريد الإلكتروني وزر لعملية التسجيل واخر للدخول.

هذا النموذج سوف استخدمه :  activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#66a6f5"
    android:orientation="vertical">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="نموذج تسجيل الدخول"
        android:textSize="25sp"
        android:layout_margin="30dp"
        android:textColor="#424242"
        android:layout_gravity="center_horizontal" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="50dp"
        android:padding="20dp"
        android:background="#ffc3c3c3">

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


            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:layout_width="150dp"
                    android:layout_height="wrap_content"
                    android:inputType="textPersonName"
                    android:ems="10"
                    android:layout_gravity="left"
                    android:gravity="right"
                    android:layout_margin="10dp"
                    android:id="@+id/email" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="البريد الإلكتروني"
                    android:textSize="15sp"
                    android:layout_margin="5dp"
                    android:layout_gravity="center_vertical"
                    android:gravity="center_vertical|right" />

            </LinearLayout>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:layout_width="150dp"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"
                    android:ems="10"
                    android:layout_gravity="left"
                    android:gravity="right"
                    android:layout_margin="10dp"
                    android:id="@+id/password" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="كلمة المرور"
                    android:textSize="15sp"
                    android:layout_margin="5dp"
                    android:layout_gravity="center_vertical"
                    android:gravity="center_vertical|right" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="#ff8cb2fc">

            <Button
                android:id="@+id/login"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:text="تسجيل الدخول"
                android:layout_margin="5dp"
                android:paddingRight="5dp"
                android:paddingLeft="5dp"
                android:background="#ffc3c3c3" />
            <Button
                android:id="@+id/signup"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:text="تسجيل"
                android:layout_margin="5dp"
                android:paddingRight="5dp"
                android:paddingLeft="5dp"
                android:background="#ffc3c3c3" />

        </LinearLayout>


    </LinearLayout>
</LinearLayout>

والآن نذهب إلى الاكتفتي لنقوم بتعريف المتغيرات التي نحتاجها وربطها بالعناصر داخل اللياوت , نقوم بفتح الاكتفتي MainActivity وبوضع هذا السطر خارج الدوال وداخل الكلاس :

EditText USER, EMAIL;
    Button SIGNIN,SIGNUP;

ثم نضع عملية الربط بداخل دالة الاون كريت onCreate :

USER = (EditText) findViewById(R.id.user);
        EMAIL = (EditText) findViewById(R.id.email);
        SIGNIN = (Button) findViewById(R.id.login);
        SIGNUP = (Button) findViewById(R.id.signup);

لاحظ جيداً عملية الربط تمت ما بين المتغيرات في الاكتفتي ومعرفات العناصر في اللياوت.
build.gradle (Module: app) بعد القيام بالخطوات السابقة, نقوم بفتح ملف

وبداخل أوسمة dependencies نقوم بإضافة السطر التالي : ( لتفعيل مكتبة فايربيس للوصول ).

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

# كما لا تنسى أن تقوم بإضافة رقم SHA1 للتطبيق, لمعرفة الكيفية تابع الجزء الأخير من درس : ارسال الإشعارات لمستخدمين تطبيقك الأندرويد بإستخدام جوجل فايربيس

# افتح لوحة التحكم https://console.firebase.google.com/ واختر المشروع الذي تعمل عليه, من القائمة اليسرى توجه إلى Auth ثم  Sign-in Method وقم بتفعيل Email/Password .

والان لنرجع للاكتفتي لنكمل العملية التي بدأنا بها :

نقوم بتعريف وصول للفايربيس, بوضع السطر التالي داخل الكلاس وخارج الدوال :

private FirebaseAuth mAuth;

ثم بداخل دالة الاون كريت onCreate نضع السطر التالي لاستخدام المتغير :

mAuth = FirebaseAuth.getInstance();

بعدها نقوم ببرمجة الأزرار بعد الضغط عليها :

SIGNIN.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if ((TextUtils.isEmpty(EMAIL.getText().toString())) && (TextUtils.isEmpty(PASSWORD.getText().toString()))) {
                    Toast.makeText(getApplicationContext(), "من فضلك تأكد من ادخال البيانات", Toast.LENGTH_SHORT).show();
                }else if (!isEmailValid(EMAIL.getText().toString())){
                    Toast.makeText(getApplicationContext(), "من فضلك أدخل بريد إلكتروني صالح", Toast.LENGTH_SHORT).show();
                } else {
                    SignIn(EMAIL.getText().toString(), PASSWORD.getText().toString());
                }

            }
        });
        SIGNUP.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if ((TextUtils.isEmpty(EMAIL.getText().toString())) || (TextUtils.isEmpty(PASSWORD.getText().toString()))) {
                    Toast.makeText(getApplicationContext(), "من فضلك تأكد من ادخال البيانات", Toast.LENGTH_SHORT).show();
                }else if (!isEmailValid(EMAIL.getText().toString())){
                    Toast.makeText(getApplicationContext(), "من فضلك أدخل بريد إلكتروني صالح", Toast.LENGTH_SHORT).show();
                }else if (PASSWORD.getText().toString().length() < 6){
                    Toast.makeText(getApplicationContext(), "رجاءاً اختر كلمة المرور بعناية", Toast.LENGTH_SHORT).show();
                }else {
                    createAccount(EMAIL.getText().toString(), PASSWORD.getText().toString());
                }

            }
        });

تم انشاء شروط داخل الازرار لتكون عملية التسجيل صحيحة. بعد ادخال البيانات وفقاً للشروط, يتم ارسال البريد الإلكتروني وكلمة المرور لدالة التسجيل, أو دالة الدخول.

سوف يظهر لك خطأ عدم وجود الدوال الناقصة, سوف نقوم بإضافاتها الآن بداخل الكلاس وخارج دالة الاون كريت.

public static boolean isEmailValid(String email) {
        boolean isValid = false;

        String expression = "^[\\w\\.-]+@([\\w\\-]+\\.)+[A-Z]{2,4}$";
        CharSequence inputStr = email;

        Pattern pattern = Pattern.compile(expression, Pattern.CASE_INSENSITIVE);
        Matcher matcher = pattern.matcher(inputStr);
        if (matcher.matches()) {
            isValid = true;
        }
        return isValid;
    }
    private void createAccount(String email, String password) {
        mAuth.createUserWithEmailAndPassword(email, password)
                .addOnCompleteListener(new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            Toast.makeText(getApplicationContext(), "تم التسجيل بنجاح",
                                    Toast.LENGTH_SHORT).show();
                            SIGNUP.setVisibility(View.GONE);
                        }
                    }
                });
    }
    private void SignIn(String email, String password) {
        mAuth.signInWithEmailAndPassword(email, password)
                .addOnCompleteListener(new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            finish();
                            Toast.makeText(getApplicationContext(), "تم الدخول بنجاح",
                                    Toast.LENGTH_SHORT).show();
                            startActivity(new Intent(getApplicationContext(), Main.class));
                        }else {
                            Toast.makeText(getApplicationContext(), "يوجد خطأ في المعلومات التي تم تقديمها",
                                    Toast.LENGTH_SHORT).show();
                        }

                    }
                });
    }

3 دوال كما ذكرنا , واحدة لتسجيل العضوية واخرى لتسجيل الدخول واخرى للتأكد من كتابة البريد الإلكتروني بشكل صحيح.

و الآن سوف نضيف كود في دالة الاون كريت, للتحقيق إن كان هناك اسم مستخدم يتم النقل فوراً لصفحة الترحيب اي الاكتفتي الثانية ( لم نقم بإنشاء الاكتفتي الثانية بعد ).

كود التحقق + استخدامه عند فتح الاكتفتي :

mAuthListener = new FirebaseAuth.AuthStateListener() {
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
                FirebaseUser user = firebaseAuth.getCurrentUser();
                if (user != null) {
                    finish();
                    startActivity(new Intent(getApplicationContext(), Main.class));
                }
            }
        };
        mAuth.addAuthStateListener(mAuthListener);

لتصبح لدينا الان نتيجة الاكتفتي الاولى :

public class MainActivity extends AppCompatActivity {
    EditText EMAIL, PASSWORD;
    Button SIGNIN, SIGNUP;
    private FirebaseAuth mAuth;
    private FirebaseAuth.AuthStateListener mAuthListener;


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

        mAuth = FirebaseAuth.getInstance();

        EMAIL = (EditText) findViewById(R.id.email);
        PASSWORD = (EditText) findViewById(R.id.password);
        SIGNIN = (Button) findViewById(R.id.login);
        SIGNUP = (Button) findViewById(R.id.signup);

        SIGNIN.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if ((TextUtils.isEmpty(EMAIL.getText().toString())) && (TextUtils.isEmpty(PASSWORD.getText().toString()))) {
                    Toast.makeText(getApplicationContext(), "من فضلك تأكد من ادخال البيانات", Toast.LENGTH_SHORT).show();
                }else if (!isEmailValid(EMAIL.getText().toString())){
                    Toast.makeText(getApplicationContext(), "من فضلك أدخل بريد إلكتروني صالح", Toast.LENGTH_SHORT).show();
                } else {
                    SignIn(EMAIL.getText().toString(), PASSWORD.getText().toString());
                }

            }
        });
        SIGNUP.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if ((TextUtils.isEmpty(EMAIL.getText().toString())) || (TextUtils.isEmpty(PASSWORD.getText().toString()))) {
                    Toast.makeText(getApplicationContext(), "من فضلك تأكد من ادخال البيانات", Toast.LENGTH_SHORT).show();
                }else if (!isEmailValid(EMAIL.getText().toString())){
                    Toast.makeText(getApplicationContext(), "من فضلك أدخل بريد إلكتروني صالح", Toast.LENGTH_SHORT).show();
                }else if (PASSWORD.getText().toString().length() < 6){
                    Toast.makeText(getApplicationContext(), "رجاءاً اختر كلمة المرور بعناية", Toast.LENGTH_SHORT).show();
                }else {
                    createAccount(EMAIL.getText().toString(), PASSWORD.getText().toString());
                }

            }
        });

        mAuthListener = new FirebaseAuth.AuthStateListener() {
            @Override
            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
                FirebaseUser user = firebaseAuth.getCurrentUser();
                if (user != null) {
                    finish();
                    startActivity(new Intent(getApplicationContext(), Main.class));
                }
            }
        };
        mAuth.addAuthStateListener(mAuthListener);


    }
    public static boolean isEmailValid(String email) {
        boolean isValid = false;

        String expression = "^[\\w\\.-]+@([\\w\\-]+\\.)+[A-Z]{2,4}$";
        CharSequence inputStr = email;

        Pattern pattern = Pattern.compile(expression, Pattern.CASE_INSENSITIVE);
        Matcher matcher = pattern.matcher(inputStr);
        if (matcher.matches()) {
            isValid = true;
        }
        return isValid;
    }
    private void createAccount(String email, String password) {
        mAuth.createUserWithEmailAndPassword(email, password)
                .addOnCompleteListener(new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            Toast.makeText(getApplicationContext(), "تم التسجيل بنجاح",
                                    Toast.LENGTH_SHORT).show();
                            SIGNUP.setVisibility(View.GONE);
                        }
                    }
                });
    }
    private void SignIn(String email, String password) {
        mAuth.signInWithEmailAndPassword(email, password)
                .addOnCompleteListener(new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            finish();
                            Toast.makeText(getApplicationContext(), "تم الدخول بنجاح",
                                    Toast.LENGTH_SHORT).show();
                            startActivity(new Intent(getApplicationContext(), Main.class));
                        }else {
                            Toast.makeText(getApplicationContext(), "يوجد خطأ في المعلومات التي تم تقديمها",
                                    Toast.LENGTH_SHORT).show();
                        }

                    }
                });
    }
}

والان نقوم بإنشاء اللياوت والاكتفتي الثانية, بإسم main.xml + Main.java. ونقوم بإنشاء نص تكست فيو داخلها ليأخذ نص البريد الإلكتروني و زر لتسجيل الخروج من التطبيق.

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#66a6f5"
    android:orientation="vertical">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="مرحباً يا .."
        android:textSize="15sp"
        android:layout_margin="30dp"
        android:textColor="#424242"
        android:layout_gravity="center_horizontal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="مرحباً يا .."
        android:textStyle="bold"
        android:textSize="25sp"
        android:textColor="#424242"
        android:layout_gravity="center_horizontal"
        android:id="@+id/textView" />

    <Button
        android:id="@+id/signout"
        android:text="تسجيل الخروج"
        android:layout_marginTop="80dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Main.java

public class Main extends AppCompatActivity {

    Button SIGNOUT;
    TextView tv;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        FirebaseUser user = FirebaseAuth.getInstance().getCurrentUser();
        tv = (TextView)findViewById(R.id.textView);
        if (user != null) {
            String email = user.getEmail();
            tv.setText(email);
        }



        SIGNOUT = (Button) findViewById(R.id.signout);
        SIGNOUT.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                FirebaseAuth.getInstance().signOut();
                finish();
                startActivity(new Intent(getApplicationContext(), MainActivity.class));
            }
        });
    }
}

كذلك للمبتدئين لا تنسى بإضافة الاكتفتي الثانية في ملف المينفيست.

والآن قم بتجربة التطبيق, بعد القيام بجميع الخطوات السابقة, ونتمنى لك رحلة موفقة في عالم البرمجة, تستطيع الدخول الى لوحة التحكم الخاصة بالمشروع من جوجل فايربيس من القائمة اليسرى اختر Auth سوف تظهر لك قائمة المستخدمين المسجلين, تستطيع منها الحذف والإضافة.

هكذا نكون انتهينا من درس اليوم .. لا تنسى كلمة شكر في تعليق, أو دعوة خالصة لله .. تدعمنا بها ونتشرف بها بكل تأكيد ..

وان شاء الله انتظرونا في دروس قادمة .. في المستقبل القريب .. و اي ملاحظة او استفسار او مشكلة, ننتظر منك وضعها في صندوق التعليقات في الأسفل ! .. والسلام عليكم .