WorkOS Authentication

WorkOS เป็นบริการที่ช่วยให้เราสามารถเพิ่มความสามารถในการทำ Enterprise SSO (Single Sign-On) และ Multi-tenant Authentication ได้อย่างง่ายดาย

การเริ่มต้นใช้งาน

1. สมัครและตั้งค่า WorkOS

1. สมัครบัญชีที่ WorkOS Dashboard
2. สร้าง Organization และ Project
3. เก็บ API Keys:
   • Client ID
   • API Key
   • Redirect URI

2. ติดตั้ง WorkOS SDK

npm

npm install @workos-inc/node

pnpm

pnpm add @workos-inc/node

yarn

yarn add @workos-inc/node

3. ตั้งค่าเริ่มต้น

import { WorkOS } from '@workos-inc/node';

const workos = new WorkOS(process.env.WORKOS_API_KEY);

การใช้งาน SSO

1. สร้าง Connection

// สร้าง SSO Connection
const connection = await workos.sso.createConnection({
  organization: 'org_123',
  connection_type: 'GoogleOAuth',
  name: 'Google SSO'
});

2. เริ่มต้น SSO Flow

// สร้าง Authorization URL
const authorizationUrl = await workos.sso.getAuthorizationURL({
  connection: connection.id,
  redirectUri: 'https://your-app.com/callback',
  state: 'random-state-value'
});

// Redirect ผู้ใช้ไปที่ URL
res.redirect(authorizationUrl);

3. จัดการ Callback

// รับ Profile จาก Callback
app.get('/callback', async (req, res) => {
  const { code } = req.query;

  try {
	const { profile } = await workos.sso.getProfileAndToken({
	  code,
	  clientId: process.env.WORKOS_CLIENT_ID
	});

	// จัดการข้อมูล profile
	console.log(profile);
	
  } catch (error) {
	console.error('SSO Error:', error);
  }
});

การใช้งานกับ Vue.js

1. สร้าง Composable สำหรับ WorkOS

// composables/useWorkOS.ts
import { ref } from 'vue';

export function useWorkOS() {
  const loading = ref(false);
  const error = ref(null);
  const user = ref(null);

  const initializeSSO = async (organizationId: string) => {
	try {
	  loading.value = true;
	  const response = await fetch('/api/workos/authorize', {
		method: 'POST',
		body: JSON.stringify({ organizationId })
	  });
	  
	  const { authorizationUrl } = await response.json();
	  window.location.href = authorizationUrl;
	  
	} catch (err) {
	  error.value = err.message;
	} finally {
	  loading.value = false;
	}
  };

  return {
	loading,
	error,
	user,
	initializeSSO
  };
}

2. ใช้งานใน Component

<template>
  <div>
	<button 
	  @click="handleSSO" 
	  :disabled="loading"
	>
	  {{ loading ? 'กำลังเข้าสู่ระบบ...' : 'เข้าสู่ระบบด้วย SSO' }}
	</button>
	
	<div v-if="error" class="error">
	  {{ error }}
	</div>
  </div>
</template>

<script setup>
import { useWorkOS } from '../composables/useWorkOS';

const { loading, error, initializeSSO } = useWorkOS();

const handleSSO = () => {
  initializeSSO('org_123');
};
</script>

การจัดการ Organizations

1. สร้าง Organization

const organization = await workos.organizations.createOrganization({
  name: 'Acme Inc.',
  domains: ['acme.com']
});

2. เพิ่ม Domains

const domain = await workos.organizations.createDomain({
  organization: 'org_123',
  domain: 'newdomain.com'
});

Best Practices

1. Security

   • เก็บ API Keys ใน environment variables
   • ตรวจสอบ state parameter เพื่อป้องกัน CSRF
   • ใช้ HTTPS สำหรับ redirect URIs

2. Error Handling

   • จัดการ errors ทุกกรณี
   • แสดง user-friendly error messages
   • Log errors สำหรับ debugging

3. User Experience

   • แสดง loading states
   • ให้ feedback ที่ชัดเจนกับผู้ใช้
   • รองรับ automatic redirects

Troubleshooting

ปัญหาที่พบบ่อย

1. Invalid Redirect URI

   • ตรวจสอบการตั้งค่า redirect URI ใน WorkOS Dashboard
   • ตรวจสอบ protocol (http/https)

2. Authentication Errors

   • ตรวจสอบ API keys
   • ตรวจสอบ Organization settings

3. Connection Issues

   • ตรวจสอบ network connectivity
   • ตรวจสอบ firewall settings

Resources

• WorkOS Documentation
• API Reference
• SDK Documentation