Вход в Apple в React Native для ios

Давайте интегрируем вход Apple в приложения iOS на основе React Native.

Благодаря входу в Apple пользователи могут использовать свой Apple ID в качестве надежного идентификатора для приложений, что избавляет от необходимости создавать новую учетную запись пользователя с рассматриваемым приложением.

В этой статье рассматривается процесс интеграции входа с Apple в контексте React Native. Здесь мы будем использовать пакет react-native-apple-authentication для облегчения интеграции входа с Apple.

Пакет установщика

Давайте начнем с установки пакета npm для аутентификации Apple в качестве зависимости от проекта и выполнения следующих команд для обновления модулей.
npm i @invertase/react-native-apple-authentication

yarn @invertase/react-native-apple-authentication

cd ios и установка pod

Отображение кнопки входа с помощью Apple

import { AppleButton } from '@invertase/react-native-apple-authentication';

async function onAppleButtonPress() {
/* Sign in logic */
} 

function App() {
  return (
    <View>
      <AppleButton
        buttonStyle={AppleButton.Style.WHITE}
        buttonType={AppleButton.Type.SIGN_IN}
        style={{
          width: 160, // You must specify a width
          height: 45, // You must specify a height
        }}
        onPress={() => onAppleButtonPress()}
      />
    </View>
  );
}

Вспомогательная функция для Apple Войти

Логика кнопки onAppleButtonPress включает следующие сегменты кода:

Запрос на вход

try {
      appleAuthRequestResponse = await appleAuth.performRequest({
        requestedOperation: appleAuth.Operation.LOGIN,
        requestedScopes: [appleAuth.Scope.EMAIL],
      });
    } catch (e) {
      console.log('error', e);
    }
const { identityToken, nonce, user, email, fullName } =
      appleAuthRequestResponse;

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

Проверка идентификационного токена

Последнее, что нужно сделать «onAppleButtonPress», — это отправить этот запрос на ваш сервер и обработать либо успешный, либо неудачный ответ проверки.

if (identityToken) {
      const appleCredential = firebase.auth.AppleAuthProvider.credential(
        identityToken,
        nonce,
      );
      console.log('appleCredential', appleCredential);

      firebase
        .auth()
        .signInWithCredential(appleCredential)
        .then(user => {
          // User logs in Successfully
          // Success handler code 

          console.log('apple user----', user);
        })
        .catch(error => {
          // Something goes wrong
          // Error handler code

          console.log('Error in apple login', error);
        });

Полная служебная функция для входа в Apple выглядит примерно так:

import appleAuth from '@invertase/react-native-apple-authentication';
import firebase from '@react-native-firebase/app';
import { useEffect } from 'react';
  
  /**
   * appleLoginHandler function takes care of apple sign in
   */
  const appleLoginHandler = async () => {
    let appleAuthRequestResponse;
    try {
      appleAuthRequestResponse = await appleAuth.performRequest({
        requestedOperation: appleAuth.Operation.LOGIN,
        requestedScopes: [appleAuth.Scope.EMAIL],
      });
    } catch (e) {
      console.log('error', e);
    }
    const { identityToken, nonce, user, email, fullName } =
      appleAuthRequestResponse;

    if (identityToken) {
      const appleCredential = firebase.auth.AppleAuthProvider.credential(
        identityToken,
        nonce,
      );
      console.log('appleCredential', appleCredential);

      firebase
        .auth()
        .signInWithCredential(appleCredential)
        .then(user => {
          // User logs in Successfully
          console.log('apple user----', user);
        })
        .catch(error => {
          // Something goes wrong
          console.log('Error in apple login', error);
        });
    }
  };

export { appleLoginHandler };

Окончательный штрих для настройки Xcode и Firebase —

XКОД -

Откройте свой проект ›› в разделе «Подписание и возможности» ›› добавьте возможность ›› Включить вход с помощью Apple

Firebase -

Откройте свое текущее приложение в firebase ›› Под аутентификацией ›› Методы входа ›› Добавить нового провайдера ›› Включить вход через Apple

Большой!! теперь мы можем войти в наше приложение через логин Apple.

Примечание. В симуляторе вы можете столкнуться с кодом ошибки 1001, который может не быть проблемой на реальном устройстве.