มาทำ Slack OAuth กันเถอะ

สมัยนี้พอมีเว็บมีแอปเกลื่อนเต็มไปหมด การจะให้ผู้ใช้ต้องมานั่งลงทะเบียนใส่ข้อมูลซ้ำๆมาเป็นร้อยเว็บอีก ก็คงจะไม่ใช่เรื่องดี ฉะนั้น developer อย่างเราก็ควรจะหาทางเลือกใหม่ที่จะทำให้ผู้ใช้สามารถเข้าถึงเว็บ/แอปเราได้สะดวกขึ้น ทางเลือกที่นิยมกันก็คือ การ log in ผ่าน platform ที่มีอยู่แล้วเช่น Facebook, Twitter, Google, etc. ผ่าน OAuth นั่นเอง

ว่าแต่ OAuth คืออะไรล่ะ?

OAuth เป็นหนึ่งในมาตรฐานในการทำ authentication และ authorization บนอินเตอร์เน็ต เพื่อที่จะให้ผู้ใช้งานเว็บของเราสามารถล็อกอินผ่าน third-party services อย่าง Facebook ได้ โดยไม่ต้องเปิดเผยรหัสผ่านให้กับเรา ซึ่งกระบวนการทั้งหมดนี้จะเรียกว่า OAuth flow และทุกๆ third-party services ก็จะอยู่บนมาตรฐานเดียวกันทั้งหมด

แต่วันนี้เราจะมาลองล็อกอินด้วย Slack ผ่าน OAuth กัน

Slack OAuth Flow

The OAuth Flow

แต่ละขั้นตอนใน Flow มีดังนี้

1. เว็บของเราต้อง redirect ผู้ใช้งานไป Slack เพื่อให้ผู้ใช้งานได้ล็อกอินเข้า Slack และอนุญาตให้เราดึงข้อมูลบางส่วนมาใช้งานได้
2. เมื่อผู้ใช้งานล็อกอินและอนุญาตให้ดึงข้อมูลแล้ว Slack จะ redirect กลับมาที่เว็บเราพร้อม verification code สำหรับการขอ Access Token โดยเฉพาะ
3. เมื่อได้ verification codeเราก็ต้องยิงกลับไปผ่าน Slack API เพื่อขอ Access Token มา
4. หาก verification code ยังสามารถใช้งานได้ (มีอายุ 10 นาที) Slack ก็จะส่ง Access Token กลับมา

เมื่อเราได้รับ Access Token แล้ว เราก็จะสามารถขอข้อมูลต่างๆจาก Slack ได้

ทีนี้มาดูกันดีกว่าว่าจริงๆแล้วแต่ละขั้นตอนเราต้องเขียนยังไง โดยฝั่งเว็บเราก็จะใช้ React ส่วนฝั่งเซิฟเวอร์เราก็จะใช้ Node.js + Express เป็นตัวกลางระหว่างเว็บและ Slack นั่นเอง

0. สร้าง Slack App

ก่อนที่เราจะใช้ Slack OAuth 2.0 ได้นั้น เราจะต้องสร้าง Slack App ไปไว้ใน Workspace ของเราก่อน เมื่อทำเสร็จแล้ว เราสามารถเข้าไปดู Basic Information ของ Slack App ของเราได้

ซึ่งข้อมูลที่เราต้องการเอามาใช้คือ Client ID และ Client Secret

Slack App Basic Information

1. Redirect ผู้ใช้ไป Slack

ขั้นตอนนี้ง่ายที่สุดแล้ว แค่เอาลิ้งก์ Slack ไปไว้บนหน้าเว็บของเรานั่นเอง เราสามารถใช้ <a> ได้เลย

<a href=”https://slack.com/oauth/authorize”>...</a>

แต่ช้าก่อน!! เราจะต้องใส่ GET parameters เข้าไปใน url ด้วย ซึ่งในบทความนี้เราจะสนใจเพียงสามตัวเท่านั้นคือ client_id, scope, และ redirect_uri

• client_id คือ Client ID ที่เราได้จาก Slack App
• scope คือขอบเขตในการดึงข้อมูลจาก Slack ที่ผู้ใช้ต้องยอมกดตกลงก่อนที่เราจะสามารถนำมาใช้ได้ เช่น files:read ก็จะให้เราอ่านไฟล์ใน Workspace ได้ อ่านเพิ่มเติม
• redirect_uri คือลิ้งก์ที่เราอยากให้ Slack redirect กลับมาหา แต่ไม่ใช่ว่าเป็นลิ้งก์อะไรก็ได้นะ เราต้องเข้าไปที่ Slack App ของเราและเข้าไปที่หน้า OAuth & Permissions เพื่อเพิ่ม Redirect URLs

เราสามารถเว้น redirect_uri ไว้ได้ ซึ่ง Slack ก็จะ redirect ผู้ใช้ไปยังลิ้งก์บนสุดในหน้านี้

เมื่อรวม parameters ทั้งหมดเข้าไปแล้ว ลิ้งก์เราก็จะออกมาเป็นอย่างนี้

https://slack.com/oauth/authorize?scope=identity.basic&client_id=CLIENT_ID&redirect_uri=REDIRECT_URI

เมื่อผู้ใช้ล็อกอินและอนุญาตเรียบร้อยแล้ว Slack ก็จะ redirect ผู้ใช้มาที่ redirect_uri ที่เราให้ไว้พร้อม verification code สำหรับการขอ access token มาใน GET parameters ซึ่งเราก็จะต้องเขียนโค้ดรองรับในขั้นตอนต่อไป

2. ขอ Access Token

เมื่อผู้ใช้งานถูก redirect กลับมายังลิ้งก์ที่เรากำหนดไว้ สังเกตว่าจะมี GET parameters ส่งกลับมาให้ด้วย ซึ่งก็คือ verification code ที่เราต้องเอาไปใช้ขอ Access Token นั่นเอง

https://www.example.com/redirect?code=<your_verification_code>

แล้วใน React เราจะเอา verification code นี้จากลิ้งก์มาได้ยังไงละ? StackOverflow มีคำตอบ

const code = qs.parse(this.props.location.search).code

How to get parameter value from query string

ซึ่งเราก็จะนำโค้ดนี้ไปยิงเข้าเซิฟเวอร์ของเราต่อไป

บนเซิฟเวอร์ของเราจะใช้ Slack SDK สำหรับ Node.js

npm install @slack/web-api
# OR
yarn add @slack/web-api

เพราะมันทำให้การยิงเข้าเซิฟเวอร์ง่ายขึ้นมากๆ

redirect_uri ในที่นี้จะต้องเหมือนกับลิ้งก์ที่เราส่งไปตอนแรก(ถ้ามี) หากส่งไปผิดอันก็จะขึ้น Error ว่า bad_redirect_uri

ทีนี้เราก็ได้ Access Token มาใช้งานเรียบร้อยแล้ว ซึ่งเราก็ต้องใส่เป็น parameter ทุกครั้งที่เรายิง Web API ไปที่ Slack เพื่อขอข้อมูลมา หากยังงงๆอยู่ว่าจะเขียนออกมายังไง ก็เข้าไปดูบน GitHub ได้เลย

NichaRoj/slack-oauth-example

จะเห็นได้ว่าการทำ OAuth นั้นมันไม่ใช่เรื่องยากเลย แถมยังมี Library อีกมากมายที่จะทำให้เราเขียนโค้ดได้ง่ายขึ้น

ยังไงก็ตาม เราก็หวังว่าบทความนี้จะช่วยให้ผู้อ่านทำ Slack OAuth ได้ง่ายขึ้น