Lawrence Blog

Hello 大家好，相信隨著 Vibe Coding 的熱潮，許多人終於能用自然語言來「說」出程式碼，跨出了過去難以逾越的那一步。 再加上近幾個月來，AI Agent、Model Context Protocol（MCP）、n8n 等結合 AI 相關的技術如雨後春筍般冒出，速度之快，幾乎是一覺醒來世界都變了樣。而這波大混戰中，Google 更在這幾天大方釋出 Gemini CLI 供大家免費使用，瞬間讓整個圈子都熱鬧了起來。但身為一個正被  AI 迫害的碼農 😜，怎麼能不親身體驗一下「用嘴巴寫程式」的威力呢？ 先說結論 你終究還是要學會寫程式，只是寫程式將不再是一項專業技能。未來需要的，是一個具備優秀表達能力，並且擅長與 AI 合作的軟體工程師。 在不久的將來， 那些只會寫程式的設計師終將被 AI 取代，留下來的會是那些擅長帶領 AI 團隊（我稱之為 LLM Coding），並協助 AI 找出問題的 AI 軟體架構師 。所以從今天起，開始改變吧。 因此，今天就是要跟大家分享如何使用 GitHub Copilot 來寫程式。一開始我也蠻好奇的，覺得寫完之後可能還是要改吧？但 你相信它只花了五分鐘就完成了嗎？ 相信你一看完，一定會震撼感十足！這也是我第一篇不寫程式的程式分享文章，下圖是最終實作出來的結果。 AI Agent 協助完成的 LINE 翻譯機器人 但在開始之前，先前情提要一下，之前我有一個系列文章，分享了如何 使用生成式 AI 技術實作屬於自己的 LLM 知識庫 ，其中某篇文章的範例提到了如何 運用 Prompt 提示工程 來幫助我們完成多國語系翻譯的功能，今天我就是要延續這個專案，來完成一個專屬的 LINE 翻譯機器人。 啟動 GitHub AI Agent 在開始使用 GitHub AI Agent 之前，我已在相同的專案內新增了一個名為 TranslateLineBotDemo 的 WebAPI 空白專案。接下來，直接看看我們的 Prompt 要怎麼下 需求說明 我正在幫一個製造業的工廠寫一個多國語言的 LINE Bot 機器人，而本次預計的需求目標如下 1. 需支援中文、英文、日文、越南、菲律賓等五國的多語系翻譯。 2. LINE Bot 僅能處理文字對話，當使用者送出文字以外的訊息，則回傳 "我現在只會翻譯文字喔" 的訊息。 3...

# 使用生成式 AI 結合 RAG 技術實做屬於自己的 LLM 知識庫系列文章 在完成前面幾篇的實作後，你應該已經學會如何呼叫 LLM 模型，也知道如何讓 LLM 模型記住你們的對話了。同時，我們也都知道，LLM 模型是一位通才型的專家，當你提出問題時，它會根據訓練過的大量語料，試著回答你相關的內容。 不過，LLM 並非萬能， 當它遇到沒見過或不知道的問題時，就可能產生幻覺 ，這也是我們之後要實作 LLM 知識庫中需要留意的重要課題（續會有另外一篇 RAG 來介紹如何減輕這個問題）。 那你有沒有想過，如果在某些情境下，你剛好提出一個跨領域的問題，LLM 模型又會怎麼回答呢?

# 使用生成式 AI 結合 RAG 技術實做屬於自己的 LLM 知識庫系列文章 前情提要 這篇文章是【 Hello Gemini，串接第一個 Gemini 生成式 AI 】的延伸篇，在完成上一篇的設定後，我們已經成功透過程式呼叫 Google Gemini，串起了第一個生成式 AI 的小程式了。  但，事情並不總是這麼順利... 請看下圖的情境，我一開始問了一個問題，而它也正確的回答，接著再問「那他的背景是什麼」，結果 Gemini 居然回了一個讓人摸不著頭緒回答，不知道它是害怕想起來還是擔心對岸會對它不利 XD，它似乎完全忘了我們上一個問題在問什麼了。 你可能會有疑問？我明明在 ChatGPT 或 Gemini 使用者介面都用的好好的，怎麼會串個 API 就不知道我第一個問題是什麼呢？難道我的 API 版本是金魚腦比較笨！！其實，這是因為像 ChatGPT 或 Gemini 這類平台的使用者介面，內建了「對話記憶」機制來解決這個問題 。 也就是說，這些平台它會自動把你之前說過的話保留下來，讓模型能理解整段對話的上下文，回應自然又有連貫性，就像是跟朋友說話一樣自然。當然，這種記憶也是有限度的( 畢竟模型的上下文長度是有限的，因此記憶也是有限的 ，這部分我們之後有機會可以再深入介紹)，不過至少最近幾輪的對話它都還能記住。  但當你透過 API 來串接 Gemini 或 ChatGPT 時， 模型並不會主動幫你記住對話的上下文 ，你得自己把對話的歷史維護好，並在每一次請求時都一併傳送過去，因此如同這篇的主題「做個有記憶力的 AI 機器人」，這篇將會示範如何實作基本的對話記憶機制。

# 使用生成式 AI 結合 RAG 技術實做屬於自己的 LLM 知識庫系列文章 Gemini 是什麼？ Gemini 是 Google 開發的生成式 AI 模型系列，它的前身你可能聽過的是 Bard(一開始被 ChatGPT 打的很慘，現在已經默默退場的那位)，而 Gemini 這個系列專為多模態任務設計，也就是說它不只會聊天，還能處理圖片、文字，甚至未來可能支援更多格式，你可以把 Gemini 想像成 Google 家的 ChatGPT，而且它也有自己的 API 可以串接。 為什麼選擇 Gemini？  回到本系列第一篇文章提到的，本次的目標是希望用 最低成本 打造出屬於自己的 LLM 知識庫，感覺這個目標聽起來不難，但現實往往不會那麼美好，實務上最理想的狀況當然是整套系統都跑在自己地端環境，不僅能確保資料不會外流，還能完全掌控模型運作細節。 不過嘛…… GPU 很貴的，不是每個人或者公司都願意砸大錢弄一台本地端跑 LLM 的伺服器，更別提現在使用者被 ChatGPT 養壞了，變得超沒耐心，超過 3 秒的回應時間可能就給負評 + 退訂了 XD。 因此我選擇 Google 的 Gemini 作為生成模型，原因很簡單，目前它提供免費呼叫 API 的額度 (至少本文撰寫的時候 Gemini 2.5 Flash 有一個免費額度可以使用，詳細可參考 Gemini Developer API 定價 ，但目前 AI 服務變化太快，未來就沒辦法保證了)。 怎麼串接 Gemini API？ 前置作業 在開始寫程式碼之前，你必須先完成底下幾個重要步驟，相關設定也可以參考 Gemini API 說明文件 。 擁有一個 Google 帳戶：這一定要的吧，哪家不是這樣。 申請 Google Cloud 帳戶：去 Google Cloud 註冊一個帳戶，開通免費試用額度。 取得 Gemini API 金鑰：登入 Google AI Studio 後，它會要求同意一些服務條款。 建立 API Key：完成上一個步驟後，理論上可以看到 Create API Key 的按鈕，點下去就對了。 記下 API Key：完成後你會得到一組可以呼叫 Gemini API 的 Key，請記下它(忘記了其實也沒關係，管理介面這邊還可以看到)，等等開發的時候會用到。 測試 API Key 拿到 API 照...

# 使用生成式 AI 結合 RAG 技術實做屬於自己的 LLM 知識庫系列文章 Word Embedding ? 維基百科的定義 詞嵌入（英語：Word embedding）是自然語言處理（NLP）中語言模型與表徵學習技術的統稱。概念上而言，它是指把一個維數為所有詞的數量的高維空間嵌入到一個維數低得多的連續向量空間中，每個單詞或詞組被映射為實數域上的向量。 Word Embedding 的輸入格式 輸入是一個或多個文字，通常是單字或是整句話，這些文字會先經過處理（例如分詞、去除標點），再送進詞嵌入模型中，舉例來說：「美國總統是誰?」，這句話可能會轉換成 ["美國總統", "是誰"] 這樣陣列。 Word Embedding 的輸出格式 針對上述陣列內的每個文字，詞嵌入模型會經過一連串的數學運算，將其轉換成一組向量，這些向量是由一串實數所組成的數字序列，代表該詞的語意特徵，輸出的格式通常會是像底下這樣的結構 { "美國總統": [0.12, -0.34, ..., 0.87], "是誰": [0.03, -0.56, ..., 0.45] } 所以到底是什麼? 好吧，其實對於有點技術背景的人來說，前面那些概念應該已經蠻清楚了。但如果你是完全沒碰過這塊的新手，可能還是會覺得，嗯？ 這到底在說什麼？ 我這邊用白話文來解釋，Word Embedding 其實就像是幫每個文字編碼成一張 數字小卡片 ，這張名片記錄了它的個性、興趣和關聯對象，而電腦就是靠這些卡片來判斷誰跟誰是好朋友（例如 蘋果 跟 香蕉 很像）或誰跟誰完全不像（像 香蕉 跟 國王） 。 圖片來源 : https://towardsdatascience.com/deep-learning-for-nlp-word-embeddings-4f5c90bcdab5/ 為什麼有這麼多不同的詞嵌入模型? 因為每種模型都有自己的擅長領域，而且技術一直在進步、需求也不一樣，所以自然就冒出很多種詞嵌入方式，主要可分成幾個面向 技術進步 ：早期像 One-hot 很簡單，但不夠聰明，後來 Word2Vec、GloVe 開始學語意，再後來 BERT、GPT 甚至能根據上下文「動態」理解每個詞。 應用場景 ：做分類、對話、翻譯、問答，每個任...

# 使用生成式 AI 結合 RAG 技術實做屬於自己的 LLM 知識庫系列文章 在 上一篇 文章中簡單介紹了這系列文章的目標與執行流程，今天這篇文章將記錄，開發 Gen AI 的 LLM 知識庫系統所需的環境設置，以下是我在開發過程中所使用的環境說明： 作業系統：Windows 10 企業版 LTSC Docker Desktop： Docker Desktop 4.38.0（181591） Word Embedding 模型：snowflake-arctic-embed2 LLM 模型：Google Gemini 開發語言：NET Core 8 使用套件：Semantic Kernel  Ollama 是什麼? Ollama 是個很方便的開源 LLM 框架，讓你可以在本地端輕鬆跑像 Llama 3、Mistral、Gemma 這些熱門的大語言模型，支援 Mac、Linux、Windows 多平台，重點是它已經把模型設定、權重下載、環境配置這些麻煩事都打包好了。 你也可以直接在開發環境上面安裝，但你知道的，有時候環境設定真的是地雷一堆，踩到就很 OOXX，所以我個人是直接使用 Docker 來裝，因此這篇文章會記錄用 Docker 來安裝 Ollama 的流程。

一直以來，我很少遇到需要一次性大量寫入資料的需求，印象中只有幾次需要將備份的歷史數據大量的轉回正式環境，那次因為不是很緊急，所以就直接下 SQL 讓他慢慢地寫（老實說真他 ○ × 的久），但在某次機會下，我查到 MSSQL 本身有提供批次寫入的語法（不好意思直白的說自己 SQL 不太好 XD），可以快速寫入大量的數據，因此這篇文章我要記錄一下如何在 MSSQL 和 MariaDB 批次寫入大量的資料。 MSSQL 批次寫入 Bulk Insert 是 MSSQL 提供給大量寫入資料庫的一個好用的語法，適用於一次性寫入數十萬甚至數千萬筆的資料，其主要由底下兩個實體檔案所組成。 Format File（格式檔）：用來定義要寫入的數據結構。 資料文字檔：實際要導入的數據，例如 CSV 或 TXT 檔案。 Format File  SQL Server 支援兩種類型的格式檔案：非 XML 格式和 XML 格式。 非 XML 格式是舊版 SQL Server 所支援的原始格式，詳細的說明可參考 官網 ，這邊我就用非 XML 格式，也就是文字檔的格式來說明。

# 使用生成式 AI 結合 RAG 技術實做屬於自己的 LLM 知識庫系列文章 前言 就在我停下追求技術腳步的跑去學界進修的這兩年，資訊領域發生了爆炸性的變化，生成式 AI（Generative AI）的技術在這段時間快速的成長，至今已有多家算是蠻成熟的 AI 公司，並發展了許多 AI 相關的服務，其中最著名的應用就是 ChatGPT，當然這些大型語言模型（Large Language Model, LLM）服務或多模態模型（Large Multimodal Models, LMM）服務提供商，也釋出了許多 API 給我們這些沒辦法自行架設環境的開發者，能透過他們提供的服務，讓我們自己的服務也跟上這一波 AI 的熱潮。 在這段時間，我一直很想抽空玩玩，但苦於時間真的是不太夠（真希望一天能有 48 小時 XD）。如今我進修的課程也到了尾聲，也差補不多是時候回來惡補我的 "技能債" 了。 關於如何自行架設 Gen AI 服務，或是串接各大廠商所提供 API，網路上已經有很多相關的文章，我敬仰的 Ian 大前輩，也在鐵人競賽寫了一系列關於  如何在 NET 中使用 GenAI 技術  的 文章 ，而自己在這領域也沒有玩太久，不敢在各位大神面前班門弄斧，所以本來沒有想要寫這系列的文章的，但回想當初寫這個部落格的目的，就是為了留下對於程式熱愛的記憶，因此我才決定寫下這一系列的記錄。

在  上一篇  文章中分享了透過別人建置好的 WebAssembly 來進行真假人臉辨識，想說趁此機會順便了解一下 WebAssembly 的開發方式。 由於我是使用 Mac 在訓練深度學習的模型，因此也順理成章的使用 Mac 來進行開發環境的設置，但........... 真沒想到過程異常艱辛，解了一個問題又多出另外一個新的問題，於是只好狠下心來改用 Ubuntu 重頭來過，也因此有了這篇血淚記錄文（執行結果如下圖）。 另外因為牽扯技術過多，本文將不會深入探討各項技術的原理，僅記錄環境的設定過程，對於相關技術有興趣的人，可參閱文末參考網站的連結。 在開始詳細說明之前，先列出最終完成時的開發環境版本： Ubuntu : 24.04 ，作業系統。 Python : 3.12.3，使用 OS 內建版本。 Cmake : 3.28.3，C++ 編譯器。 Emscripten : 3.1.64，用來將 C++ 程式編譯成 WebAssembly 用。 OpenCV: 4.10.0，影像處理套件。

前言 人臉辨識技術已經是一個非常成熟的技術了，但在過去主要都還是在桌面程式上運行，這幾年隨著硬體性能的飛躍進步和人工智慧框架的日益成熟，如今我們現在已經能夠在瀏覽器中實現許多過去難以完成的功能。 今天這篇文章，我想和大家分享如何在瀏覽器中實現真人臉部辨識，在開始之前，請先了解人臉辨識的基本流程（如下圖所示），主要分為三個部分：取得人臉特徵、活體偵測、以及比對活體特徵。 請注意，網路上很多臉部辨識範例大都沒有提到活體偵測的部分，但這個部分卻是實務運用上很重要的一個環節，因為過去曾經有小學生利用列印的照片進行身份欺騙的例子發生。 另外針對活體偵測，目前業界已經提出了多種方案，例如使用 3D 攝影機或紅外線設備等來輔助判斷，不過本文的目標是在瀏覽器中實現真人臉部辨識，因此我採用其他方法來達成這個目標，後面會再補充說明，底下的影片是最終的實做成果，如果遇到非真人的圖片會顯示無法辨識，若是真人則會進行身分判斷。

了解了的 SAML 的基本概念 和 完成了 Okta 身分驗證服務商設定 ，本文將記錄如何將 SAML 2.0 登入功能整合到您的 Web 應用程式中，常見的 Web 網站分為傳統的 WebForm（即每次點擊會刷新整個頁面）和 SPA（單頁應用程式）搭配 API 的方式。 因為 SPA 牽涉到的範圍比較複雜，後續有機會我會在這篇文章中補充相關內容，在這篇文章中，我將使用 .NET Core 8 MVC 框架 ，並使用 ITfoxtec.Identity.Saml2、ITfoxtec.Identity.Saml2.MvcCore 這兩個套件來為來為網站加上 SAML 2.0 的功能。

在 上一篇 文章中，你應該已經了解了 SAML 是什麼以及其運作原理，在這篇文章中，我將記錄如何申請並設定身分驗證提供商 Okta，但請記得先準備好你的應用程式憑證檔案，通常為 .crt 附檔名結尾，若還不知道那是什麼，請先回到上一篇文章複習一下，如果已經準備好了，就讓我們直接開始吧。 註冊 Okta 開發者帳號 若您還沒有開發者帳號，請先到 Okta 註冊一個開發者帳號。 請注意 Okta 有區分成 Workforce Identity Cloud（公司員工用）和 Customer Identity Cloud（外部客戶）兩個不同的平台，我們這次的範例是要模擬整合內部系統用，因此請選擇註冊 Workforce Identity Cloud。

前言 上一篇文章 幫自己的 NET.Core 站台加上 TOTP 雙因子驗證吧 ，有提到如何幫自己的網站加上 MFA 驗證，但說到身分認證系統服務，就不得不提一下 SAML。 SAML 維基百科的定義 安全主張標記式語言（英語：Security Assertion Markup Language，簡稱 SAML）是一個基於 XML 的開源標準資料格式，它在當事方之間交換身分驗證和授權資料，尤其是在身分提供者和服務提供者之間交換。SAML 是 OASIS 安全服務技術委員會的一個產品，始於2001年。其最近的主要更新發布於2005 年，但協定的增強仍在通過附加的可選標準穩步增加。

前言 最近公司正在規劃明年要幫資訊系統全面導入 MFA，為此 Infra 部門如火如荼的進行了一連串的可行性評估，並找了一些在做身分認證系統服務的 SaaS 服務廠商來展示系統功能，這才讓我想起之前一直想要幫自己的後台加上手機 OTP 驗證的功能，這篇文章我要記錄一下實作過程的筆記，但在開始之前得先大概了解一下何謂 2FA、MFA、OTP，以及它們之間的關係。

在上一篇 在 Windows & Mac 環境上安裝 Jupyter Lab  中有提到，因為要執行深度學習模型的訓練，所以拿了閒置的 Mac 電腦安裝了 Jupyter Lab 的環境，在這篇文章中，要記錄如何在 Mac 上安裝 Tensorflow 的執行步驟。 執行環境說明 OS : macOS 12.4  CPU : Apple M1 Python 3.11.7 安裝 Tensorflow 為了怕干擾現有執行環境，這邊是在虛擬環境中安裝 Tensorflow，若不需使用虛擬環境底下前兩個步驟可以不執行，相關步驟如下說明。 創建虛擬環境(tfenv 這個名稱可自行調整)。 python3 -m venv ~/Developer/tfenv 切換到虛擬環境。 source ~/Developer/tfenv/bin/activate

前言 最近開始在做碩專論文第二階段的實驗，過去因為第一階段的實驗範圍是機器學習相關的演算法，所以 Google colab 就足以應付了，但第二階段開始要進行深度學習的演算法，發現 Colab 已經沒辦法滿足我的需求了，因此不得已只能在本地端的環境上架設 Jupyter Lab 來當作實驗環境了。 一開始我先在 Windows 環境上安裝，但因為該環境上沒有顯示卡，所以跑起來頗為吃力，幸好我手邊有一台閒置的 iMac(M1晶片)，所以改用 Mac 來進行安裝，目前看來，搭配 iMac 的效能確實比僅擁有 CPU 的 Windows 環境好很多，因此，本文將記錄我在這兩個平台上的設定過程和相關步驟。 對了，在囉嗦一句，因為未來可能會有不同套件版本的需求，所以實務上建議將 Jupyter Lab 安裝在虛擬環境上面，至於如何安裝在虛擬環境？這個後續我會在另外一篇在分享了。

前言 睽違了三四年沒有碰  Micro:bit 開發版 ， 直到去年九月回到學校進修才又開始翻箱倒櫃的找出這個小玩意來玩玩，上學期的課程使用的是 專攻邊緣運算的 Jetson Nano，但有了之前買了一堆感應器，最後因為沒時間可以玩，又放著變成電子垃圾的教訓，因此上學期收起我衝動的心，就只有使用實驗室的設備玩玩而已(其實是怕被老婆唸 XD)。 這學期我修了一門資安課，內容相當豐富，不僅探討了網路、資訊安全，還涉及到了密碼學等多個領域，課程的重點放在研究 IoT 設備在資料傳輸上的安全問題，更酷的是，我們還使用 IoT 設備來進行了 RSA 加密的實驗。 老師非常慷慨地給了我們每人一套 ESP32 + OLED + 溫溼度感測器，讓我們可以實際動手操作，通過 RSA 加密來保護這些 IoT 設備在雲端傳輸資料的安全性，雖然課後老師沒有要求我們撰寫實驗報告，但我覺得這些實驗實在太有趣了，而且都花了時間了，怕自己過段時間就會忘記，所以我特在這個網誌把所有的實驗的重要步驟都記錄下來，方便自己以後查詢。

前言 你有沒有曾經使用 Google 瀏覽器登入某個網站時，突然跳出「你的密碼已遭洩露」的訊息? 除非你用的密碼堅不可摧、每個網站都設定不同，否則你多多少少應該都會遇到這種情況吧。 如果你的回答是 No，我的密碼很安全，怎麼可能發生在我身上的話，你也別高興得太早，國外有位工程師寫了一個網站叫做 Have I been pwned ，收集了過去數年來洩露的數十億筆密碼資料 (我強烈懷疑這工程師自己也是暗網的潛在賣家，不然誰身上可以蒐集到這麼多資料呢 XD)，只要你輸入常用的帳號，這網站就會告訴你是否有洩漏的風險，如下圖，我自己電子郵件信箱也無法倖免。 好啦，言歸正傳。近年來，資安意識興起，各大網站都開始提倡 MFA (多重要素驗證)，就連我國內政部的系統也開始全面無密碼化，改用自然人憑證來進行登入，但對於個人開發的小網站，要求使用者安裝額外設備或 APP 來實現多因素認證，未免太不切實際。 如果有一種機制，可以直接利用大家都有的手機來進行驗證，是不是就更完美了呢？WebAuthn 就是為了這個目的所存在的。

情境說明 從我開始寫程式以來，LDAP 這項技術就一直存在，但對於缺乏 Infrastructure 背景的我來說，過往的知識都僅侷限在使用程式進行 Active Directory（AD）驗證，如 DN、CN、OU、DC 等相關術語，老實說我從未真正深入了解過(有點心虛)。 最近開發一個小需求，需要驗證使用者輸入的郵件是否存在的功能，在開發過程中出現了一個奇怪的現象：只要透過程式登入，外部網路就會斷線。經過 Infra 部門的查詢，他們發現防火牆（PA）的設定導致了這個問題。公司的政策限制了部分帳號的對外網路存取權限，但這次的問題是，程式綁定了一組可以查詢 AD 資料的帳號後，防火牆政策誤判我的開發機使用的是那一組沒有對外網路存取權限的帳號，因而封鎖了對外網路的存取權限。 這對開發人員來說，造成了一些困擾，因為每次都需要關閉所有開發工具，並登出重新登入，因此也趁此次機會，我決定在虛擬機（VM）上認真地建立一個AD，以滿足我的開發需求，同時也趁這個機會深入了解 LDAP 的運作原理。

因為工作的關係，需要在不同作業系統下進行開發，為了統一管理程式碼，我採用了 Azure DevOps Git 私有庫作為版控工具。在 Windows 環境下，推送程式碼只需輸入帳號密碼即可成功進行，但在 MacOS 環境下，推送程式碼至存儲庫時卻會遇到 "fatal: Authentication failed" 的錯誤訊息。 lawrence@iMac TestRepo % git push origin master Username for 'https://mydevgit.visualstudio.com': <我的登入帳號> Password for 'https://<我的登入帳號>@mydevgit.visualstudio.com': <我的登入密碼> fatal: Authentication failed for 'https://mydevgit.visualstudio.com/Default/PE/_git/TestRepo/' 這個問題已經發生了多次，每次發生時都需要重新上網查找解決方案，為了方便日後查閱，我將解決方法做了筆記，方便後續自己查看。

QRCode 電子名片是什麼？  QRCode 電子名片是一種方便快捷的方式，讓您可以將您的聯絡方式以 QRCode 的形式分享給他人。這個 QRCode 可以包含您的姓名、職稱、公司名稱、電話號碼、電子郵件地址等聯絡資訊。當他人掃描這個QR碼時，這些資訊就會自動地添加到他們的手機聯絡人中，而無需手動輸入。 它的技術術語稱為 "MeCard" 二維條碼，是一種標準的電子名片格式，不知道這是什麼的人請自行 Google 一下，它可以包含各種聯絡資訊。通常，這個格式可以被大多數智能手機和電子郵件客戶端所識別和使用。 目前訪間已經有許多現有的 Web 服務，上傳人員的名片資料後會產生類似下圖的電子名片，但大多數是要註冊會員，大量使用甚至需要收費，而且可能會把員工的個資留在這些 SaaS 廠商的平台上。

在開發上有時候會有串接外部服務，如 OAuth、Webhook 的需求，再加上目前各大服務平台都已要求再回 Call 的網址都必須提供 https 憑證才行，這也造成了本地開發階段時的不便，ngrok 就是為了解決此問題而存在的服務。 ngrok 是個知名的內網穿透雲端服務，意思是說你的設備不需要Public IP，透過他的Agent建立Tunnel將服務暴露到外網上  

前言 在前幾篇文章中，我記錄了 如何安裝 Grafana 以及 將事件器的 Log 整合至 Grafana 進行集中管理，當然除了日誌，如果希望監控其它指標，比如伺服器效能，也都可以統一傳送至 Grafana 方便進行管理，但這些我就不再一一介紹了。 另外當系統出現異常時，提供即時通知是非常重要的功能，本文將分享如何在 Grafana 中設定異常通知功能，Grafana 支援多種異常通知方式，包括 LINE、郵件、API、Teams 等，這裡會分享我自己使用的兩種方式：【LINE 通知】和【呼叫外部 API】。 接下來，我將詳細說明這兩種通知方式的設定步驟。

這篇文章我要記錄一下自己再用的幾個監控面板，但在開始前必須要先完成【 Windows ModSecurity WAF 】、【 Grafana + Loki + Promtail 安裝紀錄 】這兩篇的設定才可以繼續進行後續的面板設定。 事件明細(1) 新增 Visualizations 類型選擇 Logs，並選取底下的查詢條件，目的僅顯示異常的紀錄。 logsource = WindowsEventlog Source = ModSecurity Level = 2，僅顯示嚴重的項目，若要全部出現也可不設定此項目。 資料維度轉換，目的是要排除不想看到的資料內容，僅留下想看到的資訊。 Extract fields，將欄位 Line 的 Log 明細使用 key+values 欄位攤開。 Organize fields，根據需求顯示需要的欄位，我的範例是僅保留 level、eventRecordID、Time、event_data 。 設定面板設定，根據自己的需求調整即可。 Title : 事件明細。 完成設定如下圖所示。

在 上一篇 文章有紀錄 Grafana 和 Loki 的安裝，但根據 官網的說明 ，Grafana Loki 本身並不包含授權的功能，所以需要依靠 reverse proxy 來完成此需求，本篇則是使用 ARR 來進行設定。 前置條件 下載並安裝 URL Rewrite 。 下載並安裝 Application Request Routing ， ARR 相關設定可參考 這一篇文章 的說明。 Step1. URL 重寫 RewriteMaps 設定 此設定是為了，當 Client 端的請求包含了指定的 Custome Header，並且符合內部定義的 Key 時，會使用 value 值來取代， 講人話就是，你的授權 Token 設定的地方 ，底下的設定代表，我核發了 Lawrence & Lawrence2 兩個 Token，若滿足條件，則比對其值 Y。 <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rewriteMaps> <rewriteMap name="Authorized Clients"> <add key="Lawrence" value="Y" /> <add key="Lawrence2" value="Y" /> </rewriteMap> </rewriteMaps> </rewrite> </system.webServer> </configuration>