Рубрики
Без рубрики

Как настроить аутентификацию GATSBYJS с AUTH0

Михаилом Озоменой, как настроить аутентификацию GATSBYJS со AUTH0TL; Drgatsbyjs – это фреймворк, который использует GraphQL и REVENTJS, чтобы позволить вам создавать богатые функции, супер быстрые и динамические веб-приложения. Это дает вам возможность потреблять данные практически в любом месте и использовать их в вашем приложении. В

Автор оригинала: FreeCodeCamp Community Member.

Майкла Озомена

TL; доктор

GATSBYJS – это каркас, в которой используются GraphQL и REVENTJS, чтобы позволить вам создавать функциональные, супер быстрые и динамические веб-приложения. Это дает вам возможность потреблять данные практически в любом месте и использовать их в вашем приложении. В этом руководстве я покажу вам, как использовать AUTH0, которая представляет собой платформу аутентификации и авторизации, чтобы добавить аутентификацию на приложение GATSBYJS, а также к вашей функции безвесочной в NetLify.

Я предполагаю, что у вас есть хотя бы основное понимание реагирования, узла и графа.

Вот репозиторий Github Если вы хотите взглянуть на исходный код.

Введите GATSBYJS.

Создано в 2015 году, GATSBY это простой способ построить сайт с реагированием. Сегодня, как известно, GATSBY используется для создания веб-сайтов, таких как блоги, страницы портфолио и даже приложений электронной коммерции. Сайты GATSBY известны, что он быстро быстро, и это потому, что, когда вы создаете веб-сайт, используя GATSBY, он поставляется с тоннами оптимизации производительности, в отличие от некоторых других структурных средств, которые оставьте вас, чтобы выяснить, как сделать свой сайт Больше исполнителя. Секрет GATSBY, чтобы быть быстрым, заключается в том, что он следует за архитектурный шаблон PRPL, который означает:

  • Толчок Критические ресурсы для исходного маршрута URL с использованием ad> и http/2.
  • Оказывать начальный маршрут.
  • Предварительный кэш остальные маршруты.
  • Ленивый груз и создать оставшиеся маршруты по требованию.

Это шаблон, разработанный Google для структурирования и обслуживания прогрессивных веб-приложений (PWAS), с акцентом на производительность доставки приложений и запуска. Вы можете Узнайте больше об этом шаблоне здесь Отказ

Что такое AUTH0?

AUTH0 , произносится как «AUTH NOL» – это надежная платформа аутентификации и авторизации. Он делает его супер легко сделать добавления таких вещей, как регистрация пользователя, поиск паролей, вход в систему, социальный логин, многофакторная аутентификация, корпоративное вход, единый вход и многое другое, в ваше производственное приложение.

AUTH0 AUTH0 Оплачивает пристальное внимание к опыту разработчика с их отличными сообщениями и прочными и прочными и простыми для понимания документации. С помощью AUTH0 вы можете использовать различные стандарты личных данных:

  • ОАУТ 1.
  • ОАУТ 2.
  • Открытый идентификатор подключения
  • JSON WEB TOKENS (JWT)
  • Язык разметки о защите безопасности (SAML)
  • WS-Федерация

В этом руководстве мы сосредоточимся на использовании комбинации JSON WEB TOKENS и социальные логины с ОАУТ 2 Отказ

Функции без промежутков и NetLify.

NetLify – это платформа, которая позволяет развертывать ваш проект, не беспокоясь о некоторых накладных расходах, таких как постоянное развертывание, HTTP Certs и Подробнее создан как способ развертывания и управления статическими сайтами, которые не имеют бэкэнда.

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

За кулисами функции NetLify поддерживают между вами и что-то называемое Amazon Web Services (AWS) LAMBDA, где происходит настоящий «безвесочный», и оно живет на облачной платформе Amazon AWS. Функции NetLify Помогите упростить для вас вещей, поэтому вам не нужно напрямую справиться с AWS, а также сможем продолжать использовать все другие простые функции NetLify, такие как непрерывное развертывание.

Слово «безверенно» не подразумевает без сервера; Это означает, что вы, как разработчик, не нужно беспокоиться о серверной инфраструктуре (физическом и иным образом).

Вы можете прочитать больше о NetLify и их Функции без сервеса Отказ

