Как добавить аутентификацию для ваших приложений и приложений

Я стал одним из основателей компании, занимающейся набором инструментов, с явной целью сделать децентрализованные приложения более простыми в использовании. Однако эти инструменты не только для децентрализованных приложений. Разработчики традиционных приложений могут использовать SimpleID, чтобы быстро и без дополнительных затрат добавить аутентификацию и хранилище в свое приложение. Позвольте мне показать вам, как это просто. Начнем с примера проекта, так как в большинстве случаев разработчики будут добавлять аутентификацию в существующий проект. Для этого мы можем использовать простое приложение, которое я создал, чтобы сравнить реагирование с Redux.

Предварительные условия:

- Некоторое знакомство с React, поскольку пример проекта находится в React-Node, а NPM установлен на вашем компьютере - Текстовый редактор Давайте начнем! Шаг первый: Клонируйте репозиторий приложения todo:git clone https://github.com/Graphite-Docs/reactn-todo-example.gitШаг второй: Перейдите во вновь клонированный каталог:cd reactn-todo-exampleШаг третий: установить зависимостиnpm installШаг четвертый: Установите SimpleIDnpm i simpleid-js-sdkХорошо, теперь, когда у нас все установлено и готово к работе, давайте поговорим о том, что именно мы здесь делаем. Сам проект начинается как простое приложение todo с базовым управлением состоянием. В этом нет стиля, поэтому, пожалуйста, попросите прощения заранее. Может быть, вам будет приятно увидеть, что приложение работает в первую очередь, прежде чем мы что-то отредактируем, так что давайте запустим его, запустивnpm start. Как видите, аутентификация и сохранение данных отсутствуют. Обновите и ваши обновления будут потеряны. Мы исправим это буквально через несколько минут. Я объясню, как: SimpleID - это идентификатор поставщика услуг. Он возник из-за того, что децентрализованные приложения должны иметь лучший опыт аутентификации. SimpleID является бесплатным для начала и гибко масштабируется по мере роста. Из коробки вы получаете доступ к следующим децентрализованным протоколам: 

• Ethereum
• IPFS
• Blockstack

Но вам может быть все равно об этом. Возможно, вам просто нужно добавить аутентификацию и легко хранить данные. Для этого мы будем использовать модули Blockstack из SimpleID. Итак, начнем. Зарегистрируйте бесплатную учетную запись разработчика на https://app.simpleid.xyz. Интересное примечание: мы используем SimpleID для нашего собственного внутреннего приложения, поэтому, когда вы регистрируетесь, вы фактически создаете децентрализованную идентификацию с помощью криптографических пар ключей. Когда вы зарегистрируетесь, вы должны увидеть экран подтверждения. Проверьте свою электронную почту и найдите письмо с подтверждением разработчика от SimpleID. Это электронное письмо просто подтверждает, что вы тот, кем вы говорите. После того как вы нажмете ссылку, ваша учетная запись должна быть подтверждена, и вы будете в ней. Вы увидите такой экран: 

Есть несколько вещей, которые вам нужно сделать, чтобы начать работу. Сначала нажмите на кнопку «Изменить модуль». Вы попадете на экран, где вы можете выбрать, какие протоколы вы хотели бы использовать в своем приложении. Как я уже говорил, мы будем использовать Blockstack для этого урока. На экране Модули аутентификации выберите Блок стека. Затем переключитесь на модули хранения и выберите Blockstack там. Нажмите кнопку «Сохранить» в правом нижнем углу, и вы будете готовы к выбору модуля. 

Теперь вернитесь на страницу учетной записи, нажав значок меню в верхнем левом углу и выбрав «Учетная запись». Здесь вам просто нужно создать проект. Дайте вашему проекту имя и URL (это должен быть базовый URL, с которого ваши пользователи в конечном итоге получат доступ к приложению). После этого нажмите кнопку «Создать проект», и страница вашей учетной записи должна выглядеть примерно так: 

