ล็อกอิน Netlify CMS ด้วย GitHub บน Vercel

จากบล็อกก่อนหน้านี้ที่ผมเพิ่ม Netlify CMS ใน Hugo ในตอนนั้นเว็บนี้ยังโฮสต์อยู่บน Netlify แต่ตอนนี้ผมย้ายเว็บมาโฮสต์บน Vercel แทน

ปัญหาคือ Vercel ไม่มี OAuth Sever ให้ใช้เหมือน Netlify ดังนั้นจึงต้องหาทางเลือกอื่น โดยใน docs ของ Netlify CMS มีตัวเลือกให้เลือกใช้หลากหลาย แต่สุดท้ายมาเจอ vercel-netlify-cms-github ซึ่งทำมาสำหรับเว็บที่โฮสต์บน Vercel โดยเฉพาะ โดยใช้ Vercel Serverless Functions ในการทำ OAuth Server

ล็อกอิน GitHub ด้วย Vercel Serverless Functions

ขั้นแรกติดตั้ง vercel-netlify-cms-github ก่อน

npm install @openlab/vercel-netlify-cms-github

จากนั้นสร้างโฟลเดอร์ api ขึ้นมาที่ root ของ repo แล้วสร้าง 2 ไฟล์ไว้ในนั้น

ไฟล์แรก auth.ts

export { auth as default } from '@openlab/vercel-netlify-cms-github'

อีกไฟล์ callback.ts

export { callback as default } from '@openlab/vercel-netlify-cms-github'

ต่อมาไปแก้ไฟล์ config.yml ของ Netlify CMS ในส่วน backend ให้ใช้โค้ดตามตัวอย่างด้านล่างนี้ โดยอย่าลืมเปลี่ยนค่าต่างๆ ให้เป็นของเว็บไซต์ตัวเองด้วยนะครับ

backend:
  name: github
  repo: user/repo
  branch: main
  base_url: https://example.com/
  auth_endpoint: api/auth

และไปสร้าง GitHub OAuth App โดยไปที่หน้าตั้งค่าบัญชีใน GitHub > Developer settings > OAuth Apps (หรือคลิกที่นี่) แล้วคลิกสร้างแอปใหม่

โดยในช่อง Authorization callback URL ให้ใส่เป็น https://โดเมนเว็บไซต์/api/callback ลงทะเบียนให้เรียบร้อย จะได้ client ID และ client secret มา

ไปที่หน้าแดชบอร์ดของ Vercel แล้วไปเพิ่ม Environment Variables ให้เว็บไซต์เรา 2 ตัวคือ

• OAUTH_CLIENT_ID ใส่ value เป็น client ID ทีได้มาจาก GitHub
• OAUTH_CLIENT_SECRETใส่ value เป็น client secret ทีได้มาจาก GitHub

สุดท้าย push ไฟล์ขึ้น GitHub ให้เรียบร้อย รอให้ Vercel deploy เว็บเสร็จ แล้วลองล็อกอินเข้า CMS ดูครับ ถ้าล็อกอินเข้าได้ปกติก็เรียบร้อย

แต่ถ้าล็อกอินไม่ได้ ให้ไปที่แดชบอร์ดของ Vercel และเปิดหน้า build log ของ deployment ปัจจุบัน คลิกดูแท็บ Functions แล้วลองล็อกอินอีกรอบดูว่ามี error อะไรหรือเปล่า