AI Powered SaaS: Stripe + Auth + Billing + Deploy · บทเรียน

การเข้าสู่ระบบและการสร้าง JWT

สร้างระบบเข้าสู่ระบบสำหรับผู้ใช้ที่ออกและจัดการโทเค็นเว็บ JSON (JWT) เพื่อจัดการเซสชัน

บทเรียน 2 จาก 412 ขั้นตอน

การเข้าสู่ระบบและการสร้าง JWT เป็นบทเรียน AI Powered SaaS: Stripe + Auth + Billing + Deploy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน AI Powered SaaS: Stripe + Auth + Billing + Deploy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส AI Powered SaaS: Stripe + Auth + Billing + Deploy มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Welcome to Login Systems

In the previous lesson, we learned about user registration and secure password hashing. Now, it's time to build the login system!

A login system allows authenticated users to access protected resources and personalize their experience within your SaaS application.

How Login Works (Overview)

When a user tries to log in, they typically provide a username (or email) and a password. Here's the basic flow:

  • The client (e.g., your mobile app) sends credentials to the server.
  • The server verifies these credentials against its stored user data.
  • If valid, the server grants access.

Verifying User Credentials

Upon receiving login credentials, your server needs to perform a crucial check:

  1. Find the user by their unique identifier (e.g., email or username).
  2. Retrieve the stored hashed password for that user.
  3. Compare the provided password (after hashing it with the same method) with the stored hashed password.

Never store passwords in plain text! Always hash and salt them, as we discussed in the registration lesson.

The Challenge: Stateless APIs

Modern APIs are often stateless, meaning the server doesn't remember previous requests from the same client. This makes APIs scalable but poses a challenge for user authentication.

How do we know if a user who just logged in is still authenticated on their next request without sending credentials every time?

Introducing JSON Web Tokens (JWT)

JSON Web Tokens (JWTs) are a compact, URL-safe means of representing claims to be transferred between two parties. They are perfect for stateless authentication.

Instead of server-side sessions, the server issues a JWT upon successful login. The client then stores this token and sends it with every subsequent request.

JWT Structure: Header

A JWT consists of three parts separated by dots: Header, Payload, and Signature.

The Header typically contains two parts:

  • typ (type of token, usually 'JWT')
  • alg (signing algorithm, e.g., 'HS256' for HMAC SHA256)

It's a JSON object, Base64Url-encoded.

{"alg":"HS256","typ":"JWT"}

JWT Structure: Payload (Claims)

The Payload contains the 'claims' – statements about an entity (usually the user) and additional data.

Claims can be:

  • Registered: Standard fields like sub (subject), exp (expiration time), iat (issued at time).
  • Public: Custom claims defined by you, but registered in the IANA JSON Web Token Registry.
  • Private: Custom claims agreed upon by the parties using them, like userId or role.

Example Payload:

{"sub":"12345","name":"Coddy User","exp":1700000000}

JWT Structure: Signature

The Signature is crucial for verifying the token's integrity. It's created by taking the encoded header, the encoded payload, and a secret key, then applying the algorithm specified in the header.

If anyone tries to tamper with the header or payload, the signature verification will fail, making the token invalid. The secret key is known only to the server.

Generating a JWT (Conceptual)

After successfully verifying a user's credentials, your server generates a JWT. This involves:

  1. Creating the Header and Payload JSON objects.
  2. Base64Url-encoding both.
  3. Concatenating them with a dot.
  4. Signing the combined string using a secret key and the chosen algorithm to produce the Signature.

The final JWT is EncodedHeader.EncodedPayload.Signature.

JWT Generation Example

While full JWT signing requires a library, we can demonstrate the Base64 encoding part of building a JWT string. This ensures the token is URL-safe.

import java.util.Base64;
import java.nio.charset.StandardCharsets;

public class Main {
  public static void main(String[] args) {
    String headerJson = "{\"alg\":\"HS256\",\"typ\":\"JWT\"}";
    String payloadJson = "{\"sub\":\"user123\",\"name\":\"Coddy User\"}";

    String encodedHeader = Base64.getUrlEncoder().withoutPadding().encodeToString(headerJson.getBytes(StandardCharsets.UTF_8));
    String encodedPayload = Base64.getUrlEncoder().withoutPadding().encodeToString(payloadJson.getBytes(StandardCharsets.UTF_8));

    System.out.println("Header (Base64Url-encoded):\n" + encodedHeader);
    System.out.println("\nPayload (Base64Url-encoded):\n" + encodedPayload);
    System.out.println("\nConceptual JWT structure: " + encodedHeader + "." + encodedPayload + ".[Signature]");
  }
}

Quick Check: JWT Parts

You've just learned about the three main parts of a JSON Web Token (JWT).

Recap: Login & JWTs

Great job! You've learned how a user login system works and the role of JSON Web Tokens (JWTs) in modern, stateless authentication.

  • Login involves verifying credentials against hashed passwords.
  • JWTs provide a stateless way to manage user sessions.
  • JWTs have three parts: Header, Payload, and Signature.
  • The Signature ensures the token's integrity.

Next, we'll explore how to use these JWTs to protect your API routes!

เริ่มต้นได้ฟรี

เรียนรู้ AI Powered SaaS: Stripe + Auth + Billing + Deploy ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
12
บทเรียน
48

คำถามที่พบบ่อย

บทเรียน “การเข้าสู่ระบบและการสร้าง JWT” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเข้าสู่ระบบและการสร้าง JWT” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส AI Powered SaaS: Stripe + Auth + Billing + Deploy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส AI Powered SaaS: Stripe + Auth + Billing + Deploy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเข้าสู่ระบบและการสร้าง JWT”

สร้างระบบเข้าสู่ระบบสำหรับผู้ใช้ที่ออกและจัดการโทเค็นเว็บ JSON (JWT) เพื่อจัดการเซสชัน คุณปฏิบัติ AI Powered SaaS: Stripe + Auth + Billing + Deploy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน AI Powered SaaS: Stripe + Auth + Billing + Deploy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน AI Powered SaaS: Stripe + Auth + Billing + Deploy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การเข้าสู่ระบบและการสร้าง JWT” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน AI Powered SaaS: Stripe + Auth + Billing + Deploy นี้ได้ไหม

ได้ บทเรียน AI Powered SaaS: Stripe + Auth + Billing + Deploy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การลงทะเบียนผู้ใช้และการแฮช
  2. การเข้าสู่ระบบและการสร้าง JWT
  3. เส้นทางที่มีการป้องกันและมิดเดิลแวร์
  4. การรีเซ็ตรหัสผ่านและการยืนยันอีเมล
← กลับไปที่ AI Powered SaaS: Stripe + Auth + Billing + Deploy