Советы по Expo.io

Используйте expo-auth-session с Facebook самым простым способом на iOS/Android

Хотите реализовать соединение OAuth2 с Facebook и expo.io? Вы находитесь в нужном месте!

🇫🇷 Доступна французская версия этого поста

Почему эта статья?

Поскольку API-интерфейсы аутентификации OAUth2 для Facebook и Google устарели, Expo предлагает нам использовать новую реализацию на основе веб-браузера под названием expo-auth-session.

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

Действительно, когда вы используете Expo GO, предварительно скомпилированный клиент для Expo, он работает довольно хорошо, но когда вы создаете отдельное приложение, это может быстро усложниться, особенно на Android, и в конечном итоге вы будете рвать на себе волосы.

На момент написания этой статьи в нескольких темах сообщалось о различных проблемах, связанных с сеансом expo-auth-session (SDK44 Expo).

После долгих исследований и экспериментов я нашел довольно хорошее решение, которое устраняет две проблемы, чтобы иметь функциональный вход в Facebook на IOS и Android в управляемом рабочем процессе для приложений, созданных с помощью eas-build in standalone или expo-dev-client.

Но сначала давайте посмотрим, как работает expo-auth-session.

Как работает expo-auth-session?

expo-auth-session — это библиотека, призванная упростить нашу жизнь для авторизации OAuth2 с различными поддерживаемыми провайдерами, среди которых Google и Facebook.

Он предоставляет примитивы через простой API, который, среди прочего, позволит открыть браузер в нашем приложении, который использует файлы cookie системного браузера (чтобы воспользоваться тем фактом, что мы уже можем быть подключены к данному сервису).

Как только пользователь подтвердит разрешения, библиотека будет управлять перенаправлением сторонней службы и обрабатывать возвращенные данные, чтобы получить токен проверки подлинности, идентификатор пользователя и все остальное, что может быть использовано в процессе подключения OAuth2. С помощью этого токена аутентификации мы можем использовать сторонний API для получения клиентских данных.

Как мы видели, это практично и хорошо работает в Expo GO, но в отдельном приложении, которое не имеет такой тонкой настройки, как в Expo GO, иногда это сложнее, особенно на Android.

Не паникуйте: ниже приведен функциональный рабочий процесс, который очень легко реализовать.

Полный и функциональный рабочий процесс сеанса авторизации с Facebook для ExpoGO И Android/IOS (EAS BUILD)

Протестировано на expo SDK 44 с указанными версиями пакетов:

// Packages versions range
{
  "expo": "~44.0.0",
  "expo-app-loading": "~1.3.0",
  "expo-auth-session": "~3.5.0",
  "expo-constants": "~13.0.1",
  "expo-dev-client": "~0.8.4",
  "expo-random": "~12.1.1",
  "expo-status-bar": "~1.2.0",
  "expo-updates": "~0.11.6"
}

1 — инсталлятор expo-auth-session & deps

expo install expo-auth-session expo-random

(подробнее)

2 — Определить схему диплинков для нашего приложения

// app.json or equivalent
{
  "expo": {
    "scheme": "codingspark" // Allows to deeplink to codingspark://
  }
}

3 — Настройте приложение Facebook Developer

Перейдите к конфигурации вашего приложения Facebook (создайте его, если у вас его нет) и в разделе Вход через Facebook введите URL-адрес ссылки авторизации expo.

Этот URL-адрес состоит из двух частей: https://auth.expo.io/ и вашего originalFullName, который представляет собой сумму username и slug приложения.

Пример:https://auth.expo.io/@codingspark/jerry

Чтобы получить originalFullName, вы можете использовать следующую команду в корневой папке вашего проекта:

expo config --type public | grep "originalFullName"

Затем мы проверяем, что мы находимся в этом состоянии, и мы валидируем!

Теперь самое приятное…

4 — Небольшой хак-код!

Первое, что нужно отметить, это то, что в настоящее время у нас есть ошибка в сборке EAS, и она может быть уже не актуальна, когда вы читаете эту статью (не стесняйтесь сообщить мне, если это так).

Для этого вам нужно перегрузить originalFullName, как показано ниже, где-то в начале приложения, иначе вы получите ошибку при использовании useProxy: true. Вы можете проверить темы в начале статьи, чтобы следить за ходом работы над этими ошибками.

// Somewhere at application root like App.tsx
// https://github.com/expo/expo/issues/13714 to counter this issue
import Constants from "expo-constants";
Constants.manifest!.originalFullName = "@<teamname/username>/<slug>";

Вторая проблема — это проблема перенаправления, которая не работает и либо приводит к сбою приложения, либо ведет себя странно и просто не работает.

Здесь решение состоит в том, чтобы всегда использовать ссылки auth.expo.io, которые имеют несколько преимуществ

Для этого вам нужно объединить useProxy: true и заданный вручную аргумент redirectURL, который будет генерировать ссылку в auth.expo.io ВСЕ ВРЕМЯ.

import Constants from "expo-constants";
export const HomeScreen: React.FC = () => {
  const [, response, prompt] = Facebook.useAuthRequest(
    {
      clientId: "<facebook_app_id>", // Must be defined in JavaScript, won't use app.json values.
      redirectUri: AuthSession.makeRedirectUri({ useProxy: true }), // useProxy here…
    },
    { useProxy: true } // …and also here
  );
return <AppButton onPress={() => prompt()} title="Login with FB" />
}

Затем мы получаем токен аутентификации в переменной response, что позволяет нам запрашивать API Facebook, как показано ниже:

https://graph.facebook.com/me?fields=first_name,last_name,email,picture.type(large)&access_token=${response.authentication.accessToken}

И VOILÀ со всем этим, вы должны быть в порядке, ожидая Экспо, чтобы немного улучшить использование этого модуля.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.