.NET Walker

不知道你有沒有用過Hackmd.io這個網站中一個我覺得很讚的功能? Hackmd.io是一個共筆的網站，你可以在瀏覽器上以markdown格式編輯文件，其中有一個挺神奇的功能，你可以透過Ctrl+v直接把剪貼簿中的圖片以貼上的方式貼入文件中，這個貼上的動作會自動變成上傳檔案，並且在上傳完成之後得到一個該圖檔的url，整個操作像是底下這樣： 好，其實要實現這個功能不難，只要你javascript夠熟，這個動作也不過是把前端的圖檔往後端傳，然後後端接收到之後，上傳到某個位置(而這某個位置就是Imgur.com)，取得該圖檔的url之後，update前端的html，就可以顯示出來了。(當然如果你願意的話，也可以整段都用js在前端完成) 但讓我好奇的是，這個imgur網站有支援開發人員免費當作圖床用嗎? 一查之下，還真的有，且API和套件都非常齊全，只要你是非商業使用，是完全免費的。即使是商業使用，也有一定額度的免費。這讓我挺訝異的，訝異的部分是我以前怎麼會錯過這個網站? 為什麼我們需要把上傳的檔案放到特定的blob或圖床上呢? 因為在雲端的時代，上傳的檔案放到Web Server上會造成系統無法實現HA，Scaling會受到限制，而放在資料庫中當然太奢侈，所以一個好的大檔案儲存位置，是開發應用程式必須的。 過去我都是用azure blob當作應用程式的上傳圖片存放位置，雖然也算是便宜，但免費的imgur還是頗吸引人，特別是在我們開發的服務並沒有收錢的時候(像是Chat bot、Demo範例…等)。 要怎麼把圖片上傳到imgur上並取得該圖片的URL呢? 程式碼超簡單： 上面這段程式碼使用到了Imgur.API這個nuget套件： 另外程式碼中的CLIENT_ID和CLIENT_SECRET當然要申請，申請的步驟也很容易，請先註冊成為imgur的會員，然後到底下這個頁面申請一個App： https://api.imgur.com/oauth2/addclient 由於我們只是很簡單的上傳圖片取得URL，且使用的是Server Site的Code，所以我們不需要 callback URL，簡單的選擇第二項即可： 申請完之後你會得到像是底下這樣的資訊： 其中就有我們程式碼中需要的 Client ID與Secret。 (順帶一提，又一次使用OAuth的場合，如果你對OAuth不

早上keynote的迴響和疑惑還停留在腦海裡，沒想到一下就來到了中午，中午最讓人期待的當然就是與CTO的round table。 As a LINE API Experts，受邀參加一年一度的Developer Day是一種福利，但更有意義的則是和CTO以及其他技術主管的Round table，畢竟能夠面對面進行溝通，並且得知更多未來的發展方向與具體資訊。 先前 提到過，LINE在這幾年的時間內迅速擴充，如今除了即時通訊軟體，更涉足了Fintech, 區塊鏈, 與AI等多重領域。尤其是AI這部分，關於bot engine與OCR、NLP、speech regnition…LINE都有著自己的實作，這似乎讓人有些不解，在眾多的雲端服務環繞之下，為何LINE選擇自己開發這些技術呢? 為何不使用現成的工具呢? 除此之外，我們也發現，LINE在各國推展服務的速度與順序上，有著相當大的時間差異，未來這部分是否會有統一的時程呢? 說到這部分，我們也發現比起泰國和印尼，台灣的發展速度算是來的快上很多的，這點讓來自其他國家的LAE們頗為羨慕。 不僅發展策略，還有許多關於技術上的討論，諸如，LAE大夥兒也提到，在開發Liff應用的過程中，由於WebView是崁入在LINE App裡面的，因此很難Debug，這個部分是否有好的建議呢? (沒想到還真的有，容後再跟大家介紹) 而最讓人期待的當然是，LINE API Experts是否有類似Early Access Program之類的方案，能夠較其他開發人員更早知道API的釋出與更新呢？ 這些放在心裡的問題，肯定要一次問個夠… 凡此總總，都在兩場的round table有著相當深入的討論，由於LAE們是從不同國家來的，你不難發現，比起泰國、印尼、甚至日本當地的LAE，台灣代表團們可是火力全開，卯足了勁提出了一個又一個的問題，大概會議中有一半時間在回答我們這一票台灣去的LAE提出的種種問題，也算是不枉此行了。 有一個小動作我蠻佩服的，CTO和API Experts聚會結束之後，依照慣例要來張照片，但人那麼多照相隊伍該怎麼排呢? 正當大家杵在那兒不知道該怎麼動作的時候，CTO直接站出來蹲在最前面，不是站著唷，就直接蹲下來讓API Experts能夠站在身後拍照，這應該是我看過唯一一張公司女性CTO帶頭蹲著陪訪客拍照的照片，氣度非凡! 問飽了問

