2018年10月31日 星期三

使用Google登入做Web應用程式單一登入身分驗證(SSO)

你本以為今生不會再在.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,而redirect_uri當然也非得與剛才我們在GCP後台設定的完全相同不可。

設定完成後,當上面這個頁面被執行後,你應該會發現,只要用戶點選了該按鈕,就被導引到Google登入畫面:

用戶在這個畫面上,可以選擇用已經登入過的Google帳號登入,或是用其他Google帳號,選擇好並完成Google登入與身分驗證之後,瀏覽器會被導回我們一開始在Google後台登記的http://localhost:63577/SSOcallback.aspx頁面,當執行到我們在該頁面早就寫好的程式碼(如後)之後,即可從QueryString取得code(19行),並且呼叫GetTokenFromCode()來換得token(第23行):

取得token之後,你就可以做任何事情了,像是拿token取得用戶的email或照片,底下Button1中的程式碼就是這樣做:

取得後的資料大概長底下這樣:

好啦,就這樣,知道OAuth的原理之後,其實一切都非常簡單。你的網站已經可以輕鬆的讓用戶以Google帳號登入了。

完整source code位於: https://github.com/isdaviddong/GoogleSSO 
注意:測試本範例你必須把default.aspx以及SSOcallback.aspx頁面中的所有ClientID與ClientSecret與redirecr_uri換成你自己申請的,否則將無法正確執行("Unauthorized")。

hope it helps.

--------------------------------------------------------------
如果需要詢問問題或即時取得更多相關訊息,可按這裡加入FB專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

2018年10月18日 星期四

如何手動切換到Azure DevOps(VSTS)的新UI?

VSTS最近改名為Azure DevOps,其實對用戶的影響不大,原則上VSTS每季都在更新,所以有新功能不足為奇。

但在這段時間UI上卻大改了一番,這導致先前很多寫的blog和錄製的教學影片有需要調整,但調整非一朝一夕,所以還是得先讓大家知道一下切換新舊UI的方法。

如果你是舊版的UI,大概長得像底下這樣:

至於新版的UI,則是:

某些舊的專案,你進去之後可能還停留在舊版UI,其實你也可以手動切換成新版UI,接換的地方藏在右上角你的頭像底下:

其實,進去之後你會發現,一堆新舊功能的切換都放在這裡:

你可以選擇為整個組織或個人切換(上圖A),至於UI的切換則是在上圖B所標示的位置。如此一來,你就可以隨心所欲地為整個團隊或你個人切換喜歡的UI囉。

2018年10月14日 星期日

就說了,敏捷不要推動!


一個下午,以前公司的同事跑來,哭訴著在新工作中推動敏捷發生的種種慘況。

我盡可能的耐心聽完,跟大家知道的一樣,不外乎是一些常碰到的現象,長官們不支持,團隊成員後期的配合度也越來越低,數個月後看不到任何果效,反而被客戶抱怨開發品質變差,一直要配合測試『半成品』…凡此種種,導致了一個很顯而易見的結果:半年後團隊回到了原本習慣的開發方式,他則是離職謝罪,業界再添一個失敗的敏捷案例。

他說:『我不後悔,如果再來一次,我依舊會堅持推動敏捷!』

我笑笑地看著他,問道:『我以前說要怎麼推動敏捷,記得嗎?』

他看了看我,想了一會,回答:『你好像沒說過,你說的是…不要推動!』

『是啊,我以前說了,敏捷「不要推動! 」,我不是開玩笑的!』我笑著說。


『特別是當你的主管腦袋裡面根本沒有敏捷時,推動是沒用的』我喝了一口咖啡『反過來說,當你的團隊腦袋裡充滿敏捷時,根本不用推動,屆時你想攔都攔不住。』
 
『那不推動能怎麼辦呢?專案狀況很糟,難道放著不理嗎?』他有點不服氣。

『不是的,平常的時候,你得要帶風向。』

『 帶風向?』他看著我,一幅不可置信的樣子。『這些人的腦袋跟XX(消音處理)做的一樣,我怎麼可能帶得了風向? 』他又補了一句『別開玩笑了。』

『你有沒有想過』我問他:『如果你連風向都帶不了,又怎麼可能推動呢?』話說完,他傻了。

『所以,關於推動,你首先要做的是其實是擴張影響力。』我接著補充道:『帶出影響的方法有很多種,除了你自己以身作則的示範之外,推薦好的書、適合的研討會、有預算的話外請講師上課、在企業內安排敏捷成功案例分享...有很多事情可以做。基本上就是,洗腦。』
  
『我認識某家公司的CIO,這幾年舉凡公司會議,開口必提microservices、docker,即便他不確切知道這些term到底是什麼,或許跟他心裡想的有所差異,但不論如何,這些名詞朗朗上口,這也是洗腦成功的案例…』我說道。
 
他打斷我:『但是…如果主管們的腦袋裡沒有敏捷,那到底塞了些甚麼XX(再次消音處理)?』
 
