Protected App — การผสานการยืนยันตัวตนแบบไม่ใช้ SDK

Protected App ถูกออกแบบมาเพื่อลดความซับซ้อนของ การผสาน SDK โดยแยกชั้น การยืนยันตัวตน (Authentication) ออกจากแอปพลิเคชันของคุณ เราดูแลเรื่องการยืนยันตัวตนให้ คุณจึงสามารถโฟกัสกับฟังก์ชันหลักของคุณได้ เมื่อผู้ใช้ได้รับการยืนยันตัวตนแล้ว Protected App จะให้บริการเนื้อหาจากเซิร์ฟเวอร์ของคุณ

Protected App ทำงานอย่างไร

Protected App ที่ขับเคลื่อนด้วย Cloudflare ทำงานทั่วโลกบน edge networks เพื่อให้แน่ใจว่าแอปของคุณมี latency ต่ำและพร้อมใช้งานสูง

Protected App จะดูแลสถานะเซสชันและข้อมูลผู้ใช้ หากผู้ใช้ยังไม่ได้รับการยืนยันตัวตน Protected App จะเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ เมื่อได้รับการยืนยันตัวตนแล้ว Protected App จะห่อหุ้มคำขอของผู้ใช้ด้วยข้อมูลการยืนยันตัวตนและข้อมูลผู้ใช้ จากนั้นส่งต่อไปยัง origin server

กระบวนการนี้แสดงในแผนภาพ flowchart ต่อไปนี้:

ปกป้อง origin server ของคุณ

Origin server ซึ่งอาจเป็นอุปกรณ์จริงหรือเสมือนที่ไม่ได้เป็นเจ้าของโดย Protected App ของ Logto คือที่ที่เนื้อหาแอปของคุณอยู่ คล้ายกับเซิร์ฟเวอร์ CDN, Protected App จะจัดการกระบวนการยืนยันตัวตนและดึงเนื้อหาจาก origin server ของคุณ ดังนั้น หากผู้ใช้เข้าถึง origin server ได้โดยตรง พวกเขาจะสามารถข้ามการยืนยันตัวตนและแอปของคุณจะไม่ถูกปกป้องอีกต่อไป

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

1. การตรวจสอบ HTTP Header
2. การตรวจสอบ JSON Web Tokens (JWT)

การตรวจสอบ HTTP Header

การรักษาความปลอดภัย origin server ของคุณสามารถทำได้โดยใช้ HTTP Basic Authentication เพื่อปกป้อง origin server

ทุกคำขอจาก Protected App จะมี header ดังนี้:

Authorization: Basic base64(appId:appSecret)

โดยการตรวจสอบ header นี้ คุณสามารถยืนยันได้ว่าคำขอมาจาก Protected App และปฏิเสธคำขอที่ไม่มี header นี้

หากคุณใช้ Nginx หรือ Apache สามารถดูคู่มือดังต่อไปนี้เพื่อใช้งาน HTTP Basic Authentication บน origin server ของคุณ:

1. Nginx: Configuring HTTP Basic Authentication
2. Apache: Authentication and Authorization

หากต้องการตรวจสอบ header ภายในแอปของคุณ ดูตัวอย่าง HTTP Basic Authentication ที่ Cloudflare ให้ไว้เพื่อเรียนรู้วิธีจำกัดการเข้าถึงด้วย schema HTTP Basic

การตรวจสอบ JSON Web Tokens (JWT)

อีกวิธีหนึ่งในการปกป้อง origin server ของคุณคือการใช้ JSON Web Tokens (JWT)

ทุกคำขอที่ได้รับการยืนยันตัวตนจาก Protected App จะมี header ดังนี้:

Logto-ID-Token: <JWT>

JWT นี้เรียกว่า ID Token ซึ่งถูกเซ็นโดย Logto และมีข้อมูลผู้ใช้ โดยการตรวจสอบ JWT นี้ คุณสามารถยืนยันได้ว่าคำขอมาจาก Protected App และปฏิเสธคำขอที่ไม่มี header นี้

โทเค็นนี้ถูกเข้ารหัสและเซ็นเป็นโทเค็น JWS

ขั้นตอนการตรวจสอบ:

1. Validating a JWT
2. Validating the JWS signature
3. ผู้ออกโทเค็น (issuer) คือ https://<your-logto-domain>/oidc (ออกโดย Logto auth server ของคุณ)

const express = require('express');
const jwksClient = require('jwks-rsa');
const jwt = require('jsonwebtoken');

const ISSUER = 'https://<your-logto-domain>/oidc';
const CERTS_URL = 'https://<your-logto-domain>/oidc/jwks';

const client = jwksClient({
  jwksUri: CERTS_URL,
});

const getKey = (header, callback) => {
  client.getSigningKey(header.kid, function (err, key) {
    callback(err, key?.getPublicKey());
  });
};

const verifyToken = (req, res, next) => {
  const token = req.headers['Logto-ID-Token'];

  // ตรวจสอบว่าคำขอที่เข้ามามี header โทเค็นของเราหรือไม่
  if (!token) {
    return res
      .status(403)
      .send({ status: false, message: 'missing required Logto-ID-Token header' });
  }

  jwt.verify(token, getKey, { issuer: ISSUER }, (err, decoded) => {
    if (err) {
      return res.status(403).send({ status: false, message: 'invalid id token' });
    }

    req.user = decoded;
    next();
  });
};

const app = express();

app.use(verifyToken);

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000);

รับสถานะการยืนยันตัวตนและข้อมูลผู้ใช้

หากคุณต้องการรับข้อมูลการยืนยันตัวตนและข้อมูลผู้ใช้สำหรับแอปของคุณ คุณสามารถใช้ header Logto-ID-Token ได้เช่นกัน

หากคุณต้องการเพียงแค่ถอดรหัสโทเค็น สามารถใช้โค้ดต่อไปนี้:

const express = require('express');

const decodeIdToken = (req, res, next) => {
  const token = req.headers['Logto-ID-Token'];

  if (!token) {
    return res.status(403).send({
      status: false,
      message: 'missing required Logto-ID-Token header',
    });
  }

  const parts = token.split('.');
  if (parts.length !== 3) {
    throw new Error('Invalid ID token');
  }

  const payload = parts[1];
  const decodedPayload = atob(payload.replace(/-/g, '+').replace(/_/g, '/'));
  const claims = JSON.parse(decodedPayload);

  req.user = claims;
  next();
};

const app = express();

app.use(decodeIdToken);

app.get('/', (req, res) => {
  res.json(req.user);
});

app.listen(3000);

ปรับแต่งการอ้างสิทธิ์ใน ID token

โดยปกติ header Logto-ID-Token จะมีการอ้างสิทธิ์ OIDC มาตรฐาน (เช่น sub, name, และ email) หากต้องการเพิ่ม การอ้างสิทธิ์เพิ่มเติม เช่น บทบาท (roles) หรือข้อมูลองค์กร ต้องตั้งค่าทั้งสองส่วนดังนี้:

1. Tenant toggle: เปิดใช้งานการอ้างสิทธิ์ใน Console > Custom JWT > ID token
2. Protected App scopes: ในการตั้งค่า Protected App ของคุณ ให้เลือก scope ที่ตรงกันใน ID token claims > Additional scopes

การอ้างสิทธิ์เพิ่มเติมจะถูกรวมใน ID token ที่ส่งต่อก็ต่อเมื่อเปิดใช้งานใน Custom JWT และเลือก scope ที่เกี่ยวข้องสำหรับ Protected App ดู Custom ID token สำหรับรายการ scope และการอ้างสิทธิ์เพิ่มเติมทั้งหมด

ขอบเขต (Scope)	การอ้างสิทธิ์ (Claims)
custom_data	custom_data
identities	identities, sso_identities
roles	roles
urn:logto:scope:organizations	organizations, organization_data
urn:logto:scope:organization_roles	organization_roles

รับ host ต้นทางเดิม

หากคุณต้องการรับ host ต้นทางที่ไคลเอนต์ร้องขอ สามารถใช้ header Logto-Host หรือ x-forwarded-host

ปรับแต่งกฎการยืนยันตัวตน

โดยปกติ Protected App จะปกป้องทุกเส้นทาง หากคุณต้องการปรับแต่งกฎการยืนยันตัวตน สามารถตั้งค่าในฟิลด์ "Custom authentication rules" ใน Console

รองรับ regular expressions ตัวอย่างเช่น:

1. เพื่อปกป้องเฉพาะเส้นทาง /admin และ /privacy ด้วยการยืนยันตัวตน: ^/(admin|privacy)/.*
2. เพื่อยกเว้นภาพ JPG จากการยืนยันตัวตน: ^(?!.*\.jpg$).*$

การพัฒนาในเครื่อง

Protected App ถูกออกแบบมาให้ทำงานร่วมกับ origin server ของคุณ อย่างไรก็ตาม หาก origin server ของคุณไม่สามารถเข้าถึงได้จากภายนอก คุณสามารถใช้เครื่องมืออย่าง ngrok หรือ Cloudflare Tunnels เพื่อเปิดเผยเซิร์ฟเวอร์ในเครื่องของคุณสู่อินเทอร์เน็ต

การเปลี่ยนไปใช้การผสาน SDK

Protected App ถูกออกแบบมาเพื่อให้ง่ายต่อการยืนยันตัวตน อย่างไรก็ตาม หากคุณต้องการเปลี่ยนไปใช้การผสาน SDK เพื่อควบคุมและปรับแต่งได้มากขึ้น คุณสามารถ สร้างแอปใหม่ ใน Logto และตั้งค่า การผสาน SDK และเพื่อให้เปลี่ยนผ่านได้อย่างราบรื่น คุณสามารถนำ config ของแอปจาก Protected App ไปใช้ซ้ำได้ โดย Protected App จริง ๆ แล้วคือ "Traditional Web App" ใน Logto คุณสามารถดู "AppId" และ "AppSecret" ได้ในหน้าตั้งค่าแอป หลังจากเปลี่ยนผ่านเสร็จแล้ว คุณสามารถลบ Protected App ออกจากแอปของคุณได้

แหล่งข้อมูลที่เกี่ยวข้อง

Protected App: สร้างระบบยืนยันตัวตนให้แอปของคุณในไม่กี่คลิก ไม่ต้องเขียนโค้ด

แรงบันดาลใจเบื้องหลัง Protected App

วิธีที่เร็วที่สุดในการสร้างระบบการยืนยันตัวตน