Logowanie do Facebooka w aplikacji Android. Facebook SDK

Posted on by 0 comment

W poprzednim wpisie zaimportowaliśmy środowisko Facebook SDK oraz przykładowe projekty do Eclipsa. Dzisiaj stworzymy nową aplikację Android, podepniemy do niej Facebook SDK oraz umożliwmy w niej logowanie i wylogowanie.

Utworzenie projektu Android

Należy utworzyć projekt na platformę Android z wymaganym API 9 lub wyższym.

Dołączenie biblioteki

Otwieramy Properties naszego projektu (klikamy prawym przyciskiem myszy na wcześniej utworzony projekt), wybieramy z menu Android. Następne wybieramy button Add i wskazujemy projekt Facebook SDK, zatwierdzamy poprzez kliknięcie OK.

Facebook SDK Library

Facebook SDK Library

Po zamknięciu tego okna, należy ponownie otworzyć proporties i sprawdzić, czy koło referencji do projektu Facebook SDK widnieje nadal zielony znacznik, jeśli nie to odsyłam do sekcji Troubleshooting, która znajduje się na dole tego artykułu.

Konfiguracja

1. Musimy stworzyć własną aplikację na stronie Facebook’a https://developers.facebook.com, gdy ją stworzymy w Settings aplikacji włączamy Single Sign On.

2. Kolejny krokiem jest dodanie nowej wartości w res/values/strings.xml naszej głównej aplikacji w Eclipse o nazwie ‚facebook_app_id‚ i wpisać do niego App ID przed chwilą stworzonej aplikacji.

3. Kolejną rzeczą jest dodanie Uses Permission ‚android.permission.INTERNET‚, w manifeście AndroidManifest.xml, na karcie Permissions.

4. Do manifestu dopisać następującą meta-data:

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

Umożliwienie logowania

1. Kopiujemy pliki .png z projektu Scrumptious z folderu res/drawable, do naszego projektu, np.do res/drawable-mdpi .

2. Tworzymy nową klasę w folderze src w naszej aplikacji (końcowy efekt):

package lukaszkStore.sco2;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class SplashFragment extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, 
	        ViewGroup container, Bundle savedInstanceState) {
	    View view = inflater.inflate(R.layout.splash, 
	            container, false);
	    return view;
	}
}

3. Następnie dodajemy plik ‚splash.xml‚ w ‚res/layout‚ naszego projektu (końcowy efekt):

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical"
              android:background="#303040" >

    <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >
        <ImageView
                android:id="@+id/splash_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="10dp"
                android:gravity="center"
                android:src="@drawable/icon" />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:textColor="#AFDEFE"
                android:textSize="28sp"
                android:typeface="serif"
                android:textStyle="italic"
                android:text="@string/app_name" />
    </LinearLayout>


    <TextView
            android:id="@+id/profile_name"
            android:layout_width="174dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="35dp"
            android:lines="2"
            android:textSize="17sp"
            android:text="@string/get_started"
            android:layout_gravity="center_horizontal"
            android:gravity="center_horizontal"/>

    <com.facebook.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>

4. Przechodzimy do ‚res/values/strings.xml‚ naszego projektu i dodajemy:

<string name="get_started">To get started, log in using Facebook</string>
<string name="app_name">Tytuł apki</string>

5. Dodajemy do projektu kolejną klasę, ‚SelectionFragment‚ (końcowy efekt) :

package lukaszkStore.sco2;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SelectionFragment extends Fragment {
	private static final String TAG = "SelectionFragment";

	@Override
	public View onCreateView(LayoutInflater inflater, 
	        ViewGroup container, Bundle savedInstanceState) {
	    super.onCreateView(inflater, container, savedInstanceState);
	    View view = inflater.inflate(R.layout.selection, 
	            container, false);
	    return view;
	}
}

6. Dodajemy do ‚res/layout’ widok ‚selection.xml‚ (końcowy efekt):

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical"
              android:background="#303040" >

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_gravity="center"
    android:textColor="#333"
    android:textSize="18sp"
    android:text="Welcome."  />
</LinearLayout>

7. Modyfikujemy nasz główny widok projektu w moim przypadku ‚res/layout/activity-main.xml‚, zwróćcie uwagę na nazwę pakietu, umieśćcie nazwę własnego (końcowy efekt):

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

    <fragment android:name="lukaszkStore.sco2.SelectionFragment"
          android:id="@+id/selectionFragment"
          android:layout_width="match_parent"
          android:layout_height="match_parent" />
    <fragment android:name="lukaszkStore.sco2.SplashFragment"
          android:id="@+id/splashFragment"
          android:layout_width="match_parent"
          android:layout_height="match_parent" />
</LinearLayout>

8. Do manifestu należy dodać jeszcze informację o używanym Activity:

<activity
	 android:name="com.facebook.LoginActivity"
	 android:label="@string/app_name" >
</activity>

Możemy teraz się zalogować do naszego konta facebook, ale nie możemy się jeszcze wylogować to za chwilę.

Logowanie Facebook SDK

Logowanie Facebook SDK

 

Logowanie Facebook SDK

Logowanie Facebook SDK

Wylogowywanie

1. Do głównego widoku dodać:

    <fragment android:name="com.facebook.widget.UserSettingsFragment"
          android:id="@+id/userSettingsFragment"
          android:layout_width="match_parent"
          android:layout_height="match_parent" />

2. Do „res/values/string.xml” dopisać:

<string name="settings">Settings</string>

3. W „MainActivity.java” należy dopisać:

private static final int SETTINGS = 2;
private MenuItem settings;
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    // only add the menu when the selection fragment is showing
    if (fragments[SELECTION].isVisible()) {
        if (menu.size() == 0) {
            settings = menu.add(R.string.settings);
        }
        return true;
    } else {
        menu.clear();
        settings = null;
    }
    return false;
}

podmienić definicję obiektu z

private static final int FRAGMENT_COUNT = SELECTION +1;

na

private static final int FRAGMENT_COUNT = SETTINGS +1;

do metody onCreate() dopisać:

fragments[SETTINGS] = fm.findFragmentById(R.id.userSettingsFragment);

oraz zredefiniować metodę „onOptionsItemSelected(…)

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (item.equals(settings)) {
        showFragment(SETTINGS, true);
        return true;
    }
    return false;
}

Jeśli mamy w głównej aktywności mamy metodę onCreateOptionsMenu(…) to ją usuwamy.

Dzięki tym operacjom umożliwiliśmy sobie wylogowanie się z naszego konta, aby wyświetlić ekran wylogowywania należy kliknąć „settings” z opcji aplikacji.

Wylogowywanie Facebook SDK

Wylogowywanie Facebook SDK

Troubleshooting

  • niemożność dodania referencji do Facebook SDK – borykałem się sporo czasu z tym problemem, moim zdaniem dzieje się tak, gdy pliki biblioteki umieścimy w miejscu, gdzie Windows, nie zezwala na dostęp nieupoważnionych osób, aplikacji, np. „C:\”. Ten sam problem pojawił się, gdy umieściłem pliki biblioteki na innej partycji niż mój projekt na Androida w Eclipse, dlatego proponuje skopiować pliki biblioteki Facebook SDK do „”C:\Users\nazwa_konta\Documents\”, jeśli nasza aplikacja znajduje się gdzieś na dysku C:\.
  • Found 3 versions of android-support-v4.jar in the dependency list – spowodowane jest to różnymi wersjami pliku „android-support-v4.jar” w pakiecie. Rozwiązałem ten problem poprzez zastąpienie android-support-v4.jar we wszystkich pozostałych lokalizacjach, wersją z projektu appcompat_v7 (katalog libs). Po tym wszystkim, trzeba jeszcze „wyczyścić” wszystkie projekty Project -> Clean (Clean all projects).

Podsumowanie

Pokrótce poznaliśmy jakąś część możliwości, które udostępnia deweloperom Facebook. Dodaliśmy do naszej aplikacji logowanie na nasze konto. W dalszym etapie można napisać funkcjonalności zezwalające przeglądanie listy znajomych, publikowanie postów, czy wreszcie wysyłać zapytanie FQL. W paczce, którą pobraliśmy znajduje się kilka przykładowych projektów o przeróżnej funkcjonalności, warto z nich korzystać, bo po co wynajdować koło na nowo?

Zapraszam do innych artykułów z serii.

Artykuł powstał na podstawie tutorial’u udostępnianego na stronie https://developers.facebook.com, można tam znaleźć inne samouczki, które prowadzą za rękę przy implementowaniu funkcjonalności.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *