Создайте повторно используемый компонент OAuth React с помощью Oauth.io и Bit

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

Кто не хочет сосредоточиться на создании продукта, а не на логике OAuth в коде? Сократите объем OAuth в вашем коде до одного запроса!

В этом посте мы создадим простой многоразовый компонент OAuth в React с OAuth.io, игроком на рынке OAuth с более чем 100 поставщиками! Посмотрим как.

Настроить пользователя OAuth.io

Зарегистрируйтесь на Oauth.io, это бесплатно :)

После входа в систему вы попадете в панель управления, как показано ниже.

Затем вы можете попробовать любую интеграцию, но не забудьте сначала настроить интегрированный API! Вот как.

Добавить API

Щелкните Добавить API.

Выберите Facebook в качестве поставщика приложения.

Теперь вам нужны client_id и client_secret. Итак, создайте приложение Facebook, чтобы получить эти учетные данные.

Перейдите на https://developers.facebook.com, чтобы создать приложение, и вставьте oauth.io в качестве домена для приложения.

Добавьте URI обратного вызова как oauth.io/auth

Поместите идентификатор и секрет в форму на OAuth.io.

Нажмите "Сохранить", вы также можете добавить дополнительные API. Давайте сначала воспользуемся API Facebook.

Создать компонент React

Затем давайте создадим компонент React для использования Oauth.io SDK. Документация для oauth.io находится по адресу http://docs.oauth.io.

Для быстрой демонстрации я подготовлю небольшой компонент с помощью приложения create-react-app в VS Code. Это будет выглядеть так.

Вот структура компонента OAuth.

Сделайте компонент многоразовым с помощью Bit

Bit - это облачный инструмент для создания программного обеспечения.

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

Проще говоря, вы можете думать о Bit как о своей «коробке Lego», в которой вы можете делиться компонентами из любого проекта, а затем находить и использовать их для создания других вещей. Полезно, правда? есть намного больше, но мы не будем вдаваться в подробности.

Почему я добавил раздел о Bit в демонстрацию OAuth?

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

Сначала войдите в Bit и создайте свою коллекцию (Scope).

Заполните необходимые данные.

Я назвал его «react-o-auth» и сделал его общедоступным.

Теперь наша коллекция готова; Давайте воспользуемся Bit, чтобы быстро поделиться компонентом из репозитория, в котором он находится (Bit творит «волшебство»: он автоматически изолирует компонент и передает его в облако без единого изменения кода или файла!).

Давайте поделимся компонентом.

Установить бит

Если у вас еще нет Bit, установите его глобально, используя

npm install -g bit-bin

Инициализировать Bit для проекта

Инициализировать рабочее пространство Bit с помощью:

bit init

Эта команда добавляет файлы bit.json и .bitmap, чтобы Bit мог начать отслеживание и изоляцию компонентов в репозитории, когда им будет предложено это сделать.

Подключитесь к своей коллекции

Используйте bit login для входа в Bit. Ссылка откроется в браузере.

Успех аутентификации также отображается в терминале.

Начать разработку

Откройте facebook.jsx и следуйте пошагово

1. импортировать необходимые библиотеки

import React from "react";
import { OAuth } from "oauthio-web";

2. создать класс FacebookAuth

export default class FacebookAuth extends React.Component {
}

3. Создайте состояние для хранения токена доступа.

state = {
access_token: ""
};

4. Инициализировать OAuth-io SDK с помощьюinitialize и получать данные от реквизита.

componentDidMount() {
   OAuth.initialize(this.props.api_key);
}

5. Создайте метод обработчика OAuth.

Auth = () => {
    OAuth.popup("facebook")
      .done(res => {
          this.setState({ access_token: res.access_token });
      })
      .fail(err => {
    });
};

6. Визуализируйте кнопку входа в систему.

render() {
   return (
      <button onClick={this.Auth}
       className="btn btn-tw btn-block">
       Sign in with facebook
      </button>
   );
}

7. Наконец, импортируйте этот компонент в index.js.

import FacebookAuth from "./components/FacebookAuth";

8. Активируйте компонент, разместив его где-нибудь.

<FacebookAuth api_key={"Fcdn9FAU7dhM0TztVA28NM"} />

Добавьте компоненты в Bit

Теперь попросите Bit отслеживать все компоненты, которые вы помещаете в каталог src/components.

bit add src/components/*

Результат

Запустите bit status, чтобы увидеть текущий статус экземпляра yout Bit.

Установить битовый компилятор для рабочего пространства (я буду использовать react):

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

и вы можете создавать свои собственные компоненты.

bit build components/o-auth

Теперь объявите это как версию 1.0.0.

bit tag --all 1.0.0

Запустите bit status еще раз, чтобы убедиться, что эта версия прикреплена:

Переместите их в удаленную область Bit:

bit export krissnawat.react-o-auth

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

Любой блок комментариев над определением компонента используется как описание компонента, и если бы я добавил тесты, Bit также запустил бы их.

Теперь вы можете легко установить любой из этих компонентов в отдельном проекте с помощью npm. Просто добавьте реестр Bit в конфигурацию npm:

npm config set '@bit:registry' https://node.bitsrc.io

Получите компонент Bit с помощью этой команды

npm i @bit/krissnawat.react-o-auth.components.o-auth

Подведение итогов

Это все для этого урока!

Мы создали многоразовый компонент React OAuth, который отображает простой вариант входа в Facebook с помощью OAuth.io, и поделились повторно используемым компонентом с Bit, чтобы легко повторно использовать его в других проектах.

Надеюсь, вы хорошо провели время, не стесняйтесь комментировать и спрашивать. Окажите поддержку, хлопая в ладоши!

Выучить больше

Эта история опубликована в The Startup, крупнейшем предпринимательском издании Medium, за которым следят +441 678 человек.

Подпишитесь, чтобы получать наши главные новости здесь.