Еще одна вещь нам нужно сделать, это захватитьdevIDиapiKeyдля проекта. Для этого нажмите «Просмотреть проект», и у вас будет доступ к этим двум вещам. Запишите их где-нибудь, потому что вы будете использовать их в приложении Todo. Теперь давайте начнем кодировать. Вы хотите обратиться к документации SimpleID во время работы с SimpleID. Вы можете найти это здесь. Откройте приложение todo в своем любимом текстовом редакторе. Структура проекта выглядит следующим образом: 

Мы собираемся упростить задачу, добавив всего один новый компонент для Аутентификация. Итак, давайте создадим новый компонент с именемAuth.jsи вкладывать его подcomponentsпапка. В вашем файле Auth.js вы можете создать компонент класса или компонент функции. Для простоты (и быстрого изменения состояния без использования React Hooks) я собираюсь создать компонент класса. Но что мы хотим, чтобы этот компонент делал? Ну, мы хотим, чтобы он обрабатывал запросы регистрации и входа, верно? Это означает, что наш компонент должен иметь возможность условно отображать страницу регистрации или логин на странице в зависимости от того, что пользователь хочет сделать. Давайте создадим это. 

Там пока не так много всего происходит, но мы сейчас создали фреймворк. Так на что мы смотрим? Ну, во-первых, обратите внимание, что мы импортируем React из «actn ». Это глобальная структура управления состоянием, используемая в этом приложении todo, поэтому, чтобы использовать глобальное состояние (что мы сделаем через мгновение), нам нужно импортировать React из этого модуля. Затем мы создали локальное состояние в конструкторе внутри компонента класса. Это потому, что нам нужно состояние authSelection, чтобы сообщить приложению, отображать ли страницу регистрации или страницу входа. Вы можете увидеть, как эта логика помещается между открывающим и закрывающим div в выражении return. Теперь нам нужно сделать две вещи: 1. Предоставить пользователям возможность переключаться между регистрацией и входом в систему. 2. Дайте поля ввода для пользователя, чтобы заполнить. Давайте сделаем это сейчас: 

Мы не делали здесь ничего необычного. Мы добавили две кнопки над условным оператором рендеринга, одну для регистрации и одну для входа в систему. На этих кнопках есть обработчик щелчков, который обновит локальное состояние, чтобы показать соответствующий экран. Если пользователь нажимает кнопку «Зарегистрироваться», отображается форма регистрации. Если пользователь нажимает кнопку «Вход», отображается форма входа. Мы также добавили две формы в соответствующих местах в соответствии с условным заявлением. Одна форма для регистрации, которая требует имя пользователя, пароль и адрес электронной почты. И еще одна форма для входа в систему, которая требует только имя пользователя и пароль. Теперь нам нужен обработчик отправки формы для каждой из этих форм, и это то место, где можно добавить SimpleID! Мы собираемся сразу поработать над документацией для этого, так что давайте начнем. 

Что мы здесь сделали? Ну, мы импортировалиcreateUserAccountа такжеloginотsimpleid-js-sdkчто мы ранее установили в это приложение todo. Мы добавили объект конфигурации для размещения информации о нашем проекте (включаяapiKeyа такжеdevIdкоторый вы хотели бы защитить в производственном проекте). Мы создали обработчик представления формы вhandleSubmitфункция. Мы использовали обаcreateUserAccountи функции входа изsimpleid-js-sdkв пределахhandleSubmitфункция. И, наконец, мы подключили формы для вызоваhandleSubmitфункция при отправке формы. Предполагая, что все прошло хорошо, вы можете попробовать это прямо сейчас и посмотреть вывод консоли. Или вы можете? Нам еще нужно добавитьAuth.jsкомпонент кApp.jsосновной файл. Давайте сделаем это сейчас, но условно отобразим его, только если пользователь не вошел в систему. Итак, сначала найдитеindex.jsфайл подsrcпапка. Вы &# x27; увидитеsetGlobalфункция с вложенным объектом. Обновите этот объект, чтобы он выглядел следующим образом: 

