ข้ามไปยังเนื้อหาหลัก

Next.js

nextjs-auth เป็นตัวอย่างของการรวม casdoor เข้ากับโปรเจค next-js เราจะแนะนำคุณผ่านขั้นตอนด้านล่าง

ขั้นตอนที่ 1: การติดตั้ง Casdoor​

ก่อนอื่น, ควรทำการติดตั้ง Casdoor

คุณสามารถอ้างอิงไปยังเอกสารอย่างเป็นทางการของ Casdoor สำหรับ การติดตั้งเซิร์ฟเวอร์ กรุณาติดตั้ง instance Casdoor ของคุณใน โหมดการผลิต

หลังจากการติดตั้งที่สำเร็จ, โปรดตรวจสอบสิ่งต่อไปนี้:

  • เปิดเบราว์เซอร์ที่คุณชอบและเยี่ยมชม http://localhost:8000 คุณจะเห็นหน้าล็อกอินของ Casdoor
  • ทดสอบฟังก์ชันล็อกอินโดยการใส่ admin เป็นชื่อผู้ใช้และ 123 เป็นรหัสผ่าน

หลังจากนั้น, คุณสามารถรวมหน้าล็อกอินที่ใช้ Casdoor เข้ากับแอปของคุณได้อย่างรวดเร็วโดยใช้ขั้นตอนต่อไปนี้

ขั้นตอนที่ 2: เพิ่ม Middleware​

Middleware ช่วยให้คุณสามารถรันโค้ดก่อนที่คำขอจะเสร็จสมบูรณ์ จากนั้น, ขึ้นอยู่กับคำขอที่เข้ามา, คุณสามารถปรับเปลี่ยนการตอบสนองโดยการเขียนใหม่, การเปลี่ยนทิศทาง, การแก้ไขส่วนหัวของคำขอหรือการตอบสนอง, หรือการตอบสนองโดยตรง

ใช้ไฟล์ middleware.ts (หรือ .js) ในรากของโปรเจคของคุณเพื่อกำหนด Middleware ตัวอย่างเช่น, ในระดับเดียวกับ pages หรือ app, หรือภายใน src ถ้าเหมาะสม

ตัวอย่าง​

//define which paths Middleware will run on
const protectedRoutes = ["/profile"];

export default function middleware(req) {
  if (protectedRoutes.includes(req.nextUrl.pathname)) {
    //redirect the incoming request to a different URL
    return NextResponse.redirect(new URL("/login", req.url));
  }
}

ดูเอกสารอย่างเป็นทางการของ next.js middleware เพื่อข้อมูลเพิ่มเติม

ขั้นตอนที่ 3: ใช้งาน Casdoor SDK​

1.ติดตั้ง SDK​

ก่อนอื่น, ติดตั้ง casdoor-js-sdk ผ่าน NPM หรือ Yarn:

npm install casdoor-js-sdk

หรือ:

yarn add casdoor-js-sdk

2.การเริ่มต้นใช้งาน SDK​

จากนั้น กำหนดค่าพารามิเตอร์ที่เป็นสตริง 6 ตัวในลำดับต่อไปนี้:

ชื่อจำเป็นคำอธิบาย
serverUrlใช่URL เซิร์ฟเวอร์ Casdoor, เช่น http://localhost:8000
clientIdใช่รหัสไคลเอนต์ของแอปพลิเคชัน
clientSecretใช่ความลับของไคลเอนต์แอปพลิเคชัน
organizationNameใช่องค์กรของแอปพลิเคชัน
appNameใช่ชื่อของแอปพลิเคชัน
redirectPathใช่URL ที่จะเปลี่ยนเส้นทางไป

ตัวอย่าง​

const sdkConfig = {
  serverUrl: "https://door.casdoor.com",
  clientId: "294b09fbc17f95daf2fe",
  clientSecret: "dd8982f7046ccba1bbd7851d5c1ece4e52bf039d",
  organizationName: "casbin",
  appName: "app-vue-python-example",
  redirectPath: "/callback",
};
คำเตือน

แทนที่ค่าการกำหนดค่าด้วยของ instance Casdoor ของคุณเอง, โดยเฉพาะ clientId, clientSecret, และ serverUrl

3.เปลี่ยนเส้นทางไปยังหน้าล็อกอิน​

เมื่อคุณต้องการตรวจสอบสิทธิ์ผู้ใช้ที่เข้าถึงแอปของคุณ, คุณสามารถส่ง URL เป้าหมายและเปลี่ยนเส้นทางไปยังหน้าล็อกอินที่ Casdoor ให้บริการ

ตรวจสอบให้แน่ใจว่าคุณได้เพิ่ม URL สำหรับการเรียกกลับ (เช่น http://localhost:8080/callback) ในการกำหนดค่าแอปพลิเคชันล่วงหน้า

const CasdoorSDK = new Sdk(sdkConfig);
CasdoorSDK.signin_redirect();

4.รับ Token และการเก็บข้อมูล​

หลังจากการตรวจสอบของ Casdoor ผ่าน, มันจะเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันของคุณพร้อมกับ token

คุณสามารถเลือกใช้ cookie เพื่อเก็บ token

CasdoorSDK.exchangeForAccessToken()
  .then((res) => {
    if (res && res.access_token) {
      //Get Token
      return CasdoorSDK.getUserInfo(res.access_token);
    }
  })
  .then((res) => {
    // Storage Token
    Cookies.set("casdoorUser", JSON.stringify(res));
  });

คุณสามารถอ้างอิงไปยังเอกสารอย่างเป็นทางการของ Casdoor สำหรับ วิธีการใช้ Casdoor SDK

ขั้นตอนที่ 4: เพิ่มฟังก์ชันการตรวจสอบสิทธิ์ของ Middleware​

เมื่อผู้ใช้พยายามเข้าถึงเส้นทางที่ถูกป้องกัน, ฟังก์ชันการตรวจสอบสิทธิ์ของ Middleware จะทำการยืนยันตัวตนของพวกเขา หากผู้ใช้ไม่ได้รับการตรวจสอบสิทธิ์, พวกเขาจะถูกเปลี่ยนเส้นทางไปยังหน้าล็อกอินหรือถูกปฏิเสธการเข้าถึง

ตัวอย่าง​

//protected route
const protectedRoutes = ["/profile"];
const casdoorUserCookie = req.cookies.get("casdoorUser");
const isAuthenticated = casdoorUserCookie ? true : false;

//Authentication Function
if (!isAuthenticated && protectedRoutes.includes(req.nextUrl.pathname)) {
  return NextResponse.redirect(new URL("/login", req.url));
}