Для Expo SDK версии ≥ 46. Android и iOS

Привет..!! Меня зовут Рохит. Ну, я не профессиональный автор контента. Но я позабочусь о том, чтобы в конце этой статьи вы могли добавить функцию входа в Facebook с помощью Firebase в свои приложения React Native и Expo.

Рекомендую посмотреть пошаговое руководство здесь:

Настройка проекта и требования к пакету

Внимание всем разработчикам, стремящимся установить социальные связи и зарекомендовать себя, получая при этом пассивный доход — не ищите дальше! Я настоятельно рекомендую книгу From Code to Connections, которая поможет вам в этом процессе. Не упустите возможность получить свою копию прямо сейчас на Amazon по всему миру или Amazon India! Вы также можете выбрать Gumroad.

  • Мы все знаем, что expo объявила устаревшим пакет expo-facebook после выпуска Expo SDK версии 46. Мы должны использовать альтернативный метод, чтобы выполнить нашу работу.
  • Официальная документация предлагает вместо этого использовать пакет react-native-fbsdk-next.
  • Если вы отметите установка пакета ‘react-native-fbsdk-next’, он не будет работать в мобильном приложении Expo Go.
  • Поскольку этот пакет использует собственный код, мы должны использовать либо метод предварительной сборки, либо метод разработки сборки. Для метода Prebuild требуется Android Studio или XCode, в зависимости от операционной системы, с которой вы работаете. С другой стороны, вам не нужно никакого стороннего программного обеспечения в методе Development Build. Поэтому я буду следовать рекомендациям метода Development Build. Оба эти метода официально заявлены Expo.
  • Настройте приложение в соответствии с методом сборки разработки. Пошаговую инструкцию вы можете посмотреть в видео здесь.
  • Добавьте следующее в файл app.json
{
  "expo": {
    "plugins": [
      [
        "react-native-fbsdk-next",
        {
          "appID": "48127127xxxxxxxx",
          "clientToken": "c5078631e4065b60d7544a95xxxxxxxx",
          "displayName": "RN SDK Demo",
        }
      ]
    ]
  }
}
  • Для appID и clientToken настройте свою учетную запись для Android здесь.
  • Теперь, если вы находитесь в тестовом режиме, вы можете заполнить ограниченную информацию в учетной записи «Мета для разработчиков». Но для производственного режима вы должны правильно заполнить каждую часть информации.
  • Теперь настройте свою учетную запись Firebase для Интернета. Затем включите вход через Facebook в разделе «Аутентификация».
  • Теперь перестройте свое приложение.
  • Иногда сборка завершается с ошибкой из-за внутренней проблемы сервера. Вам просто нужно повторить команду
  • Настройка проекта и подключение его к Firebase — самая сложная часть этого проекта. Кодировать легко. Я попытался написать шаги настройки проекта, но это слишком сумбурно. Итак, я предлагаю вам посмотреть первые несколько минут Видео YouTube, чтобы настроить свой проект.

Алгоритм проекта и код

В App.js

  • Обработайте изменение состояния пользователя и позвольте системе запомнить изменение состояния с помощью хука useEffect.
// Handle user state changes
  function onAuthStateChanged(user) {
    setUser(user);
    if(initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber;
  }, []);
  • Функция, запускающая вход через Facebook
const signInWithFB = async () => {
    try {
      await LoginManager.logInWithPermissions(['public_profile', 'email']);
      const data = await AccessToken.getCurrentAccessToken();
      if (!data) {
        return;
      }
      const facebookCredential = FacebookAuthProvider.credential(data.accessToken);
      const auth = getAuth();
      const response = await signInWithCredential(auth, facebookCredential);
      console.log(response);
    } catch (e) {
      console.log(e);
    }
  }
  • Функция выхода
const signOut = async () => {
    try {
      await firebase.auth().signOut();
    } catch (e) {
      console.log(e);
    }
  }
  • Вот и все. Пользовательский интерфейс приложения можно настроить в соответствии с требованиями вашего проекта. Теперь протестируйте приложение, используя метод сборки.
  • Если вы запутались или растерялись, я бы порекомендовал посмотреть пошаговое видеоруководство по использованию Google SignIn с Firebase, React Native и Expo.

Почему я предлагаю смотреть больше видео?

Я из Индии, и мне нравится писать код и делиться им с сообществом. Все мы знаем, что деньги — это высшая мотивация для работы, и платежная система Medium использует Stripe, которая последние 4–5 лет находится в режиме предварительного просмотра в Индии. Я ждал год на платформе Medium, но в итоге ничего не вышло.

Итак, я начал снимать видео на YouTube, чтобы зарабатывать на жизнь. Я разместил важный код во фрагменте кода, но пошаговое руководство смотрите в видео. И если вы пойдете туда, не забудьте подписаться на мой канал для видео, связанных с React Native, Django, Python и наукой о данных.

Спасибо.