next password protect تنزيل - next password protect رمز المصدر

next password protect

كود الذكاء الاصطناعي

v1.8.0

تنزيل

كلمة المرور حماية عمليات النشر الخاصة بك next.js. عرض العرض التوضيحي (كلمة المرور سرية )

مثال مع اللقاح

كيف تعمل

تضيف هذه المكتبة موجه كلمة مرور إلى نشر next.js الخاص بك. يتكون من جزأين رئيسيين:

طريقان API بدون خادم:
- مسار تسجيل الدخول الذي يتحقق مما إذا كانت كلمة المرور صحيحة وتعيين ملف تعريف ارتباط مع JWT في حالة وجودها.
- مسار التحقق الذي يتحقق من صحة إذا كان لديك ملف تعريف الارتباط مع JWT صالح.
مخصص (مكون عالي الترتيب) يلف تطبيق Next.js ويضيف التحقق من التحقق من صحة إذا كنت قد قمت بتسجيل الدخول. إذا قمت بذلك ، فيمكنك عرض التطبيق بشكل طبيعي ؛ خلاف ذلك ، يتم تقديمك مع موجه كلمة المرور.

هام : حالة الاستخدام الموصى بها لهذه المكتبة هي في بيئة التدريج أو المعاينة. من خلال الاستفادة من DefinePlugin من WebPack ، يمكننا التأكد من تضمين هذه المكتبة فقط في بيئات معينة ، مع الحفاظ على حجم حزمة الإنتاج صغيرًا.

لا تهدف هذه المكتبة إلى غلاف مصادقة لآمن كلمة مرور ، بل كوسيلة لإبعاد الأشخاص الفضوليين.

تثبيت

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

الاستخدام

هناك 3 خطوات لتمكين حماية كلمة المرور: تعيين متغير عالمي ، وإضافة طرق API ، وإضافة المخصص إلى _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

أضف HOC withPasswordProtect إلى التصدير الافتراضي 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

معالجات طرق API

loginHandler(password: string, options)

يمكن أن يحتوي كائن الخيارات على أي من الخيارات التالية:

خيار	وصف	القيمة الافتراضية
`cookieMaxAge`	ملف تعريف الارتباط MAX-AGE	`undefined`
`cookieName`	اسم ملف تعريف الارتباط التفويض	`'next-password-protect'`
`cookieSameSite`	سميت ساميت كوكي	`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`	قم بتزويد مكون 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 بعد ، لأن Logincomponent فشل التحقق من صحة أمبير. على صفحة أمبير ، لا يتم تقديم شيء. يمكن إصلاح ذلك عن طريق تغيير Logincomponent إلى AMP صالح.

يوسع

معلومات إضافية