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

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

تحدثنا في شرح سابق حول كيفية الأستفادة من 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>

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

facebook neu

أما برمجياً فيجب علينا أستخدام مكتبة فيس بوك و مناداتها لتنفيذ عملية تسجيل الدخول و جلب بيانات المستخدم
في 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();
}

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

 

1447950978Screenshot_2015-11-07-23-18-06

 

 

 

عن محبوب الحسين

محبوب الحسين : من سورية , مهتم بجديد تكنولوجيا المعلومات و ببرمجة و تطوير تطبيقات الأندرويد و بدايتي مع برمجة تطبيقات الأندرويد كانت من هنا "أندرودي عربي"

شاهد أيضاً

التقنيات التي نستطيع برمجة تطبيقات والعاب الاندرويد بها

هل أنت محتار من أين تريد البدأ في مجال برمجة التطبيقات للهواتف الذكية أو الألعاب عالية الاداء ؟ تعرف في هذا المقال عن اللغات والتقنيات واختر منها ما يناسبك لدخول هذا المجال

تعلم برمجة تطبيق اندرويد لمدونتك البلوجر (1)

هل لديك تدوينة أو موقع إخباري ؟ أو معرض يعرض الكثير من البيانات من وسائط ؟ وبحاجة لعرضها في تطبيق اندرويد ؟ هذه فرصتك من هنا وللمبتدئين تعلم برمجة تطبيق لمدونتك

عرض صورة متحركة داخل الطبيق

بسم الله الرحمن الرحيم في كثير من الاوقات نحتاج الى عرض صورة متحركة داخل تطبيقنا …

2 تعليقات

  1. شكر الكبير لك أخي على الشرح الوافي لكن يا حبذا لو يتم وضع زر لتحميل سورس كود في أسفل الموضوع ليكون أكثر إفادة للجميع.. بالتوفيق وبانتظار شروحاتك القادمة لكيفية إضافة بوستات صفحة فيس بوك في listview

ضع بصمتك بتعليق يعبر عن امتنانك

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.