Всегда было замечательно видеть, как популярные приложения, такие как Quora, Medium, используют Facebook для входа в систему, и это заставило меня задуматься, смогу ли я сделать то же самое. К счастью, с некоторой помощью Facebook это стало возможным. У Facebook есть SDK (комплект для разработки программного обеспечения), который помогает нам интегрировать его с нашим приложением. Предоставленный SDK называется react-native-fbsdk. Это очень мощная библиотека, которая помогает нам получать данные из Facebook и соответствующим образом манипулировать ими в нашем приложении.
Следующие шаги помогут нам легко интегрировать Facebook с любым приложением.
- выполните команду npm install react-native-fbsdk внутри папки проекта с помощью git bash, которая установит библиотеку в ваш проект, вы можете перепроверить, выполнив поиск имени пакета внутри package.json
- Теперь включите следующий шаг в android/app/src/main/res/values/strings.xml.
‹string name="facebook_app_id"›Идентификатор приложения Facebook‹/string›
3. Теперь добавьте следующее в android/build.gradle.
* Обратите внимание, что два файла build.gradle будут проверять указанный выше путь и включать приведенный ниже код.
mavenCentral()
Приведенный выше код должен быть включен в
buildscript{
…
репозитории {
…
mavenCentral()
}}
4. Теперь включите следующую зависимость в android/app/build.gradle.
реализация ‘com.facebook.android:facebook-android-sdk:[5,6)’
Приведенный выше код должен быть включен в раздел зависимости.
5. Проверьте следующее разрешение пользователя в файле android/app/src/AndroidManifest.xml.
‹uses-permission android:name="android.permission.INTERNET"/›
6. Теперь включите следующие метаданные
‹мета-данные android:name=”com.facebook.sdk.ApplicationId” android:value=”@string/facebook_app_id”/›
в android/app/src/AndroidManifest.xml . В AndroidManisfest поместите его под тегом ‹application›, как показано ниже.
‹приложение›
…
‹мета-данные android:name=”com.facebook.sdk.ApplicationId” android:value=”@string/facebook_app_id”/›
….
‹/приложение›
7. Теперь, наконец, замените следующий код в App.js.
import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginButton, AccessToken } from 'react-native-fbsdk';
export default class Login extends Component {
render() {
return (
<View>
<LoginButton
onLoginFinished={
(error, result) => {
if (error) {
console.log("login has error: " + result.error);
} else if (result.isCancelled) {
console.log("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then(
(data) => {
console.log(data.accessToken.toString())
}
)
}
}
}
onLogoutFinished={() => console.log("logout.")}/>
</View>
);
}
};
- Все настроено на стороне клиента, теперь нам нужно связать наше приложение с Facebook.
8. Теперь перейдите на https://developers.facebook.com/ и войдите в свою учетную запись facebook, если она существует, иначе создайте новую учетную запись facebook.
9. После входа в систему вы можете найти вкладку «Мои приложения» с правой стороны, выбрать «Создать приложение», дать имя приложению.
10. После создания приложения вы можете найти идентификатор приложения рядом с боковой панелью, скопировать номер и заменить текст в android/app/src/main/res/values/strings.xml. Ниже я просто заменяю существующий текст каким-то случайным фиктивным числом.
‹string name="facebook_app_id"›1234567890‹/string›
11 Теперь выберите Настройки > Основные в консоли разработчика Facebook и перейдите в нижнюю часть экрана, вы можете найти Добавить платформу, выберите это, под этим выберите Android .
12. Теперь все, что нам нужно сделать, это связать приложение и Facebook с помощью некоторого ключа безопасности, открыть git bash, найти git bash в папке, содержащей проект, и вставить следующий код.
keytool -exportcert -alias androiddebugkey -keystore android/app/debug.keystore | openssl sha1-binary | база openssl64
Теперь это в основном означает, что мы говорим gitbash создать файл debug.keystore под android/app/ внутри, который содержит ключ безопасности, сделанный из форматов openssl sha1 и openssl base64.
13. Скопируйте сгенерированный код, откройте консоль разработчика Facebook, перейдите в «Настройки» -> «Основные» -> «Платформа Android», которая была создана на предыдущем шаге, и вставьте его в раздел «Решётка».
- Обратите внимание, что код будет состоять из 28 цифр.
Вот и все, что связано с родным приложением Facebook и React (Android). Вы можете использовать для входа в систему, но если вы хотите использовать другие данные, такие как пол, номер телефона, тогда ваше приложение должно быть проверено Facebook, и тогда только вы получите эти данные.
Спасибо, надеюсь, что описанные выше шаги сработали, как объяснено. Пожалуйста, не стесняйтесь оставлять комментарии, если в статье есть какие-либо изменения, и хлопать в ладоши, если она вам понравилась.
