Создание многоразового компонента входа в систему React

Узнайте, как создать компонент Firebase для входа в Google с возможностью многократного использования и совместного использования.

В этой главе мы продолжим с того места, где остановились в первой главе, которая касалась реализации входа в систему Facebook и инициирования структуры приложения для реагирования. Мы собираемся добавить логин Google в то же приложение, которое мы создали в первой главе. Эта глава короткая, приятная и простая, потому что мы уже закончили проблемный раздел предыдущей главы. Мы разбили это руководство на различные подзаголовки, чтобы вы могли понять концепцию проекта React, входа в систему Google, аутентификации firebase, реализации компонентов и т. Д. И работать соответственно.

А теперь давайте приступим к реализации входа в Google!

Что вы узнаете…?

• Как создать новое приложение React.
• Как передать реквизит в React.
• Как использовать Firebase Authentication.
• Как создать и настроить приложение Google.
• Как пользоваться Bit.

Большинство вопросов уже было рассмотрено в первой главе, поэтому в этой главе концепции становятся еще яснее по мере нашего продвижения.

Проблема

Поскольку мы рассмотрели большую часть проблемного раздела в первой главе, в этой главе рассматривается только вопрос реализации входа в систему Google; что относительно просто по сравнению с входом в Facebook. Итак, здесь нам нужна быстрая победа, не теряя много времени. Нам необходимо быстро добиться результата, что является важной частью нашей мотивации для достижения конечных целей.

Требования

Вот полный список плагинов, пакетов и сервисов, которые нам понадобятся, чтобы извлечь пользу из этого руководства:

• Nodejs v8.x.x или выше, установленный вместе с NPM / yarn.
• Аккаунт Firebase и Bit.
• Вы уже выполнили проект из предыдущей главы.
• Пакет Firebase и Bit.

Многоразовый предыдущий код

Чтобы упростить нам задачу, мы скопируем компонент Facebook, который мы создали в первой главе, и заменим все связанные имена на Google. Структура каталогов проекта будет выглядеть примерно так:

Места, где мы изменили название с Facebook на Google, подробно описаны ниже:

1. Папка FacebookAuth изменена на GoogleAuth.

2. Файл FacebookAuth.jsx заменяется файлом GoogleAuth.jsx.

3. В файле GoogleAuth.jsx измените имя класса на GoogleAuth.

4. В функции handleLogin () измените FacebookAuthProvider на GoogleAuthProvider.

Затем нам нужно изменить Facebook на Google в разделе HTML, как показано ниже в следующем фрагменте кода:

<li class="firebaseui-list-item">
     <button
        onClick={this.handleLogin}
        class="firebaseui-idp-button mdl-button mdl-js-button mdl-button--raised firebaseui-idp-google firebaseui-id-idp-button">
         <span class="firebaseui-idp-icon-wrapper">
            
           <img class="firebaseui-idp-icon" alt="" src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg">
          </span>
          <span class="firebaseui-idp-text firebaseui-idp-text-long">
              Sign in with Google
          </span>
          <span class="firebaseui-idp-text firebaseui-idp-text-short">
            Google
          </span>
      </button>

Приведенный выше код предоставит нам компонент входа в Google, который нам нужно импортировать в наш файл App.js.

Теперь нам нужно скопировать приведенный ниже код и добавить его в наш файл App.js.

В нашем файле GoogleAuth / index.js нам нужно заменить весь импорт FacebookAuth на GoogleAuth, как показано во фрагменте кода ниже:

Теперь все изменения будут вноситься только в наш файл App.js. Нам нужно изменить файл App.js, чтобы включить компонент и передать конфигурацию firebase, как показано во фрагменте кода ниже:

В результате на экране браузера или приложения мы увидим следующий результат:

Мы видим, что это работает нормально. Теперь переместим один в часть нашего руководства, посвященную Firebase.

Активация метода входа в Firebase

На этом этапе нам нужно активировать метод входа в нашу консоль firebase, чтобы вход в Google работал. Для этого нам необходимо:

Перейдите в консоль firebase ›Аутентификация› включите метод входа в Google

Наконец, нам нужно отправить электронное письмо в службу поддержки проекта, а затем нажать кнопку «Сохранить», как показано на скриншоте консоли ниже:

После этого нам нужно вернуться в наше приложение и нажать «Вход в Google». Мы увидим следующую симуляцию и результат в нашей консоли браузера:

Наконец, мы успешно реализовали вход в Google в нашем приложении для реагирования.

Теперь нам нужно отправить код в Bit, как в предыдущей главе, создав новую коллекцию.

Сделайте его многоразовым с Bit

Чтобы сделать наш код пригодным для повторного использования и совместного использования, мы проведем некоторую реструктуризацию и переместим весь наш код в компоненты (это не обязательно, но лучше при использовании Bit). Затем мы экспортируем его (со всеми его зависимостями) в коллекцию компонентов в облаке Bit, чтобы поделиться с другими и легко использовать повторно.

На этом этапе мы собираемся снова отправить новый компонент, то есть компонент входа в Google, в Bit. У нас уже установлен пакет Bit и подключен к нашей учетной записи Bit. Итак, нам нужно создать коллекцию и начать с отслеживания компонента.

Примечание. Первый и второй этапы включают установку учетной записи Bit. Эти шаги можно пропустить, если у вас уже есть учетная запись Bit.

1. Создайте коллекцию и инициализируйте Bit в проекте.

Здесь мы создаем новую коллекцию на Bit, в которую мы собираемся отправить весь код нашего компонента. Мы используем страницу конфигурации Bit «create collection», чтобы создать новую коллекцию с именем «firebase-auth-collection», как показано на скриншоте ниже:

Чтобы успешно отправить весь проект в Bit, вам необходимо следовать инструкциям, приведенным на странице, показанной ниже:

Во-первых, нам нужно установить Bit CLI.

Используя NPM,

npm install bit-bin --global

Затем нам нужно перейти в каталог проекта в нашем Bit CLI и выполнить команды bit init и запустить bit login в Bit CLI, как показано на снимке экрана ниже:

2. Настройте компилятор React для нашего компонента.

Когда мы настраиваем компилятор, мы говорим Bit заключить его в капсулу. Объединение компонентов вместе с их компиляторами дает нам свободу использовать, создавать и тестировать их где угодно. Это включает в себя возможность запускать код в любом из приложений, в которых мы хотели бы использовать компонент, а также запускать его в облаке для включения таких функций, как игровая площадка для живых компонентов.

bit import bit.envs/compilers/react --compiler

3. Отслеживание компонентов

Нам нужно отслеживать наш компонент, используя следующую команду в командной строке или консоли Bit:

bit add src/components/GoogleAuth

Результат после выполнения команды показан ниже на скриншоте:

4. Отметьте и экспортируйте в нашу коллекцию в облаке Bit.

Здесь мы собираемся установить версию для всех отслеживаемых компонентов и экспортировать в эту коллекцию, используя следующую битовую команду:

bit tag --all 1.0.0

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

bit export krissnawat.firebase-auth-collection

Теперь наш пакет доступен на Bit. Это наш второй компонент в нашей коллекции аутентификации firebase, как показано на скриншоте ниже:

Наконец, нам нужно заменить компонент в нашем файле App.js, как показано во фрагменте кода ниже:

Наконец, реализация входа в систему Google с аутентификацией firebase и загрузка компонента в Bit завершены. Теперь мы можем запустить проект локально, чтобы все протестировать.

Заключение

В этом руководстве мы узнали, как реализовать вход в Google с помощью firebase. Мы также узнали о реализации повторно используемого кода в виде компонентов, как в предыдущей главе. Наконец, нам удалось протолкнуть наш второй компонент в нашу коллекцию Firebase Auth. В следующей главе мы продолжим работу с входом в Twitter.

Учить больше