เพิ่มการยืนยันตัวตนให้กับแอป Nuxt 3 ของคุณ (Add authentication to your Nuxt 3 application)

เคล็ดลับ:

ตัวอย่างสาธิตต่อไปนี้สร้างบน Nuxt 3.10.2
โปรเจกต์ตัวอย่างสามารถดูได้ที่ GitHub repository
Logto Nuxt SDK ต้องการการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) เพื่อให้ทำงานได้อย่างถูกต้อง สำหรับแอปพลิเคชันหน้าเดียว (SPA) โปรดดู Vue SDK

ข้อกำหนดเบื้องต้น

บัญชี Logto Cloud หรือ Logto แบบโฮสต์เอง
สร้างแอปพลิเคชันเว็บแบบดั้งเดิมของ Logto แล้ว

การติดตั้ง

ติดตั้ง Logto SDK ผ่านตัวจัดการแพ็กเกจที่คุณชื่นชอบ:

npm
pnpm
Yarn

npm i @logto/nuxt

pnpm add @logto/nuxt

yarn add @logto/nuxt

การเชื่อมต่อระบบ

ลงทะเบียนโมดูล Logto

ในไฟล์ config ของ Nuxt ของคุณ ให้เพิ่มโมดูล Logto และกำหนดค่า:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@logto/nuxt'],
  runtimeConfig: {
    logto: {
      endpoint: '<your-logto-endpoint>',
      appId: '<your-logto-app-id>',
      appSecret: '<your-logto-app-secret>',
      cookieEncryptionKey: '<a-random-string>',
    },
  },
  // ...การตั้งค่าอื่น ๆ
});

เนื่องจากข้อมูลเหล่านี้มีความอ่อนไหว แนะนำให้ใช้ environment variables (.env):

.env
NUXT_LOGTO_ENDPOINT="<your-logto-endpoint>"
NUXT_LOGTO_APP_ID="<your-logto-app-id>"
NUXT_LOGTO_APP_SECRET="<your-logto-app-secret>"
NUXT_LOGTO_COOKIE_ENCRYPTION_KEY="<a-random-string>"

ดูข้อมูลเพิ่มเติมได้ที่ runtime config

กำหนดค่า redirect URI

ก่อนที่เราจะลงลึกในรายละเอียด นี่คือภาพรวมประสบการณ์ของผู้ใช้ปลายทาง กระบวนการลงชื่อเข้าใช้สามารถสรุปได้ดังนี้:

แอปของคุณเรียกใช้งานเมธอดลงชื่อเข้าใช้
ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของ Logto สำหรับแอปเนทีฟ ระบบจะเปิดเบราว์เซอร์ของระบบ
ผู้ใช้ลงชื่อเข้าใช้และถูกเปลี่ยนเส้นทางกลับไปยังแอปของคุณ (ตามที่กำหนดไว้ใน redirect URI)

กระบวนการยืนยันตัวตนนี้เป็นไปตามโปรโตคอล OpenID Connect (OIDC) และ Logto บังคับใช้มาตรการรักษาความปลอดภัยอย่างเข้มงวดเพื่อปกป้องการลงชื่อเข้าใช้ของผู้ใช้
หากคุณมีหลายแอป คุณสามารถใช้ผู้ให้บริการข้อมูลระบุตัวตน (Logto) เดียวกันได้ เมื่อผู้ใช้ลงชื่อเข้าใช้แอปหนึ่งแล้ว Logto จะดำเนินการลงชื่อเข้าใช้โดยอัตโนมัติเมื่อผู้ใช้เข้าถึงแอปอื่น

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเหตุผลและประโยชน์ของการลงชื่อเข้าใช้แบบเปลี่ยนเส้นทาง โปรดดูที่ อธิบายประสบการณ์การลงชื่อเข้าใช้ของ Logto

บันทึก:

ในตัวอย่างโค้ดต่อไปนี้ เราถือว่าแอปของคุณกำลังทำงานอยู่ที่ http://localhost:3000/

