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

AbdulAlim Rajjoubمنذ سنتين

 

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

FBAF-1.thumb.png.75a458145bf2ebc04aaec4793878c9b7.png

 

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

 

FBAF-2.thumb.png.ae602bc67606bae5b2bfee69a0a2d3ae.png

 

ثم Create App ID

 

FBAF-3.thumb.png.e5a4639d207f70cf9de14bc3b4ce833e.png

 

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

 

FBAF-4.thumb.png.1325a739dcc0144221aa499b35d244d9.png

 

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

FBAF-5.thumb.png.a4651e1d00a54c3c049ef4ff46e628a5.png

 

ثم نختار 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 قم بنسخه

FBAF-11.thumb.png.d5732eddf4482d9c55f2f564f918aead.png

 

والصقه في 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

 

FBAF-15.thumb.png.6a08aaa71231336b01cc357dde9a7608.png

بعد ذلك نضيف صلاحيات الإنترنت في 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 قم بنسخهم

 

FBAF-26.thumb.png.489336b3f28bb673cf547e7b85ac6773.png

 

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

 

FBAF-27.thumb.png.46b2ac6b0fb69abd5536f27f9f047607.png

 

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

 

FBAF-27.5.thumb.png.649a0168c240ea8aa1dbceb8f723cfdf.png

ثم Save

 

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

 

FBAF-28.thumb.png.79e8294d8ecf429be70f6cea9d78e3f7.png

نجرب تشغيل التطبيق وعند الضغط على زر 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

 

FBAF-29.thumb.png.32327a92470f3db95544f46adc6f7b3f.png  

 

 

رابط المشروع على Github

ملاحظة:المشروع على Github للمعاينة فقط ولايمكنك تجربته على Android Studio لعدم وجود google-services.json الخاص بك

كلمات دليلية: auth facebook firebase
2
إعجاب
1629
مشاهدات
0
مشاركة
0
متابع
متميز
محتوى رهيب

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !