建置一個使用「FaceBook」、「Google」帳號登入的「Asp.net MVC」 網站。

-

一、介紹

本文章將會介紹建置一個使用「FaceBook」、「Google」帳號登入的「Asp.net MVC」 網站。

二、OAuth 2.0

「OAuth 2.0」是一個開放標準，允許使用者讓第三方應用程式取得該使用者在某個應用程式上的資訊，無須取得該用戶的密碼、帳號。

三、開發環境

  • IDE：Visual Studio 2019 Community
  • 語言：C#
  • .net framework：4.8

四、操作步驟

圖一、登入「FaceBook」，設定 重新導向URL，詳細請參考如何取得 FaceBook 的「應用程式編號」、「應用程式密鑰」



圖二、登入「Google」，設定 URL，詳細請參考 使用「Google API Console」取得 OAuth 2.0 client credentials



圖三、開啟「Visual Studio 2019 Community」建立 ASP.NET Web 應用程式



圖四、輸入專案名稱



圖五、點選右上角的 變更，在選擇 個別使用者帳戶，再按確定



圖六、開啟 Web.config，確認 <remove name="FormsAuthentication"/> 存在

<remove name="FormsAuthentication"/> 此設定會讓Asp.net 順利轉址至「FaceBook」、「Google」登入頁面

 


圖七、開啟 App_Start\Startup.Auth.cs 輸入 Oath2 的設定，再點選 IIS Express



圖八、點選登入



圖九、點選Google



圖十、輸入帳號、密碼後登入



圖十一、登入成功




五、參考

  1. 使用「Google API Console」取得 OAuth 2.0 client credentials
  2. 如何取得 FaceBook 的「應用程式編號」、「應用程式密鑰」
  3. facebook developer
  4. OAuth 2.0
  5. facebook 存取權杖
  6. Using OAuth 2.0 to Access Google APIs
  7. Google API Console
  8. 使用「Visual Studio 2019」建置一個有 Mvc 和 Web Api 架構的網站

留言

張貼留言

這個網誌中的熱門文章

使用「Google API Console」取得 OAuth 2.0 client credentials

-
圖片
一、介紹 本文章將會介紹如何使用「Google API Console」取得 OAuth 2.0 client credentials。 二、OAuth 2.0 「OAuth 2.0」 是一個開放標準，允許使用者讓第三方應用程式取得該使用者在某個應用程式上的資訊，無須取得該用戶的密碼、帳號。 三、教學步驟 圖一、使用瀏覽器進到 Google API Console 圖二、點選 憑證 後再點選 建立專案 圖三、輸入 專案名稱 ，再點選 建立 圖四、點選 OAuth 同意畫面 ，點選 外部 ，點選 建立 圖五、輸入 應用程式名稱 、 使用者支援的電子郵件 、 電子郵件地址 ，點選 儲存並繼續 圖六、點選 儲存並繼續 圖七、點選 儲存並繼續 圖八、按下 返回資訊主頁 圖九、點選左邊選單  憑證 ，點選 建立憑證 ，點選 OAuth 用戶端 ID 圖十、應用程式類型 選擇  網頁應用程式 ，輸入 名稱 、 重新導向 URI 、按下 建立 圖十一、取得 用戶端編號 、 用戶端密碼 四、參考 Using OAuth 2.0 to Access Google APIs Google API Console OAuth 2.0 建置一個使用「FaceBook」、「Google」帳號登入的「Asp.net MVC」 網站。
閱讀完整內容

使用「Visual Studio 2019」建置 Windows 服務

-
圖片
一、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 二、建置 Windows 服務專案 圖、開啟 Visual Studio 2019 ，點 建立新的專案 圖、選擇 Windows 服務(.net framework) 圖、輸入相關資訊 圖、選擇 Service1.cs > 滑鼠右鍵 > 檢視原始碼，即可看到 Windows 服務 起初的原始碼 圖、對 專案 > 滑鼠右鍵 > 重建，即可在 bin 資料夾底下見到建置好的結果 三、登錄 Windows 服務 圖、輸入登錄指令 指令 sc create 服務名稱 binpath=D:\服務路徑\XXX.exe start=auto 圖、Windows 服務畫面即可看到剛剛的服務 四、相關連結 使用「SC」指令 登錄、刪除 Windows 服務 五、參考 sc 指令
閱讀完整內容

「Katalon Recorder」簡化測試腳本撰寫的工具