กำหนดค่า Redirect URI

ไปที่หน้ารายละเอียดแอปพลิเคชันใน Logto Console เพิ่ม redirect URI http://localhost:3000/callback

เช่นเดียวกับการลงชื่อเข้าใช้ ผู้ใช้ควรถูกเปลี่ยนเส้นทางไปที่ Logto เพื่อออกจากเซสชันที่ใช้ร่วมกัน เมื่อเสร็จสิ้นแล้ว ควรเปลี่ยนเส้นทางผู้ใช้กลับไปยังเว็บไซต์ของคุณ ตัวอย่างเช่น เพิ่ม http://localhost:3000/ ในส่วน post sign-out redirect URI

จากนั้นคลิก "Save" เพื่อบันทึกการเปลี่ยนแปลง

จัดการ callback

ไม่จำเป็นต้องตั้งค่าเพิ่มเติมเพื่อจัดการเส้นทาง callback เมื่อคุณลงทะเบียนโมดูล @logto/nuxt ระบบจะดำเนินการดังนี้:

เพิ่มสามเส้นทางสำหรับการลงชื่อเข้าใช้ (/sign-in), ลงชื่อออก (/sign-out), และ callback (/callback)
นำเข้า composable สองตัว: useLogtoClient และ useLogtoUser

เส้นทางเหล่านี้สามารถกำหนดค่าได้ผ่าน logto.pathnames ใน options ของโมดูล ตัวอย่างเช่น:

nuxt.config.ts
export default defineNuxtConfig({
  logto: {
    pathnames: {
      signIn: '/login',
      signOut: '/logout',
      callback: '/auth/callback',
    },
  },
  // ...การตั้งค่าอื่น ๆ
});

ดู ไฟล์ type definition ในแพ็กเกจ @logto/nuxt สำหรับข้อมูลเพิ่มเติม

บันทึก:

หากคุณกำหนดเส้นทาง callback เป็น path อื่น คุณต้องอัปเดต redirect URI ใน Logto ให้ตรงกันด้วย

เนื่องจากหน้า Nuxt จะถูก hydrate และกลายเป็น single-page application (SPA) หลังโหลดครั้งแรก เราจึงต้องเปลี่ยนเส้นทางผู้ใช้ไปยังเส้นทางลงชื่อเข้าใช้หรือออกเมื่อจำเป็น เพื่อช่วยในเรื่องนี้ SDK ของเรามี composable useLogtoUser() ซึ่งสามารถใช้ได้ทั้งฝั่งเซิร์ฟเวอร์และไคลเอนต์

index.vue
<script setup lang="ts">
  import { useLogtoUser } from '#imports'; // เพิ่มบรรทัดนี้หากปิด auto-import
  const user = useLogtoUser();
</script>
<template>
  <!-- ปุ่มลงชื่อเข้าใช้และออกแบบง่าย -->
  <nuxt-link :to="`/sign-${ user ? 'out' : 'in' }`"> Sign {{ user ? 'out' : 'in' }} </nuxt-link>
</template>

จุดตรวจสอบ: ทดสอบแอปพลิเคชันของคุณ

ตอนนี้คุณสามารถทดสอบแอปพลิเคชันของคุณได้แล้ว:

รันแอปพลิเคชันของคุณ คุณจะเห็นปุ่มลงชื่อเข้าใช้
คลิกปุ่มลงชื่อเข้าใช้ SDK จะเริ่มกระบวนการลงชื่อเข้าใช้และเปลี่ยนเส้นทางคุณไปยังหน้าลงชื่อเข้าใช้ของ Logto
หลังจากที่คุณลงชื่อเข้าใช้แล้ว คุณจะถูกเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันของคุณและเห็นปุ่มลงชื่อออก
คลิกปุ่มลงชื่อออกเพื่อเคลียร์ที่เก็บโทเค็นและออกจากระบบ

รับข้อมูลผู้ใช้

แสดงข้อมูลผู้ใช้

เมื่อผู้ใช้ลงชื่อเข้าใช้แล้ว ค่าที่คืนมาจาก useLogtoUser() จะเป็นอ็อบเจกต์ที่มีข้อมูลของผู้ใช้ คุณสามารถแสดงข้อมูลนี้ในแอปของคุณได้:

index.vue
<script setup lang="ts">
  const user = useLogtoUser();
</script>
<template>
  <!-- แสดงข้อมูลผู้ใช้เมื่อเข้าสู่ระบบแล้ว -->
  <ul v-if="Boolean(user)">
    <li v-for="(value, key) in user"><b>{{ key }}:</b> {{ value }}</li>
  </ul>
  <!-- ปุ่มเข้าสู่ระบบ / ออกจากระบบแบบย่อ -->
  <nuxt-link :to="`/sign-${ user ? 'out' : 'in' }`"> Sign {{ user ? 'out' : 'in' }} </nuxt-link>
</template>

ขอการอ้างสิทธิ์เพิ่มเติม

คุณอาจพบว่าข้อมูลผู้ใช้บางอย่างหายไปในอ็อบเจกต์ที่ส่งคืนจาก useLogtoUser() สาเหตุเนื่องจาก OAuth 2.0 และ OpenID Connect (OIDC) ถูกออกแบบมาให้สอดคล้องกับหลักการสิทธิ์น้อยที่สุด (principle of least privilege; PoLP) และ Logto ถูกสร้างขึ้นบนมาตรฐานเหล่านี้

โดยปกติแล้ว จะมีการส่งคืนการอ้างสิทธิ์ (claim) แบบจำกัด หากคุณต้องการข้อมูลเพิ่มเติม คุณสามารถร้องขอขอบเขต (scope) เพิ่มเติมเพื่อเข้าถึงการอ้างสิทธิ์ (claim) ที่มากขึ้นได้

ข้อมูล:

"การอ้างสิทธิ์ (Claim)" คือการยืนยันข้อมูลบางอย่างเกี่ยวกับผู้ถูกอ้างถึง (subject); "ขอบเขต (Scope)" คือกลุ่มของการอ้างสิทธิ์ (claim) ในกรณีนี้ การอ้างสิทธิ์ (claim) คือข้อมูลบางอย่างเกี่ยวกับผู้ใช้

ตัวอย่างที่ไม่เป็นทางการของความสัมพันธ์ระหว่างขอบเขต (scope) กับการอ้างสิทธิ์ (claim) มีดังนี้:

เคล็ดลับ:

การอ้างสิทธิ์ (claim) "sub" หมายถึง "ผู้ถูกอ้างถึง (subject)" ซึ่งคือตัวระบุที่ไม่ซ้ำของผู้ใช้ (เช่น user ID)

Logto SDK จะร้องขอขอบเขต (scope) สามรายการเสมอ ได้แก่ openid, profile และ offline_access

หากต้องการขอขอบเขต (scopes) เพิ่มเติม คุณสามารถกำหนดค่าใน options ของโมดูล logto ได้ดังนี้:

nuxt.config.ts
import { UserScope } from '@logto/nuxt';

export default defineNuxtConfig({
  logto: {
    scopes: [UserScope.Email, UserScope.Phone], // เพิ่ม scopes ตามต้องการ
    // ...other configs
  },
});

จากนั้นคุณจะสามารถเข้าถึงการอ้างสิทธิ์ (claims) เพิ่มเติมในอ็อบเจกต์ user ได้:

index.vue
<template>
  <div v-if="user">
    <p>ชื่อ: {{ user.name }}</p>
    <p>อีเมล: {{ user.email }}</p>
    <p>โทรศัพท์: {{ user.phone }}</p>
  </div>
</template>

การอ้างสิทธิ์ (Claims) ที่ต้องใช้การร้องขอผ่านเครือข่าย

