بسم الله الرحمن الرحيم
في هذا الدرس سوف نتعلم كيفية إنشاء زر لتسجيل الدخول إلى تطبيقك, بواسطة حساب الفيس بوك, ولكن عن طريق مميزات جوجل فايربيس, مما يجعل لك لوحة تحكم من خلالها تستطيع تعطيل/تفعيل هذه الميزة بالإضافة إلى مشاهدة الحسابات التي تم تسجيلها وتاريخ التسجيل وحذفها وتعطيل حساب معين من استخدام تطبيقك إلخ.
في الدرس السابق تعلمنا نفس ما سوف نتعلم عليه اليوم ولكن في الدرس السابق عن طريق بريد إلكتروني + كلمة مرور, إذا سوف نستعين بالدرس السابق ونقوم عليه ببعض التغيرات ليتوافق مع متطلبنا لدرس اليوم.
ملاحظة
يفضل تطبيق الدرس السابق من ثم القيام بالتعديلات التي سوف ندرجها في هذا الدرس, لمراجعة الدرس السابق : عملية تسجيل الدخول لتطبيقك الأندرويد بواسطة Google Firebase Auth
بعد تطبيقك للدرس السابق والخطوات التي بداخله, نقوم الآن بإنشاء تطبيق من لوحة المطوريين في الفيس بوك, بالضغط على : https://developers.facebook.com/quickstarts/?platform=android
لإنشاء تطبيق قم بالضغط على Skip and create App ID , سوف تظهر لك نافذة قم بإضافة اسم العرض إلخ, ثم اضغط على انشاء.
والآن سوف نذهب إلى لوحة التحكم الخاصة بمشروعك على جوجل فايربيس https://console.firebase.google.com/ واختر المشروع الذي تعمل عليه, من القائمة اليسرى توجه إلى Auth ثم Sign-in Method وقم بتفعيل Facebook . سوف يظهر لك خيارين App ID – App secret وهما الموجودين في تطبيقك في السابق, الذي قمنا إنشاءه في الخطوة السابقة, كذلك يوجد لديك في نفس الناقذة عنوان بالشكل التالي : https://****.firebaseapp.com/__/auth/handler قم بنسخه ومن ثم الذهاب إلى لوحة تحكم مطوريين الفيس بوك وبعد اختيار تطبيقك, سوف يظهر لك اعدادات تطبيقك على الفيسبوك, ومن القائمة اليمنى يوجد المنتجات اختر تسجيل دخول فيسبوك, وقم بلصق الرابط في محددات URI صالحة لإعادة توجيه OAuth .
كذلك يوجد لديك خطوة بعد تصدير مشروعك الأندرويد Apk وغالباً ما يتم تصديره النسخة التجريبية app-debug.apk, لذلك نحتاج تجزئة مفتاحية منها للفيس بوك, ولا تنسى بعد تصدير التطبيق بشكل نهائي نقوم بأخذ التجزئة الجديدة ووضعها في لوحة التحكم لمشروعك على الفيس بوك, بدونها لن ينجح تطبيقك في عملية تسجيل الدخول بواسطة الفيس بوك.
لمعرفة التجزئة المفتاحية للتطبيق, يوجد طريقة سهلة وهي بعد تشغيل التطبيق على جهازك, وتسجيل الدخول سوف تظهر لك رسالة وفيها هذا المفتاح والذي مكون من 28 حرف وينتهي بعلامة ( = ), أما الطريقة النظامية لإخراج هذا المفتاح بالطريقة التالية.
Android Generate Key Hash
# من جهازك الحاسوب قم بالتوجه إلى مجلد الجافا وغالباً ما يكون : C:\Program Files\Java . ثم الدخول إلى مجلد الإصدار لديك jdk ثم مجلد bin .
مثال : C:\Program Files\Java\jdk1.8.0_45\bin , نقوم بنسخ هذا المسار.
# نقوم بفتح قائمة الابدأ, ونبحث عن run قائمة التشغيل. بعد الضغط عليها تخرج نافذة صغيرة, نكتب داخلها cmd ونضغط موافق. تخرج لنا نافذة سوداء.
# نقوم بكتابة cd ثم نلصق المسار السابق, ونضغط زر الادخال En.
# إذا كنت لم تقم بتصدير شفرة لتطبيقك بعد وتعمل على تجربة التطبيق أكتب الأمر التالي : – مع تغير كلمة andrody لأسم اليوزر في جهازك.
keytool -exportcert -alias androiddebugkey -keystore C:\Users\andrody\.android\debug.keystore | openssl sha1 -binary | openssl base64
# إما إذا اردت تصدير المشروع ولديه شفرة خاصة به قم بنسخ الأمر التالي وتعديله, ثم لصقه في شاشة الأوامر : كتابة اسم الشفرة للتطبيق ومساره.
keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | openssl base64
وكلتا الحالتين بعد ادخال الأمر يطلب منك كلمة مرور الشفرة, إذا كانت الحالة الافتراضية كما الأمر الأول ادخل : android إما اذا كنت تستخدم شفرة خاصة ادخل كلمة المرور التي قمت بتعينها.
بعد ادخال كلمة المرور يخرج لك الـ Key Hashes / علامة تجزئة مفتاحية.
بعد أخذ علامة المفتاح ونسخها, نقوم بالذهاب إلى تطبيقك على الفيس بوك من لوحة التحكم, واختيار التطبيق, ثم الإعدادات \ أساسي, إضافة منصة, ثم اختيار الأندرويد, وقم بوضع اسم الحزمة وفئة التطبيق, وثم ضع علامة التجزئة المفتاحية التي حصلنا عليها سابقاً, كما تستطيع وضع أكثر من واحدة.
build.gradle (Module: app) و الآن لنرجع لمشروعنا السابق على الأندرويد ستوديو مع بعض التعديلات, ونقوم بفتح ملف
وبداخل أوسمة dependencies نقوم بإضافة السطر التالي : ( لتفعيل مكتبة فايربيس للوصول + حزم الفيس بوك ).
compile 'com.google.firebase:firebase-auth:9.4.0' compile 'com.facebook.android:facebook-android-sdk:4.+'
و اللياوت تصبح كالتالي :
# لاحظ التغيرات في اللياوت الرئيسية وجعلها فقط زر من الفيس بوك. اما الاكتفتي الثانية كما هي.
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"> <com.facebook.login.widget.LoginButton android:id="@+id/login_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="30dp" android:layout_marginBottom="30dp" /> </LinearLayout> </LinearLayout>
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>
أما فيتم فيه إضافة رقم\معرف تطبيقك على الفيس بوك من خلال سترنج, و كذلك الاكتفتي الخاصة بالفيس بوك, وصلاحية دخول الانترنت, وتعريف اللياوت الثانية للانتقال اليها بعد تسجيل الدخول, نقوم بالذهاب إلى ملف السترنج وإضافة القيمة التالية : – باستبدال الاصفار برقم تطبيقك من الفيس بوك –
<string name="facebook_app_id">00000000000000000</string>
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.test.test"> <uses-permission android:name="android.permission.INTERNET" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".Main"/> <activity android:name="com.facebook.FacebookActivity" android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation" android:label="@string/app_name" android:theme="@android:style/Theme.Translucent.NoTitleBar" /> <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/> </application> </manifest>
بالنسبة للأكتفتي الرئيسية : MainActivity.java
في البداية نقوم باستدعاء CallbackManager وهو يقوم باستخدام الاستدعاءات وإعادتها لحزم الفيس بوك ويقوم بمعرفة الاستدعاء المسجل بإسمك إلخ, ويجب عليك تطبيقه في دالة onActivityResult .
كذلك نحتاج الوصول لسيرفرات الفايربيس لتسجيل العضويات واستخدامها إلخ.
ويوجد لدينا الزر الخاص بالفيس بوك LoginButton ليقوم بعملية التسجيل\تسجيل الخروج\ قراءة الصلاحيات أو النشر التي تريدها عند الدخول للحساب إلخ.
# إخبار الكلاس لديك إن لدينا استخدام لهذه الكلاسات عن طريق معرفات نحن قمنا بإعطائها له.
private CallbackManager mCallbackManager; private FirebaseAuth mAuth; private FirebaseAuth.AuthStateListener mAuthListener;
# استدعاء facebook sdk قبل البدأ بإنطلاقة التطبيق, إي في الـ Application أو Activity في دالة الاون كريت onCreate.
FacebookSdk.sdkInitialize(getApplicationContext());
# نقوم بتمكين عمل الكلاسات التي قمنا بتعريفها في دالة الاون كريت.
mAuth = FirebaseAuth.getInstance(); mCallbackManager = CallbackManager.Factory.create();
# تعريف زر الفيس بوك والوصول إليه وإعطائه صلاحية قراءة الإيميل والمعلومات العامة عن المستخدم مثل رقم العضوية والإسم والإسم الأول والإسم الأخير .. إلخ.
تستطيع تحديد من onSuccess – onCancel – onError أوامر تحدث بعد عملية تسجيل الدخول بنجاح, إو إلغاء, إو يوجد خطأ ما.
LoginButton loginButton = (LoginButton) findViewById(R.id.login_button); loginButton.setReadPermissions("email", "public_profile"); loginButton.registerCallback(mCallbackManager, new FacebookCallback<LoginResult>() { @Override public void onSuccess(LoginResult loginResult) { handleFacebookAccessToken(loginResult.getAccessToken()); } @Override public void onCancel() { } @Override public void onError(FacebookException error) { } });
# كما في الدرس السابق, دالة للتأكد من وجود اسم مستخدم, وفي حال وجوده يتم التقدم للاكتفتي الثانية مباشرة. وقمنا باستخدامها في الاون كريت.
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);
# كما ذكرنا يجب استدعاء CallbackManager في onActivityResult ليعطينا نتيجة الاكتفتي وتحديث الحالة مباشرة.
@Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); mCallbackManager.onActivityResult(requestCode, resultCode, data); }
# العملية التي يقوم بها بعد تسجيل الدخول بنجاح :
private void handleFacebookAccessToken(AccessToken token) { AuthCredential credential = FacebookAuthProvider.getCredential(token.getToken()); mAuth.signInWithCredential(credential) .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() { @Override public void onComplete(@NonNull Task<AuthResult> task) { if (task.isSuccessful()) { mAuth.addAuthStateListener(mAuthListener); } } }); }
و هي الحصول على معلومات المستخدم وتسجيلها في سيرفرات جوجل فايربيس, وإذا تم العملية بنجاح يتم الرجوع إلى دالة التحقق من وجود مستخدم وبالتالي إذا يتم انتقاله للاكتفتي الثانية مباشرة.
هكذا فقط … الكود كامل للاكتفتي الأول :
MainActivity
public class MainActivity extends AppCompatActivity { private CallbackManager mCallbackManager; private FirebaseAuth mAuth; private FirebaseAuth.AuthStateListener mAuthListener; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); FacebookSdk.sdkInitialize(getApplicationContext()); setContentView(R.layout.activity_main); mAuth = FirebaseAuth.getInstance(); mCallbackManager = CallbackManager.Factory.create(); LoginButton loginButton = (LoginButton) findViewById(R.id.login_button); loginButton.setReadPermissions("email", "public_profile"); loginButton.registerCallback(mCallbackManager, new FacebookCallback<LoginResult>() { @Override public void onSuccess(LoginResult loginResult) { handleFacebookAccessToken(loginResult.getAccessToken()); } @Override public void onCancel() { } @Override public void onError(FacebookException error) { } }); 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); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); mCallbackManager.onActivityResult(requestCode, resultCode, data); } private void handleFacebookAccessToken(AccessToken token) { AuthCredential credential = FacebookAuthProvider.getCredential(token.getToken()); mAuth.signInWithCredential(credential) .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() { @Override public void onComplete(@NonNull Task<AuthResult> task) { if (task.isSuccessful()) { mAuth.addAuthStateListener(mAuthListener); } } }); } }
أما الاكتفتي الثانية كما هي سابقاً, نص ترحيب يأخذ قيمة اسم المستخدم للعضوية وزر لتسجيل الخروج, ولكن الجديد أضفنا دالة تسجيل الخروج من حساب الفيس بوك كذلك بعد الضغط على الزر.
اي بعد الضغط على زر تسجيل الخروج, يتم الخروج من حساب الفايربيس وحساب الفيس بوك وارجاعك للاكتفتي الرئيسية.
كود الاكتفتي الثانية كامل :
Main
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 name = user.getDisplayName(); tv.setText(name); } SIGNOUT = (Button) findViewById(R.id.signout); SIGNOUT.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { FirebaseAuth.getInstance().signOut(); LoginManager.getInstance().logOut(); finish(); startActivity(new Intent(getApplicationContext(), MainActivity.class)); } }); } }
وهذا مثال صغير لتجربتي :
هكذا نكون أنتهينا من درس اليوم !! .. إي مشاركة لديك او استفسار او ملاحظة .. تستطيع إستخدام صندوق التعليقات في الأسفل ..
وإن شاء الله انتظرونا بكل جديد وحصري في عالم برمجة تطبيقات الأندرويد ..
و بالتوفيق للجميع 🙂
شكرا أخي العزيز و لكن قبل أي شيء تحتاج الى اضافة الفاير باس :
لقد وجدت هذا الدرس في تطبيق : Master Android
حمل التطبيق مجانا .. أنا شخصيا بدأت البرمجة :
https://play.google.com/store/apps/details?id=net.androidsquad.androidmaster