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 คือที่ที่เนื้อหาแอปของคุณอยู่ เช่นเดียวกับเซิร์ฟเวอร์ Content Delivery Network (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

ทุกคำขอจาก 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 token ของเราหรือไม่
  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$).*$

การพัฒนาแบบ local

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

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

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

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

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

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

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