Firebase Authentication | تسجيل الدخول باستخدام حساب فيسبوك

AbdulAlim Rajjoubمنذ 6 سنوات

بدايةً يجب عليك التوجه الى Facebook Developers والتسجيل كمطور عبر حسابك الشخصي في فيسبوك وذلك بالضغط على Register

بعد ذلك نختار Yes ثم Register

ثم Create App ID

بعد ذلك نضع اسم التطبيق والإيميل الخاص بك

سيتم إنشاء تطبيق Facebook خاص بك وسيعطيك APP ID الذي سنحتاجه لاحقاً ثم اضغط على Get Started لنبدأ بتجهيز المشروع

ثم نختار Android

FBAF-6.png.f16728b96327ca968285c9dc56300cfd.png

ستظهر لنا هذه الخطوات

FBAF-7.png.6931c3d3f4d5bc531daa2a3e309b60af.png

نبدأ أولاً بإنشاء مشروع جديد على Android Studio وعلى Firebase ونضيف مكتبةFirebase Auth

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

ونقوم بربط Firebase ب مشروع Android بعد ذلك نقوم بإضافة Facebook SDK ,ولذلك علينا إضافة mavenCentral قبل dependencies

repositories {
    mavenCentral()
}

ثم نضيف Facebook SDK في dependencies ثم نعمل Sync ل Gradle

compile 'com.facebook.android:facebook-android-sdk:[4,5)'

FBAF-8.png.4108979b634dfe3676e7a014f957f30c.png

بعد ذلك ننتقل الى الخطوة الثالثة ونضيف اسم package الخاص بمشروع الأندرويد ونضيف اسم الأكتفتي الإفتراضي الذي سيعمل في التطبيق ,في حالتي هو MainActivity ونضيف قبله اسم package ثم . واسم الأكتفتي

FBAF-9.png.602c117e3d7f001e1e2157b358933d00.png

بعد ذلك ستظهر لك رسالة تحذير بأنه لا يوجد تطبيق بهذا الاسم موجود على متجر Google Play Store,لا عليك اختر Use this package name

FBAF-10.png.9ea5ed4a256fc2f19b9d33b8929c0b62.png

بعد ذلك سنحتاج الى معرف يدعى Key Hash ولتوليد هذا المعرف يمكنك إما نسخ الأمر الموجود في Facebook Quick Start أو يمكنك إستخدام هذه الأداة التي صنعتها لتسهيل الموضوع ومتوفرة لأنظمة 32 و 64 بت, فقط قم بتشغيل الملف التنفيذي وإختر نوع الKey Hash (هل تريد صنعه ل Debug أم ل Release)

عند تشغيل ملف Debug سيطلب منا رمز Keystore قم بإدخال أي رقم أو قم بكتابة android فهي الكلمة الإفتراضية

أما عند تشغيل ملف Release فسيطلب منك رمز Alias الذي وضعته عند إنشاء ملف الشهادة الذي ينتهي بصيغة jks (عند عمل Generate Signed APK في الأندرويد ستوديو)

ثم سيطلب منك مسار ملف الشهادة (C:User\Desktop\Cert.jks) على سبيل المثال وسيظهر لك ال Key Hash قم بنسخه

والصقه في Facebook

FBAF-12.png.c0ce40a418affe00cda05b6a5ed90802.png

ثم قم بتفعيل Single Sign On

FBAF-13.png.6072fe201aecf420f5753ae4a0ef2beb.png

بعد ذلك سنضيف بعد الأمور في Android Studio

FBAF-14.png.f40789fbde60352d1443e6a2bfa69888.png

نقوم بنسخ App ID ونلصقه في ملف strings.xml

بعد ذلك نضيف صلاحيات الإنترنت في Android Manifest

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

ثم نضيف Meta-Data قبل إغلاق وسم application

<meta-data android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/facebook_app_id"/>

FBAF-16.png.55d17d2bc12123a498a466243e3807e1.png

ثم نضيف أكتفتي المسؤولة عن تسجيل الدخول من Facebook (موجودة ضمن Facebook SDK)

