เชื่อมต่อ Twilio SMS เข้ากับ Logto
สวัสดีครับ วันนี้เราจะมาทำการเชื่อมต่อ Twilio SMS เข้ากับ Logto จะเป็นอย่างไรนั้น เรามาดูกัน
สำหรับใครที่ยังไม่รู้จักว่า Logto คืออะไร สามารถดูได้ตามลิงค์ด้านล่างนี้เลย
เอาล่ะ เรามาเริ่มกันเลย
Twilio คืออะไร Twilio ก็คือบริษัทหนึ่งของอเมริกาที่ให้บริการด้านการสื่อสารต่าง ๆ เช่น SMS, Voice, Message, Email, Chat รวมไปถึงสามารถเชื่อมต่อกับ API ที่ทำให้นักพัฒนาสามารถนำไปต่อยอดหรือพัฒนาต่อได้ รายละเอียดของบริษัทสามารถดูได้ที่นี่
แล้วเราจะใช้ Twilio มาเชื่อมต่อกับ Logto ในส่วนไหนล่ะ คำตอบก็คือ เชื่อมต่อกับ SMS และ Email ถ้าเป็น Email เราจะใช้ SendGrid ซึ่งก็เป็นบริษัทย่อยของ Twilio นี่แหละ แต่บทความนี้จะขอพูดถึงในเรื่องของ SMS ก่อน
แล้วทำไมต้องมาเชื่อมต่อกับ Twilio ล่ะ คำตอบก็คือ
- ใช้งานง่าย คือ Twilio ค่อนข้างจะใช้งานง่าย โดยมี Web UI และมี Credit ให้เราใช้ทดสอบ โดยที่ไม่ต้องผูกบัตรเครดิต
- มีให้เลือกใน Logto ในส่วนนี้ก็คือ เราแค่เอา Key มาแปะไว้ที่ Logto ก็สามารถใช้งานได้เลย เพราะทาง Logto เค้ามีโค้ดที่เขียนไว้เรียบร้อยแล้ว
- น่าเชื่อถือ เพราะ Twilio นั้นเป็นบริษัทที่อยู่ในตลาดหุ้นของอเมริกา เพราะฉะนั้นค่อนข้างจะมีความน่าเชื่อถืออยู่พอสมควร
ส่วนที่เป็นข้อติข้อหนึ่งที่ผู้เขียนคิดออกก็คือ เรื่องของราคา เพราะว่าเนื่องจากเป็นบริษัทต่างประเทศ ราคาก็เลยไม่ค่อยเป็นมิตรกับคนไทย แต่สิ่งที่แลกมาก็ถือว่าค่อนข้างโอเค สำหรับใครจะเลือกใช้ยังไงก็ลองคิดดูกันดี ๆ
เอาล่ะ เราพูดถึงตัว Twilio พอสมควรแล้ว เราจะมาเริ่มทำการเชื่อมต่อกับ Logto กันเลย โดยบทความนี้จะเป็นการเชื่อมต่อ SMS ของ Twilio เข้ากับ Logto จะเป็นอย่างไรนั้น เรามาดูกัน
ก่อนอื่นเลย เราต้องทำการติดตั้ง Logto กันก่อน โดยเราสามารถเข้าไปตาม Document ของ Logto ดูได้ที่นี่ ส่วนใครจะทำตามผู้เขียนก็มาดูกันเลย
เราจะใช้วิธีการติดตั้งแบบใช้ Docker Compose กัน โดยก่อนอื่นเราจะทำการสร้าง Folder ก่อน โดยการเปิด Command Line แล้วไปที่ที่เราต้องการจะติดตั้ง และใช้คำสั่งสร้างโฟลเดอร์ขึ้นมา โดยเราจะสร้างโฟลเดอร์ที่ชื่อ twilio_logto ขึ้นมา
mkdir twilio_logtoเข้าไปที่โฟลเดอร์ ใช้คำสั่ง
cd twilio_logtoจากนั้นรันคำสั่ง
curl https://raw.githubusercontent.com/logto-io/logto/HEAD/docker-compose.yml -o docker-compose.ymlเราจะเห็นว่าในโฟลเดอร์เราจะมีไฟล์ docker-compose.yml เราเข้าไปดูก็จะได้แบบนี้
# This compose file is for demonstration only, do not use in prod.
version: "3.9"
services:
app:
depends_on:
postgres:
condition: service_healthy
image: ghcr.io/logto-io/logto:${TAG-latest}
entrypoint: ["sh", "-c", "npm run cli db seed -- --swe && npm start"]
ports:
- 3001:3001
environment:
- TRUST_PROXY_HEADER=1
- DB_URL=postgres://postgres:p0stgr3s@postgres:5432/logto
# Mandatory for GitPod to map host env to the container, thus GitPod can dynamically configure the public URL of Logto;
# Or, you can leverage it for local testing.
- ENDPOINT
postgres:
image: postgres:14-alpine
user: postgres
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: p0stgr3s
healthcheck:
test: ["CMD-SHELL", "pg_isready"]
interval: 10s
timeout: 5s
retries: 5เราต้องทำการเปลี่ยน ${TAG-latest} เป็น prerelease ซึ่งใน Document ของ Logto เค้าบอกว่าให้ใช้เวอร์ชั่นนี้ก่อน ก็ตามนั้น และก็อย่าเอา docker-compose.yml ไปรัน Production นะ ไม่งั้นเวลาเรารัน docker-compose.yml ใหม่ ข้อมูลใน PostgreSQL จะหายไป เค้าไม่ได้ทำการ Mount Volume ไว้ เราจะใช้เวอร์ชั่นนี้ไปก่อน โดยถ้าแก้เสร็จก็จะได้ตามด้านล่างเลย
# This compose file is for demonstration only, do not use in prod.
version: "3.9"
services:
app:
depends_on:
postgres:
condition: service_healthy
image: ghcr.io/logto-io/logto:prerelease
entrypoint: ["sh", "-c", "npm run cli db seed -- --swe && npm start"]
ports:
- 3001:3001
environment:
- TRUST_PROXY_HEADER=1
- DB_URL=postgres://postgres:p0stgr3s@postgres:5432/logto
# Mandatory for GitPod to map host env to the container, thus GitPod can dynamically configure the public URL of Logto;
# Or, you can leverage it for local testing.
- ENDPOINT
postgres:
image: postgres:14-alpine
user: postgres
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: p0stgr3s
healthcheck:
test: ["CMD-SHELL", "pg_isready"]
interval: 10s
timeout: 5s
retries: 5เสร็จแล้วก็รันได้เลย
docker compose -f docker-compose.yml up -dถ้าไม่มีปัญหา ใน Docker Desktop ก็จะขึ้นแบบนี้
เอาล่ะ เราไปที่ localhost:3001 เว็บจะ Redirect มาที่หน้าเริ่มต้น
ให้เราคลิก Create Account เพื่อทำการสร้าง Account สำหรับ Admin
ให้ใส่ username ที่เราต้องการไป แล้วคลิก Create account
เมื่อคลิกแล้ว จะเจอหน้าให้ใส่ Password ก็ใส่ให้ครบ จากนั้นก็คลิก Save
รอสักครู่ จะเข้าสู่หน้า Admin
ตอนนี้เราได้ทำการติดตั้ง Logto เรียบร้อยแล้ว ต่อไป เราจะมาเชื่อมต่อกับ SMS ของ Twilio กัน ก็ไปที่ Connector ที่แท๊บด้านซ้าย
คลิกที่ Set up ของ SMS Connector จะขึ้น Pop-up มา
ทำการเลือก Twilio SMS Service แล้วคลิก Next
เมื่อเข้ามาแล้วจะได้หน้าตาดังรูปเลย
ทางด้านซ้ายจะเป็นวิธีการทำ ส่วนทางขวาเป็นรูปแบบ Config ในรูปแบบ JSON โดยที่
- accountSID ก็คือ SID ของ Account หรือบัญชีเรานี่แหละ
- authToken ก็คือ Token ที่ใช้สำหรับเข้าใช้งาน SMS
- fromMessagingServiceSID ก็คือ SID ของ Message Service
ทั้ง 3 ค่าด้านบน เราจะไปเอามาจาก Twilio ส่วน Template เป็นเรื่องของ logto ว่าเวลาเราใส่ 3 ค่าด้านบนแล้ว เราจะส่ง SMS ใช้งานส่วนไหนได้บ้าง รายละเอียดตามนี้เลย
- usageType คือ ประเภทของการใช้งาน โดยแบ่งออกเป็น
- SignIn ใช้สำหรับตอน SignIn ให้มีการ Verify Code ก่อนเข้าใช้งาน
- Register ใช้สำหรับสมัครเพื่อยืนยันตัวตน
- ForgotPassword ใช้สำหรับลืมพาสเวิร์ด
- Test ใช้สำหรับทดสอบ
- content คือ ข้อความที่ส่ง SMS โดยเราจะเห็นว่า {{code}} ก็คือรูปแบบที่ทาง logto ตั้งไว้ อย่าไปเปลี่ยน
เอาล่ะ เราไปเอาค่า Config มากัน ไปที่ Twilio กันเลย
ทำการสมัครให้เรียบร้อย ก็เข้ามาที่หน้า Console
ในส่วนของ Trial จะเป็น Credit ที่เค้ามีให้ เราก็ใช้ทดสอบ ใช้อะไรต่าง ๆ ได้
ผู้เขียนคิดว่าบางคนเข้ามาอาจจะไม่ได้หน้าตาแบบนี้ เพราะผู้เขียนเข้ามาเล่นแล้ว แต่เริ่มต้นทาง Twilio จะให้เพิ่มเบอร์โทรศัพท์ โดยที่เราจะเพิ่มได้ฟรี 1 เบอร์
คลิกไปที่ Explore Products
ในส่วนนี้จะเป็นผลิตภัณฑ์ทั้งหมดที่ทาง Twilio ให้บริการ เยอะมาก บางอันจะลิงค์ไปข้างนอก อย่าง Sendgrid จะลิงค์ไปยัง Twilio Sendgrid เราก็ต้องไปสมัครอีกครั้งหนึ่ง แต่วันนี้เราจะมาดู SMS กันก่อน เราก็เลือก Message จะได้หน้าดังรูป
ส่วนนี้ ผู้อ่านอาจจะไม่เหมือนของผู้เขียน เพราะผู้เขียนลองมาแล้ว แต่ทางซ้ายจะมีเมนูเพิ่มมา ให้เราคลิกที่ Try it out แล้วเลือก Get Set Up จะเป็นการตั้งค่าการส่ง SMS โดยเค้าจะบอกให้เราสร้าง Message Service และเพิ่มเบอร์โทรเข้าไป เราก็คลิกที่ Start setup
เมื่อคลิกแล้วจะมี Pop Up เด้งขึ้นมา เป็นการสร้าง Message Service เราก็คลิก Create Messaging Service
เมื่อคลิกแล้ว จะลิงค์ไปที่หน้าสร้าง Messaging Services
ก่อนทำการสร้าง ให้เข้าใจก่อนว่า Messaging Services คืออะไร Messaging Services ก็คือ ฟีเจอร์หนึ่งของบริการส่งข้อความ โดยที่ Messaging Services จะมีหน้าที่ในการ Scale หรือปรับขนาด เริ่มต้นต้องเข้าใจก่อนว่าการส่งข้อความหรือ SMS นั้น จะต้องมีเครื่องต้นทางหรือเบอร์ต้นทางอย่างน้อย 1 เบอร์ และเบอร์ปลายทางอย่างน้อย 1 เบอร์ ถ้าแบบนี้จะเป็นการส่งแบบ 1 ต่อ 1 แบบนี้จะส่งได้เลย ไม่มีปัญหา ถ้าระบบไม่ล่มนะ แต่ถ้าเกิดว่าเราไม่ได้ส่งเบอร์เดียวล่ะ สมมติว่าเรามี 1 เบอร์ แต่ปลายทางมี 100000 เบอร์ แบบนี้ก็จะเป็น 1 ต่อ 100000 แปลว่ามีโอกาสที่จะทำให้เราส่ง SMS ได้ช้าลง เพราะกว่าจะส่งเสร็จ กว่าจะไปเข้าคิวรอการส่งอีก อาจทำให้ข้อความที่เราต้องการส่ง ถึงปลายทางได้ช้า ทาง Twilio จึงมีฟีเจอร์ Messaging Services ที่ทำให้เราเพิ่ม Sender หรือเพิ่มต้นทาง เพิ่มเบอร์ได้ แปลว่าทีนี้ถ้าเราจะส่งข้อความ 100000 เบอร์ เราอาจจะเพิ่ม Sender หรือเพิ่มเบอร์เป็น 100 เบอร์ แปลว่าทีนี้การส่งก็จะเป็น 100 ต่อ 100000 ก็ถือว่าดีกว่าแบบแรกมาก และทาง Messaging Services จัดการส่งข้อความให้อัตโนมัติ ตามเบอร์ที่เราตั้งไว้ โดยที่เราไม่ต้องมานั่งตั้งว่าเบอร์ 1 ส่ง 1000 คนนี้ เบอร์ 2 ส่ง 1000 คนนี้ Twilio ไม่ต้อง ฟีเจอร์นี้จัดให้ ซึ่งถึงว่าตอบโจทย์พอสมควรเลย
Messaging Services ยังสามารถแบ่ง Campaign หรือกิจกรรมแยกออกจากกันได้ด้วย เช่น วันปีใหม่เราจะใช้ Sender ชุดนี้ในการส่งข้อความไปหาปลายทางชุดนี้ ก็สามารถปรับได้ ซึ่งถือว่าโอเคเลย รายละเอียดเพิ่มเติมสามารถดูได้ที่นี่
ต้องบอกว่าผู้เขียนไม่ได้สปอนเซอร์นะ 555 แต่แค่อธิบายว่ามันดียังไง แต่ต้องบอกว่า เวลาเราเพิ่มเบอร์ เราก็ต้องเสียเงินซื้อเบอร์ด้วย รวมไปถึงเวลาส่งข้อความ เค้าก็จะหักเครดิตเราไป ก็คำนวณค่าใช้จ่ายกันดี ๆ
เอาล่ะ เขียนซะยาวเลย เรามาต่อกัน เราจะทำการสร้าง Messaging Services กัน ก็คลิก Create Messaging Service
ทำการตั้งชื่อ และเลือกว่าเราจะใช้ทำอะไร ในที่นี้ตั้งชื่อว่า Logto ส่วน What do you want to use this Messaging Service for? เลือกเป็น Not listed here คลิก Create Messaging Service
หน้านี้จะให้เพิ่ม Sender หรือก็คือต้นทาง หรือผู้ส่ง ให้ทำการเพิ่มโดยการคลิก Add Senders
เลือก Send Type เป็น Phone Number แล้วคลิก Continue
เราจะเห็นว่ามีเบอร์ขึ้นมาแล้ว (ถ้าใครไม่ขึ้นต้องไปเพิ่มเบอร์ก่อน เริ่มต้นจะมีเบอร์ให้ใช้ฟรี 1 เบอร์ เนื่องจากผู้เขียนมีอยู่แล้ว มันลบออกไม่ได้ เลยทำให้ดูไม่ได้ T^T)
เลือกเบอร์ของเรา แล้วคลิก Add Phone Numbers
เมื่อเพิ่มแล้ว ก็ทำการคลิก Step 3: Set up integration ต่อไป
ในส่วนนี้จะเป็นเรื่องของ Integration เป็นการประกอบหรือการรวมกันของบริการต่าง ๆ เช่น เราอยากเอา Webhook สำหรับรับข้อความว่าส่งสำเร็จรึเปล่า ก็เอามาใส่ได้ อะไรแบบนี้ ซึ่งเราจะใช้แบบ Default นี่แหละ ก็เลือก Incoming Messages เป็น Defer to sender’s webhook อย่างอื่นเหมือนเดิมเลย ก็คลิก Step 4: Add compliance info
หน้านี้เป็นส่วนของข้อกำหนด ก็อ่านรายละเอียดให้เรียบร้อย ก็คลิก Complete Messaging Service Setup
จะมี Pop-up เด้งขึ้นมาว่า เราได้สร้าง Messaging Service ตัวใหม่แล้ว จะทำอะไรต่อ อะไรประมาณนี้ เราก็ Try sending a message
หน้านี้แหละ มีประโยชน์มาก เพราะถ้าใครเป็นนักพัฒนา ก็สามารถ Copy Code ไปลองทดสอบได้ แต่เนื่องจากเราจะใช้ Logto เราต้องการแค่ Key เท่านั้น เราก็ใส่เบอร์โทร เลือก Messaging Service ที่เราสร้างเมื่อกี้ แล้วใส่ Body Text โดยเราทดสอบส่ง SMS ได้เลย ก็ลองทดสอบดู (+66 เป็นประเทศไทย โดยถ้าใครเริ่มต้นเบอร์ที่ 08XXXXXXXX ก็ตัด 0 และใส่เป็น +668XXXXXXXX)
โดยผู้เขียนจะทำการใส่ Body Text เป็น Test แล้วเทสดูละกัน จะได้ผลลัพธ์ตามนี้
แล้วยังไง Key อยู่ที่ไหน จริง ๆ เรา Copy จากทางด้านขวาก็ได้ แต่ดูจะยาก เราจะไปดูกันว่าไปเอามาจากไหน
ขั้นแรกไปคลิกที่ Get Set Up เราจะเห็น AccountSID ก็ Copy ไป จากนั้นคลิก View Auth Token
เราจะเห็นมี authToken โผล่มา ก็ Copy ไปใส่ได้เลย เอาล่ะ ต่อไปเราต้องการ fromMessagingServiceSID ก็ไปคลิกที่ Service ด้านซ้ายเพื่อไปที่หน้า Messaging Service
เมื่อคลิกมาแล้ว เราจะเห็น Messaging Service จะมี Sid ซึ่งตัว Sid นี่แหละ ก็คือ fromMessagingServiceSID ก็ Copy ไปใส่
ตอนนี้เราได้ครบละ เราก็ไปที่ Logto ใส่และทำการ Save ให้เรียบร้อย เราก็จะได้หน้าตาดังรูป
ทีนี้เราใส่เบอร์โทรแบบ 66XXXXXXXX นะ ไม่ต้องมี + นะ จากนั้นลองดูข้อความที่เป็น usageType Test ว่าตรงมั้ย
เอาล่ะ เสร็จแล้วกับการเชื่อมต่อ Twilio SMS เข้ากับ Logto เป็นยังไงกันบ้าง ตอนแรกคิดว่าไม่น่าเยอะ แต่ตอนทำบทความปรากฎว่าเยอะพอสมควรเลย เพราะมีการติดตั้ง Logto ด้วย กับอธิบายบางส่วนให้เข้าใจ ส่วนตัวคิดว่า เราไม่จำเป็นจะต้องเชื่อมต่อเข้ากับ Logto เท่านั้น เรายังสามารถเอาไปพัฒนาในส่วนของแอพหรือเว็บเราเองก็ได้ด้วย คิดว่าน่าจะมีประโยชน์ สำหรับวันนี้ขอจากกันไปก่อนนะครับ เดี๋ยวจะมาเขียนเรื่อง SendGrid ต่อ สำหรับวันนี้ สวัสดีครับ
ช่องทางการติดต่อ
Email: [email protected]
Website: https://blog.tichaky.com/
Facebook: https://www.facebook.com/tichaky
