常見問題
遇到問題了嗎?不用擔心,答案都在這。
分類目錄
全站搜尋

    n8n 串接範例:如何取得 LINE 官方帳號好友 user ID(UID),將資訊儲存在 Ragic 表單上?

    目錄

    前置準備

    步驟 1:架設 n8n 並安裝節點

    步驟 2:啟用 LINE Messaging API

    步驟 3:設計 LINE 事件紀錄表

    步驟 4:設計 LINE 客戶通訊錄

    第一階段:取得並記錄 LINE 客戶資訊

    步驟 5:n8n 上的 LINE 觸發節點

    步驟 6:請求使用者名稱與頭貼

    步驟 7:將事件填入 Ragic 表單

    第二階段:新客戶自動拋轉通訊錄

    步驟 8:檢查是否為新客戶

    步驟 9:拆分查詢結果

    步驟 10:判斷是否拋轉

    步驟 11:觸發拋轉按鈕

    第三階段:測試並啟用自動化流程

    步驟 12:測試自動化流程

    步驟 13:啟用自動化流程

    進階設計:自動傳送專屬登錄連結

    步驟 1:修改「客戶通訊錄」表單

    步驟 2:設定傳送資料登錄連結按鈕

    如果你常用 LINE 與客戶溝通業務往來、傳送帳單、確認預約細節、提醒重要事項……),覺得手動作業(一筆筆整理帳單或預約細項、進 LINE 後台找到指定客戶帳號、傳送資訊給對方)太麻煩,希望找到更自動化、效率更高的方法,Ragic 的「傳送即時訊息」功能是個不錯的選擇。

    只要你的客戶帳單、提醒事項,或預約資訊 Ragic 表單上有一個「客戶 LINE user ID」欄位、設計好對應的「傳送即時訊息」按鈕,有需要時就可以一鍵傳送客製化 LINE 訊息給客戶,一鍵傳送多個訊息也沒問題。

    不過,客戶的 LINE user ID(常簡稱為 UID,類似 LINE 的「電話號碼、收訊地址」概念)並不容易取得。商家需要透過 LINE 官方帳號(而非私人帳號)在客戶加好友、互動時,執行特定步驟,才能取得 UID;否則即使是客戶本人,也查看不到這項資訊。

    在這篇文章中,我們將示範一種不寫程式、透過 n8n 串接,捕捉 LINE 官方帳號好友的 UID,並且自動讓這些 UID 資訊統整在 Ragic 表單上(如下圖)的方法。

    要做到這樣的效果,需要像是下圖這樣的 n8n 自動化串接流程:

    你可以點擊這裡下載已經設定好的自動化流程模板,讓你能夠更輕鬆地按照接下來的完整步驟參考設計。

    這個自動化串接流程可以將所有把你的官方帳號加入好友、傳送訊息的紀錄通通整合到一張「事件紀錄表」。並自動透過拋轉搭配「欄位值不可重複」的設定,將事件記錄表上所有出現的 LINE user ID 資訊統整歸納到「客戶通訊錄」表單。

    這是目前所知方法中,不需要寫程式,但作用相對完整的一種,可以自動獲得一份 LINE 通訊錄,也包含 UID、頭貼、LINE 暱稱等資訊。

    不過,它還無法自動取得 UID 對應的真實客戶姓名——這通常需要客戶自己回訊說明或填表提供,也可能需要我們手動整合到表單上。

    如果你希望能夠實現後續在客戶通訊錄建檔時,由系統同步發出一則訊息,請客戶提供姓名或其他通訊資料,讓你在資料庫內更具體地利用,請點擊這裡查看相應的進階設計教學。

    由於你需要自行架設 n8n 伺服器才能夠使用 Ragic、LINE Messaging 等必要節點,如果你評估架設起來比較麻煩,那麼可以參考使用 Make 整合。雖然它還沒有辦法簡單地做到自動拋轉等功能,但在設計上會比較方便。

    前置準備:準備 n8n、LINE 與 Ragic

    步驟 1:架設自託管 n8n 伺服器並安裝 Ragic 與 LINE Messaging 節點

    請參考這裡的設定步驟,架設一個自託管的 n8n 伺服器,並安裝我們開發的 Ragic Nodes。

    並且,也請同時透過以下的 npm package name 安裝 LINE Messaging 社群節點,以確保 LINE Messaging API 能夠運作:

    @aotoki/n8n-nodes-line-messaging

    步驟 2:啟用 LINE Messaging API

    為了讓 LINE 可以接收到來自 Ragic 的資訊,並且傳送訊息給客戶,我們需要透過 LINE Messaging API 來為我們執行自動化流程。

    如果你從未做過相關設定,請參考請我們寫的這篇教學來開啟 Messaging API。

    步驟 3:在 Ragic 設計「LINE 事件紀錄表」

    首先,我們要在 Ragic 建立一張「事件紀錄表」,我們希望這張表單可以讓我們知道官方帳號發生了哪些「事件」——一般是有新客戶將官方帳號加入好友,或者是收到新的訊息等等。讓電腦幫我們取得做這件事的人的資訊,除了 user ID 以外,也包括對方在 LINE 上顯示的暱稱,甚至是頭貼。

    因此它看起來通常會像這樣:

    步驟 4:設計「LINE 客戶通訊錄」並設定拋轉

    在事件紀錄表中,一個客戶可能會有多筆事件資料——他們可能傳送多則訊息,甚至有可能多次解除、加入官方帳號好友。為了更有效率地整理資料,我們需要製作一個「一位客戶只會有一筆資料」的通訊錄,再將事件資料拋轉至通訊錄上。

    你可以直接複製事件紀錄表的表單設計,再調整設計、加入需要的欄位,只要記得在通訊錄中為 user ID 欄位加入不可重複的屬性,就能夠確保一個客戶在這張表單中只會有一筆資料了。

    接下來,就可以設定從「事件紀錄表」拋轉到「客戶通訊錄」的流程了。請到事件紀錄表中,直接參考下圖製作一個拋轉按鈕:

    第一階段:取得 LINE 好友資訊並記錄到 Ragic

    步驟 5:在 n8n 設定 LINE 的觸發節點

    我們將會使用 LINE Messaging 的觸發節點。你首先需要連結手頭上的 LINE 官方帳號:

    將步驟 2 取得的 Channel Access Token 與 Channel Secret 填入即可。

    完成帳號連結後,你可以選取要觸發自動化流程的動作,我們將會以「follow」和「message」為例,也就是說,當你的官方帳號收到新好友的追蹤,或者是來自好友的訊息,都會觸發後續的自動化流程。

    最後,由於觸發端的運作方式是「Webhook」,它就像是把「魚鉤」掛在 LINE 上,當 LINE 上有人傳了訊息,n8n 就會開始觸發後續動作。

    你需要先取得 n8n 提供的 Webhook。n8n 提供「Test URL」和「Production URL」,兩者的差異在於,前者只在你手動「Execute step」或「Execute workflow」時起作用,適合測試階段時使用;後者則是在自動化流程發布後,便會持續把魚餌掛在 LINE 上,一有動作就會馬上反應。

    在測試階段時,請確保使用的是 Test URL,按一下即可把該 URL 複製起來:

    接下來,進入 LINE 的開發者後台(Developers Console),選擇你的官方帳號後,在 Messaging API 裡找到「Webhook URL」,將連結貼上,並打開下方的「Use webhook」。

    Webhook URL 下的「Verify」能夠驗證這個 Webhook 是否真的起作用,不過如前述說明,Test URL 只在測試階段、手動觸發自動化流程時起作用,為了驗證,請先前往 n8n 點擊「Execute step」讓 Webhook 試行。

    當 n8n 顯示「Listening for test event」時:

    回到 LINE 開發者後台按下 Verify,就能收到「Success」訊息了。當你看到這則訊息,代表你的觸發端已經設定完成。

    不過,後台的這個 Verify 只是讓 LINE 試著敲敲看 n8n 的門,確認找到的地址是對的。為了設定後續的節點,我們需要實際讓 LINE 將我們的訊息傳遞給 n8n。請在 n8n 再次按下 Execute step 後,傳個訊息給你的官方帳號。

    n8n 這次會拿到包含你的 UID、訊息內容等真實資訊。這份資料非常重要,因為接下來,我們需要用這組 UID 向 LINE 換取你的顯示暱稱與頭貼。

    步驟 6:向 LINE 伺服器取得使用者名稱、頭貼等資訊

    若單純依靠上一步驟的 LINE Messaging 觸發節點,我們取得的資訊其實非常有限——我們知道事件是由哪個 UID 發生,但不知道這個 UID 對應的使用者名稱等。因此我們需要透過收到的 UID,回頭再向 LINE 的 Messaging API 請求更多這個 UID 對應的資訊。

    在這一步,我們會利用 n8n 內建的 HTTP Request 動作節點來進行請求:

    要向 Messaging API 取得使用者資訊的語法是 GET,而請求的 URL 是:

    https://api.line.me/v2/bot/profile/{userId}

    其中的 {userId} 就是觸發端接收到的 user ID,因此要設定成這樣:

    在 LINE 上,光有 UID 還不足以查詢使用者資訊,還需要向 Messaging API 證明你有權限存取對應 LINE 官方帳號的資料。

    你可以把前面使用過的 Channel Access Token 想成一把「鑰匙」。向 Messaging API 查詢 UID 對應的使用者資訊時,需要一併提供這把鑰匙,LINE 才會確認你有權限取得對方的暱稱、頭貼等資料。

    要附上這把鑰匙,請先勾選 Send Headers,並在 Headers 中新增一個 Parameter,依照下列方式設定:

    Name:Authorization

    Value:Bearer {你的 Channel access token}

    設定完後,這個動作節點會看起來像是這樣:

    你可以藉由上一步的測試資料,再按下這個節點的 Execute step,若設定無誤的話,就會看到自己的 UID、顯示名稱與頭貼都出現在了右側的 Output。

    步驟 7:將 LINE 的事件填入 Ragic 表單

    蒐集完需要的資訊後,就能開始整理到 Ragic 表單上了。

    請在 n8n 上使用 Ragic 動作節點內的「Create New Data」動作,並在 Method 上選擇「Field」,這會讓我們在設定欄位填入的內容時更加容易。在連結 Ragic 帳號之後,你會看到 Form 列表中出現資料庫內的表單,並且在選取表單之後,就會顯示表單內可以填入的欄位了。

    將表單設定為我們先前設計的 LINE 事件紀錄表後,就能在 Entries 處加入要填入資訊的欄位。如下圖這樣,直接用拖拉的方式將 HTTP 取得的 UID、顯示名稱、頭貼,以及原先從 LINE 觸發節點取得的事件種類等資訊填入 Ragic 表單中,就完成這個節點的設定囉!

    同樣地,完成節點設計後,按下上方的 Execute step 就可以確認節點運作了:

    在右側 Output 看到 SUCCESS 之後,回到設計好的 Ragic 表單,就能看到新的資料出現在表單中囉!

    第二階段:判斷新舊客戶並自動建立客戶通訊錄

    步驟 8:檢查客戶是否已在通訊錄中

    為了讓自動化更徹底,我們希望 n8n 在收到訊息時還能幫我們自動判斷:如果這位客戶是新面孔,就自動執行拋轉建檔;如果是老客戶,則不重複動作。為了做到這件事,我們在讓 n8n 幫忙記錄事件後,就要再請 n8n 幫我們檢查:這個 UID 在客戶通訊錄中是否已經有資料了?

    首先,建立一個 Ragic 節點,並設定為 Read Data(讀取資料)——要求 n8n 前往「客戶通訊錄」中,使用剛收到的 LINE UID 進行查詢。

    你可以直接在該節點中,設定檢查先前設計的客戶通訊錄,並將來自 LINE 觸發節點的 UID 拖動到 Condition 上,這會讓 n8n 用這串 UID 搜尋是否已經建檔過。

    這時可以按下 Execute step,再用先前的測試資料試試看,若表單內沒有符合的資料,右側的 Output 就會如下圖顯示「This is an item, but it's empty.」,代表 Ragic 有執行查詢,但沒有找到符合條件的資料:

    我們也建議你先嘗試點擊先前設計的拋轉按鈕之後,再嘗試執行一次節點,就能看到右側出現查詢到的客戶資料了:

    步驟 9:將查詢結果拆分為單筆紀錄

    當我們請 n8n 去 Ragic 查詢資料時,Ragic 會把所有找到的結果打包成一整袋(在程式裡稱為一個物件),即便袋子裡其實只有一筆資料也一樣。但 n8n 習慣把資料像排隊一樣,一筆一筆分開處理(在程式裡稱為陣列)。

    為了讓 n8n 更容易執行後續操作,我們需要先幫它「拆包裹」,把 Ragic 打包好的資料拆開,變成一筆筆獨立的排隊資料。為此,請直接建立一個 Code 節點,並設定語言為 Javascript,直接複製並貼上以下這段轉換代碼:

    const data = $input.first().json;
    const result = [];
    
    // 抓取 Object 中的所有 key (例如 "1", "2") 並將裡面的內容推入陣列
    for (const key of Object.keys(data)) {
      result.push({
        json: data[key]
      });
    }
    
    return result;
    

    設定完後,看起來會像是這樣:

    不過,由於這段程式碼在「Read Data 沒有找到資料」的情況下,就不會輸出任何資料,並使工作流程直接中斷,無法執行後續動作。

    因此,你需要在 Settings 中,將「Always Output Data」打開,這會使其在沒有任何資料的情況下,也能將空的結果傳遞給後續節點。

    完成這兩個設定後,你可以分別嘗試兩種測試,首先,你可以先將自己的 UID 加進客戶通訊錄中:

    並透過 Execute step 測試到這個節點,你可以看到,即便右側的輸出結果與左側的輸入結果看起來大致相同,但原先以方塊圖示顯示的「袋子」已經不存在了,這代表資料有被確實拆分:

    接下來,將客戶通訊錄的資料刪除,再從 Read Data 節點開始點擊 Execute step 到這個節點:

    即使沒有任何資料,Code 節點會跟 Read Data 節點一樣,也會輸出一個「空值」讓後續節點正常執行。

    步驟 10:判斷是否執行拋轉

    接下來,我們要讓 n8n 自動依據查詢的結果,決定要不要將新增的事件直接拋轉到客戶通訊錄。

    為此我們需要加入一個 IF 節點以讓 n8n 執行條件判斷。IF 節點可以根據設定的條件,執行 true(符合條件)和 false(不符合條件)兩條路徑。

    我們的設定邏輯是:檢查「客戶通訊錄」裡面有沒有指定的 UID,如果有,代表客戶已經建過檔,不需要做任何事;如果沒有,代表這名客戶是新面孔,需要讓 n8n 幫忙拋轉。為此,請參考上圖的方式連接:true 後方不接任何節點、並在 false 後方連接一個 Ragic 動作節點,設定為 Execute Action Button(執行動作按鈕)。

    你可以先將自己的 LINE UID 拋轉到客戶通訊錄建檔,並再點擊 Execute workflow 完整執行一次自動化流程。

    請依照下圖的方式設定 If 節點,首先,直接將左側的「_ragicId」拖曳到 Conditions:

    並且確定下方的檢測條件為「Number → exists」,這樣設定的意思是,如果前面的 Code 節點有回傳 _ragicId(代表先前的 Read Data 動作節點有找到資料)則為 true,反之為 false。

    設定完成之後,就可以再測試 If 節點是否如預期運作了!你可以先留著自己在客戶通訊錄內的資料,先簡單按一次 Execute workflow 並觸發自動化流程,這時你應該能看到,If 節點上的 Output 中,True Branch 有一個結果、False Branch 則是空白的。

    關掉節點設定視窗,也能看到自動化流程是朝 true 的路線進行。

    接下來,你可以刪除自己在客戶通訊錄上的資料,再重新點擊 Execute workflow 並觸發自動化流程。這時你就能夠看到 False Branch 中出現了一個空的 Output:

    整體的自動化流程是朝 false 的路線進行:

    確認兩個情況的路線無誤之後,就可以做最後一個節點的設定了。

    步驟 11:觸發拋轉按鈕

    打開我們剛剛建立的 Ragic 動作節點,由於我們需要讓這個節點幫我們自動點擊「事件紀錄表」裡的「拋轉至客戶通訊錄」,因此請參考下圖設定 Form 與 Action Button:

    那麼,要怎麼讓 n8n 知道該點擊哪筆資料裡的按鈕呢?其實,透過我們先前請 n8n「建立事件紀錄」的動作,就能找到要點擊拋轉的資料編號了。你可以在編輯畫面中,往前找到建立資料的 Ragic 動作節點,例如範例中的節點名稱就是「Ragic」:

    這時,再次打開執行動作按鈕的 Ragic 節點,就能從左側找到這個名稱,展開之後,就能將它的「ragicId」拖曳到 Record Index 了。

    第三階段:測試並正式啟用自動化流程

    步驟 12:測試自動化流程

    接下來,將所有表單資料刪除,從頭開始跑一次完整流程吧。首先,直接在 n8n 上點擊「Execute workflow」,讓 n8n 開始等待 LINE 上的新好友或訊息:

    接下來,在 LINE 上把你的官方帳號加為好友,或是傳送一則訊息:

    回到 n8n,就能看到所有節點都運作完畢了。

    同時,事件紀錄表中也出現了你剛剛傳送訊息產生的資料:

    另一方面,也能看到 n8n 自動幫我們觸發了拋轉按鈕,在客戶通訊錄中也能看到新的資料。

    那麼,在不刪除任何資料的狀況下,再嘗試觸發自動化流程一次吧!這一次,你應該會看到 n8n 上顯示自動化流程的運作方向是像這樣,經過 If 節點後,就直接判定為 true。

    這時,進入事件紀錄表中,就能看到自己的另一筆資料。

    但由於這個 UID 早已有被建檔過,因此再到客戶通訊錄檢查,也不會有新的資料產生。

    步驟 13:發佈並啟用自動化流程

    完成所有的設定後,就可以準備發佈,讓自動化流程正式上線了。請直接在 n8n 介面的右上角點擊 Publish,並為這個自動化流程的第一個版本取名,再次按下 Publish 後,就等同於正式啟用了自動化流程。

    接下來,我們需要修改 Webhook URL,先前設定觸發節點時,使用的是 n8n 提供的「Test URL」——它只在我們手動觸發時才會接收事件,適合用來測試。不過我們實際使用時,需要讓 n8n 持續監聽 LINE 官方帳號上的任何風吹草動,因此,我們需要將 Webhook URL 切換為「Production URL」。

    首先,打開 LINE Messaging 觸發節點,展開 Webhook URLs 後,複製 Production URL。

    接下來,進入 LINE 的開發者後台,選擇你的官方帳號後,將 Messaging API 裡的「Webhook URL」再改為剛剛複製的 Production URL。

    這時,直接點擊 Webhook URL 下的 Verify,你應該能馬上收到一個「Success」訊息:

    這代表 n8n 已經開始持續監聽 LINE 的事件了,不需要再手動觸發自動化流程。

    Tips:如果你後續還需要針對自動化流程做任何修改,請記得再將 LINE 開發者後台的 Webhook URL 改為 n8n 上的 Test URL。

    進階設計:自動傳送資料連結,引導客戶填寫完整資料

    如果你希望除了 LINE UID 之外,還能主動取得客戶的真實姓名、電話或 Email,可以利用 Ragic 的「傳送即時訊息」,讓系統在客戶建檔的瞬間,自動發送一份專屬的「會員登錄連結」給對方 。

    為了做到這件事,你需要調整 Ragic 裡客戶通訊錄的設計,並新增一個傳送即時訊息按鈕。

    步驟 1:修改「客戶通訊錄」表單

    為了不讓客戶看到我們另外記錄的備註等資訊,你可以利用欄位層級存取權限,確保沒有登入的訪客使用者在打開登錄連結時,看到的是相對清爽、單純的登記介面。

    你可以將備註、顯示名稱、頭貼、使用者語系……等欄位全部設定為「EVERYONE 無權限」:

    步驟 2:設定傳送資料登錄連結按鈕

    在完成欄位層級存取權限的設定後,我們需要先製作傳送即時訊息按鈕,並實際發一遍登錄連結以確認設計無誤。

    打開傳送即時訊息的設定視窗後,請將訊息種類設定為 LINE 訊息,並且依序填入來自基礎設計步驟 2 的 Channel access token、收訊人和內文。

    你可以直接使用「選擇欄位」模式來指定收訊人為「user ID」欄位,並在內文中,使用 {{MAGIC_RECORD_LINK_WRITABLE}} 語法,讓系統自動產生一個擁有編輯權限、效期為 14 天的連結。

    並且,為了做到「建檔時自動傳送登錄連結」,請一併確定有在進階設定中勾選「儲存時自動執行」和「只有第一次新增時自動執行」。

    儲存按鈕後,由於動作按鈕的預設權限是「所有人都能點擊」,為了避免客戶誤按,請務必將 EVERYONE 的權限移除:

    接下來,你可以試著在自己的客戶通訊錄資料中觸發按鈕,就會在 LINE 上收到自己的那一份連結了:

    客戶點入連結後,就只能看到簡單的表單頁內容,也只會看到需要他填寫的欄位,這能大幅提升填表意願並保護資料隱私。

    由於我們只是將欄位從訪客使用者的眼中隱藏起來,因此雖然表面上看不到 LINE UID、顯示名稱等內容,但等客戶將資料填滿之後,我們就能回到客戶通訊錄上查看完整的資訊:

    最後,再試一次完整的流程吧!首先,將自己在事件紀錄表、客戶通訊錄的資料完全移除後,再次觸發 n8n 自動化流程:

    這時,n8n 會一路走完從事件紀錄到自動拋轉的所有節點。當 n8n 上的最後一個步驟完成時,你也會馬上在 LINE 上收到屬於自己的資料登錄連結:

    確認資料連結沒問題、嘗試填完資料後儲存,整套流程就完成了。

    提供回饋給 Ragic

    請告訴我們您的意見:(多選, 必填)

    請針對上方勾選項目提供詳細說明:

    截圖能夠讓我們更清楚了解您的建議:

    感謝您的寶貴意見!

    馬上註冊
    免費試用 Ragic!

    用 Google 帳號註冊

    立即科技 Ragic, Inc.
    02-7728-8692
    info@ragic.com
    台北市中正區南昌路二段81號9樓
    使用者條款 | 隱私權政策