-
圖片
一、介紹 「Katalon Recorder」 是一款錄製 Web UI 測試 工具，安裝於 Chrome、FireFox 瀏覽器。 Katalon Recorder 錄製瀏覽器的操作過程，並可產生 C#, Java, Python 的測試原始碼，讓工程師更易撰寫 WEB UI 測試。 此文章將介紹使用 Katalon Recorder 錄製腳本，並把腳本移至 Visual Studio 2019 做單元測試。 二、腳本內容 開啟 Google 搜尋關鍵字 測試 ，檢視第二筆搜尋結果的描述是否為 「這是一個根據弗洛伊德焦慮類型理論…」 。 三、 Nuget 套件 MSTest.TestAdapter ( 測試專案預設會安裝 ) MSTest.TestFramework ( 測試專案預設會安裝 ) Selenium.WebDriver Selenium.WebDriver.ChromeDriver 四、教學步驟 圖一、安裝套件。 圖二、 Chrome 瀏覽器安裝 Katalon Recorder 。 圖三、開啟 Katalon Recorder ( 注意右上角的 ICON ) 圖四、開始錄製腳本 圖五、操作瀏覽器(此時 Katalon Recorder 就會錄製腳本) 圖六、停止錄製 圖七、產生 C# 程式碼 圖八、將程式碼貼到 測試專案 圖九、將 FirefoxDriver 改成 ChromeDriver ，讓單元測試使用 Chrome 瀏覽器。 圖十、執行 測試 。 圖十一、測試結果。 四、相關連結 Selenium 前端 UI 自動化測試、爬蟲程式 最佳利器 五、參考 Katalon Recorder Katalon Recorder 下載 ( Chrome 擴充功能 )
閱讀完整內容

如何傳送訊息至「Teams」的 Channel

-
圖片
一、介紹 Microsoft Teams 為微軟旗下的通訊軟體，它整合聊天、視訊、Office 365、Execel、Word、OneNote…等功能。 比爾蓋茲提出 Skype for Business 的想法，因此有了 Microsoft Teams 這個產品，為了與 Slack…等商用軟體相抗衡。 二、 Nuget 安裝 Newtonsoft.Json 12.0.3 三、Incoming WebHook 設定 訊息可藉由 Teams 的應用程式 Incoming WebHook 傳輸訊息 圖、點擊 … > 搜尋 Incoming WebHook > 點擊 Incoming WebHook 圖、點擊 新增至團隊 圖、選擇 你的頻道 > 點擊 設定連結器 圖、輸入 WebHook 名稱 > 點擊 建立 圖、複製 WebHook Url > 點擊 完成 四、操作步驟 圖、貼上範例碼，修改成你的 WebHook Url，執行後即可在 Teams 看到 測試訊息 的訊息 範例碼 using (var wc = new WebClient()) { wc.Headers.Add("Content-Type", "application/json"); var data = new { text = "測試訊息" }; var jsonStr = JsonConvert.SerializeObject(data); var bytes = System.Text.Encoding.UTF8.GetBytes(jsonStr); var res = wc.UploadData("https://你的 WebHook Url", bytes); Console.WriteLine(System.Text.Encoding.UTF8.GetString(res)); } 圖、執行結果 五、相關連結 使用「Visual Studio 2019」建置 主控台 Console 應用程式 使用「LINE Messaging API」發送 line 訊息 ...
閱讀完整內容

使用「NLog」來記錄應用程式的大小事吧

-
圖片
一、介紹 NLog 是 .net 下的日誌套件，因為只要一句程式碼即可紀錄日誌，因此筆者常使用它記錄應用系統的錯誤、資訊…等。 二、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 三、 Nuget 安裝套件 NLog NLog.Config NLog.Schema 圖、套件清單 四、操作步驟 圖、修改 NLog.config 的 target 、 logger 元素 NLog.config 設定 < targets > < target xsi:type = "File" name = "f" fileName = "${basedir}/logs/${shortdate}.log" layout = "${longdate} ${uppercase:${level}} ${message}" /> </ targets > < rules > < logger name = "*" minlevel = "Debug" writeTo = "f" /> </ rules > 圖、使用 nlog 原始碼 c# public void LogTest() { var log = LogManager.GetCurrentClassLogger(); log.Info($"Test"); } 圖、執行後結果 五、相關連結 「NLog」與「Sql Server」資料庫的完美搭配 六、參考 NLog Tutorial NLog Nuget
閱讀完整內容

使用「LINE Messaging API」發送 line 訊息

