Аутентификация телефона для устройств Android и iOS

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

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

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

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

  • Начните свой выставочный проект
  • Настройте приложение Firebase для Интернета. Мы будем использовать ключи конфигурации веб-приложения firebase в нашем проекте.
  • Создайте файл JavaScript в корневом каталоге проекта. Я назвал его «config.js». Внутри этого файла мы добавим ключи конфигурации Firebase.
  • Код входа OTP очень прост. Это выглядит примерно так:
  • Определить состояние приложения с помощью хука useState
const [phoneNumber, setPhoneNumber] = useState('');
    const [code, setCode] = useState('');
    const [verificationId, setVerificationId] = useState(null);
    const recaptchaVerifier = useRef(null);
  • Отправьте код подтверждения.
const sendVerification = () => {
        const phoneProvider = new firebase.auth.PhoneAuthProvider();
        phoneProvider
          .verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)
          .then(setVerificationId);
          setPhoneNumber('');
    };
  • Подтвердите код подтверждения
const confirmCode = () => {
        const credential = firebase.auth.PhoneAuthProvider.credential(
          verificationId,
          code
        );
        firebase
          .auth()
          .signInWithCredential(credential)
          .then(() => {
            setCode('');
        })
        .catch((error) => {
          // show an alert in case of error
          alert(error);
        })
        Alert.alert(
          'Login Successful. Welcome to Dashboard.',
        );
        
    };
  • Вот и все. Остальное — часть пользовательского интерфейса. Посмотреть демо этого проекта можно здесь.
  • Если вы запутались или растерялись, я бы порекомендовал посмотреть пошаговый видеоурок. Несколько минут настройки и кода, и вы будете готовы протестировать приложение.

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

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

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

Спасибо.