next password protect

Kata sandi melindungi penyebaran selanjutnya.js Anda. Lihat demo (kata sandi adalah rahasia )

---

Contoh-dengan-Custom-gogo.mov

Cara kerjanya

Perpustakaan ini menambahkan prompt kata sandi ke penyebaran selanjutnya.js Anda. Itu terdiri dari dua bagian utama:

1. Dua rute API tanpa server:
   • Rute login yang memeriksa apakah kata sandi benar dan mengatur cookie dengan JWT jika ada.
   • Rute cek yang memvalidasi jika Anda memiliki cookie otorisasi dengan JWT yang valid.
2. HOC (komponen tingkat tinggi) yang membungkus aplikasi Next.js dan menambahkan cek yang memvalidasi jika Anda masuk. Jika Anda melakukannya, maka Anda dapat melihat aplikasi secara normal; Jika tidak, Anda disajikan dengan prompt kata sandi.

Penting : Kasus penggunaan yang disarankan untuk perpustakaan ini berada dalam lingkungan pementasan atau pratinjau. Dengan memanfaatkan DefinePlugin Webpack, kami dapat memastikan perpustakaan ini hanya termasuk dalam lingkungan tertentu, menjaga ukuran bundel produksi kecil.

Perpustakaan ini tidak dimaksudkan sebagai pembungkus otentikasi kata sandi yang aman, tetapi lebih sebagai cara untuk membuat orang usil keluar.

Instalasi

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

Penggunaan

Ada 3 langkah untuk mengaktifkan Kata Sandi Protect: Mengatur variabel global, menambahkan rute API, dan menambahkan hoc ke _app.

Langkah 1

Agar dapat memanfaatkan eliminasi kode mati, disarankan untuk menambahkan variabel lingkungan seperti process.env.PASSWORD_PROTECT , dan mengaktifkan pustaka berdasarkan variabel itu. Untuk mengatur variabel ini, tambahkan yang berikut ke next.config.js :

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

Langkah 2

Tambahkan dua rute API, satu dengan loginHandler dan satu dengan fungsi API passwordCheckHandler . Anda dapat menamai mereka apa saja, selama Anda menyerahkan nama ke loginApiUrl dan checkApiUrl masing -masing, pada langkah berikutnya. Secara default diharapkan /login dan /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" ,
} ) ;

Langkah 3

Tambahkan hoc withPasswordProtect ke ekspor App default di 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 ;

Catatan : Pastikan untuk menentukan loginApiUrl dan/atau checkApiUrl jika rute API tidak default.

API

Penangan rute API

loginHandler(password: string, options)

Objek Opsi dapat berisi salah satu opsi berikut:

Pilihan	Keterangan	Nilai default
cookieMaxAge	Atribut Cookie Max-Age	undefined
cookieName	Nama cookie otorisasi	'next-password-protect'
cookieSameSite	Atribut Cookie Samesite	false
cookieSecure	Mengamankan bendera di cookie	process.env.NODE_ENV === 'production'

passwordCheckHandler(password: string, options)

Objek Opsi dapat berisi salah satu opsi berikut:

Pilihan	Keterangan	Nilai default
cookieName	Nama cookie otorisasi	'next-password-protect'

Hoc aplikasi berikutnya

withPasswordProtect(App: NextApp, options)

Objek Opsi dapat berisi salah satu opsi berikut:

Pilihan	Keterangan	Nilai default
checkApiUrl	Jalur relatif dari rute API ditangani oleh passwordCheckHandler	'/api/passwordCheck'
loginApiUrl	Jalur relatif dari rute API ditangani oleh loginHandler	'/api/login'
loginComponent	Suplai komponen reaksi Anda sendiri untuk ditampilkan sebagai prompt login	LoginComponent
loginComponentProps	Properties Object Untuk menyesuaikan prompt login, tanpa mengganti seluruh komponen (lihat di bawah)	{}
bypassProtection	Perlindungan bypass untuk rute tertentu, diputuskan dengan panggilan balik dengan NextRouter param	({ route }) => false

Objek loginComponentProps dapat berisi salah satu opsi berikut:

Pilihan	Keterangan	Nilai default
backUrl	Tampilkan tautan dengan URL ini untuk kembali ke situs web utama	undefined
buttonBackgroundColor	Warna latar belakang tombol login	'#01EDBC'
buttonColor	Warna tombol login	'#111'
logo	Tampilkan logo di atas prompt (IMG SRC)	undefined

Canggih

Komponen login khusus

Untuk mengubah komponen login default, komponen React dapat disuplai ke hoc withPasswordProtect . Agar perpustakaan berfungsi dengan baik, pastikan komponen login Anda memiliki input kata sandi yang divalidasi oleh rute API. Anda dapat menggunakan src/hoc/LoginComponent.tsx sebagai titik awal.

Peringatan

AMP belum didukung, karena logincomponen gagal validasi AMP. Pada halaman amp, tidak ada yang diberikan. Ini dapat diperbaiki dengan mengubah logincomponen menjadi amp yang valid.