-
圖片
一、介紹 LINE 是由LINE株式會社所開發的即時通訊平台，也是目前台灣目前最高使用率的社群平台。 二、登入 LINE console 圖、打開瀏覽器，進到 LINE Developers Console 登入頁 三、建立 Provider 和 Channel 圖、按下 Create ，輸入 Provider name ，再按下 Create 圖、按下 Create a Message API Channel 圖、輸入 Channel name 圖、Channel 資訊 四、webhook 每當LINE用戶加您的 Channel 為好友或是發送訊息，LINE平台透過 HTTP POST 發送 webhook 事件資訊 至您 LINE Developers Console 中所指定的 webhook URL 。 圖、點 Messaging API ，往下拉即可看到 webhook 相關設定 webhook 事件資訊 webhook 事件資訊為JSON格式的資料 點 webhook 的 Verify 按鈕，則會收到如下格式的 webhook 事件資訊。 圖、Verify 按鈕 {“events”:[],“destination”:“XXX”} 被加入好友，則會收到如下格式的 webhook 事件資訊。 {“events”:[{“type”:“follow”,“replyToken”:“XXX”,“source”:{“userId”:“XXX”,“type”:“user”},“timestamp”:XXX,“mode”:“active”}],“destination”:“XXX”} 其中 userId 為 加入您好友的用戶ID，此ID會使用於發送訊息。 發送訊息時，則會收到如下格式的 webhook 事件資訊。 {“events”:[{“type”:“message”,“replyToken”:“XXX”,“source”:{“userId”:“XXX”,“type”:“user”},“timestamp”:XXX,“mode”:“active”,“message”:{“type”:“sticker”,“id”:“XXX”,“stickerId”:“XXX”,“packageId”:“XXX”,“stic...
閱讀完整內容

使用「ADO.NET」 進行資料庫的讀取、新增、修改、刪除的操作

-
圖片
一、前言 ADO.NET 是微軟旗下用來連接 資料來源 (例如 Sql Server、XML…等)，並且可以讀取、新增、修改、刪除其中資料的技術。而後 微軟以 ADO.NET 為基礎 推出 Entity Framework ，以筆者的經驗來說，新的專案較常使用 Entity Framework ，但舊的專案則使用 ADO.NET ，因此為了方便記憶而撰寫文章。 二、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 三、範例資料庫 圖、範例資料庫 四、讀取 範例皆使用 參數型 方式操作資料庫，避免 Sql Injection 問題。 圖、範例程式碼 原始碼(C#) var cs = WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString; using (var sc = new SqlConnection(cs)) { sc.Open(); var cc = sc.CreateCommand(); cc.CommandText = $@"SELECT [a1],[a2] FROM [Test] where [Seq] = @Seq"; cc.Parameters.AddWithValue("@Seq", "1"); var ret = string.Empty; var reader = cc.ExecuteReader(); while (reader.Read()) { ret = $"a1={reader[0]}，a2={reader[1]}"; } reader.Close(); return ret; } 圖、執行結果 五、新增 範例皆使用 參數型 方式操作資料庫，避免 Sql Injection 問題。 圖、範例程式碼 原始碼(C#) var cs = WebConfigurationManager.ConnectionStrings[...
閱讀完整內容

「Selenium」前端 UI 自動化測試、爬蟲程式 最佳利器

-
圖片
一、介紹 「Selenium」 讓瀏覽器自動化的工具，可運用於爬蟲程式、前端 UI 自動化測試、Web 應用程式管理..等，支援多種語言如 C#，Java，Perl，PHP，Python..等。 範例程式將介紹如何使用 C# 語言運用 Selenium 撰寫 自動載圖程式 (簡易爬蟲)，讓應用程式開啟瀏覽器，前往 Google 圖片 ，下載 5 張 JPEG 圖檔。 二、 Nuget 套件 Selenium.WebDriver Selenium.WebDriver.ChromeDriver 三、教學步驟 圖一、安裝 Selenium 套件 。 圖二、貼上範例程式 var driver = new ChromeDriver(); //瀏覽器 轉址至 Google圖片 driver.Url = @"https://www.google.com.tw/imghp?hl=zh-TW"; //輸入關鍵字 "Selenium" var searchInput = driver.FindElementByCssSelector(@".gLFyf"); searchInput.SendKeys("Selenium"); //按下 Enter searchInput.SendKeys(Keys.Enter); //抓取圖片清單 var imgTags = driver.FindElementsByTagName("img").ToList(); //取得 5張 jpeg 圖片 var images = imgTags.Select(x => x.GetAttribute("src")).Where(x => x!=null && x.StartsWith("data:image/jpeg;base64,")).Take(5).ToList(); //下載圖片 foreach(var image in images) { byte[] bytes = Convert.FromBase64String(image.Replace("data:image/jpe...
閱讀完整內容

使用 Visual Studio 2019 實作「RESTful API」

-
圖片
一、介紹 REST 是Roy Thomas Fielding博士於2000年博士論文提出的一種軟體架構風格，目的是讓不同軟體、程式於網路互相傳遞資訊。因為它是一種風格而不是規範，依據筆者的經驗會依照當時的專案或公司規定而決定是否完全遵守。 二、專案架構 圖、Visual Studio 2019 專案架構 三、常用的 HTTP Method 代表用意 GET 讀取 PUT 更新 DELETE 刪除 POST 新增 四、RESTful 路由應用 五、使用 Visual Studio 2019 建置 RESTful API 圖、修改 WebApiConfig.cs 原始碼(C#) public static class WebApiConfig { public static void Register(HttpConfiguration config) { // 針對 JSON 資料使用 camel 案例。 config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver(); // Web API 設定和服務 // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == ...
閱讀完整內容