เพื่อป้องกันไม่ให้โทเค็น ID (ID token) มีขนาดใหญ่เกินไป การอ้างสิทธิ์บางรายการจำเป็นต้องร้องขอผ่านเครือข่ายเพื่อดึงข้อมูล ตัวอย่างเช่น การอ้างสิทธิ์ custom_data จะไม่ถูกรวมอยู่ในอ็อบเจกต์ผู้ใช้ แม้ว่าจะร้องขอไว้ในขอบเขต (scopes) ก็ตาม หากต้องการเข้าถึงการอ้างสิทธิ์เหล่านี้ คุณสามารถกำหนดค่าออปชัน fetchUserInfo:

nuxt.config.ts
export default defineNuxtConfig({
logto: {
  scopes: [UserScope.CustomData],
  fetchUserInfo: true,
},
// ...other configurations
});

เมื่อกำหนดค่า fetchUserInfo SDK จะดึงข้อมูลผู้ใช้โดยการร้องขอไปยัง จุดปลาย userinfo หลังจากที่ผู้ใช้ลงชื่อเข้าใช้แล้ว และ user.custom_data จะพร้อมใช้งานเมื่อการร้องขอเสร็จสมบูรณ์

รับข้อมูลผู้ใช้ด้วยตนเอง

หากต้องการเข้าถึงเมธอดทั้งหมดที่ Logto client มีให้ คุณสามารถใช้ composable useLogtoClient() ได้:

index.vue
const client = useLogtoClient();

คำเตือน:

Logto client ใช้งานได้เฉพาะฝั่งเซิร์ฟเวอร์เท่านั้น composable นี้จะคืนค่า undefined ในฝั่ง client

คุณสามารถใช้เมธอดของ Logto เหล่านี้เพื่อดึงข้อมูลผู้ใช้แบบโปรแกรมมิ่งได้:

client.getIdTokenClaims(): รับข้อมูลผู้ใช้โดยการถอดรหัสโทเค็น ID (ID token) ในเครื่อง การอ้างสิทธิ์ (claims) บางรายการอาจไม่มีให้ใช้งาน
client.fetchUserInfo(): รับข้อมูลผู้ใช้โดยการส่งคำขอไปยัง จุดปลาย userinfo (userinfo endpoint)

สิ่งสำคัญที่ควรทราบคือ การอ้างสิทธิ์ข้อมูลผู้ใช้ที่สามารถดึงมาได้ขึ้นอยู่กับขอบเขต (scopes) ที่ผู้ใช้เลือกขณะลงชื่อเข้าใช้ และเพื่อประสิทธิภาพและขนาดข้อมูล โทเค็น ID (ID token) อาจไม่มีการอ้างสิทธิ์ของผู้ใช้ทั้งหมด โดยการอ้างสิทธิ์บางรายการจะมีเฉพาะในจุดปลาย userinfo เท่านั้น (ดูรายการที่เกี่ยวข้องด้านล่าง)

ตัวอย่างเช่น หากต้องการดึงข้อมูลผู้ใช้ด้วยตนเอง:

index.vue
import { useLogtoClient, useState, callOnce } from '#imports';

const client = useLogtoClient();
const userInfo = useState(null);

// เรียกเพียงครั้งเดียวเพื่อป้องกันการทำงานจากฝั่ง client
await callOnce(async () => {
  if (!client) {
    throw new Error('Logto client is not available');
  }

  if (!(await client.isAuthenticated())) {
    return;
  }

  try {
    userInfo.value = await client.fetchUserInfo();
  } catch (error) {
    console.error('ไม่สามารถดึงข้อมูลผู้ใช้:', error);
  }
});

ขอบเขต (Scopes) และ การอ้างสิทธิ์ (Claims)

Logto ใช้มาตรฐาน ขอบเขต (scopes) และ การอ้างสิทธิ์ (claims) ของ OIDC เพื่อกำหนดขอบเขตและการอ้างสิทธิ์สำหรับดึงข้อมูลผู้ใช้จากโทเค็น ID (ID token) และ OIDC userinfo endpoint ทั้ง "ขอบเขต (scope)" และ "การอ้างสิทธิ์ (claim)" เป็นคำศัพท์จากข้อกำหนดของ OAuth 2.0 และ OpenID Connect (OIDC)