<activity android:name="com.facebook.FacebookActivity"
            android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="@string/app_name" />

FBAF-17.png.61504b413ec7c3c002b7c11b53f6dc7c.png

ونضيف أكتفتي أخرى في حال كان المستخدم لم يقم بتثبيت تطبيق Facebook في جهازه

وهي موجودة ضمن Facebook SDK أيضاً

<activity
            android:name="com.facebook.CustomTabActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/fb_login_protocol_scheme" />
            </intent-filter>
        </activity>

FBAF-18.png.69308ea02c9d55c938d046716ca6fe93.png

ونضيف Protocol Scheme في strings.xml (نقوم بنسخه من Facebook Quick Start Guide)

FBAF-19.png.b577b4d35a0b4aa011a7a850e6038afe.png

الآن نتجه لى activity_main.xml ونضيف زر تسجيل الدخول

FBAF-20.png.8762398bb5674f1bc03a318dae1302e4.png

ثم نتجه الى MainActivity ونعرف بعض المتغيرات

FirebaseAuth
LoginButton زر تسجيل الدخول
CallbackManager المسؤول عن إعادة نتيجة تسجيل الدخول

ثم قمنا بإعطائهم قيم في onCreate ثم جعلنا زر LoginButton يقرأ صلاحيات Email

FBAF-21.png.1eec4063a6552386704f62186f8062e1.png

بعد ذلك قم بتسجيل Callback عبر ميثود registerCallback وأعطيناه callbackManager كبارامتر

وهي تعيد لنا 3 ميثود

onSuccess عند نجاح عملية تسجيل الدخول
onCancel عند الغاء عملية التسجيل من قبل المستخدم
onError عند حدوث خطأ ما

وقمنا بعمل Log في كل حالة

FBAF-22.png.7185de4090baab326418a60bd94514a9.png

ثم قمنا بعمل Override ل onActivityResult وقمنا بتسجيل callbackManager في onActivityResult (بدونه لن تعود أي نتيجة )

FBAF-23.png.9be71c7649fe073362acd37d9c8b553d.png

أما الآن سنقوم بإنشاء ميثود handleFacebookAccessToken التي تقوم بأخذ Access Token من ميثود onSuccess عبر loginResult ونقوم باستدعاء ميثود mAuth.signInWithCredential لحفظ المستخدم في Firebase وقمنا

بعمل Log للنتيجة

FBAF-24.png.3be266665c7ae1abf596a8d3586daa87.png

ثم استدعينا الميثود في onSuccess وقمنا بأخذ AccessToken

FBAF-25.png.cbfc41f3b87afb13fe1c6c1bccbcbf10.png

الآن يجب علينا الحصول على App Secret و App Id قم بالتوجه الى إعدادات تطبيق Facebook الى Dashboard وستجد App Secret و App Id قم بنسخهم

ثم توجه الى Firebase Console وقم بتفعيل تسجيل الدخول عبر Facebook والصق App Id و App Secret

ثم نقوم بنسخ OAuth Uri

ثم Save

بعد ذلك نتوجه الى إعدادات Facebook Login ونضع OAuth Uri

نجرب تشغيل التطبيق وعند الضغط على زر Login ,اذا كان المستخدم لم يثبت تطبيق Facebook فسيظهر له بهذا الشكل

FBAF-30.png.458f093c53e6bed65e013679493e98bf.png

أما اذا قام بتثبيته فسيظهر بهذا الشكل

FBAF-Extra.png.a34e139490bd6aca9dffad5a086f914c.png

عموماً نجرب التشغيل

FBAF-31.png.64a14fc073dec945516c05c74c941690.png

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

FBAF-32.png.9b19e634b73eb7435b6b337e870bca8c.png

اذا كنت قد جربت عملية تسجيل الدخول على نفس حساب المطور فستنجح عملية التسجيل,أما اذا قمت بتجريبه على حساب آخر غالباً ستفشل عملية التسجيل وذلك لأنه التطبيق الذي أنشأته ليس Public ولحل هذه المشكلة قم بالتوجه الى إعدادات التطبيق في Facebook في قسم App Review ونقوم بجعله Public