Создание приложения React со всеми социальными логинами с помощью 3 простых шагов

«Доступ» означает способность получить или использовать что-либо. В контексте информационных технологий «доступ» означает возможность подключиться к компьютеру или компьютерной сети или использовать их. «Доступ» также может означать возможность вводить, просматривать или редактировать данные в компьютерной системе или сети.

Существует три типа контроля доступа: физический, логический и административный. Физический контроль доступа ограничивает доступ к физическому пространству, такому как здание, комната или серверная. Логический контроль доступа ограничивает доступ к компьютерной системе или сети. Административный контроль доступа ограничивает доступ к управлению компьютерной системой или сетью.

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

https://www.npmjs.com/package/@eartho/one-client-react

Для этого приложения я собираюсь использовать Eartho One для предоставления готового встроенного высококонверсионного опыта и Firebase Auth для управления входом и аутентификацией пользователей. В этом сценарии мое приложение должно напрямую взаимодействовать с Firebase Auth для получения маркера аутентификации, после чего я буду добавлять этот маркер к каждому запросу, отправляемому на мой бэкэнд.

Ингредиенты
Во-первых, вам нужно создать ваше приложение React. Я предполагаю, что вы уже знаете, как это сделать, но если что-то непонятно, вот руководство
https://reactjs.org/docs/getting-started.html

Вам также нужно будет настроить Firebase. Вы можете найти инструкции по этому поводу в официальной документации Firebase.

ПОШАГОВЫЕ ИНСТРУКЦИИ

  1. Создайте точки доступа в Eartho Creators1A. Начните с подключения к Eartho Creators

2B. Создайте свою первую сущность, нажав на кнопку «Создать проект» на главном экране создателей. Сущность может быть веб-сайтом, приложением, событием или чем-либо еще, для чего вы хотите управлять доступом.

3C. После создания объекта на странице объекта появится пункт «Создать доступ». Начните с создания точек доступа, которыми вы хотите управлять; это может быть «логин» или «премиум-пакет» или что угодно, что дает вашим пользователям/клиентам доступ к чему-либо.

  1. Интеграция Eartho в ваше приложениеДобавьте Eartho в ваше приложение
npm i @eartho/one-client-react

Войдите в полноэкранный режим Выйти из полноэкранного режима

Настройте

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { EarthoOneProvider } from '@eartho/one-client-react';
import App from './App';ReactDOM.render(
  <EarthoOneProvider
    clientId="YOUR_EARTHO_CLIENT_ID"
  >
    <App />
  </EarthoOneProvider>,
  document.getElementById('app')
);
Войти в полноэкранный режим Выйти из полноэкранного режима

Начать использование

// src/App.js
import React from 'react';
import { useEarthoOne } from '@eartho/one-client-react';function App() {
  const {
    isLoading,
    isConnected,
    error,
    user,
    connectWithPopup,
    logout,
  } = useEarthoOne();if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Oops... {error.message}</div>;
  }if (isConnected) {
    return (
      <div>
        Hello {user.displayName}{' '}
        <button onClick={() => logout({ returnTo: window.location.origin })}>
          Log out
        </button>
      </div>
    );
  } else {
    return <button onClick={connectWithPopup}>Log in</button>;
  }
}export default App;

Войти в полноэкранный режим Выйти из полноэкранного режима
  1. (Необязательно) Интеграция Eartho в сервер / Firebase Auth / Awshttps://eartho.world/

https://eartho-g.gitbook.io/eartho-docs/quick-start/step-3-optional-integrating-eartho-into-your-server

Вот и все!
Вы закончили

https://www.npmjs.com/package/@eartho/one-client-react

Оцените статью
devanswers.ru
Добавить комментарий