next password protect ดาวน์โหลด - next password protect ซอร์สโค้ด Next Protect

next password protect

โค้ดแหล่งที่มา AI

v1.8.0

ดาวน์โหลด

รหัสผ่านปกป้องการปรับใช้ next.js ของคุณ ดูตัวอย่าง (รหัสผ่านเป็น ความลับ )

ตัวอย่างที่มี-custom-logo.mov

มันทำงานอย่างไร

ไลบรารีนี้เพิ่มพรอมต์รหัสผ่านให้กับการปรับใช้ next.js ของคุณ ประกอบด้วยสองส่วนหลัก:

เส้นทาง API แบบไม่มีเซิร์ฟเวอร์สองเส้นทาง:
- เส้นทางเข้าสู่ระบบที่ตรวจสอบว่ารหัสผ่านถูกต้องและตั้งค่าคุกกี้ด้วย JWT ในกรณีที่เป็น
- เส้นทางตรวจสอบที่ตรวจสอบว่าคุณมีคุกกี้การอนุญาตที่มี JWT ที่ถูกต้อง
hoc (ส่วนประกอบที่มีลำดับสูงกว่า) ที่ล้อมรอบแอป next.js และเพิ่มการตรวจสอบว่าตรวจสอบว่าคุณเข้าสู่ระบบหากคุณทำคุณสามารถดูแอพได้ตามปกติ มิฉะนั้นคุณจะถูกนำเสนอด้วยพรอมต์รหัสผ่าน

สำคัญ : กรณีการใช้งานที่แนะนำสำหรับไลบรารีนี้อยู่ในสภาพแวดล้อมการแสดงละครหรือดูตัวอย่าง ด้วยการใช้ประโยชน์จาก DefinePlugin ของ WebPack เราสามารถตรวจสอบให้แน่ใจว่าห้องสมุดนี้รวมอยู่ในสภาพแวดล้อมบางอย่างเท่านั้น

ไลบรารีนี้ไม่ได้หมายถึง wrapper การตรวจสอบรหัสผ่านที่ปลอดภัย แต่เป็นวิธีที่จะทำให้คนที่มีจมูกยาวออกไป

การติดตั้ง

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 และอีกเส้นทางหนึ่งด้วยฟังก์ชั่น passwordCheckHandler API คุณสามารถตั้งชื่อพวกเขาได้ทุกอย่างตราบใดที่คุณส่งชื่อไปยัง 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`	แอตทริบิวต์ Max-Eage Cookie	`undefined`
`cookieName`	ชื่อของคุกกี้การอนุญาต	`'next-password-protect'`
`cookieSameSite`	แอตทริบิวต์คุกกี้ samesite	`false`
`cookieSecure`	ปลอดภัยธงบนคุกกี้	`process.env.NODE_ENV === 'production'`

passwordCheckHandler(password: string, options)

วัตถุตัวเลือกสามารถมีตัวเลือกใด ๆ ต่อไปนี้:

ตัวเลือก	คำอธิบาย	ค่าเริ่มต้น
`cookieName`	ชื่อของคุกกี้การอนุญาต	`'next-password-protect'`

แอพถัดไปเท่านั้น

withPasswordProtect(App: NextApp, options)

วัตถุตัวเลือกสามารถมีตัวเลือกใด ๆ ต่อไปนี้:

ตัวเลือก	คำอธิบาย	ค่าเริ่มต้น
`checkApiUrl`	เส้นทางสัมพัทธ์ของเส้นทาง API ที่จัดการโดย `passwordCheckHandler`	`'/api/passwordCheck'`
`loginApiUrl`	เส้นทางสัมพัทธ์ของเส้นทาง API ที่จัดการโดย `loginHandler`	`'/api/login'`
`loginComponent`	จัดหาองค์ประกอบปฏิกิริยาของคุณเองเพื่อแสดงเป็นพรอมต์เข้าสู่ระบบ	`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 เป็นจุดเริ่มต้น

คำเตือน

แอมป์ยังไม่ได้รับการสนับสนุนเนื่องจากการตรวจสอบแอมป์ของ logincoment ล้มเหลว ในหน้าแอมป์ไม่มีอะไรจะแสดงผล สิ่งนี้สามารถแก้ไขได้โดยการเปลี่ยน LogIncoment เป็น AMP ที่ถูกต้อง

ขยาย

ข้อมูลเพิ่มเติม