Picture of the author
Published on

สร้างการแจ้งเตือนด้วย Node เข้า LINE ผ่าน LINE Notify

Jest Cover

ขอบคุณรูปภาพจาก scdn.line-apps.com

. . .

สร้าง LINE Notify Service

  1. เข้าไป Login ที่ LINE Notify

  2. เลือก "Manage registered services"

Menu
  1. เลือก "Add Service"
Add Service
  1. กรอกรายละเอียด Service
Jest Cover
  • Service URL - เป็น url ของระบบเราเอง
  • Email address - ใช้ verify หลังจาก add service แล้ว
  • Callback URL - เป็น url ของระบบเราเองที่ให้ service line notify ตอบกลับมาหลังจาก authen แล้ว
  1. สร้าง Service สำเร็จ
Jest Cover

เราจะได้ client id กับ client secret เพื่อนำมาใช้ในการขอ Token


หลักการทำงาน

Jest Cover

User ต้องทำการ Authorize เพื่อเลือกช่องทางการแจ้งเตือน ต้องทำผ่าน Browser เท่านั้น เมื่อ Authorize สำเร็จ Line notify จะ Redirect ไปที่ Callback URL ที่เราระบุไว้ หลังจาก Authorize เราจะได้ code เพื่อนำไปขอ access token และใช้ access token ในการแจ้งเตือนแต่ล่ะครั้ง


Access Token

หลังจาก authorize จะได้ code เพื่อนำไปขอ access token

/services/line.js

สร้าง service สำหรับขอ access token

const axios = require('axios');
const qs = require('qs');

const url_line_token = "https://notify-bot.line.me/oauth/token";

//Get Token
exports.token =  async (code,username) => {
    axios.post(
        url_line_token,
        qs.stringify({
            grant_type : 'authorization_code',
            code : code,
            redirect_uri : 'http://localhost:4000/line/redirect',
            client_id : 'client id',
            client_secret : 'client secret'
        }),
        {
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded',
            }
        }
    ).then( (response) => {
        console.log('Get Token : 'response.data.access_token);

        //Logic process save or update access token

        return response.data;
    })
    .catch(function (error) {
        console.error('Error : ',error.response.data.message);
        return error;
    });
}

code - ได้มาจาก response authorize

/controllers/line.controller.js

สร้าง function redirect ไว้ใน controller เพื่อไปเรียก get token service เมื่อเรียก service สำเร็จให้ backend return file line-connected.html

const line = require("../services/line")
const path = require("path")

exports.redirect = async (req, res) => {
  try {
    await line.token(req.query.code, req.query.state)
    res.sendFile(path.join(__dirname, "../../views", "line-connected.html"))
  } catch (error) {
    return res.json(error)
  }
}

/routes/line.routes.js

สร้าง path "/line/redirect" ตามที่ใส่ไว้ใน callback url และชี้ไปที่ redirect controller

const controller = require("../controllers/line.controller")

module.exports = function (app) {
  app.get("/line/redirect", controller.redirect)
}

Authorize

  1. สร้างปุ่มหรือลิงก์อะไรก็ได้ให้ User กด เพื่อ Authorize ตัวอย่างของผมจะเป็น Vue.js
<template>
    <a target="_blank" :href="urlAuth">เชื่อมต่อ LINE</a>
</template>

<script>
      export default {
        computed : {
            urlAuth(){
                    const clientId = //client id ใน line notify service
                    const engine = // url backend สำหรับ redirect
                    const username = // ผมใช้เป็น username เพื่อในไปใช้หา user ต่อที่ backend
                    return `https://notify-bot.line.me/oauth/authorize?response_type=code&client_id=${clientId}&redirect_uri=${engine}/line/redirect&scope=notify&state=${username}`
                }
            }
      }
</script>
  1. เมื่อ Click ระบบจะเปิด Browser ให้ Login หรือถ้า Login อยู่แล้ว จะเป็นหน้าให้เลือกกลุ่มหรือแชท ที่จะรับการแจ้งเตือน ถ้าสร้างกลุ่มมาใหม่หลังจากเข้ามาหน้านี้ ให้ Refresh อีกรอบ ถึงจะเห็นกลุ่มที่สร้างมาใหม่
Search Group
  1. หลังจากกด "Agree and connect" ระบบจะ Redirect ไปที่ Callback URL (/line/redirect)
Search Group

เมื่อ Connect สำเร็จ และได้ Token มาจะแสดง line-connected.html

Search Group

เขียน Logs ไว้เมื่อสร้าง Token สำเร็จ

Get Token :  {
  status: 200,
  message: 'access_token is issued',
  access_token: 'DmaTHALb0Sydbfsm4aI6Ll0I2YICaBxd8xxxxxxxxxx'
}
  1. ถ้าเรายังไม่ได้เชิญ LINE Notify เข้ากลุ่มที่เราเลือก จะส่งข้อความมาบอกว่า "[Service Name] is now connected. Invite this account to [Group Name] to receive notifications."

  2. เชิญ LINE Notify เข้ากลุ่ม


Notification

/services/line.js

สร้าง Service notify เพื่อส่งแจ้งเตือนเข้า Line

...

const url_line_notification = "https://notify-api.line.me/api/notify";

//Notification to Line
exports.notify = async (text,token) => {
    await axios.post(
        url_line_notification,
        qs.stringify({message:text}),
        {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization' : 'Bearer ' + token
            }
        },
        ).then(function (response) {
            console.log('Notify Successfully : ',response.data);
            //Logic process save notification logs
            return response.data;
        })
        .catch(function (error) {
            console.error('Notification Error : ',error);
        });
}

/controllers/line.controller.js

...

exports.notify = async (req, res) => {
  try {
    await line.notify(req.body.message,req.body.lineToken)
    return res.status(200).send({ message: "Notify Successfully." });
  } catch (error) {
    return res.json({ error: error.response.data.message });
  }
};

/routes/line.routes.js

...

module.exports = function(app) {
    ...
    app.post("/line/notify",controller.notify);
};

ลองส่งแจ้งเตือน

ใช้ Postman

ส่งแค่ Message และ Token เข้า Service ที่เราสร้างไว้

Postman

ดูในกลุ่ม Line

Line