ต่อไปนี้คือรายการขอบเขต (Scopes) ที่รองรับและการอ้างสิทธิ์ (Claims) ที่เกี่ยวข้อง:

openid

ชื่อการอ้างสิทธิ์	ประเภท	คำอธิบาย	ต้องใช้ userinfo หรือไม่?
sub	`string`	ตัวระบุที่ไม่ซ้ำของผู้ใช้	ไม่

profile

ชื่อการอ้างสิทธิ์	ประเภท	คำอธิบาย	ต้องใช้ userinfo หรือไม่?
name	`string`	ชื่อเต็มของผู้ใช้	ไม่
username	`string`	ชื่อผู้ใช้ของผู้ใช้	ไม่
picture	`string`	URL ของรูปโปรไฟล์ของผู้ใช้ปลายทาง URL นี้ ต้อง อ้างอิงถึงไฟล์รูปภาพ (เช่น ไฟล์ PNG, JPEG หรือ GIF) ไม่ใช่หน้าเว็บที่มีรูปภาพ โปรดทราบว่า URL นี้ ควร อ้างอิงถึงรูปโปรไฟล์ของผู้ใช้ปลายทางที่เหมาะสมสำหรับการแสดงผลเมื่ออธิบายผู้ใช้ปลายทาง ไม่ใช่รูปภาพใด ๆ ที่ผู้ใช้ถ่ายเอง	ไม่
created_at	`number`	เวลาที่สร้างผู้ใช้ปลายทาง เวลานี้แสดงเป็นจำนวนมิลลิวินาทีตั้งแต่ Unix epoch (1970-01-01T00:00:00Z)	ไม่
updated_at	`number`	เวลาที่ข้อมูลของผู้ใช้ปลายทางถูกอัปเดตล่าสุด เวลานี้แสดงเป็นจำนวนมิลลิวินาทีตั้งแต่ Unix epoch (1970-01-01T00:00:00Z)	ไม่

การอ้างสิทธิ์มาตรฐาน อื่น ๆ เช่น family_name, given_name, middle_name, nickname, preferred_username, profile, website, gender, birthdate, zoneinfo, และ locale จะถูกรวมอยู่ในขอบเขต profile ด้วยโดยไม่ต้องร้องขอ endpoint userinfo ความแตกต่างเมื่อเทียบกับการอ้างสิทธิ์ข้างต้นคือ การอ้างสิทธิ์เหล่านี้จะถูกส่งกลับมาเฉพาะเมื่อค่าของมันไม่ว่างเปล่า ในขณะที่การอ้างสิทธิ์ข้างต้นจะส่งกลับ null หากค่าเป็นค่าว่าง

บันทึก:

ต่างจากการอ้างสิทธิ์มาตรฐาน การอ้างสิทธิ์ created_at และ updated_at ใช้หน่วยเป็นมิลลิวินาทีแทนที่จะเป็นวินาที

email

ชื่อการอ้างสิทธิ์	ประเภท	คำอธิบาย	ต้องใช้ userinfo หรือไม่?
email	`string`	อีเมลของผู้ใช้	ไม่
email_verified	`boolean`	อีเมลได้รับการยืนยันแล้วหรือไม่	ไม่

phone

ชื่อการอ้างสิทธิ์	ประเภท	คำอธิบาย	ต้องใช้ userinfo หรือไม่?
phone_number	`string`	หมายเลขโทรศัพท์ของผู้ใช้	ไม่
phone_number_verified	`boolean`	หมายเลขโทรศัพท์ได้รับการยืนยันแล้วหรือไม่	ไม่

address

โปรดดูรายละเอียดของการอ้างสิทธิ์ที่อยู่ได้ที่ OpenID Connect Core 1.0

