next password protect 다운로드 - next password protect 소스 코드 다운로드

next password protect

AI 소스 코드

v1.8.0

다운로드

암호를 보호하십시오. JS 배포. 데모보기 (비밀번호는 비밀 입니다)

예제-with-custom-logo.mov

작동 방식

이 라이브러리에서는 다음에 비밀번호 프롬프트를 추가합니다. JS 배포. 두 가지 주요 부분으로 구성됩니다.

두 개의 서버리스 API 경로 :
- 비밀번호가 올바른지 확인하고 JWT로 쿠키를 설정하는 로그인 경로.
- 유효한 JWT가있는 권한 부여 쿠키가있는 경우 확인하는 확인 경로.
다음에 랩핑하고 로그인 된 경우 검증되는 수표를 추가하는 HOC (고차 구성 요소). 그렇다면 앱을 정상적으로 볼 수 있습니다. 그렇지 않으면 암호 프롬프트가 표시됩니다.

중요 :이 라이브러리의 권장 사용 사례는 준비 또는 미리보기 환경에 있습니다. WebPack의 DefinePlugin 활용하면이 라이브러리가 특정 환경에만 포함되어있어 생산 번들 크기를 작게 유지할 수 있습니다.

이 라이브러리는 안전한 비밀번호 인증 래퍼가 아니라 코가 많은 사람들을 막기위한 방법입니다.

설치

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

용법

비밀번호 보호를 활성화하기위한 3 단계가 있습니다 : 글로벌 변수 설정, API 경로 추가 및 HOC 추가 _App.

1 단계

Dead Code 제거를 활용하려면 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 단계

loginHandler 와 하나는 passwordCheckHandler API 기능이있는 API 경로 2 개를 추가하십시오. 다음 단계에서 이름을 통과하는 한 이름을 각각 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 단계

pages/_app.tsx 에서 App 의 기본 내보내기에 withPasswordProtect hoc를 추가하십시오.

 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 ;

참고 : API 경로가 기본값이 아닌 경우 loginApiUrl 및/또는 checkApiUrl 지정하십시오.

API

API는 핸들러를 노선합니다

loginHandler(password: string, options)

옵션 객체에는 다음 옵션 중 하나가 포함될 수 있습니다.

옵션	설명	기본값
`cookieMaxAge`	쿠키 최대 시대 속성	`undefined`
`cookieName`	승인 쿠키의 이름	`'next-password-protect'`
`cookieSameSite`	Samesite 쿠키 속성	`false`
`cookieSecure`	쿠키에 깃발을 확보하십시오	`process.env.NODE_ENV === 'production'`

passwordCheckHandler(password: string, options)

옵션 객체에는 다음 옵션 중 하나가 포함될 수 있습니다.

옵션	설명	기본값
`cookieName`	승인 쿠키의 이름	`'next-password-protect'`

다음 앱 HOC

withPasswordProtect(App: NextApp, options)

옵션 객체에는 다음 옵션 중 하나가 포함될 수 있습니다.

옵션	설명	기본값
`checkApiUrl`	`passwordCheckHandler` 가 처리하는 API 경로의 상대 경로	`'/api/passwordCheck'`
`loginApiUrl`	`loginHandler` 가 처리하는 API 경로의 상대 경로	`'/api/login'`
`loginComponent`	로그인 프롬프트로 표시 할 자신의 React 구성 요소를 제공하십시오.	`LoginComponent`
`loginComponentProps`	속성 개체 전체 구성 요소를 재정의하지 않고 로그인 프롬프트를 사용자 정의 할 수 있습니다 (아래 참조)	`{}`
`bypassProtection`	`NextRouter` Param과의 콜백으로 결정된 특정 경로에 대한 우회 보호	`({ route }) => false`

loginComponentProps 객체에는 다음 옵션 중 하나가 포함될 수 있습니다.

옵션	설명	기본값
`backUrl`	이 URL과 링크를 표시하여 기본 웹 사이트로 돌아갑니다.	`undefined`
`buttonBackgroundColor`	로그인 버튼 배경색	`'#01EDBC'`
`buttonColor`	로그인 버튼 색상	`'#111'`
`logo`	프롬프트 위의 로고 표시 (IMG SRC)	`undefined`

고급의

사용자 정의 로그인 구성 요소

기본 로그인 구성 요소를 변경하려면 React 구성 요소를 withPasswordProtect HOC에 제공 할 수 있습니다. 라이브러리가 올바르게 작동하려면 로그인 구성 요소에 API 경로에서 검증 된 암호 입력이 있는지 확인하십시오. src/hoc/LoginComponent.tsx 시작점으로 사용할 수 있습니다.