使用C#開發LineBot(7) - 使用Line Login實現oAuth SSO(單一登入)

作者： -
本篇部分內容已過時，請閱讀完後再接續看新版 v2.1 API參考:
http://studyhost.blogspot.tw/2017/12/clinebot17-line-login-v21.html
上一篇寫完之後，我心裡想，我連Line Notify都寫了，那沒理由不寫Line Login吧，雖然，我猜不一定很多人對這個主題有興趣。
而且我覺得，要寫這個主題，我應該要先多寫一篇關於oAuth和SSO(Single Sign On)的文章才行，否則我覺得大半讀者可能如同到了北京一般(伸手不見五指)…不過，oAuth和SSO有空再寫，我先趁記憶猶新，把Line Login整理一下。(補充:後來寫了，請參考這裡)
背景與用途 : 基本上Line Login是讓網站或手機App開發人員做用戶身分識別(Identity)與單一登入(SSO)用的，也就是說，網站或手機App開發人員，不需要自己管理會員帳號密碼，可以透過Line Login這個符合oAuth標準的Identity機制，來進行用戶的身分驗證與個資取得，以達成單一登入。你一定曾經用過某些網站，在登入或註冊帳號的時候，並非要你填入新的帳密，而是連結(整合)到Google帳號或是微軟的Microsoft Account，即可完成身分驗證與登入。
這有什麼好處?
對用戶來說:
  1. 不用記得很多組帳號密碼
對網站或手機App開發人員來說
  1. 不用費心保管個資，由oAuth Provider(例如Google、以及本文要介紹的Line Login)幫你管理。
  2. 不用管個資，就沒有被竊的風險。
  3. 如果你有多個網站或服務，倘若都支援某一種驗證方式(例如Line Logic)，則用戶登入了A網站，當連結到B網站的時候，無須再次登入(此即為SSO)。
好，我當作各位都知道了，如果對於oAuth或SSO還有疑問，以後有機會我再說明。我們先來看，要怎麼將你的網站連結到Line Login…
順帶一提，其實一直以來，Line的各種動作都看得出Line的企圖心不小，目前提供oAuth的廠商，幾乎各各是大廠，Google、微軟、Yahoo、沛米(不認識? 這是我投資參與的公司)…Line在這個領域要衝進來當玩家，很是任性…
註冊Line Login
在使用這個服務與你的網站整合前，你必須先註冊一個Line Login的服務，申請位置位於: https://business.line.me/zh-hant/services/login

(他說他有五億用戶耶…)
請給他按下去，一連串的動作之後，會出現底下這份表格:

有幾個填寫需要注意的地方:
  1. 上圖(1)的部分是你這個服務(網站、或app)的圖示，在要求用戶登入的畫面會出現。
  2. 上圖(2)的部分是你這個服務(網站、或app)的名稱，在要求用戶登入的畫面會出現。
  3. 上圖(3)的部分讓你選擇你是要在你自己的網站，或是你開發的App來使用這個服務，由於本文介紹的是一個網站的例子，因此請選擇Web。
  4. 這個是你的Line帳號 ID(或是你的帳號所註冊的公司的名稱)，這無法改，它會在要求用戶登入的畫面出現。
填寫完畢之後，請按下確定，接著會出現一個我認為非常多餘的畫面，讓你確認資料是否正確，如果沒問題，請按下『申請』鈕：

按下申請，如果成功後，會出現底下的畫面，請留意只有Channel ID以後會用到，其他看看就好，然後直接按下右下角的綠色按鈕前往Line Developer網站:

當你按下上圖右下角的綠色按鈕前往Line Developer網站，之後，會出現底下畫面:

請注意，還有幾個地方要填寫，留意上圖左邊的選單，我們會用到(1)和(6)也就是選單的Basic Infomation和Technical Configration這兩個部分，Basic Infomation的部分就是上圖的畫面右半邊，請點選(2)的Edit，並且隨意把資料填寫完畢。然後按下上圖(4)的Show，取得一個重要的資訊，也就是Channel Secret。
至此，你會得到使用Line Login的兩個重要參數，一個是Channel ID，另一個是Channel Secret，它們長得像是底下這樣:
Channel ID : 1504723632 (這當然是假的)
Channel Secret : e2b481ca6ebd222aa653150c1c6375571444720232 (這當然也是假的)
接著，請按下上圖中的(6)，會出現底下畫面，讓你設定Callback URL:

你可以點選上圖中的Edit，來設定Callback URL，由於我要在local測試，因此我輸入localhost的URL(如上圖)
說真的，如果你看到這邊覺得一頭霧水，我大概也猜的到為什麼。我自己也當過初學者，我一開始看oAuth和SSO的東西時，也不知道這到底是什麼意思。但久了之後，我就知道，為何以前看別人的貼文時，沒有多少人在解釋上面這些東西是什麼。因為，如果你知道oAuth的基本概念，上面這些根本不需要解釋，你甚至還會覺得我前面寫得太囉嗦。但，如果你不熟悉oAuth，上面這些解釋的再詳細也幫助不大…所以，我也就不解釋了，但我會盡快寫一篇oAuth和SSO的文章的，在我沒寫好之前，請先上網找找oAuth相關資料與概念，相信會有幫助( 補充: 請參考http://studyhost.blogspot.com/2017/01/oauthsso.html)
好，設定好了CallbackURL，並且取得Channel ID與Channel Secret之後，我們就已經擁有所有需要與Line Login整合的資訊了。接著就是如何開始實作…
開始將你的網站連結到Line Login
首先，請先建立底下這樣的網頁(有沒有，跟前面介紹Line Notify的時候好像):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
function Auth() {
var URL = 'https://access.line.me/dialog/oauth/weblogin?';
URL += 'response_type=code';
URL += '&client_id=你的ChannelID';
URL += '&redirect_uri=http://localhost:21448/Index.html';
URL += '&state=abcde';
window.location.href = URL;
}
</script>
</head>
<body>
<button onclick="Auth();">點選這裡連結到Line Login</button>
</body>
</html>
view raw Index.html hosted with ❤ by GitHub
請留意，上面程式碼中的11行裡面的redirect_uri必須和你在設定時設定的CallBackUrl相同(因為我在測試，因此是localhost)，當你點選上圖的Button後，你會發現，頁面被導入到Line的登入畫面:

這個登入畫面是由Line提供的，因此你不會知道用戶的帳密，當用戶輸入正確的帳密之後，會出現底下的畫面，讓用戶確認，你提供的服務（網站或手機App)可以取得他的個資:

留意上圖中的(1)、(2)，就是先前你設定時，輸入的服務名稱…
當用戶按下上圖中的『同意』鈕之後，會被導回你的CallbackUrl指定的頁面，並且在QueryString中傳遞了一個重要的Code:

請取得這個Code，我們要用該Code換取可以代表用戶的Token。後面我用postman示範，當你取得Code之後，你可以透過POST https://api.line.me/v1/oauth/accessToken ，並且傳遞底下的參數，來取得Token:

注意上圖中，我們透過POST呼叫，把Client_Id(1)、Client_Secret(2)以及相關參數傳遞給Line Login，Line Login則回傳(4)的Access_token給我們。
透過這個Token，我們就可以辨識用戶的身分，取得用戶的資料了，例如:

上面這個http get，將Token傳遞給Line，則Line回覆給我們用戶的displayName、mid、大頭照、以及StatusMessage。
透過這樣的方式，我們就實現了以Line Login提供的oAuth機制，來進行身分驗證的工作了，如此一來，我們自行開發的網站、App，就無需自行設計登入與會員管理機制，直接用Line Login提供的服務進行整合即可。
是不是很方便呢？(呵呵呵，我猜的到你的回答…)
官方文件在:
https://developers.line.me/web-api/integrating-web-login
https://devdocs.line.me/en/#how-to-use-the-apis
oAuth與SSO參考說明在 http://studyhost.blogspot.com/2017/01/oauthsso.html
--------------------------------------------
線上課程：https://www.udemy.com/line-bot/
電子書：http://studyhost.blogspot.tw/2017/12/line-bot.html
LineBotSDK：https://www.nuget.org/packages/LineBotSDK
如果需要即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。

留言

Johnson表示…
您好，我想請問一下是否無法從LINE那邊，獲得使用者的Email資訊呢，謝謝。
2017年3月20日 下午5:37
K表示…
老師您好，請問「透過POST https://api.line.me/v1/oauth/accessToken ，並且傳遞底下的參數，來取得Token」這邊，輸入網址時 status一直都是404錯誤 不知道是哪裡需要修改?
2017年3月30日 下午6:32
K表示…
老師您好，剛剛上面的問題已經解決了!!
所以只要使用者透過授權，就能得知所有用戶的內部ID嗎 ?
把Callback URL換到其他空間即可使用嗎
2017年3月30日 晚上7:39
G表示…
請問樓上的問題(404)是怎麼解決的?我也遇到同樣的問題
2017年4月3日 上午10:03
isDavid寫道…
@K,

Callback URL可以換到任何WebSite

所以只要使用者透過授權，就能得知所有用戶的內部ID嗎 ? <--- 內部ID?
2017年4月9日 下午1:38
匿名表示…
老師 你好
LINE有公告WEB LOGIN V1只支援到2018/01，
所以我參照您的方式把API改成LIEN提供的V2 https://api.line.me/v2/oauth/accessToken，
不過官方的說明很怪https://developers.line.me/web-api/integrating-web-login-v2和https://devdocs.line.me/en/?shell#refreshing-access-tokens
這兩個網頁中的request body給的Parameters不同，兩種request body我都試過，但是POSTMAN都出現{
"error": "invalid_request",
"error_description": "some parameters missed or invalid"
}
不知道是哪邊需要調整?
2017年4月19日 上午11:47
steven 張寫道…
您好，我在postman上 成功了，感謝您!
想請問 要怎麼實作在程式上呢?
我嘗試用
JQ ajax
JQ getJSON
結果都是出現 XMLHttpRequest 域名 的問題
2017年5月8日 下午2:17
匿名表示…
請問樓上大大怎麼成功的
我怎麼打都是
{
"error": "invalid_request",
"error_description": "some parameters missed or invalid"
}

Status:400 Bad Request
2017年5月8日 下午3:58
steven 張寫道…
還蠻簡單的 細心一點 跟著版大po的圖片 照著打
2017年5月8日 下午4:19
匿名表示…
我也是在前端抓不到資料
2017年5月9日 下午4:50
isDavid寫道…
如果你自行開發有問題，這邊有寫好的範例，請依照說明修改即可:
https://github.com/isdaviddong/Line_Login_Example
2017年5月10日 上午9:57
steven 張寫道…
作者已經移除這則留言。
2017年5月10日 下午2:58
匿名表示…
老師，請問一下當我在按下同意後要做callback，但是畫面出現“無法連上這個網站 localhost 意外中斷連線。” 請問這是什麼問題？網址列還是有出現一段code。
2017年6月29日 上午10:32
匿名表示…
一直跳這個
查了好像是域名的問題
有人知道是什麼問題嗎?
{
"error": "invalid_grant",
"error_description": "invalid authorization code"
}
2017年7月28日 下午2:19
isDavid寫道…
新版 v2.1 API請參考:
http://studyhost.blogspot.tw/2017/12/clinebot17-line-login-v21.html
2017年12月30日 晚上8:10
張貼留言

這個網誌中的熱門文章

使用LM Studio輕鬆在本地端以API呼叫大語言模型(LLM)

作者： -
圖片
最近上課常被問到，如何在地端環境搭建出大語言模型(LLM)，並且呼叫其API。 一開始我不太理解為何會有這樣的需求(因為在地端自行搭建運行LLM的成本不一定比較低，即便可能比較安全)，但被問多了，也就開始遍尋相關的解決方案，看看有沒有什麼最簡單的方式，可以讓開發人員在地端測試大語言模型? 後來我選擇 LM Studio ，它就是一款設計來運行大型語言模型（LLM）的平台，有個算是挺優雅的整合環境，讓一般 end-user 或開發人員，都可以輕易地在 local 端進行模型的部署和測試。 LM Studio 本身支援多種模型架構和框架，當然，最重要的是，它是免費的。 下載安裝 都很容易，我就不多說。 安裝好之後，你可以看到首頁中已經呈現了許多 Hugging Face上的模型： 這顯然是因為Hugging Face是大部分免費開源模型的集散地。 你可以搜尋自己喜歡的模型，透過LM Studio下載到local之後，就可以直接載入(下圖一)： 隨手設定一下 system prompt(上圖二)，然後，就可以直接對談了。(上圖三) LM Studio會使用你的GPU進行運算(如果有的話)，你會發現，原來有好的設備(GPU)，運行的速度可以如此之快。 Local Server 對於開發人員來說，它還有個超級更友善的功能。 LM Studio本身還提供一個 local server，可以幫你把模型包裹起來讓你直接透過API呼叫該模型的功能，例如： 上圖是我們開啟 LM Studio中 Local Server功能後的結果，你可以透過 localhost 的 1234 port 來呼叫這個被 LM Studio 運行起來的大語言模型。(有沒有發現，我們用的也是 chat/completions API) 透過Postman簡單提供一下 JSON Body: { "model": "LM Studio Community/Meta-Llama-3-8B-Instruct-GGUF", "messages": [ { "role": "system", "content": "你是AI助理，請一律用繁體中...
Read more »

實際嘗試使用DeepSeek API

作者： -
圖片
突然造成關注的 DeepSeek DeepSeek 是一家於2023年由中國私募基金「幻方量化」創立的人工智慧公司，專注於AI技術。算是少數專注於基底模型訓練的廠商。幻方量化這家公司的負責人很年輕，1985年生，才40歲，同時也是DeepSeek的創辦人。但他為何從投資領域跑來訓練AI模型? 如果對這家企業有興趣，可以參考 這裡 。) 從沒沒無聞到震動市場，主要是因為其最新成果 DeepSeek-V3 與 R1模型，採用「混合專家架構」設計，僅在需要時啟動部分「腦細胞」，以便於降低運算資源消耗。據傳，由於訓練該模型僅使用 2048 部 NVIDIA H800 GPU，耗時約兩個月，以極低的成本(約為560萬美元)完成訓練，但 R1 模型在數學和推理基準測試中表現出色，號稱與OpenAI的o1模型效果相當。 據聞 Meta 和 OpenAI 對 DeepSeek 的快速崛起感到緊張，主要原因在於 DeepSeek 在各種壓力底下，居然可以更低的成本，基於過去開源的基礎完成更高階的成果展現。Meta的首席AI科學家Yann LeCun指出，DeepSeek的成功證明了開源模型(例如他們家的llama)正在超越專有模型(像是 GPT or Gemini)，強調了開放研究與開源的重要性。 總之這些進展引起了矽谷的關注，甚至有Meta員工匿名表示，內部出現了恐慌情緒，工程師們正在連夜嘗試複製DeepSeek的技術。 可預見的未來，模型(不管是雲端或地端)的可選擇性將會大增，在使用的成本上也有機會日漸低廉。因此，我們就來看看 DeepSeek API 的使用。 使用 DeepSeek API DeepSeek 也有提供雲端版本的API，要使用 DeepSeek 的 API，您需要先申請 API 金鑰(以信用卡或PayPal付費)，位於 這裡 : 申請後，您可以透過發送 HTTP POST 請求與 DeepSeek 的模型進行互動。以下是使用 cURL 的範例： curl https://api.deepseek.com/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer <DeepSeek API Key...
Read more »

使用 Dify 以No Code方式建立記帳機器人

作者： -
圖片
LLM改變了軟體開發的一切 每每碰到一套新的工具或技術，我都會想把過去熟悉的例子重新實作一次，一方面有助於了解新技術的瓶頸或極限，另一方面也可以實際體驗新工具所能帶來的改變與節省的時間。針對LLM和Dify的出現，我當然也這麼做了。 過去，我們曾經出版過一本『LINE Bot與人工智慧辨識開發實戰』的書籍，內容在闡述使用LINE官方帳號和微軟的AI技術(cognitive services)進行 對談/客服 機器人的建立。當然，那是在還沒有LLM的時代。 如今LLM的出現，改變了開發對談機器人的一切。 過去書中有一個例子，我一直想拿LLM重新做一次，就是 記帳機器人 。 而且這一次，我不想再寫任何程式碼了。 記帳機器人 記帳是獲得財富自由的首要關鍵(不知道曾看到哪本書上這樣說的，但我愈來愈覺得那本書裡面的內容有一半是安慰人的，不過我們暫且擱置爭議)。關於記帳這件事情，如果能有一個隨身帳本，可以幫你記錄每一筆消費，應該是一個好的開始。 有很多app有這樣的功能，但大多數App都是透過表單輸入的方式，讓你自己輸入每一個欄位，而我希望做的這個對談機器人，要能夠直接透過自然語言輸入，就能完成記帳。例如： 剛才在加油站把油加滿，花了1200元 午餐吃了7-11的雞腿便當，130塊 用戶直接用自然語言輸入類似上面這樣的句子，記帳機器人就能夠幫我們將這些消費紀錄寫入資料庫。that’s it。 使用 Dify 開發與測試 如今，在有LLM和Dify工具的狀況下，要實現這個需求變的很容易，我們先整理一下需求，並且整理一下初步的思路。 當用戶輸入一句話，我們就丟給LLM去判斷(注意，是判斷)，如果用戶在這一句話中已經包含我們所需要的所有資訊(參考底下)： 金額(Amount) 商店名稱(Store) 消費項目(Item) 時間日期(DateTime) 備註(Memo) 我們就把上述消費資料轉成 JSON，然後呼叫一個 Rest API 把這消費紀錄存入資料庫。如果用戶只說了一部份，還有缺少的資料，例如： 剛才花了150元 這句話缺了消費項目與商店名稱等資訊，那我們就讓LLM持續追問，直到蒐集完所有資訊為止。 上述邏輯很簡單，而我們用Dify進行開發，過程更簡單，整個流程設計大概像是底下這樣，幾乎不用寫什麼程式碼: 上圖中的重要...
Read more »

使用 Dify API 快速建立一個包含前後文記憶的對談機器人

作者： -
圖片
Dify 這個產品我就暫時先不介紹了，它找到了一個挺好的切入點跨入AI Agent市場。讓不喜歡(或不擅長)寫太多 Code 的開發人員，也可以快速的建立一個具有前後文、記憶的對談機器人。 其實若單就設計 Chat Bot 來談，它本質上和 GPTs 有那麼一點點像，你只需要給一個 system prompt ，再加上一點點的資料上傳做為 RAG 的數據來源，就可以生出一隻有模有樣的對談機器人。 但 GPTs 做出來的 Chat Bot 被綁在 ChatGPT 的 UI 裡面，你不容易把它跟 LINE Bot (LINE 官方帳號) 或其它 UI (例如 MS Teams) 串在一起，而 Dify 呢? 則給你了一個 chat-messages API，讓你能很快的實現這個功能，把你在 Dify 平台上做好的 Chat Bot 轉變成可以正式運行的 LINE Bot 或 其它 Bot。 這也是今天我們要介紹的部分。 建立 Assistant 我們先用 Dify 以底下這個 system prompt 建立了一個請假助理： 發佈後，你可以在Dify 內建的 Web UI 上測試： 你會發現，這個 chat bot 已經有著基本的記憶，然後可以依照 system prompt 完成對談和任務。 不要問我在這邊建立出一個假單有什麼用，正常情況下是要直接讓 chat bot 寫入資料庫(例如 HR 系統，直接完成請假)，只是我們還沒談到這一段，這部分以後再展開來談。 chat-messages API 好，透過上面那樣建立一個對談機器人超容易，且內建就有了記憶和前後文的功能。讓開發人員快樂的不得了。跟使用無腦 GPTs 生成術差不多。然而，如果只能在 Web 上用，不能串接 MS Teams、LINE…等介面，做了也是白搭。 但，Dify 貼心的提供了 API，我們來試試看。先Gen個 API Key： 生成了 API key 之後，你只需要透過底下這樣的 rest api，即可進行呼叫： 你會發現，開發人員只要使用單一的這一個 https://api.dify.ai/v1/chat-messages API 即可進行對談。每次只需要透過 query 輸入用戶說的話，response 中的 answer 則是 LLM (Assist...
Read more »

使用 Dify 建立企業請假機器人

作者： -
圖片
八卦與未來 上個月，前Google執行長Eric Schmidt在史丹福有場演講，媒體關注的是八卦消息(如果你也曾關注，網路上有很多鐵定可以找到)，但我注意到的則是他提到了自己認為接下來 AI(特別是大語言模型) 可能的發展方向，包含: Large Context Window AI Agent Text-to-Action 底下這邊有這一個段落的影片： https://www.youtube.com/watch?v=zl3k1ksFZdY 為何我會關注這部分? 因為上述的三個方向，也是身為開發人員的我，過去這一年，來與LLM打交道後的感想。昨天，我在 twMVC 的研討會分享中，展示了一個其實我過去早做過了N百次的範例，就是企業的請假機器人。(唯一不同的是，這次我幾乎沒有寫任何程式碼) 場景是，員工在家裡生病了，想要透過語音或是app進行請假，你可以看底下這個運行的範例 (git圖檔會循環播放，開始是 『我好像感冒了』)： 用自然語言對談的方式，即可完成請假。 我說過，類似這樣的範例我做過很多次，用 LINE Bot 搭配 C# 做過，用MS Bot Framework 做過，前陣子也用 Semantic Kernel 框架做過，更早期，還沒有AI的時代，我也在EIP和HR系統裡做過。 但我想說的是，這 就是 Text-to-Action 的呈現，也是一個典型的 AI Agent 的例子，它讓我們透過自然語言(可以是語音或文字)，直接命令機器人(Chat Bot、AI 助理、Agent、Assistant …不管你叫它什麼…)幫你完成一件事情(請假、售票、查詢資料、做財務報表、統計圖表、寫程式…etc.)。 這是一直以來人類對電腦最底層的需求與期待。 隨著 LLM 能夠處理和記憶的 Context 愈來愈被放大，AI Agent 所能夠處理的任務就更加的不受限制。 自然語言才是最符合人類直覺的操作 順帶一提，我昨天在研討會中講了一個故事。 有天，你覺得自己需要聘請一位助理，因此上網張貼徵人啟事，沒多久，你找到了一位號稱上知天文、下知地理的高材生，來幫助你更有效率的完成工作。 他什麼都好，唯一的一個小缺點是，你不能直接對這個助理下達指令，你必須用一種只有這個助理看得懂的語法，才能要求這個助理幫你完成特定的工作。這些語法還挺...
Read more »