# ASP．NET(Web Form)教學平台 僑光科技大學 資訊科技系 2021/02/22 ~ 2021/6/25 授課老師：高吉隆 電子信箱：[kevinkao888@gmail.com](mailto://kevinkao888@gmail.com) ###### tags: `課程大綱` ---- ## 課程說明 * 專題製作注意事項 * 課程前之準備 * ASP.NET之介紹 * Web Form之概念 * Web Form之實作 * 參考資料 ---- ## 專題製作注意事項 * 教師收集研讀重點至共筆平台 * 請專題生自行研讀，並提出問題 * 操作時請把步驟截圖，貼至此平台 * 必需登入才能編輯 * 並且在平台註記貼文者 --- ## 課程前之準備 * 若電腦等級較慢請安裝較低版本 * 安裝 Visual Studio 軟體 * VS Community 2019：[下載](https://visualstudio.microsoft.com/zh-hant/vs/older-downloads/) * 安裝 SQL Server 軟體 * SQL Server Express：[2016](https://www.microsoft.com/zh-TW/download/details.aspx?id=56840) * SQL Server Management Studio 18：[下載](https://docs.microsoft.com/zh-tw/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver15) ---- ### 安裝 Visual Studio Community 2019 #1 * 安裝前安裝設定  ---- ### 安裝 Visual Studio Community 2019 #2  ---- ### 安裝 Visual Studio Community 2019 #3 * 選擇傳統型與行動裝置：.NET桌面開發，再按安裝  ---- ### 安裝 Visual Studio Community 2019 #4  ---- ### 安裝 Visual Studio Community 2019 #5  ---- ### 安裝 Visual Studio Community 2019 #6 * 選擇暫不登入  ---- ### 安裝 Visual Studio Community 2019 #7 * 啟動 Visual Studio  ---- ### 安裝 Visual Studio Community 2019 #8 * 建立新的專案  ---- ### 安裝 Visual Studio Community 2019 #9 * 選擇Windows Form應用程式(C#/Windows/桌面)  ---- ### 安裝 Visual Studio Community 2019 #10 * 選擇目標Framework .NET 5.0  --- ### 安裝 SQL Server Express 2016 #1 * 選擇安裝類型：基本  ---- ### 安裝 SQL Server Express 2016 #2 * 選擇：接受授權條款  ---- ### 安裝 SQL Server Express 2016 #3 * 選擇：安裝  ---- ### 安裝 SQL Server Express 2016 #4 * 下載安裝封裝  ---- ### 安裝 SQL Server Express 2016 #5 * 正在安裝  ---- ### 安裝 SQL Server Express 2016 #6 * 結束安裝  ---- ### 安裝 SQL Server Management Studio 18 #1 * 選擇位置後按安裝  ---- ### 安裝 SQL Server Management Studio 18 #2 * 安裝進度  ---- ### 安裝 SQL Server Management Studio 18 #3 * 結束安裝  --- ## ASP.NET之介紹 * Visual C# * Windows Desktop * Web * ASP．NET Core Web應用程式 * ASP．NET Web應用程式(.Net Framework) * 空白：建立空白網頁 * Web Form：建立Aspx網頁 * MVC：建立以MVC架構開發網頁 * Web API：建立以API為主的網頁 --- ## Web Form之實作-會員功能 * Demo1-建立內建有會員功能的網頁 * 會員以EMail為帳號 * 密碼預設需含大小寫字母及1個符號 * Demo2-增加會員的欄位 * 以增加使用者名稱欄位為例 * Demo3-使用Google帳號登入 * Demo4-使用Facebook帳號登入 * Demo5-運用GMAIL寄發認證信 * Demo6-啟用忘記密碼和重發認證信 * Demo7-查看資料庫內容 --- ### Demo1-建立內建有會員功能的網頁 * 使用ASP．NET.Identity元件建立  ---- #### Demo1-Step1-建立新專案 * 開啟 Visual Studio Community 2017 * 選擇新增專案如下：  ---- #### Demo1-Step2-選擇專案類型：ASP．NET Web * 選擇C#中的Web，並選ASP．Net Web應用程式 * 輸入專案名稱Demo1，選擇專案路徑，並按確定  ---- #### Demo1-Step3-選擇開發方式：Web Form * 選擇種類：Web Form  ---- #### Demo1-Step4-選擇驗證方式：個別使用者帳戶 * 若驗證方式為無驗證，請改為個別使用者帳戶 * 再按確定，並等待建立專案  ---- #### Demo1-Step5-建立完成請確認檔案 * 專案視窗中有多個資料夾 * 建立好的專案畫面如下：  ---- #### Demo1-Step6-執行結果(電腦版) * 按播放鍵開始執行 * 瀏覽器畫面如下(電腦版)：  ---- #### Demo1-Step7-執行結果(手機版) * 瀏覽器畫面如下(手機版)：  --- ### Demo2-增加會員的欄位  ---- #### Demo2-Step1-建立測試帳號 * 註冊1個測試帳號  ---- #### Demo2-Step2-檢查資料庫內容 * {檢視}=>{伺服器總管}  ---- #### Demo2-Step3-會員資料表的說明 * AspNetUsers：儲存使用者資訊 * AspNetRoles：設定使用者的權限 * AspNetUserClaims：儲存使用者授權的狀態 * AspNetUserLogins：儲存OAuth登入的資訊 * AspNetUserRoles：儲存使用者群組資訊 * 以下為AspNetUsers的紀錄  ---- #### Demo2-Step4-加入新增欄位之定義 * 開啟Models資料夾中的IdentityModels.cs * 在ApplicationUser類別中加入UserTitle ```csharp= public string UserTitle { get; set; } ```  ---- #### Demo2-Step5-在註冊頁中加入輸入欄位1 * 開啟Account資料夾中的Register.aspx * 輸入以下程式： ```htmlembedded= <div class="form-group"> <asp:Label runat="server" AssociatedControlID="UserTitle" CssClass="col-md-2 control-label">使用者名稱</asp:Label> <div class="col-md-10"> <asp:TextBox runat="server" ID="UserTitle" CssClass="form-control" /> <asp:RequiredFieldValidator runat="server" ControlToValidate="UserTitle" CssClass="text-danger" ErrorMessage="必須填寫使用者名稱欄位。" /> </div> </div> ``` ---- #### Demo2-Step6-在註冊頁中加入輸入欄位2 * 開啟Account資料夾中的Register.aspx.cs * 修改以下程式： ```javascript= var user = new ApplicationUser() { UserName = Email.Text, Email = Email.Text, UserTitle = UserTitle.Text }; ``` ---- #### Demo2-Step7-以主控台建立欄位 * {工具}{NuGet封裝管理員}{套件管理器主控台} * 開啟資料移轉功能：Enable-Migrations * 建立移轉程式：Add-Migration "newfields" * 刪除多餘的程式指令 * 更新資料庫：Update-Database ``` PM> Enable-Migrations Code First 移轉已為專案 720VIP 啟用。 PM> Add-Migration "newfields" 正在為移轉 'newfields' 建立結構。 這個移轉檔案的設計工具程式碼包括目前 Code First 模型的快照。這個快照是用於為下一個移轉建立結構時計算模型的變更。如果您對模型進行其他變更，而且想將變更包含在這個移轉中，只要再次執行 'Add-Migration newfields' 就能重新建立結構。 PM> Update-Database 指定 '-Verbose' 旗標，可檢視要套用至目標資料庫的 SQL 陳述式。 正在套用明確移轉: [202102031537475_newfields]。 正在套用明確移轉: 202102031537475_newfields。 正在執行 Seed 方法。 ``` ---- #### Demo2-Step8-重新執行註冊網頁  ---- #### Demo2-Step9-確認欄位及資料是否建立  --- ### Demo3-使用Google帳號登入  ---- #### Demo3-Step1-更新NuGet套件 * 工具>NuGet封裝管理員>管理方案NuGet套件 * 搜尋條件：OWIN，全選後按更新  ---- #### Demo3-Step2-修改瀏覽方式為SSL * 開啟專案的屬性視窗 * 將SSL已啟用改為：True * 開啟專案屬性的視窗，選擇Web * 輸入專案URL為：https://localhost:44300/ * 重新執行網頁，確認網頁已修改完成  ---- #### Demo3-Step3-設定Google API * 進入GCP控制台：[連結](https://console.developers.google.com/) * API服務>OAuth同意畫面：填寫應用程式資訊 * 選擇使用者類型：外部、填寫EMail、上傳Logo  ---- #### Demo3-Step4-建立憑證1 * 選擇類型：OAuth用戶端ID * 選擇應用程式類型：網頁應用程式 * 已授權的 JavaScript 來源 * 輸入：https://localhost:44300 * 已授權的重新導向 URI * 輸入：https://localhost:44300/signin-google * 取得用戶端編號及密碼 * 用戶端編號：000-xoxo.apps.googleusercontent.com * 用戶端密碼：oxoxoxoxoxoxoxoxo ---- #### Demo3-Step4-建立憑證2  ---- #### Demo3-Step5-輸入用戶端編號及密碼 * 開啟App_Start資料夾中的Startup.Auth.cs * 註解掉以下幾行，並輸入(請替換成自已的) * 用戶端編號：000-xoxo.apps.googleusercontent.com * 用戶端密碼：oxoxoxoxoxoxoxoxo ```csharp= app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions() { ClientId = "000-xoxo.apps.googleusercontent.com", ClientSecret = "oxoxoxoxoxoxoxoxo" }); ``` ---- #### Demo3-Step6-重新執行登入頁面 * 出現Google登入選項，點選Google登入 * 出現Google登入帳號和密碼畫面 * 登入正常會出現輸入登入之信箱 * 若未重覆，則會正常登入  ---- #### Demo3-Step7-確認資料表新增紀錄 * 請確認以下2個資料表 * AspNetUsers： * AspNetUserLogins：   --- ### Demo4-使用Facebook帳號登入  ---- #### Demo4-Step1-建立Facebook應用程式 * 進入Facebook開發者平台：[連結](https://developers.facebook.com/apps/) * 建立應用程式選擇類別：打造互聯體驗  ---- #### Demo4-Step2-輸入應用程式資訊 |輸入應用程式名稱及信箱|確定非機器人操作| |:-:|:-:| ||| ---- #### Demo4-Step3-設定Facebook登入 * 選擇Facebook登入 * 選擇應用程式平台：網站 * 填寫電子信箱、上傳Logo * 輸入有效的Oauth重新導向URI ```htmlembedded https://localhost:44300/signin-facebook ```  ---- #### Demo4-Step4-取得應用程式編號及密鑰 * 應用程式編號：000000000000 * 應用程式密錀：oxoxoxoxoxox  ---- #### Demo4-Step5-輸入應用程式編號及密鑰 * 開啟App_Start資料夾中的Startup.Auth.cs * 註解掉以下幾行，並輸入(請替換成自已的) * 應用程式編號：000000000000 * 應用程式密錀：oxoxoxoxoxox ```csharp= app.UseFacebookAuthentication( appId: "000000000000", appSecret: "oxoxoxoxoxox"); ``` --- ### Demo5-運用GMAIL寄發認證信 * 系統預設為註冊後立即可登入使用 * 改為註冊後透過寄發認證信，才能登入  ---- #### Demo5-Step1-產生及使用應用程式密碼 * 打開Google帳號：[連結](https://myaccount.google.com/) * 安全性->兩步驟驗證：開啟 * 安全性->應用程式密碼：1組密碼  ---- #### Demo5-Step2-設定應用程式密碼 * 選取應用程式：郵件 * 選取裝置：Windows電腦 * 產生：並記下密碼  ---- #### Demo5-Step3-修改網站設定檔 * 打開根目錄中的Web.config * 於configuration區段加入以下程式 * 修改Google E-Mail帳號 * 修改應用程式密碼 ```xml= <appSettings> <add key="emailServiceUserName" value="username@gmail.com" /> </appSettings> <system.net> <mailSettings> <smtp from="username@gmail.com" deliveryMethod="Network"> <network host="smtp.gmail.com" password="1234567890123456" port="587" userName="username@gmail.com" enableSsl="true" /> </smtp> </mailSettings> </system.net> ``` ---- #### Demo5-Step4-修改寄信程式 * 打開App_Start中的IdentityConfig.cs * 修改SendAsync函數 * 新增configSendGridasync函數 ```csharp= public async Task SendAsync(IdentityMessage message) { await configSendGridasync(message); // return Task.FromResult(0); } private async Task configSendGridasync(IdentityMessage message) { MailMessage mailMessage = new MailMessage(ConfigurationManager.AppSettings["emailServiceUserName"], message.Destination); mailMessage.Subject = message.Subject; mailMessage.IsBodyHtml = true; mailMessage.Body = message.Body; SmtpClient client = new SmtpClient(); client.SendCompleted += (s, e) => { client.Dispose(); }; await client.SendMailAsync(mailMessage); } ``` ---- #### Demo5-Step5-修改註冊網頁 * 打開Account中的Register.aspx.cs * 修改CreateUser_Click函數 ```csharp= if (result.Succeeded) { string code = manager.GenerateEmailConfirmationToken(user.Id); string callbackUrl = IdentityHelper.GetUserConfirmationRedirectUrl(code, user.Id, Request); manager.SendEmail(user.Id, "確認您的帳戶", "請按一下此連結確認您的帳戶 <a href=\"" + callbackUrl + "\">這裏</a>."); if (user.EmailConfirmed) { signInManager.SignIn(user, isPersistent: false, rememberBrowser: false); IdentityHelper.RedirectToReturnUrl(Request.QueryString["ReturnUrl"], Response); } else { ErrorMessage.Text = "信件已經寄至你的信箱。請收信而且確認你的帳號並完成註冊程序。"; } } else { ErrorMessage.Text = result.Errors.FirstOrDefault(); } ``` * 若需修改主旨、認證信內容，請於此修改 ---- #### Demo5-Step6-修改登入後的判斷 * 打開Account中的Login.aspx.cs * 修改Login函數 ```csharp= if (IsValid) { var manager = Context.GetOwinContext().GetUserManager<ApplicationUserManager>(); var signinManager = Context.GetOwinContext().GetUserManager<ApplicationSignInManager>(); var user = manager.FindByName(Email.Text); if (user != null) { if (!user.EmailConfirmed) { FailureText.Text = "無效的登入嘗試。你必需有一個已驗證過信箱的帳號。"; ErrorMessage.Visible = true; // 若需重送確認信，可以手動顯示 // ResendConfirm.Visible = true; } else { var result = signinManager.PasswordSignIn(Email.Text, Password.Text, RememberMe.Checked, shouldLockout: false); switch (result) { // 其中幾行不變 } } } } ``` ---- #### Demo5-Step7-測試是否收到認證信 * 重新測試註冊一個新帳號 * 註冊完請確認無法可立即登入 * 必需收到認證信，點擊認證網址才能登入 * 該帳戶之EmailConfirmed欄位值：1 |收到認證信|認證成功| |-|-| ||| --- ### Demo6-忘記密碼發送重設密碼信件 * 忘記密碼：可重新寄發重設密碼網址 |1.登入時出現按鈕|2.忘記密碼畫面| |---|---| ||| ---- #### Demo6-Step1-修改網頁程式 * 打開Account中的Forgot.aspx.cs * 修改Forgot函數：取消3行註解 ```csharp= string code = manager.GeneratePasswordResetToken(user.Id); string callbackUrl = IdentityHelper.GetResetPasswordRedirectUrl(code, Request); manager.SendEmail(user.Id, "重設密碼", "請按 <a href=\"" + callbackUrl + "\">這裏</a> 重設密碼."); ``` ---- #### Demo6-Step2-修改網頁版面和程式 * 打開Account中的Login.aspx * 修改HyperLink元件：取消1行註解 ```htmlmixed= <%-- 一旦您的帳戶確認啟用了密碼重設功能請加以啟用 --%> <asp:HyperLink runat="server" ID="ForgotPasswordHyperLink" ViewStateMode="Disabled">忘記密碼?</asp:HyperLink> ``` * 打開Account中的Login.aspx.cs * 修改Form_Load函數：取消1行註解 ```csharp= // 一旦您啟用了帳戶確認以使用密碼重設功能，則會啟動此項目 ForgotPasswordHyperLink.NavigateUrl = "Forgot"; ``` ---- #### Demo6-Step3-寄發重設密碼郵件 * 打開Account中的Login.aspx.cs * 新增SendEmailConfirmationToken函數 ```csharp= protected void SendEmailConfirmationToken(object sender, EventArgs e) { var manager = Context.GetOwinContext().GetUserManager<ApplicationUserManager>(); var user = manager.FindByName(Email.Text); if (user != null) { if (!user.EmailConfirmed) { string code = manager.GenerateEmailConfirmationToken(user.Id); string callbackUrl = IdentityHelper.GetUserConfirmationRedirectUrl(code, user.Id, Request); manager.SendEmail(user.Id, "確認您的帳戶", "請按一下此連結確認您的帳戶 <a href=\"" + callbackUrl + "\">這裏</a>."); FailureText.Text = "信件已經寄至你的信箱。請收信而且確認你的帳號並完成註冊程序。"; ErrorMessage.Visible = true; ResendConfirm.Visible = false; } } } ``` ---- #### Demo6-Step4-顯示重送確認信按鈕 * 打開Account中的Login.aspx.cs * 修改Login函數：取消1行註解 ```csharp= // 若需重送確認信，可以手動顯示 ResendConfirm.Visible = true; ``` ---- #### Demo6-Step5-測試重設密碼信件 * 打開Account中的Login.aspx * 新增Button元件 ```htmlmixed= <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <asp:Button runat="server" OnClick="LogIn" Text="登入" CssClass="btn btn-default" /> &nbsp;&nbsp; <asp:Button runat="server" ID="ResendConfirm" OnClick="SendEmailConfirmationToken" Text="重送驗證信" Visible="false" CssClass="btn btn-default" /> </div> </div> ``` |1.重設密碼信件之回應|2.寄出重設密碼信件| |-|-| || --- ### Demo7-查看資料庫內容 ---- #### Demo7-Step1-將資料庫檔案加入專案 |1.顯示所有檔案|2.選擇檔案加入至專案| |-|- || ---- #### Demo7-Step2-將資料庫檔案加入專案 * 點選資料庫檔案並開啟，並於資料庫總管中顯示  --- ## 參考資料 * ASP.NET官方教學網站：[連結](https://docs.microsoft.com/zh-tw/aspnet/overview) * W3Schools網站：[連結](https://www.w3schools.com/asp/default.asp) * MIS2000：[連結](https://www.youtube.com/c/%E5%85%A9%E5%8D%83MIS/playlists) * Youtube：[連結](https://youtu.be/OMr_Z7Ops90) * AboutSSL：[連結](https://aboutssl.org/cheap-ssl-certificate-providers/) * Facebook Login：[連結](https://developers.facebook.com/docs/facebook-login/)