Как вы регистрируете своих пользователей и как вы даете им доступ? Мы перейдем к аутентификации и авторизации пользователям без паролей в Next.js.
Когда вы начнете добавлять пользователей на свой веб-сайт, главный вопрос, который вам нужно ответить, это: Как вы регистрируете своих пользователей в и как вы даете им доступ к соответствующим ресурсам?
В этом руководстве мы перейдем к тому, как решить как вопросы, и построить приложение Next.js, которое позволяет только зарегистрированными пользователями для доступа к частным ресурсам в приложении.
Таким образом, вы хотите иметь пользователей.
Давайте пройдемся по некоторым понятиям: Аутентификация против авторизации Отказ
Аутентификация: Как я могу войти в систему моих пользователей?
Аутентификация – это способ для вашего сервера для проверки идентификации пользователя. Наиболее распространенным способом аутентификации пользователей является использование комбинации электронной почты/пароля. К сожалению, Пароли имеют серьезные недостатки на взаимодействии как пользовательского интерфейса Отказ В этом руководстве мы будем использовать код подтверждения, отправляемого в электронную почту пользователя для аутентификации пользователя Отказ
Авторизация: Как я могу держать своих пользователей войти в систему?
Авторизация – это способ для вашего сервера для авторизации запроса. В более простых терминах, именно здесь вы проходите в токене или сеансе на ваш бэкфонный сервер при вызове API для просмотра или обновления некоторых данных. 2 общих стратегиях являются Сеансы на основе cookie и JWT жетоны Отказ
Основным преимуществом JWT Tookens является то, что он не сохраняется в вашей базе данных, поэтому вам не нужно делать проверку БД, чтобы проверить каждый запрос. Вот почему Мы собираемся использовать JWT жетоны в этом руководстве.
Узнайте больше о том, как работает OAUTH 2.0 и доступа к токену.
Как будет выглядеть общее регистрация/логин?
Аутентификация: Мы попросим электронной почты пользователя и отправить им письмо, содержащее код. Если пользователь правильно вводит код, мы получим токен JWT в Frontend и храните его в LocalStorage
Отказ
Авторизация: Каждый раз, когда мы хотим получить доступ к личной конечной точке API, нам нужно включить заголовок Авторизация: Носитель $ {Токен}
Отказ
Хранение токена в браузере локальное хранилище восприимчиво к атаке скриптов с перекрестными сайтами (XSS). Если злоумышленник может успешно запустить код JavaScript на вашем сайте, они могут получить токены, хранящиеся в локальном хранилище. Уязвимость XSS возникает, когда ваш сайт принимает данные от пользователей без надлежащей проверки или из стороннего кода JavaScript (например, Google Analytics, jQuery и т. Д.).
Давайте начнем строить
Создайте свое приложение Next.js. Мы назовем приложение Next-Pancedless-Login
и используйте приложение для стартера по умолчанию.
yarn create next-app cd next-passwordless-login && yarn dev
Обновите наш сайт
Обновите свой Страницы/index.js
Отказ Удалить все, кроме стиля и контейнера Div, затем добавьте это внутри контейнера Div.
Passwordless App.
{/* 1️⃣ TODO: Setup a div to contain the form */}Public Endpoint
You should be able to access this when not logged in
Private Endpoint
You need to log in to access this endpoint
Шаг 1: Покажите форму реестра/входа
Установите зависимости:
yarn add cotter cotter-node
Добавьте div, чтобы содержать форму ниже нашего заголовка в Страницы/index.js.
Passwordless App.
{/* 1️⃣ TODO: Setup a div to contain the form */}
потом Импортируйте и инициализируйте Cotter для встраивания электронной почты.
// 1️⃣ import Cotter verification form and useEffect from react import Cotter from "cotter"; import { useEffect } from "react";
export default function Home() { // 1️⃣ Initialize and show the form // Add the lines here useEffect(() => { var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here cotter .signInWithOTP() .showEmailForm() .then(payload => { console.log(payload); alert("Success"); }) .catch(err => console.log(err)); }, []); // until here return (...); }
Вам нужно добавить свой API_KEY_ID
здесь. Создать бесплатный аккаунт В Cotter, затем создайте проект и делать заметки ключей API.
Теперь вы должны быть в состоянии увидеть форму входа в систему, как ниже.
Форма автоматически отправит электронное письмо по мере необходимости и показать вход для ввода кода. Это не отправит другое письмо, если вы уже проверили свой адрес электронной почты в этом браузере.
Шаг 2: Держите пользователю войти в систему с Access_Token
Прочитайте Console.log
Попробуйте ввести свой адрес электронной почты и вход в систему. Вы должны увидеть, что полезная нагрузка
Мы получаем в OnSuccess
Функция содержит следующий объект:
{ "token": {...}, "email": "team@cotter.app", "oauth_token": { "access_token": "eyJhbGciOiJFUzI1NiIsIn...", "id_token": "eyJhbGciOiJFUzI1NiIsInR5cC...", "refresh_token": "199:doZor3GtgsrYo4R7L...", "expires_in": 3600, "token_type": "Bearer", "auth_method": "OTP" }, "user": { "ID": "ecadbd2c-56f8-4078-b45d-f17786ed499e", // Cotter User ID ... } }
Мы хотим использовать Access_Token
В этом руководстве, так что давайте схватим это и храним его в LocalStorage
Отказ
useEffect(() => { var cotter = new Cotter(API_KEY_ID); // 👈 Specify your API KEY ID here cotter .signInWithOTP() .showEmailForm() .then(payload => { console.log(payload); - alert("Success"); + // 2️⃣(a) Store the access token and set logged in + localStorage.setItem("ACCESS_TOKEN", payload.oauth_token.access_token); + setIsLoggedIn(true); }) .catch(err => console.log(err)); }, []);
Теперь давайте определим setislogedin ()
, это поможет нам показать, вошел ли пользователь в системе или нет.
import Cotter from "cotter"; import { useEffect } from "react"; + import { useState } from "react"; export default function Home() { + // 2️⃣(a) Show if the user is logged in. + var [isLoggedIn, setIsLoggedIn] = useState(false);
Мы также хотим проверить, если LocalStorage
Содержит Access_Token
Каждый раз, когда страница загружает и обновляется наш isloggedin
Переменная. Добавьте это ниже первого Useffect ()
Отказ
// 1️⃣ Initialize and show the form useEffect(() => {...}, []); // Add the lines below here // 2️⃣(b) Check if the ACCESS_TOKEN exists every time the page loads useEffect(() => { if (localStorage.getItem("ACCESS_TOKEN") != null) { setIsLoggedIn(true); } }, []);
Теперь давайте покажем, если пользователь вошел в систему ниже нашей формы:
{/* 2️⃣(c) Show if the user is logged in. */}{isLoggedIn ? "✅ You are logged in" : "❌ You are not logged in"}
Шаг 3: Регистрация
Регистрация достигается путем удаления Access_Token
от нашего LocalStorage
Отказ Давайте добавим функцию выхода из системы внутри Главная
до return ()
в страницы/index.js.
// 3️⃣ Log out users const logOut = () => { localStorage.removeItem("ACCESS_TOKEN"); setIsLoggedIn(false); };
И показать кнопку выхода:
{/* 3️⃣ Show the logout button */} {isLoggedIn ? (Log Out) : null}
Теперь вы можете увидеть, как вы вошли в систему, и кнопка «Выход»:
Шаг 4: позволяя пользователю доступа к публичным/частным конечным точкам.
Давайте добавим 2 пути в нашу страницы/API.
touch pages/api/public.js pages/api/private.js
Определение маршрутов
Давайте определим нашу /API/Public
Конечная точка в Страницы/API/public.js
Отказ Мы просто собираемся вернуть, что запрос успешен.
export default (req, res) => { res.statusCode = 200; res.end( "Success! This is a public resource, you can see it without logging in." ); };
Давайте определим нашу /API/Private
Конечная точка в Страницы/API/Private.js
. Сначала мы проверим, существует ли заголовок авторизации.
// 2) TODO: Import Cotter const checkJWT = (handler) => async (req, res) => { // 1) Check that the access_token exists if (!("authorization" in req.headers)) { res.statusCode = 401; res.end("Authorization header missing"); } const auth = await req.headers.authorization; const bearer = auth.split(" "); const token = bearer[1]; console.log(token); // 2) TODO: Validate the access_token handler(req, res); } const handler = (req, res) => { res.statusCode = 200; res.end( `Success! This is a private resource and you have the access_token to view it.` ); }; export default checkJWT(handler);
Теперь давайте проверим токен доступа.
Во-первых, импортировать функцию валидатора JWT Chotter в верхней части Страницы/API/Private.js
import { CotterValidateJWT } from "cotter-node";
Тогда звоните Cottervalidatejwt (токен)
под шагом (2) внутри CheckJWT
Отказ
// 2) TODO: Validate the access_token var valid = false; try { valid = await CotterValidateJWT(token); } catch (e) { console.log(e); valid = false; } if (!valid) { res.statusCode = 403; res.end("Authorization header is invalid"); }
Вызов/общедоступные и/частные API конечные точки API
Давайте вернемся к Страницы/index.js
и добавьте 2 функции: getpublicresource
а также GetPrivAresource
Это позвонит конечной точке /API/общественность
и /API/Private
Отказ
export default function Home() { ... // 4️⃣ Get Public and Private Resources // Add the lines here var [publicResource, setPublicResource] = useState(null); var [privateResource, setPrivateResource] = useState(null); // Get Public Resource const getPublicResource = async () => { var resp = await fetch("/api/public"); setPublicResource(await resp.text()); }; // Get Private Resource const getPrivateResource = async () => { var token = localStorage.getItem("ACCESS_TOKEN"); if (token == null) { setPrivateResource("Token doesn't exist, you're logged-out"); return; } var resp = await fetch("/api/private", { headers: { Authorization: `Bearer ${token}`, }, }); setPrivateResource(await resp.text()); }; // Until here return(...); }
Теперь давайте назовем 2 функции с наших кнопок и показать ответ с конечных точек. Обновите Div
с ClassName = "Сетка"
в следующий код:
{/* 4️⃣ Call Get Public and Private Resources */}Public Endpoint
{publicResource}
Private Endpoint
{privateResource}
Мы отображаем ответ с конечных точек в PublicSource
и Приварьсурс
Переменные.
Вот и все
Теперь вы можете аутентифицировать пользователей, отправив код на их электронные письма и позвольте им получить доступ к частным конечным точкам, которые требуют Access_Token
к доступу.
Если вам интересно, распечатайте Access_Token
и скопируйте это на https://jwt.io/ Чтобы увидеть, какая информация декодирована. id_token
Содержит дополнительную информацию о пользователе и Refresh_token
используется для получить новый Access_Token
Если это истекло .
Что дальше?
Узнайте больше о Оатские токены, возвращенные из Cotter И используйте их в конечных точках вашего API.
Если вы хотите аутентифицировать пользователей, используя свой номер телефона, следуйте этому руководству на Проверка телефона пользователя через SMS и WhatsApp Отказ
Вопросы и обратная связь.
Если у вас есть какие-либо вопросы или отзывы, не стесняйтесь присоединиться к Cotter’s Slack Channel И поговорите с нами там.
Готов к использованию Cotter?
Если вам понравилось этот учебник и хотите интегрировать Cotter на свой веб-сайт или приложение, вы можете Создать бесплатный аккаунт и Проверьте нашу документацию Отказ
Оригинал: “https://dev.to/cotter/passwordless-login-with-email-and-json-web-token-jwt-authentication-using-next-js-539o”