Наше приложение: Micro Blog.

Наше приложение называется «Micro Blog». Это платформа, которая позволяет пользователям создавать короткие частые сообщения. Каждый пост содержит некоторое текстовое содержимое, имя пользователя и профиль изображения человека, делающего сообщение.

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

Если вы уже знакомы с большинством этих вещей и хотите увидеть код, вы можете отправиться в Исходный код на Github Отказ

Создание передней части.

Наш интерфейс – это приложение GATSBYJS, и это означает, что первое, что нам нужно сделать, это установить пакет узла GATSBY CLI из NPM.

Примечание: Используйте узел версии .9.0 <7.0.0

# install the Gatsby CLI globallynpm install -g gatsby-cli
# create a new Gatsby site using the default startergatsby new micro-blog

После того, как команды выполняются запущенные команды, вы должны быть в состоянии войти в каталог, называемый «Micro-Blog», относительно того, где вы выполнили команды выше.

cd micro-blog

Когда вы посмотрите на содержимое этого каталога, вы найдете тонну сгенерированного контента. На данный момент вы можете уволить свой сайт GATSBY и увидите его работать. Для этого в вашем терминале запустите это:

gatsby develop

Это запускает ваш сайт GATSBY на http://localhost: 8000/ Отказ

Следующий шаг – добавить и изменять контент, относящийся к нашему приложению.

Мы начнем с gatsby-config.js Отказ Замените содержимое файла с помощью:

Возможно, вы захотите обновить значение «<Ваше имя>».

Этот файл содержит настройки приложения GATSBY, которые, как метаданные и плагины вашего сайта. Это довольно важный файл GATSBY ищет, когда вы запускаете свое приложение. В приложении мы можем использовать GraphQL для запроса содержимого этого файла.

Далее, SRC/Компоненты/Header.js :

Этот файл является нашим компонентом общего заголовка. Теперь здесь несколько вещей происходит:

  • Мы импортируем некоторые вещи из GATSBY Библиотека: Ссылка и навигация Отказ Ссылка это компонент React, используемый для ссылки на другие страницы, которые находятся в вашем приложении, например, «/App/Home», пока навигация это функция, которая принимает URL и программно наносит пользователю на указанный URL.
  • isloggedin , Выход из системы и ГетусентикНам Есть методы, которые проверяют, зарегистрирован ли пользователь, выйдите из пользователя и получите запись в прозвище пользователя для целей отображения соответственно.
  • Кнопка это компонент, который отображает элемент кнопки для пользователя. Он принимает несколько реквизитов, которые помогают нам легко дать кнопку различной внешности.

Вот что Кнопка выглядит как:

Как вы увидите, мы собираемся использовать Слифовые компоненты много и конкретно Эмоция , который является одним из многих поддержанных пакетов CSS-In-JS для GATSBYJS.

Позже мы посмотрим на SRC/Services/auth.js Отказ

Следующий важный файл, чтобы посмотреть на /src/components/layout.js :

Этот файл является файлом Wrapper для нашего приложения. Он включает в себя заголовок, нижний колонтитул и рендерирует детей, переданных ему. Мы также видим импортированные graphql Пакет из GATSBY рядом с StaticQuery составная часть. StaticQuery принимает Запрос Пропор, который является запросом GraphQL. Какая бы ценность не решена от Запрос сделан доступным в StaticQuery Предполагается рендер компонента.

Приближая посмотрите на запрос, мы видим, что он получает данные из gatsby-config.js файл.

Наши сопровождающие CSS /src/components/layouts.css Остается почти то же самое с генерируемым с единственным отличием от линии 8:

body {
   margin: 0;
   background-color: #f2f9ff;
}

Давайте оставим /SRC/Компоненты каталог на данный момент и посмотрите на /src/pages/index.js :

Все файлы в /src/страницы/ Станьте страницами в вашем приложении GATSBY. Например, index.js становится домашним страницей и /src/pages/app/home.js становится http://yourdomain.com/app/home Отказ

На нашей домашней странице мы хотим, чтобы наши пользователи могли видеть последние посты и попросить их войти или зарегистрироваться, если они хотят создать сообщение.

Чтобы получить наши последние сообщения, нам нужно Axios , что является библиотекой на основе обещания для создания сетевых запросов в JavaScript. Установить Axios Запустив это в вашем терминале:

npm install axios

Когда наши компоненты установлены, мы проверяем, вошел ли пользователь, и мы перенаправляем их на /app/home Потому что мы не хотим, чтобы они были на этой странице, если они вошли в систему. По общему признанию, это довольно наивный подход, и мы можем вместо этого использовать «защищенные маршруты». Использование «защищенных маршрутов» означает, что этот компонент даже не получит шанс вообще установить. Из-за небольшого размера этого проекта я решил не использовать защищенные маршруты.

Если вы хотите реализовать защищенные маршруты в вашем приложении GATSBY, пожалуйста, обратитесь к Это руководство На официальном сайте GATSBY.

Мы создаем запрос, чтобы получить сообщения, когда наши компонентные установки, а затем обновляют состояние с возвращенными данными. Обновление состояния приводит к тому, что наш компонент повторно представляет ребенка Reverposts Компонент, поскольку он использует указанное состояние.

Обратите внимание, что URI в сетевом запросе, чтобы получить данные для сообщений – это вариабельная среда Process.env.api_uri Отказ Эти переменные среды не являются типичными переменными среды, которые вы находите в приложении узла. Чтобы создать эти переменные среды, вам нужны два файла в вашем корневом каталоге приложения GATSBY: env.broduction и env.wevelopment Отказ Эти файлы будут автоматически загружены GATSBY в соответствующей среде, когда вы запускаете приложение.

Как я уже упоминал ранее, эти переменные среды не одинаковы с вашим переменным среды узла и то, что делает их разными, состоит в том, что они не являются частными файлами, которые вы обычно исключаете в вашем .gitignore файл. Вы должны нажать эти файлы, когда вы хотите развернуть приложение, потому что GATSBYJS нужно будет прочитать эти файлы при запуске.

Мой выглядит что-то вроде:

AUTH0_DOMAIN=micro-blog.auth0.com
AUTH0_CLIENTID=cIovhIQvYOr6fk3yhDtKjB5EiIvLevxf
REDIRECT_URI='http://localhost:8000/callback'
API_URI='http://localhost:9000/.netlify/functions/'

В производстве это немного отличается:

AUTH0_DOMAIN=micro-blog.auth0.com
AUTH0_CLIENTID=cIovhIQvYOr6fk3yhDtKjB5EiIvLevxf
REDIRECT_URI='https://angry-shaw-7a81ce.netlify.com/callback'
API_URI='https://angry-shaw-7a81ce.netlify.com/.netlify/functions/'

Для того, чтобы получить эти значения для вашего собственного приложения, вам нужно Создать учетную запись AUTH0 Если у вас еще нет одного.

Обратите внимание, что вы можете использовать AUTH0 бесплатно с ограниченными возможностями.

После того, как вы создали учетную запись, войдите в свой auth0 Управляющая приборная панель и создать новое приложение AUTH0. Вы можете сделать это, нажав на элемент меню приложений, а затем Создать приложение кнопка. Вы можете обновить имя приложения из «My App» на все, что вы хотите использовать. Вы можете изменить это позже, если хотите. В моем случае я использую «Micro Blog».

Далее вы выбираете «одностраничное веб-приложение» и нажмите на Создать Отказ Это сразу же создает ваше приложение.

Как только вы закончите с созданием вашего приложения, вы должны перейти к «Настройки», там вы найдете свой Auth0 клиент ID и Домен auth0 значения.

Примечание: Для вашего .env.broduction У вас нет Redirect_uri и API_URI с этой точки зрения. Позже, после того, как мы создадим наше приложение NetLify, мы получим URL-адрес приложений, который мы можем затем поместить там соответствующим образом.

Теперь давайте посмотрим на SRC/Компоненты/revieposts.js :

Опять же, здесь мы используем в стиле компонентов. Мы также используем метод жизненного цикла реагирования должен быть необходим Чтобы предотвратить ненужные повторные рендеры, когда Reverposts Компонент используется в другом компоненте.

Когда пользователь нажимает на кнопку «Вход», мы перемещаем пользователь на страницу входа в систему AUTH0. После того, как они были аутентифицированы, мы перенаправляем пользователя на URL в нашем приложении под названием /обратный вызов Где мы проверяем, что пользователь правильно вошел в систему, а затем сохранить свои данные в LocalStorage Отказ Вот что /обратный вызов Страница выглядит как:

Мы называем поделиться Метод, который получит данные из URL, анализируйте его, сохраните извлеченные данные в LocalStorage а затем позвоните () => Savance ('/app/hom e’) Метод перенаправления пользователя в основное приложение.

Теперь мы посмотрим на /pages/app/home.js Страница, где только зарегистрированы только пользователи:

Здесь не так много нового. Единственное, что я упомянул:

  • Мы создаем новые сообщения в HandlePostSubmit Метод и там, мы делаем регулярное Axios Звоните, но с Заголовки Опция, содержащая токен JWT “id_token”. Мы сделаем это, потому что в нашей функции без сервеса нам потребуется это значение в заголовках для аутентификации запроса, убедившись, что только вошедший пользователь может создать новый пост и что токен, сохраненный на стороне клиента, на самом деле действителен и не подделан. Это значительно улучшает безопасность и надежность нашего приложения.
  • Мы перенаправляем пользователя на / Когда они не вошли должным образом, и им удается приземлиться на этой странице. Мы делаем это в ComponentDidmount метод жизненного цикла. Опять же, Охраняемые маршруты Есть лучший вариант в ваших производственных приложений.

Наконец, мы добираемся до /src/services/auth.js Отказ Мы использовали функции из этого файла во всем приложении, пришло время взглянуть на него:

В этом файле мы используем AUTH0-JS Библиотека JavaScript от AUTH0 для обработки частей аутентификации нашего приложения. Добавьте его в свое приложение, запустив это в свой терминал:

npm install auth0-js

Следующее, что вы видите в этом файле, это создание Isbrowser Какие состояния, если наш файл в настоящее время выполняется в контексте браузера. Это важно, потому что во время процесса сборки вы можете столкнуться с ошибками, пытаясь назвать такие вещи, как Window.LocalStorage Отказ

Давайте посмотрим на некоторые из методов в этом файле:

GetUser Метод получает детали пользователя из токена доступа, ранее сохраненным в LocalStorage После того, как наш пользователь вошел в систему. Он использует getaccesstoken Метод для получения токена доступа хранится.

Handlelogin Метод вызывается, когда пользователь пытается войти в систему. Он перенаправляет их на страницу входа в систему AUTH0, которая в свою очередь перенаправляет пользователя на /обратный вызов Как только они вошли в систему.

isloggedin Метод проверяет, что токен JWT «ID_Token» дата срока годности сохраняется в LocalStorage как ExpiseT не был превышен, тем самым недействительный сеанс пользователя.

поделиться Метод – это то, что вы видите, используемые в /обратный вызов страница. Этот метод анализирует HASH URL и получает важные значения, которые мы позже сохраняем в LocalStorage В Наседание метод.

Наконец, Выход из системы Метод вводит пользователя, удаляя сохраненные учетные данные. Это хорошо работает, но вы можете сделать это еще дальше Вызов конечной точки на AUTH0 которые будут полностью аннулировать сеанс. Я остановился здесь ради этого урока.

Наконец, мы обновляем строку 6 на /src/components/seo.js :

const SEO = ({ description = null, lang = "eng", meta = [], keywords = [], title }) => {

Делать его использовать функцию стрелки ES6 и значения по умолчанию.

Создание задней части.

Затем мы собираемся построить API для обслуживания списка постов и собирать новые посты. Они неверные функции, размещенные в NetLify. Наша API должна сделать несколько вещей:

  • Есть конечная точка для обслуживания списка сообщений: /.netLify/functions/postsread Отказ
  • Есть конечная точка, чтобы собрать новые сообщения: /detlify/functions/postscreate Отказ
  • Аутентифицировать запросы для создания новых сообщений, использующих AUTH0.

Чтобы начать, нам нужно установить несколько пакетов NPM:

npm install netlify-lambda mongoose jwks-rsa jsonwebtoken dotenv

Следующий шаг – создать каталог под названием Utils В корневом каталоге нашего приложения GATSBY. Внутри этого каталога наши файлы, которые не вполне достаточно API. Один из таких файлов – наше /utils/db.js файл:

В этом файле мы устанавливаем соединение с нашей базой данных MongoDB.

Что-то не хватает вот наш .env Файл (да, третий!). Мой выглядит что-то вроде этого:

DATABASE_PROD='mongodb://:@'DATABASE_DEV='mongodb://localhost:27017/micro-blog'

Я использую MLAB Чтобы провести мою базу данных онлайн, и у меня есть Монгодб Установлено на моей машине развития. Вы можете следовать за этим Руководство по установке MongoDB На вашей машине развития тоже.

Следующий файл для фокусировки на это /utils/index.js Этот файл содержит некоторые другие методы, мы используем в наших функциях NetLify.

Первый метод Реантрита Агрессирует логику ответа на запросы, которые доходят до наших функций NetLify. И второй метод VerifyToken проверяет, что токены, отправленные в заголовки запросов, действительны.

Наконец, в функции NetLify. Создайте новый каталог в вашем приложении ROOT CONTECT Функции (или что-то еще вы найдете привлекательным) и в этом каталоге создайте три файла:

  • postomcreate.js.
  • Soverread.js.
  • PostsModel.js.

Первые два файла будут проводить нашу реализацию для создания и чтения сообщений, пока последний файл описывает наши записи базы данных.

Вот что PostsModel.js выглядит как:

И PostCreate.js :

Наконец, Soverread.js :

Теперь, чтобы запустить наши функции локально, мы сначала создаем новый сценарий в нашем Package.json файл:

"scripts": {// other scripts
"start:lambda": "NODE_ENV=development netlify-lambda serve functions"
}

Я использую «Функции обслуживания», потому что каталог «Функции» – это место, где я помещаю свои функции NetLify, ваши могут быть разными.

После создания этого скрипта мы запустим его в нашем терминале:

npm run start:lambda

Развертывание приложения.

Последнее, что мы сделаем, это сделать развертывание нашего приложения в NetLify и сделать это, нам нужно сначала создать файл в нашем корневом файле root netlify.toml Отказ Этот файл является файлом конфигурации, который NetLify будет прочитать при попытке создавать и развернуть приложение. Вот что выглядит этот файл:

[build]  functions = "lambda"  Command = "npm run prod"

Функции Поручает NetLify поставить в себя встроенные функции в папке под названием «Lambda». И Команда Указывает скрипт для запуска для создания всего приложения. Это довольно важно, потому что нам нужно создать как наше приложение GATSBY, так и наших функций NetLify. Вот что выглядит этот скрипт в нашем Package.json :

"scripts": {
// previous scripts
"build:lambda": "netlify-lambda build functions",
"prod": "NODE_ENV=production npm run build; npm run build:lambda"

Здесь мы впервые запустили NPM запустить сборку который создает наше приложение GATSBY, а затем запустить NPM Run Build: лямбда который создает наши функции NetLify. Опять же, здесь я использую «функции», потому что это имя папки, в которой я положил свои функции NetLify.

После всего этого мы создаем новый репозиторий GitHub и протолкните наш код там. Создать новую учетную запись NetLify Если у вас еще нет одного. Я предпочитаю использовать опцию регистрации GitHub в этом случае. Когда вы вошли в систему, вы нажимаете на Новый сайт из Git Кнопка, которая затем возьмет вас через процесс создания нового приложения NetLify.

Если во время процесса создания нового приложения NetLify, вы не находите свой репозиторий в указанном списке, убедитесь, что вы дали NetLify доступ ко всем вашим репозиториям или, по крайней мере, в частности, этот репозиторий.

Прежде чем развернуть, нажмите на Показать продвинутые кнопка и создать новую переменную под названием Database_prod установить значение для того, что в вашем .env файл. Помните, что этот файл исключается из вашего приложения в вашем .gitignore Таким образом, для вашего приложения нет возможности прочитать это значение, если вы не сделаете это.

Кроме того, добавить публично/ Как каталог ebuglish, поскольку это каталог, в котором GATSBY создает и сбрасывает файлы.

NetLify будет автоматически обработать развертывание функций. После развертывания приложения вы должны увидеть URL вашего приложения на приборной панели.

И теперь, когда у вас есть URL-адрес приложения, вы можете обновить свой .env.broduction файл соответственно.

Спасибо за прочтение!

Читайте ещё по теме: