أضافة تسجيل الدخول فيسبوك داخل تطبيق الأندرويد

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

تحدثنا في شرح سابق حول كيفية الأستفادة من Facebook API , و شرحنا بشكل كامل كيفية أضافة Facebook API إلى تطبيقك الأندرويد أما في هذا الشرح سوف نتسوع أكثر لنشرح كيفية أضافة ميزة تسجيل الدخول بواسطة فيسبوك داخل تطبيق الأندرويد بشكل كامل و سوف نقوم أيضاً بجلب معلومات المستخدم

تحتاج للبدأ في تطبيق الشرح إلى أضافة Facebook API الشرح الكامل هنا

نبدأ الشرح

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

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<com.facebook.login.widget.LoginButton
    android:id="@+id/login_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:gravity="center"
    android:layout_margin="4dp"
    android:paddingTop="12dp"
    android:paddingBottom="12dp"/>

</LinearLayout>

و سيكون الزر كما في الصورة التالية :

أما برمجياً فيجب علينا أستخدام مكتبة فيس بوك و مناداتها لتنفيذ عملية تسجيل الدخول و جلب بيانات المستخدم
في LoginActivity.java سوف نقوم بعمل التالي
نضع الكود التالي قبل دالة onCreate و هذا الكود يحتوي على التالي :
قمنا بأستدعاء طلب تسجيل دخول المستخدم
و لدينا ثلاث حالات
1- onSuccess :إذا تمت عملية تسجيل الدخول بنجاح نفذ الأمر داخل هذه الدالة و هو جلب بيانات المستخدم و الأنتقال إلى الأكتفتي الثانية
2- onCancel : و هي عملية إلغاء تسجيل الدخول .
3- onError: و هي عند حدوث خطأ يظهر لنا رسالة بالخطأ ممكن يكون أسم المستخدم و كلمة المرور خطأ و هذه الرسالة تظهر من فيسبوك.

private CallbackManager callbackManager;
private AccessTokenTracker accessTokenTracker;
private ProfileTracker profileTracker;

//Facebook login button
private FacebookCallback<LoginResult> callback = new FacebookCallback<LoginResult>() {
    @Override
    public void onSuccess(LoginResult loginResult) {
        Profile profile = Profile.getCurrentProfile();
        nextActivity(profile);
    }
    @Override
    public void onCancel() {        }
    @Override
    public void onError(FacebookException e) {      }
};

و الأن دخل دالة onCreate نضع الكود التالي
و الذي من خلاله سوف ننادي مكتبة فيسبوك و أيضاً و التأكد من أنه تم تسجيل المستخدم من خلال هذا التطبيق و يمكننا جلب معلومات الصفحة الشخصية “البروفايل”

FacebookSdk.sdkInitialize(getApplicationContext());
callbackManager = CallbackManager.Factory.create();
accessTokenTracker = new AccessTokenTracker() {
    @Override
    protected void onCurrentAccessTokenChanged(AccessToken oldToken, AccessToken newToken) {
    }
};

profileTracker = new ProfileTracker() {
    @Override
    protected void onCurrentProfileChanged(Profile oldProfile, Profile newProfile) {
        nextActivity(newProfile);
    }
};
accessTokenTracker.startTracking();
profileTracker.startTracking();

الأن سوف نقوم بعملية الربط بين زر تسجيل الدخول و مكتبة فيسبوك  برمجياً بأضافة الكود التالي أيضاً في دالة onCreate 

و إذا تم تسجيل الدخول بنجاح سوف يجلب لنا بيانات المستخدم و يقوم بفتح الأكتفتي التالية

LoginButton loginButton = (LoginButton)findViewById(R.id.login_button);
callback = new FacebookCallback<LoginResult>() {
    @Override
    public void onSuccess(LoginResult loginResult) {
        AccessToken accessToken = loginResult.getAccessToken();
        Profile profile = Profile.getCurrentProfile();
        nextActivity(profile);
        Toast.makeText(getApplicationContext(), "جاري تسجيل الدخول ...", Toast.LENGTH_SHORT).show();    }

    @Override
    public void onCancel() {
    }

    @Override
    public void onError(FacebookException e) {
    }
};
loginButton.setReadPermissions("user_friends");
loginButton.registerCallback(callbackManager, callback);

سنضيف بعض الأمور البسيطة داخل الاكتفتي لتجنب حدوث أخطاء
1- في onResume قمنا بمنادة ملف المستخدم نفسه و فتح الأكتفتي الثانية و بهذا عندما يقوم المستخدم بالخروج و الدخول مرة ثانية إلى التطبيق سوف تظهر له الأكتفتي الثانية دون الحاجة لإعادة تسجيل الدخول مرة ثانية

2-في onStop أعطينا أمر بتسجيل خروج المستخدم و هذا عندما يقوم المستخدم بأيقاف التطبيق نهائياً عندها سوف يتطلب تسجيل دخول جديد

 

@Override
protected void onResume() {
    super.onResume();
    //Facebook login
    Profile profile = Profile.getCurrentProfile();
    nextActivity(profile);
}

@Override
protected void onPause() {

    super.onPause();
}

protected void onStop() {
    super.onStop();
    //Facebook login
    accessTokenTracker.stopTracking();
    profileTracker.stopTracking();
}

@Override
protected void onActivityResult(int requestCode, int responseCode, Intent intent) {
    super.onActivityResult(requestCode, responseCode, intent);
    //Facebook login
    callbackManager.onActivityResult(requestCode, responseCode, intent);

}

الكود الأخير الذي سوف نظيفه في هذه الأكتفتي هو nextActivity()  و نستخدم هذا الكود لحفظ بيانات المستخدم و أرسالها إلى الأكتفتي الثانية

private void nextActivity(Profile profile){
    if(profile != null){
        Intent main = new Intent(LoginActivity.this, MainActivity.class);
        main.putExtra("name", profile.getFirstName());
        main.putExtra("surname", profile.getLastName());
        main.putExtra("imageUrl", profile.getProfilePictureUri(200,200).toString());
        startActivity(main);
    }
}

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

التصميم:

أيضاً هذه الأكتفتي بسيطة من حيث التصميم فهي تحتوي على رسالة ترحيب و اسم المستخدم و صورته كما في الكود التالي

LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:text="Hello:"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textSize="20dp"
        android:layout_gravity="center_horizontal"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/nameAndSurname"
        android:textSize="22dp"
        android:textStyle="bold"
        android:layout_marginTop="10dp"
        android:layout_gravity="center_horizontal"/>
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:id="@+id/profileImage"
        android:layout_marginTop="10dp"
        android:layout_gravity="center_horizontal"/>
</LinearLayout>

برمجياً:
نقوم بعرض معلومات المستخدم التي جلبناها من الأكتفتي الأولى و سوف نضع الكود التالي في onCreate :

Bundle inBundle = getIntent().getExtras();
String name = inBundle.get("name").toString();
String surname = inBundle.get("surname").toString();
String imageUrl = inBundle.get("imageUrl").toString();

و بعد جلب اسم المستخدم من الأكتفتي الأولى سوف نعرضه في textview كما في الكود التالي

TextView nameView = (TextView)findViewById(R.id.nameAndSurname);
nameView.setText("" + name + " " + surname);

و الأن سوف نقوم بتحميل صورة المستخم و عرضها في الأكتفتي كما في الكود التالي الذي سوف نضعه أيضاً في onCreate

public class DownloadImage extends AsyncTask<String, Void, Bitmap> {
    ImageView bmImage;

    public DownloadImage(ImageView bmImage) {
        this.bmImage = bmImage;
    }

    protected Bitmap doInBackground(String... urls) {
        String urldisplay = urls[0];
        Bitmap mIcon11 = null;
        try {
            InputStream in = new java.net.URL(urldisplay).openStream();
            mIcon11 = BitmapFactory.decodeStream(in);
        } catch (Exception e) {
            Log.e("Error", e.getMessage());
            e.printStackTrace();
        }
        return mIcon11;
    }

    protected void onPostExecute(Bitmap result) {
        bmImage.setImageBitmap(result);
    }
}

ولا ننسى أكيد الربط مع  ملف xml لتحديد مكان ظهور الصورة

new DownloadImage((ImageView)findViewById(R.id.profileImage)).execute(imageUrl);

و أخيراً سوف نضيف زر تسجيل الخروج و الذي سوف نضعه في قائمة الخيارات الموجودة في “التوول بار”
و الكود الخاص به في الأكتفيتي
التصميم:

نقوم بتصميم قائمة خيارات في التوول بار تحتوي على زر وحيد و هو  تسجيل الخروج و ليكن أسم ملف التصميم menu_main.xml  و نضع داخله الكود التالي :

<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"   tools:context="com.example.theodhor.facebookintegration.MainActivity">
    // Replace with your package name

    <item android:id="@+id/action_settings"
          android:title="@string/action_settings"
          android:orderInCategory="100"
          app:showAsAction="never"/>
</menu>

و لا تنسى أضافة logOut في ملف السترنج

<string name="action_settings">LogOut</string>

 

برمجياً:

الكود الخاص به في الأكتفيتي

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_login, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        logout();
        return true;
    }

    return super.onOptionsItemSelected(item);
}

و في الكود السابق أعطينا أمر برمجي عند الضغط على خيار تسجيل الخروج سوف يقوم بتنفيذ الأمر التالي الذي يجب عليك أضافته أيضاً إلى الأكتفتي

public void logout(){
    LoginManager.getInstance().logOut();
    Intent login = new Intent(MainActivity.this, LoginActivity.class);
    startActivity(login);
    finish();
}

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