回到台北我沉澱了幾天，直到今天才終於有機會把LINE在本年度位於東京八方園舉辦的LINE Developer Day 2018盛會作一個筆記整理。 我若將整個活動稱之為『 奢華 豐盛的技術之旅』我想應該一點都不為過。為何寫了又槓掉了奢華二字? 這似乎有點不容易解釋。 因為整個活動的體驗，實在讓我難以用一句話一個形容詞就精準描述。雖說這畢竟是一個技術盛會，講奢華可能有點Over，但在豐盛中卻總讓人覺得有一抹低調的奢華感。別以為只是吃好住好的那種豐盛，身為技術宅對於這種身外之物並沒有太多欲求，那到底特別在何處? 且讓我娓娓道來… 由於身為LINE API Expert，今年LINE邀請我們參加了這三天兩夜的技術之旅，第一天晚上Evan Lin(LINE Technical Evangelist)被我們這群來自台北的API Experts一夥人強押作陪，在下班後被逼著一同前往體驗和牛吃到飽的快感。沒聽錯，和牛吃到飽，聚會還沒開始就已經體驗到第一種『豐盛』了。 怎麼會只有一張照片? 因為其他的都已經在來不及拍照前被餓狼般的API Experts們給吞食了，直到酒足飯飽，上面這盤其實已經有些吃不下了，才『淪落到』被拍照的地步。 但畢竟和牛吃到飽不是重點，只是奢華中的小小點綴，頂著些許微醺回到飯店看著夜景好好放鬆，準備迎接明天正式的活動才是王道： 飯店雖位於新宿鬧區內，然而從房內落地窗俯瞰著窗外東京的夜色，街道上的喧鬧仿佛已被置身度外，只剩下夜色中來來往往的JR列車的身影。 這樣的靜懿讓你很容易入睡。 第二天一早，就是重頭戲的開始了，看到入口處的這尊門牌，你可能會以為我們來到了什麼煮酒論英雄的深山曠野? 不然，其實會場『八芳園』距離地鐵站僅僅幾分鐘路程，雖藏身在市區之中，卻是一座擁有一萬坪面積的日本庭園，內部包含自然形成的丘陵、溪流和百年老樹構造出的靜謐氣氛: 過了上面這座石碑，LINE Developer Day 2018的主視覺立刻映入眼簾： 入園之後的小徑，真的會讓你以為來到了世外桃源，這像是個辦技術大會的地方嗎? 實在讓人驚豔： 為Developers在這種地方舉辦個年度技術盛宴，其實也是我一直很想做，卻始終無法實現的夢想，沒想到這次LINE在日本東京給實現了。把位於技術前線的科技宅們，聚集到這一個充滿日式古意的所在，這中間的對比，正如同這家融合了日韓文化和美式風格的企

你本以為今生不會再在.NET WebForm開發的旅途上用到Google Account做網站SSO的身分驗證，但時代的巨輪就是這麼幽默… 這一篇很快地談怎麼用C#做Google帳號的SSO(Single Sign On)，依照我們前面曾介紹過關於 OAuth與SSO 的資訊，你應該已經知道用OAuth做網頁SSO需要兩個重要資訊，就是Client ID與Client Secret，在GCP平台上，你可以透過 https://console.cloud.google.com 這網站來建立一個應用程式(專案)，建立後第一件事情就會引導你到底下畫面： 要我們選擇? 毫無懸念的我們選擇OAuth用戶端ID，接著會要求你先在OAuth同意畫面上做一些設定。 什麼叫做OAuth同意畫面? 就是那個你的網站要求人家用Google帳號登入時，跟人家要求權限存取他的資訊，請他按下『同意』的那個畫面，而該頁面中的相關資訊就是在底下設定的： 最主要的是設定應用程式名稱，這個畫面設定完之後，底下有幾個按鈕，按下儲存之後(順帶一提，Google要求你正式啟用前要申請驗證，否則只能測試)，會跳出底下畫面： 我們的SSO是做給網站用的，上圖A的部分理當選Web應用程式，然後底下B和C你應該樣知道怎麼填，最主要的就是C的redirect_uri，請特別注意，即使是以lcoalhost進行測試的階段，你還是要正確地填寫這個redirect_uri，一般來說測試階段很可能是類似底下這樣localhost的url: http://localhost:63577/SSOcallback.aspx 這個位置是指，你的用戶完成Google登入後，要導回你網站的哪一頁。完成之後按下建立，我們的目標是拿到底下兩組key: 前置作業完成無誤後，我們要撰寫一個登入頁面，也就是你的網頁要讓Google用戶登入的那個引導頁面，例如我們範例中是： 按下這個按鈕，網頁會被引導到Google做的登入畫面，我們有了剛才建立好的Client ID，要組一個這樣的redirect登入url不難，程式碼如下： 上面這段javascript，從14-22行就是組出將用戶轉向Google登入的url，然後redirect過去，其中19行的client_id，當然就是我們剛才在GCP平台上申請個半天的應用程式Client ID，而red

VSTS最近改名為Azure DevOps，其實對用戶的影響不大，原則上VSTS每季都在更新，所以有新功能不足為奇。 但在這段時間UI上卻大改了一番，這導致先前很多寫的blog和錄製的教學影片有需要調整，但調整非一朝一夕，所以還是得先讓大家知道一下切換新舊UI的方法。 如果你是舊版的UI，大概長得像底下這樣： 至於新版的UI，則是： 某些舊的專案，你進去之後可能還停留在舊版UI，其實你也可以手動切換成新版UI，接換的地方藏在右上角你的頭像底下： 其實，進去之後你會發現，一堆新舊功能的切換都放在這裡： 你可以選擇為整個組織或個人切換(上圖A)，至於UI的切換則是在上圖B所標示的位置。如此一來，你就可以隨心所欲地為整個團隊或你個人切換喜歡的UI囉。