Статьи

Интеграция API Facebook с Android

Эта статья была обновлена ​​13 декабря 2016 года.

В этом уроке я покажу, как подключить ваше приложение Android к API Facebook. Многие мобильные приложения используют Facebook API v4.x для входа в систему, регистрации и публикации данных.

Login with Facebook

Profile information

Share to Facebook

Создать проект Android

Убедитесь, что у вас установлена ​​последняя версия Android Studio. Я использую версию 1.4.1

Откройте Android Studio и создайте новый проект , назвав его по своему желанию. Нажмите Далее , выберите Минимальный уровень API 17 и снова нажмите Далее . Выберите « Пустое действие» в качестве первого действия, назовите его « LoginActivity» и нажмите « Готово» .

Далее мы добавляем еще одно пустое действие в проект. Щелкните правой кнопкой мыши по пакету и выберите New -> Activity -> Blank Activity . Оставьте его имя по умолчанию и нажмите Готово.

Окончательный проект этой статьи можно найти на Github . Убедитесь, что вы изменили данные API Facebook в соответствии со своими.

Создание идентификатора приложения Facebook

Чтобы использовать Facebook API, мы должны добавить запись приложения на нашу панель инструментов Facebook Developer Apps . Вам понадобится аккаунт разработчика Facebook, если у вас его еще нет. Выберите случайную категорию и нажмите « Создать идентификатор приложения» .

На следующей странице прокрутите вниз и заполните оба поля с именами пакетов проекта.

Package Names

Нажмите Далее .

Теперь нам нужно добавить хэш ключа разработки. Есть два способа создания одного. Первый вариант — использование командной строки.

Windows

keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64 

макинтош

 keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 

Откройте раздел « Мои приложения» в Facebook и скопируйте идентификатор приложения:

App ID

Откройте strings.xml в вашем проекте и добавьте следующую строку кода:

 < string name = "facebook_app_id" > {Your App ID here} </ string > 

Настройка Facebook SDK

Откройте build.gradle (Project) и добавьте mavenCentral() в оба раздела репозитория. Затем откройте build.gradle (Module) и добавьте библиотеку SDK, добавив эту строку в dependencies :

  compile 'com.facebook.android:facebook-android-sdk:4.18.0' 

Adding dependencies

Теперь синхронизируйте Gradle.

Деятельность и макеты

Откройте AndroidManifest.xml и внесите эти изменения.

Измените метку MainActivity :

 < activity android:name = ".MainActivity" android:label = "@string/app_name" android:theme = "@style/Theme.AppCompat.NoActionBar" > </ activity > 

Добавьте эти теги:

 < meta-data android:name = "com.facebook.sdk.ApplicationId" android:value = "@string/app_id" /> < activity android:name = "com.facebook.FacebookActivity" android:label = "@string/app_name" android:screenOrientation = "portrait" /> < provider android:authorities = "com.facebook.app.FacebookContentProvider" android:name = "com.facebook.FacebookContentProvider" android:exported = "true" /> 

Теперь мы будем работать с Java-классами и макетами.

Во-первых, мы собираемся работать с LoginActivity.java . Этот класс открывает аутентифицированное соединение с API Facebook и получает от него данные.

Добавьте эти строки перед методом onCreate внутри класса:

 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) { } }; 

Здесь мы создаем FacebookCallback под названием callback . Это выполняет следующее действие после того, как мы получим ответ от API Facebook и метод для этого — onSuccess() .

Внутри метода onSuccess мы создаем новый профиль Facebook и получаем данные для этого профиля. Позже мы создадим простую функцию под названием nextActivity() , которая переключит нашу деятельность.

Мы собираемся инициализировать SDK Facebook, чтобы мы могли использовать его функции и методы. Внутри 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(); 

Далее нам нужно показать знаменитую кнопку входа в Facebook. Нам не нужно делать это с нуля, так как он существует внутри библиотек SDK и может вызываться в нашем макете.

Поэтому мы будем редактировать макет нашей LoginActivity. Это имя должно быть content_login.xml . Фактически, последняя версия Android Studio создает два XML- файла по умолчанию для каждого действия, которое мы создаем. Другой файл макета называется activity_login.xml .

В файле activity_login.xml удалите код для плавающей кнопки, поскольку он нам не понадобится.

В content_login.xml есть только элемент TextView . Мы удалим его и создадим новый LinearLayout который горизонтально ориентирован. Внутри этого макета мы добавим кнопку входа. Вставьте приведенный ниже код для замены текущего содержимого content_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 > 

Я добавил отступы сверху и снизу и центрировал горизонтальную линейную разметку. Вернемся к классу Login и создадим кнопку.

Внутри 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(), "Logging in..." , Toast.LENGTH_SHORT).show(); } @Override public void onCancel () { } @Override public void onError (FacebookException e) { } }; loginButton.setReadPermissions( "user_friends" ); loginButton.registerCallback(callbackManager, callback); 

Здесь мы создаем соединение между кнопкой в content_login.xml и библиотеками Facebook SDK.

Есть несколько методов @Overrided которые нам нужны внутри LoginActivity.java . Добавьте строки ниже:

 @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); } } 

Нам нужны имя и фамилия профиля и изображение профиля размером 200 на 200 пикселей. На данном этапе мы получаем только свой Uri . Эти три строки будут использованы в качестве дополнений в нашем следующем упражнении.

MainActivity class

Функция nextActivity() в классе LoginActivity передала некоторые строки нашему следующему действию. Теперь мы используем их, создавая три другие строки внутри onCreate() класса MainActivity и сохраняя в них переданные данные:

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

Для отображения этих данных нам нужно изменить макет content_main.xml . Код ниже добавляет элементы, которые нам нужны для отображения данных. Добавьте этот код в теги RelativeLayout :

 < 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" /> < Button android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_gravity = "center_horizontal" android:text = "Logout" android:id = "@+id/logout" /> </ LinearLayout > 

Чтобы отобразить имя профиля, добавьте приведенный ниже код в метод onCreate() класса MainActivity :

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

Далее мы хотим отобразить фотографию профиля. Из последнего упражнения у нас есть картинка Uri в виде строки. Мы можем использовать этот Uri для загрузки изображения в виде растрового файла.

Создайте новый класс и добавьте код ниже:

 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); } } 

Чтобы отобразить изображение профиля в нашем приложении, добавьте строку ниже внутри onCreate() класса MainActivity после последней добавленной строки.

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

Он использует строку imageUrl , загружает изображение и отображает его в макете content_main.xml .

Теперь, когда отображение данных завершено, мы добавим диалог обмена на кнопку с плавающим действием, чтобы приложение могло публиковать в Facebook.

Откройте файл activity_main.xml и измените:

 android:src="@android:drawable/ic_dialog_email" 

чтобы:

 android:src="@android:drawable/ic_menu_edit" 

Измените цвет кнопки, отредактировав значения цвета в colors.xml . Я использовал этот цвет:

 < color name = "colorAccent" > #5694f7 </ color > 

Далее, чтобы кнопка что-то сделала.

private ShareDialog переменную MainActivity классе MainActivity :

 private ShareDialog shareDialog; 

Внутри onCreate() создайте этот диалог:

 shareDialog = new ShareDialog( this ); 

Мы хотим показать это диалоговое окно, когда нажимаем плавающую кнопку. Замените Snackbar code OnClick методе OnClick кодом:

 ShareLinkContent content = new ShareLinkContent.Builder().build(); shareDialog.show(content); 

Наше приложение теперь может публиковать в Facebook, но мы еще не закончили, функция выхода из системы отсутствует.

Сначала приложение должно понять, LoginActivity ли оно в систему. Инициализируйте SDK Facebook, как мы делали в LoginActivity , добавив LoginActivity строку кода в метод onCreate() :

 FacebookSdk.sdkInitialize(getApplicationContext()); 

Добавьте функцию logout() из logout() :

 Button logout = (Button)findViewById(R.id.logout); logout.setOnClickListener( new View.OnClickListener() { @Override public void onClick (View view) { LoginManager.getInstance().logOut(); Intent login = new Intent(MainActivity. this , LoginActivity.class); startActivity(login); finish(); } }); 

Теперь вы можете запустить свое приложение и опубликовать в Facebook! Пожалуйста, дайте мне знать в комментариях ниже, если у вас есть какие-либо проблемы или вопросы.