isLoggedInсостояние - это то, что мы собираемся использовать в App.jsфайл. Давайте перейдем к этому файлу и проведем рефакторинг его в компонент класса для обработки нашей условной логики. В итоге вы получите следующее: 

Мы реорганизовали это в компонент класса, чтобы убедиться, что в глобальном состоянии изменяется, условная логика применяется принудительно. Опять же, мы могли бы использовать для этого Хуки, но мы стараемся меньше фокусироваться на функциональности React, а больше на решении для аутентификации. Мы также добавили глобальную переменную состояния,isLoggedInи проверьте, правда ли это. Если это правда, показать приложение. Если нет, покажите страницу аутентификации. Теперь вы можете попробовать свои функции регистрации. Имя пользователя должно быть все в нижнем регистре без пробелов, но давайте идти вперед и дать ему шанс, и обязательно смотреть консоль. Вы должны увидеть что-то вроде этого: 

Единственное, что вы, вероятно, выиграли &# x27; t, это сообщение об ошибке 409. Имена пользователей, созданные вашими пользователями, фактически добавляются в пакет других имен, которые транслируются в цепочку биткойнов и регистрируются там. Это дает вашим пользователям истинный контроль над их личностью. Однако я максимально увеличил число пользователей, которых я могу зарегистрировать на данный момент, из-за ограничений IP-адресов на регистраторе, который я использую для разработки. Но я отвлекся. Важным здесь является последнее сообщение в консоли. Это объект с сообщением, которое гласит: «Создан пользовательский сеанс». Теперь то, что вы делаете с этим пользовательским сеансом, полностью зависит от вас, но возвращенные данные - это то, что вы можете использовать, чтобы убедиться, что пользователь действительно вошел в систему. Поэтому быстрый простой способ проверки состоит в следующем: добавьте setGlobal в оператор импорта для React в верхней части файла:import React, { setGlobal } from 'reactn';Это позволяет вам устанавливать глобальное состояние из любой точки приложения. Затем в функции handleSubmit в логике регистрации вы можете сделать что-то вроде этого: 

Конечно, вы &# x27; я захочу что-то сделать с данными сеанса пользователя, которые возвращены в account.body, но вы можете справиться с этим несколькими способами, и я оставлю это на ваше усмотрение. Последнее, что мы хотим проверить, это то, что вход в систему работает. Итак, если вы помните введенные вами учетные данные, вы можете использовать их. Если вы не &# x27; t, зарегистрируйтесь снова и запомните их;) Обновите свою страницу и позвольте войти в систему (помните, что вы захотите сохранить данные сеанса пользователя, которые вы вернули, поэтому обновление не &&x27 ; t уничтожить сеанс пользователя, но это всего лишь простое руководство). Откройте консоль, чтобы увидеть, что происходит. Вы должны увидеть это: 

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

Опять же, вы &# x27; снова захотите сохранить сеанс пользователя, чтобы ваш пользователь был не выходит из системы, если страница обновляется, но это выходит за рамки данного руководства. Теперь вы добавили аутентификацию в ваше приложение без какой-либо настройки или управления базой данных. Вы упростили своим пользователям регистрацию и вход в систему. Вы дали им децентрализованную идентификацию (которая, если вы исследуете возвращенный объект пользовательского сеанса, вы можете предоставить своим пользователям много полезной информации). , Вы много сделали с очень небольшим количеством кода. Цель SimpleID - сделать аутентификацию простой. Децентрализованные приложения, традиционные приложения, проекты IoT, серверные проекты и т. Д. Мы хотим упростить работу любого разработчика на любом языке в любом месте. Если вы заинтересованы в получении дополнительной информации, ознакомьтесь с SimpleID сегодня.

Теги

Учебное пособие Аутентификация Децентрализация Кодирование Javascript Последние технические истории Добавление аутентификации Simpleid
Источник: https://hackernoon.com/add-authentication-and-storage-to-your-app-in-10-minutes-ic2h32d1x

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння