next password protect

Защитите пароль. Просмотреть демонстрацию (пароль секрет )

---

Пример с Custom-logo.mov

Как это работает

Эта библиотека добавляет приглашение пароля к вашему развертыванию следующего.js. Он состоит из двух основных частей:

1. Два маршрута без сервера API:
   • Маршрут входа в систему, который проверяет, является ли пароль правильный, и устанавливает файл cookie с JWT на случай, если это так.
   • Маршрут проверки, который подтверждает, если у вас есть авторизация cookie с действительным JWT.
2. HOC (компонент высшего порядка), который завершает приложение Next.js и добавляет проверку, которая проверяет, если вы вошли в систему. Если вы это сделаете, то вы можете просматривать приложение нормально; В противном случае, вам представлено призребление пароля.

ВАЖНО : Рекомендуемый вариант использования для этой библиотеки находится в среде постановки или предварительного просмотра. Используя преимущества DefinePlugin от WebPack, мы можем убедиться, что эта библиотека включена только в определенные среды, сохраняя размер производственного пакета небольшим.

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

Установка

yarn add next-password-protect
# or
npm install next-password-protect

Использование

Существует 3 шага для обеспечения защиты пароля: настройка глобальной переменной, добавление маршрутов API и добавление HOC в _app.

Шаг 1

Чтобы иметь возможность воспользоваться преимуществами устранения мертвого кода, рекомендуется добавить такую переменную среды, как process.env.PASSWORD_PROTECT . Чтобы установить эту переменную, добавьте следующее в next.config.js :

 module . exports = {
  env : {
    // Add any logic you want here, returning `true` to enable password protect.
    PASSWORD_PROTECT : process . env . ENVIRONMENT === 'staging' ,
  }
} ) ;

Шаг 2

Добавьте два маршрута API, один с loginHandler и один с функцией API passwordCheckHandler . Вы можете назвать их всем, если вы передаете имена в loginApiUrl и checkApiUrl соответственно, на следующем шаге. По умолчанию он ожидает /login и /passwordCheck .

 import { loginHandler } from "next-password-protect" ;

export default loginHandler ( "YOUR_SECRET_PASSWORD" , {
  // Options go here (optional)
  cookieName : "next-password-protect" ,
} ) ; 

 import { passwordCheckHandler } from "next-password-protect" ;

export default passwordCheckHandler ( "YOUR_SECRET_PASSWORD" , {
  // Options go here (optional)
  cookieName : "next-password-protect" ,
} ) ;

Шаг 3

Добавить withPasswordProtect hoc в экспорт App по умолчанию в pages/_app.tsx :

 import { withPasswordProtect } from "next-password-protect" ;

// Before: export default App;
export default process . env . PASSWORD_PROTECT
  ? withPasswordProtect ( App , {
    // Options go here (optional)
    loginApiUrl : "/login" ,
  } )
  : App ;

ПРИМЕЧАНИЕ . Обязательно укажите loginApiUrl и/или checkApiUrl если маршрут (ы) API не по умолчанию.

API

API -маршруты

loginHandler(password: string, options)

Объект параметров может содержать любой из следующих параметров:

Вариант	Описание	Значение по умолчанию
cookieMaxAge	Атрибут печенья максимума	undefined
cookieName	Название авторизации cookie	'next-password-protect'
cookieSameSite	Атрибут SameSite Cookie	false
cookieSecure	Закрепите флаг на печенье	process.env.NODE_ENV === 'production'

passwordCheckHandler(password: string, options)

Объект параметров может содержать любой из следующих параметров:

Вариант	Описание	Значение по умолчанию
cookieName	Название авторизации cookie	'next-password-protect'

Следующее приложение hoc

withPasswordProtect(App: NextApp, options)

Объект параметров может содержать любой из следующих параметров:

Вариант	Описание	Значение по умолчанию
checkApiUrl	Относительный путь маршрута API, обработанного passwordCheckHandler	'/api/passwordCheck'
loginApiUrl	Относительный путь маршрута API, обрабатываемый loginHandler	'/api/login'
loginComponent	Предоставьте свой собственный компонент React, чтобы показать в качестве подсказки для входа в систему	LoginComponent
loginComponentProps	Объект свойств для настройки подсказки для входа, без переоценки всего компонента (см. Ниже)	{}
bypassProtection	Защита от обхода для конкретных маршрутов, определяется обратным вызовом с NextRouter Param	({ route }) => false

Объект loginComponentProps может содержать любой из следующих параметров:

Вариант	Описание	Значение по умолчанию
backUrl	Покажите ссылку с этим URL, чтобы вернуться на основной веб -сайт	undefined
buttonBackgroundColor	Кнопка входа в систему цвета фона	'#01EDBC'
buttonColor	Кнопка входа в систему	'#111'
logo	Покажите логотип над подсказкой (IMG SRC)	undefined

Передовой

Пользовательский компонент входа в систему

Чтобы изменить компонент входа в систему по умолчанию, компонент React может быть поставлен в HOC withPasswordProtect . Чтобы библиотека функционировала должным образом, убедитесь, что ваш компонент входа в систему имеет ввод пароля, который проверяется по маршруту API. Вы можете использовать src/hoc/LoginComponent.tsx в качестве отправной точки.

Предостережения

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