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

Nuxt

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

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

ก่อนอื่น, Casdoor ควรถูกติดตั้ง

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

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

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

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

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

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

สร้างไฟล์ .js หรือ .ts ในไดเรกทอรี middleware ที่รากของโปรเจคของคุณเพื่อกำหนด Middleware และชื่อไฟล์จะถูกใช้เป็นชื่อของ middleware ตัวอย่างเช่น, ใน nuxt-auth, เราสร้างไฟล์ชื่อ myMiddleware.js ในไดเรกทอรี middleware, ซึ่งสามารถอ้างอิงเป็น myMiddleware ในที่อื่นๆ เช่น nuxt.config.js

ตัวอย่าง​

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

export default function ({route, redirect}) {

  if (protectedRoutes.includes(route.path)) {
    //redirect the incoming request to a different URL
    redirect('/login');
  }
}

เพื่อให้ middleware ทำงาน, คุณควรเพิ่ม router ใน nuxt.config.js, เช่นนั้น:

export default {
    // other configuations

    // what to add
    router: {
    middleware: ['myMiddleware'] // replace to your middleware name
  },
}

ดูเอกสารการใช้งาน nuxt อย่างเป็นทางการ 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",
};
คำเตือน

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

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

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

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

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

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

หลังจากการตรวจสอบของ Casdoor ผ่าน, มันจะเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันของคุณพร้อมกับ 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 จะตรวจสอบตัวตนของพวกเขา หากผู้ใช้ไม่ได้รับการตรวจสอบสิทธิ์, พวกเขาจะถูกเปลี่ยนเส้นทางไปยังหน้าล็อกอินหรือถูกปฏิเสธการเข้าถึง

ตัวอย่าง​

import Cookies from "js-cookie";

const protectedRoutes = ["/profile"];

export default function ({route, redirect}) {
  const casdoorUserCookie = Cookies.get('casdoorUser');
  const isAuthenticated = !!casdoorUserCookie;

  if (!isAuthenticated && protectedRoutes.includes(route.path)) {
    redirect('/login');
  }
}