Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) · Pelajaran

Pelaksanaan Strategi JWT

Integrasikan Token Web JSON (JWT) untuk pengesahan tanpa keadaan, termasuk penjanaan dan pengesahan token.

Pelajaran 2 daripada 612 langkah

Pelaksanaan Strategi JWT ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 2 daripada 6. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 6 pelajaran.

Apakah JSON Web Token (JWT)?

Selamat datang! Dalam pelajaran ini, kita akan mendalami JSON Web Tokens (JWTs), iaitu kaedah popular untuk melindungi API.

JWT ialah cara yang padat dan selamat untuk URL bagi mewakili tuntutan yang dipindahkan antara dua pihak.
JWT sering digunakan untuk pengesahan tanpa status, yang bermaksud pelayan tidak perlu menyimpan maklumat sesi.
Hal ini menjadikan API lebih boleh diskalakan dan lebih mudah diurus, terutamanya dalam sistem teragih.

Tiga Bahagian Utama JWT

JWT pada asasnya ialah rentetan yang panjang, tetapi strukturnya terdiri daripada tiga bahagian berbeza yang dipisahkan oleh titik (.):

Pengepala: Mengandungi metadata tentang token itu sendiri (contohnya, jenis token dan algoritma penandatanganan).
Payload: Mengandungi tuntutan sebenar atau data tentang pengguna serta sifat tambahan.
Tandatangan: Digunakan untuk mengesahkan integriti dan ketulenan token.

Setiap bahagian dikodkan dalam Base64Url.

Pengepala & Payload dengan Lebih Terperinci

Mari kita lihat dengan lebih dekat dua bahagian pertama:

Pengepala: Biasanya mengandungi dua medan:"alg" (algoritma, contohnya HS256) dan "typ" (jenis, iaitu JWT).
Payload: Di sinilah anda meletakkan data anda, yang dikenali sebagai 'tuntutan'. Tuntutan lazim termasuk:
- sub (subjek): Biasanya ID pengguna.
- exp (masa luput): Masa token luput.
- iat (dikeluarkan pada): Masa token dikeluarkan.
- Tuntutan tersuai: Apa-apa data lain yang anda perlukan, seperti "username" atau "role".

Tandatangan Kriptografi

Tandatangan ialah bahagian ketiga yang penting untuk memastikan keselamatan:

Ia dicipta dengan mengambil pengepala yang telah dikodkan, payload yang telah dikodkan, kunci rahsia dan algoritma yang dinyatakan dalam pengepala.
Gabungan ini kemudiannya dicincang secara kriptografi.
Mengapakah ia penting? Jika sesiapa cuba mengubah pengepala atau payload, pengesahan tandatangan akan gagal, yang menunjukkan token itu tidak sah atau telah diubah.
Kunci rahsia mesti dirahsiakan pada pihak pelayan!

NestJS dan JWT

NestJS menyediakan sokongan yang sangat baik untuk mengintegrasikan JWT, dengan memanfaatkan keupayaan pustaka jsonwebtoken di sebalik tabir.

Kita akan menggunakan pakej @nestjs/jwt terutamanya, yang menawarkan JwtModule dan JwtService untuk mengendalikan penjanaan dan pengesahan token dengan lancar dalam aplikasi anda.

Mula-mula, anda perlu memasang pakej tersebut jika belum berbuat demikian:

npm install @nestjs/jwt passport-jwt --save

Mengkonfigurasi JwtModule

Untuk menggunakan JWT dalam NestJS, anda perlu mengimport dan mengkonfigurasi JwtModule dalam modul aplikasi anda (contohnya, AppModule atau AuthModule khusus).

Pilihan yang paling penting ialah kunci secret, yang digunakan untuk menandatangani dan mengesahkan token.

import { Module } from '@nestjs/common';
import { JwtModule } from '@nestjs/jwt';

@Module({
  imports: [
    JwtModule.register({
      secret: 'yourSuperSecretKey',
      signOptions: { expiresIn: '60s' }, // e.g., 60s, 7d, 1h
    }),
  ],
  // ... other providers, controllers
})
export class AppModule {}

Menjana JWT dalam NestJS

Setelah JwtModule dikonfigurasi, anda boleh menyuntik JwtService ke dalam perkhidmatan anda untuk menjana (menandatangani) token baharu. Kaedah sign() menerima payload (biasanya objek) dan mencipta rentetan JWT.

import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';

@Injectable()
export class AuthService {
  constructor(private jwtService: JwtService) {}

  async signIn(user: any): Promise<string> {
    const payload = { username: user.username, sub: user.userId };
    return this.jwtService.sign(payload); // Signs with configured secret & options
  }
}

Demo Kod: Penjanaan Token

Mari kita lihat secara konsep cara token dijana. Contoh ini menggunakan pustaka asas jsonwebtoken secara langsung, serupa dengan cara NestJS melakukannya.

Jalankan kod ini untuk melihat JWT dicipta:

// To run this, install 'jsonwebtoken':
// npm install jsonwebtoken --save

const jwt = require('jsonwebtoken');

const payload = {
  sub: 'user123',
  username: 'coder_kit'
};

const secret = 'mySuperSecretKey123'; // Keep this secret safe!

// Sign the token with an expiration of 1 hour
const token = jwt.sign(payload, secret, { expiresIn: '1h' });

console.log('--- Generated JWT ---');
console.log(token);
console.log('\nThis token is valid for 1 hour.');

Mengesahkan JWT dalam NestJS

Apabila klien menghantar JWT, pelayan anda perlu mengesahkannya. Kaedah JwtService.verify() menyemak beberapa perkara:

Adakah tandatangan itu sah (iaitu, adakah ia ditandatangani dengan rahsia kita)?
Adakah token itu telah luput?
Adakah terdapat peraturan pengesahan lain yang dinyatakan?

Jika sah, kaedah ini mengembalikan payload yang dinyahkod. Jika tidak sah, kaedah ini mencetuskan ralat.

import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';

@Injectable()
export class AuthService {
  constructor(private jwtService: JwtService) {}

  async verifyToken(token: string): Promise<any> {
    try {
      const payload = this.jwtService.verify(token);
      return payload; // Token is valid, return its data
    } catch (error) {
      // Token is invalid or expired
      throw new Error('Invalid or expired token');
    }
  }
}

Demo Kod: Pengesahan Token

Beginilah cara pengesahan token berfungsi. Anda boleh menggunakan token yang dijana dalam langkah sebelumnya (atau contoh yang diberikan) dan melihatnya disahkan.

Ingat, secret yang digunakan untuk pengesahan MUST sama dengan yang digunakan untuk penandatanganan!

// To run this, install 'jsonwebtoken':
// npm install jsonwebtoken --save

const jwt = require('jsonwebtoken');

// IMPORTANT: Replace with a REAL token you generated,
// or use this example token (signed with 'mySuperSecretKey123')
const testToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyMTIzIiwidXNlcm5hbWUiOiJjb2Rlcl9raXQiLCJpYXQiOjE3MDcwOTMyMTMsImV4cCI6MTcwNzE3OTYxM30.4i-J_q_e_x_a_m_p_l_e_s_i_g_n_a_t_u_r_e_f_o_r_d_e_m_o'; 

const secret = 'mySuperSecretKey123'; // Must match the signing secret!

console.log('--- Attempting to Verify Token ---');
try {
  const decoded = jwt.verify(testToken, secret);
  console.log('Token is VALID!');
  console.log('Decoded Payload:');
  console.log(decoded);
} catch (error) {
  console.error('Token is INVALID or EXPIRED!');
  console.error('Error:', error.message);
}

Semakan Konsep JWT

Anda telah mempelajari tiga bahagian utama JWT. Antara komponen berikut, yang manakah bertanggungjawab terutamanya untuk memastikan integriti token (iaitu token itu tidak diubah)?

Jawab dalam pelajaran interaktif

Ringkasan: Asas JWT

Syabas! Anda telah menguasai asas JWT:

Apakah JWT: Token yang padat dan tanpa keadaan untuk pengesahan.
Strukturnya: Pengepala, Muatan dan Tandatangan.
Konsep utama: Cara tandatangan melindungi integriti serta peranan kunci rahsia.
Integrasi NestJS: Menggunakan @nestjs/jwt untuk mengkonfigurasi, menandatangani dan mengesahkan token.

Seterusnya, kita akan meneroka cara melindungi laluan menggunakan Pengawal dan melaksanakan kawalan capaian berasaskan peranan!

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pelaksanaan Strategi JWT” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “Pelaksanaan Strategi JWT”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 6 pelajaran.

Apakah yang akan saya pelajari dalam “Pelaksanaan Strategi JWT”?

Integrasikan Token Web JSON (JWT) untuk pengesahan tanpa keadaan, termasuk penjanaan dan pengesahan token. Anda berlatih Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 6.

Berapa lamakah pelajaran “Pelaksanaan Strategi JWT” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) ini?

Ya. Setiap pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)