我回答:『每一個層級的主管,在意的往往有所不同,很多人以為主管愛打高空,但原則上愈高層的主管,關切的事情卻總是愈務實(現實),你必須知道他們在想什麼,然後用他們的語言去和他們對話...』我接著說:『你看敏捷這個字很美,超級正面,似乎沒人不喜歡,沒錯,沒有人會反對敏捷。但真實情況是,大家擁抱敏捷,但根本不想改變,而大多數老闆的腦袋裡其實只有Cash Flow(現金流),你的敏捷能帶來立即的現金流嗎? 如果不行,對他來說意義就相當有限。』

『如果你推廣了半年的敏捷,但老闆看到的反而是眼下的現金流逐漸減少,那你覺得結果會如何?』我問。
 
『我們再換一個角色,拿HR主管來說,倘若你告訴他敏捷能夠面對變化、在乎價值,對她來說這可能跟天書一樣不知所云』我頓了一會兒,說道:『我們來練習一下好了,假設我要讓HR主管接受敏捷,你覺得我會怎麼做呢?』

他呆了半餉。見他沒反應,我回答:『我必須告訴她,企業接受了敏捷,將可以在既有的薪資預算內,聘請到更優秀的開發人員,因為開發人員喜歡和優秀的人一起在好的環境中共同工作...這件事情才是她關切的重點,她一聽,或許就有機會稍稍開始被打動...』

他插嘴:『等…等等,你是說…』『敏捷的開發人員比較便宜?』他瞪大眼睛看著我。

我立刻澄清:『我沒這麼說,別曲解我的意思』我補充:『你知道嗎? 有一個統計,影響大多數員工選擇留下來或離開的關鍵因素,不是薪資、也不是老闆,而是…』

『同事』他搶著回答。

『沒錯,你答對了。』

我說:『人們不是不會考慮薪資和主管的好壞,但往往影響員工離職或留下與否的最大因素,是同事之間的相處和團隊氣氛。採用敏捷開發的團隊,在其他客觀條件都一樣的狀況下,總是擁有比較好的合作氛圍,這已經是無庸置疑的事實了。』

『那為什麼我們的團隊氣氛那麼糟呢?』他嘆了口氣。

『這要問你囉,你真的覺得他們已經準備好開始了嗎?還是其實是你逼著大家去實現你心中那個理想的敏捷呢?』我問。

他默然不語。

我打開NB那張我很喜歡的投影片:

『還記得吧。』我問他。

頓了一下之後我接著道:『舉凡在組織內想要推動的變革,都勢必會遇到阻力,你要記得,沒有任何人喜歡自己的工作習慣和模式被外力改變,小從申請一枝鉛筆的流程、或是更換一套ERP系統、大至推動一個新的工作方法或工具,都是一樣的。多趁勢而為少逆勢而行,時不我予或局勢尚未明朗之前,別急著推動變革,你得先建構出影響力。別讓自己變成吃力又不討好的失敗案例。』

『還記得我上次說過怎麼建立影響力吧?』我問。『呵,我記得硬碟裡還有你那份slides…』他回答。我說:『先吃飯吧,待會我再談談關於影響力的部分…』

後記:
我不知道將來他換了新工作之後,是否又會忍不住想要改變別人的工作習慣,不過至少,下一次他應該會有更聰明的做法才是。 

------------------------------
本系列文章索引位於 https://studyhost.blogspot.com/2019/02/index-of.html
相關教育訓練: http://www.studyhost.tw/NewCourses/ALM
若這篇文章對您有所幫助,請點選這裡加入FaceBook專頁按讚並追蹤,也歡迎您幫我們分享出去,謝謝您的支持。

2018年10月13日 星期六

在azure vm上加掛SSD磁碟機

隨著科技的進步,背在身上的設備有越來越小越來越輕的趨勢,這個月入手了一台surface go,十吋的大小讓你很容易放入側背的包包裏面,不過他的運算能力也有一定的限制,也因為如此,最近在azure vm上的使用越來越兇,一般開發或是日常的工作,可能都在azure vm上搞定了。

最近因為一些操作上的需要,想要在azure上擴充一台SSD Disk,隨手把流程紀錄一下。在Azure上要擴充一顆硬碟相當容易,只需要在portal選擇磁碟的部分:

按下新增之後,你會看到『建立磁碟』的選項:

點選後會看到底下畫面:

上圖一資源群組的部分,我會建議你把建立出來的disk放在跟VM一樣的群組中,方便未來的管理。而圖中二的大小,當然就影響價格,你可以參可底下的連結:
https://azure.microsoft.com/zh-tw/pricing/details/managed-disks/

大概一分鐘左右會建立完成,完成後你只需要回到磁碟管理畫面中,從下拉的選項中就可以找到你剛才建立的磁碟,點選他後按下儲存即可:

你可以能會希望,這樣操作之後,進入VM就看到一顆活生生的硬碟? 無奈事與願違:

你並不會看到立刻出現了新的硬碟,這是正常的,就好比你自己組裝電腦,把硬碟接上去之後,還得做一些動作對吧? 沒錯,請執行diskmgmt.msc :

進入磁碟管理畫面中之後,你會看到剛建立的硬碟應該會被找到:


後面的動作就跟當年自己組裝電腦完全一樣囉,把硬碟加入並且指派磁碟機代號,完成format之後,就會看到該硬碟出現了:

其實還蠻簡單的對吧。

隨著身上的設備越來越輕,網路的連線越來越快,我們正邁向一個所有事情都可以在雲上搞定的時代,唯一需要注意的是你的荷包夠不夠深,信用卡額度夠不夠大而已…

enjoy it.

2018年10月10日 星期三

看看誰能存取你的Microsoft Account

這幾天在整理帳號。

我們先前介紹過Microsoft Graph API,你應該知道MS Account支援OAuth進行授權和身分驗證。也就是說,你透過你的MS Account登入某些網站或系統時,該應用程式可能會跟你索取你帳號的一些使用權限,那個畫面往往長得像是底下這樣(其實不只MS Account,你的google account更常被這樣使用):

最基本的,就是跟你索取你帳號的個人資料(像是姓名、email…etc.),當你用某個MS帳號登入第三方系統時,這是最常見的狀況。

但除此之外,你可能在按下『是』的時候,還同時間授予了該應用一些權限,諸如存取你的通訊錄、行事曆、或是你的onedrive檔案資料夾…等(這些權限的索取都會顯示在上面的清單中,但很多人沒有特別留意)。

一般來說,這些應用程式企圖取得這些授權並非惡意,只是為了做一些系統整合,像是把某一個預約添加到你的行事曆中、或是把手機上的照片存到你的Onedrive內這樣。

但,當某些App我們不常使用(或是該App被認為有安全性疑慮)時,你最好重新檢視一下你到底開了哪些權限給甚麼App?

底下這個位置,可以看到你到底授權了哪些應用程式存取你的MS Account。

https://account.live.com/consent/Manage

出現的畫面類似底下這樣:

你可以看到那些應用程式(或網站)可以存取你的帳號,點選編輯,將出現該應用程式可以存取你哪些資訊的細節:

畫面中列出最近一次的使用時間其實蠻貼心的,這有助於讓你更放心的決定是否要把授予該應用程式的權限刪除,一旦刪除了,該應用程式就無法拿著token去取得你的資料了。

當然,如果你要重新授予該應用程式權限,大部分的狀況下只需要重新用你的MS Account帳號登入該應用程式即可,如果你不很確定,可以看看最近一次的使用日期,如果很久沒用了,應該可以大方的將授予該應用的存取權限刪除。

趁著假日,趕快看看你的帳號到底給了哪些人(app/網站)哪些存取權限吧。

2018年10月4日 星期四

配合asp.net快速使用ngrok

最近常常需要透過ngrok來偵錯WebHook或WebAPI,前面曾經介紹過,當你下載了該工具之後,可以在DOS prompt下一個類似底下這樣的簡單指令來讓你的localhost網站能夠被外界讀取:

ngrok http 31217 -host-header="localhost:31217"

執行後你會看到類似底下的畫面:

這表示,上面這樣的指令已經可以讓ngrok把你的 http://localhost:31217 對應到 http://c5bfcbb9.ngrok.io

這樣的動作做久了之後,常常打command line不免覺得很煩,所以乾脆寫一個簡單的batch file:

透過然後把上面這個簡單的batch file放在桌面上(或是其他你順手的位置),需要ngrok為你服務時,只需要執行它:

輸入五位數的port NO.之後,就會自動運行ngrok囉…

hope it helps.

2018年10月3日 星期三

用滑鼠右鍵在檔案總管資料夾中開啟Command Line

我小時候很喜歡tom hanks演的一部電影: 阿甘正傳,劇裡面有一句對話: life is like a box of chocolates. you never know what you're gonna get.

曾經我以為,在這個最輝時期的市占率超過九成的Windows作業系統中,我會用到command line的機會應該越來越少了,但人生,就像阿甘說的,你永遠不知道接下來會碰到什麼。

好吧,我碰到的是,我已經開cmd line開到很煩的程度了,而且我時常必須在特定資料夾底下開command line,我一開始傻傻的先開啟prompt,然後透過CD指令切換資料夾。

這總蠢事做久了之後,我就想我必須要擁有一個功能。那就是,我想要在檔案總管裡,按下滑鼠右鍵,就出現底下這樣的選單『在此開啟CmdLine』:

然後點選之後,就自動幫我開啟prompt並且直接切換到該資料夾:

that’s it. 我要的不多。

如何實現這個功能? Windows 的秘密總是在機碼裡:

只要修改你電腦上的registry,加上上面這些schema即可。如果你想比較快的完成這件事情,把上面這些指令存成一個副檔名為.reg的檔案,我已經幫你存好了:

http://arock.blob.core.windows.net/blogdata201810/%E5%9C%A8%E6%AD%A4%E9%96%8B%E5%95%9FCommand%20Line.reg

然後去執行它,你會看到:

這很正常,因為修改機碼是一件危險的事情,特別是從網路上來源不明的設定檔。如果你很有勇氣地按下Yes,那會看到:

好了,現在你在檔案總管中,點選特定資料夾按下滑鼠右鍵,就會出現這個選項了:

enjoy it.

Related Posts Plugin for WordPress, Blogger...

熱門文章