custom_data

ชื่อการอ้างสิทธิ์	ประเภท	คำอธิบาย	ต้องใช้ userinfo หรือไม่?
custom_data	`object`	ข้อมูลกำหนดเองของผู้ใช้	ใช่

identities

ชื่อการอ้างสิทธิ์	ประเภท	คำอธิบาย	ต้องใช้ userinfo หรือไม่?
identities	`object`	ข้อมูลตัวตนที่เชื่อมโยงของผู้ใช้	ใช่
sso_identities	`array`	ข้อมูล SSO ที่เชื่อมโยงของผู้ใช้	ใช่

roles

ชื่อการอ้างสิทธิ์	ประเภท	คำอธิบาย	ต้องใช้ userinfo หรือไม่?
roles	`string[]`	บทบาทของผู้ใช้	ไม่

urn:logto:scope:organizations

ชื่อการอ้างสิทธิ์	ประเภท	คำอธิบาย	ต้องใช้ userinfo หรือไม่?
organizations	`string[]`	รหัสองค์กรที่ผู้ใช้สังกัด	ไม่
organization_data	`object[]`	ข้อมูลขององค์กรที่ผู้ใช้สังกัด	ใช่

urn:logto:scope:organization_roles

ชื่อการอ้างสิทธิ์	ประเภท	คำอธิบาย	ต้องใช้ userinfo หรือไม่?
organization_roles	`string[]`	บทบาทของผู้ใช้ในแต่ละองค์กรในรูปแบบ `<organization_id>:<role_name>`	ไม่

เพื่อประสิทธิภาพและขนาดข้อมูล หาก "ต้องใช้ userinfo หรือไม่?" เป็น "ใช่" หมายความว่าการอ้างสิทธิ์นั้นจะไม่ปรากฏในโทเค็น ID แต่จะถูกส่งกลับใน response ของ userinfo endpoint

ทรัพยากร API และองค์กร

เราแนะนำให้อ่าน 🔐 การควบคุมการเข้าถึงตามบทบาท (RBAC) ก่อน เพื่อทำความเข้าใจแนวคิดพื้นฐานของ RBAC ใน Logto และวิธีตั้งค่าทรัพยากร API อย่างถูกต้อง

กำหนดค่า Logto client

เมื่อคุณตั้งค่า ทรัพยากร API (API resources) เรียบร้อยแล้ว คุณสามารถเพิ่มทรัพยากรเหล่านี้ขณะกำหนดค่า Logto ในแอปของคุณได้:

nuxt.config.ts
export default defineNuxtConfig({
  logto: {
    resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'], // เพิ่มทรัพยากร API
    // ...other configs
  },
});

แต่ละ ทรัพยากร API (API resource) จะมี สิทธิ์ (scopes) ของตัวเอง

ตัวอย่างเช่น ทรัพยากร https://shopping.your-app.com/api มีสิทธิ์ shopping:read และ shopping:write และทรัพยากร https://store.your-app.com/api มีสิทธิ์ store:read และ store:write

หากต้องการร้องขอสิทธิ์เหล่านี้ คุณสามารถเพิ่มขณะกำหนดค่า Logto ในแอปของคุณได้:

nuxt.config.ts
export default defineNuxtConfig({
  logto: {
    scopes: ['shopping:read', 'shopping:write', 'store:read', 'store:write'],
    resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
    // ...การตั้งค่าอื่น ๆ
  },
});

คุณอาจสังเกตได้ว่า ขอบเขต (scopes) ถูกกำหนดแยกจาก ทรัพยากร API (API resources) นี่เป็นเพราะ Resource Indicators for OAuth 2.0 ระบุว่า ขอบเขตสุดท้ายสำหรับคำขอจะเป็นผลคูณคาร์ทีเซียนของขอบเขตทั้งหมดในบริการเป้าหมายทั้งหมด

ดังนั้น ในกรณีข้างต้น ขอบเขต (scopes) สามารถทำให้เรียบง่ายขึ้นจากการกำหนดใน Logto โดยทั้งสอง ทรัพยากร API (API resources) สามารถมีขอบเขต read และ write ได้โดยไม่ต้องมีคำนำหน้า จากนั้น ในการตั้งค่า Logto:

nuxt.config.ts
export default defineNuxtConfig({
  logto: {
    scopes: ['read', 'write'],
    resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
    // ...การตั้งค่าอื่น ๆ
  },
});

สำหรับแต่ละ ทรัพยากร API (API resource) จะร้องขอทั้งขอบเขต read และ write

บันทึก:

คุณสามารถร้องขอขอบเขต (scopes) ที่ไม่ได้กำหนดไว้ใน ทรัพยากร API (API resources) ได้ เช่น คุณสามารถร้องขอขอบเขต email ได้ แม้ว่า ทรัพยากร API (API resources) จะไม่มีขอบเขต email ให้ ขอบเขตที่ไม่มีจะถูกละเว้นอย่างปลอดภัย

หลังจากลงชื่อเข้าใช้สำเร็จ Logto จะออกขอบเขตที่เหมาะสมให้กับ ทรัพยากร API (API resources) ตามบทบาทของผู้ใช้

ดึงโทเค็นการเข้าถึง (Access token) สำหรับทรัพยากร API

เพื่อดึงโทเค็นการเข้าถึง (Access token) สำหรับทรัพยากร API เฉพาะ คุณสามารถใช้เมธอด getAccessToken ได้ดังนี้:

index.vue
<script setup lang="ts">
  // คอมโพสเอเบิลสำหรับเข้าถึง Logto client
  const client = useLogtoClient();
  // ทำให้โทเค็นการเข้าถึง (access token) ใช้งานได้ทั่วทั้งแอป
  const accessToken = useState<string | undefined>('access-token');

  // เรียกใช้หนึ่งครั้งในฝั่งเซิร์ฟเวอร์
  await callOnce(async () => {
    if (!client) {
      throw new Error('Logto client is not available');
    }

    if (!(await client.isAuthenticated())) {
      return;
    }

    try {
      accessToken.value = await client.getAccessToken('https://shopping.your-app.com/api');
    } catch (error) {
      console.error('ไม่สามารถรับโทเค็นการเข้าถึง (access token) ได้', error);
    }
  });
</script>

เมธอดนี้จะส่งคืนโทเค็นการเข้าถึง (JWT access token) ที่สามารถใช้เข้าถึงทรัพยากร API ได้เมื่อผู้ใช้มีสิทธิ์ที่เกี่ยวข้อง หากโทเค็นการเข้าถึงที่แคชไว้หมดอายุแล้ว เมธอดนี้จะพยายามใช้โทเค็นรีเฟรช (Refresh token) เพื่อขอโทเค็นการเข้าถึงใหม่โดยอัตโนมัติ

ดึงโทเค็นองค์กร (Organization tokens)

หากคุณยังไม่คุ้นเคยกับ องค์กร (Organization) โปรดอ่าน 🏢 องค์กร (หลายผู้เช่า; Multi-tenancy) เพื่อเริ่มต้น

คุณต้องเพิ่ม UserScope.Organizations ขอบเขต (scope) ขณะตั้งค่า Logto client:

nuxt.config.ts
import { UserScope } from '@logto/nuxt';

export default defineNuxtConfig({
  logto: {
    scopes: [UserScope.Organizations],
    // ...การตั้งค่าอื่น ๆ
  },
});

เมื่อผู้ใช้ลงชื่อเข้าใช้แล้ว คุณสามารถดึงโทเค็นองค์กร (organization token) สำหรับผู้ใช้ได้:

index.vue
const token = await client.getOrganizationToken(organizationId);

ทรัพยากร API ขององค์กร (Organization API resources)

หากต้องการดึงโทเค็นการเข้าถึง (Access token) สำหรับทรัพยากร API ในองค์กร คุณสามารถใช้เมธอด getAccessToken พร้อมทั้งระบุทั้งทรัพยากร API และรหัสองค์กรเป็นพารามิเตอร์:

index.vue
const accessToken = await client.getAccessToken(
  'https://shopping.your-app.com/api',
  organizationId
);

ใช้งานใน middleware หรือ API routes

Composable useLogtoClient() และ useLogtoUser() ไม่สามารถใช้ใน middleware หรือ API routes ได้ คุณสามารถใช้ฟังก์ชัน logtoEventHandler() เพื่อรับ Logto client และ context อื่น ๆ ได้ดังนี้:

/server/api/auth/get-access-token.ts
import { logtoEventHandler } from '#logto';

// ดึง accessToken ของผู้ใช้ที่เข้าสู่ระบบ
export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig(event);
  await logtoEventHandler(event, config);
  const accessToken = await event.context.logtoClient.getAccessToken();
  return { accessToken };
});

อ่านเพิ่มเติม

กระบวนการสำหรับผู้ใช้ปลายทาง: กระบวนการยืนยันตัวตน, กระบวนการบัญชี, และกระบวนการองค์กร ตั้งค่าตัวเชื่อมต่อ การอนุญาต (Authorization)

ข้อกำหนดเบื้องต้น​

การติดตั้ง​

การเชื่อมต่อระบบ​

ลงทะเบียนโมดูล Logto​

กำหนดค่า redirect URI​

เกี่ยวกับการลงชื่อเข้าใช้แบบเปลี่ยนเส้นทาง (redirect-based sign-in)​

กำหนดค่า Redirect URI​

จัดการ callback​

สร้างฟังก์ชันลงชื่อเข้าใช้และลงชื่อออก​

จุดตรวจสอบ: ทดสอบแอปพลิเคชันของคุณ​

รับข้อมูลผู้ใช้​

แสดงข้อมูลผู้ใช้​

ขอการอ้างสิทธิ์เพิ่มเติม​

การอ้างสิทธิ์ (Claims) ที่ต้องใช้การร้องขอผ่านเครือข่าย​

รับข้อมูลผู้ใช้ด้วยตนเอง​

ขอบเขต (Scopes) และ การอ้างสิทธิ์ (Claims)​

ทรัพยากร API และองค์กร​

กำหนดค่า Logto client​

ดึงโทเค็นการเข้าถึง (Access token) สำหรับทรัพยากร API​

ดึงโทเค็นองค์กร (Organization tokens)​

ทรัพยากร API ขององค์กร (Organization API resources)​

ใช้งานใน middleware หรือ API routes​

อ่านเพิ่มเติม​

ข้อกำหนดเบื้องต้น

การติดตั้ง

การเชื่อมต่อระบบ

ลงทะเบียนโมดูล Logto

กำหนดค่า redirect URI

เกี่ยวกับการลงชื่อเข้าใช้แบบเปลี่ยนเส้นทาง (redirect-based sign-in)

กำหนดค่า Redirect URI

จัดการ callback

สร้างฟังก์ชันลงชื่อเข้าใช้และลงชื่อออก

จุดตรวจสอบ: ทดสอบแอปพลิเคชันของคุณ

รับข้อมูลผู้ใช้

แสดงข้อมูลผู้ใช้

ขอการอ้างสิทธิ์เพิ่มเติม

การอ้างสิทธิ์ (Claims) ที่ต้องใช้การร้องขอผ่านเครือข่าย

รับข้อมูลผู้ใช้ด้วยตนเอง

ขอบเขต (Scopes) และ การอ้างสิทธิ์ (Claims)

ทรัพยากร API และองค์กร

กำหนดค่า Logto client

ดึงโทเค็นการเข้าถึง (Access token) สำหรับทรัพยากร API

ดึงโทเค็นองค์กร (Organization tokens)

ทรัพยากร API ขององค์กร (Organization API resources)

ใช้งานใน middleware หรือ API routes

อ่านเพิ่มเติม