ASP．NET(Web Form)教學平台

安裝 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 #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

• 結束安裝
  

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-Step1-建立測試帳號

• 註冊1個測試帳號
  

Demo2-Step2-檢查資料庫內容

• {檢視}=>{伺服器總管}
  

Demo2-Step3-會員資料表的說明

• AspNetUsers：儲存使用者資訊
• AspNetRoles：設定使用者的權限
• AspNetUserClaims：儲存使用者授權的狀態
• AspNetUserLogins：儲存OAuth登入的資訊
• AspNetUserRoles：儲存使用者群組資訊
• 以下為AspNetUsers的紀錄
  

Demo2-Step4-加入新增欄位之定義

• 開啟Models資料夾中的IdentityModels.cs
• 在ApplicationUser類別中加入UserTitle

public string UserTitle { get; set; }

Demo2-Step5-在註冊頁中加入輸入欄位1

• 開啟Account資料夾中的Register.aspx
• 輸入以下程式：

<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
• 修改以下程式：

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-Step1-更新NuGet套件

• 工具>NuGet封裝管理員>管理方案NuGet套件
• 搜尋條件：OWIN，全選後按更新
  

Demo3-Step2-修改瀏覽方式為SSL

• 開啟專案的屬性視窗
  • 將SSL已啟用改為：True
• 開啟專案屬性的視窗，選擇Web
• 輸入專案URL為：https://localhost:44300/
• 重新執行網頁，確認網頁已修改完成
  

Demo3-Step3-設定Google API

• 進入GCP控制台：連結
• 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

app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions() {
    ClientId = "000-xoxo.apps.googleusercontent.com",
    ClientSecret = "oxoxoxoxoxoxoxoxo"
});

Demo3-Step6-重新執行登入頁面

• 出現Google登入選項，點選Google登入
• 出現Google登入帳號和密碼畫面
• 登入正常會出現輸入登入之信箱
  • 若未重覆，則會正常登入
    

Demo3-Step7-確認資料表新增紀錄

• 請確認以下2個資料表
  • AspNetUsers：
  • AspNetUserLogins：
    
    

Demo4-Step1-建立Facebook應用程式

• 進入Facebook開發者平台：連結
• 建立應用程式選擇類別：打造互聯體驗
  

Demo4-Step2-輸入應用程式資訊

輸入應用程式名稱及信箱	確定非機器人操作

Demo4-Step3-設定Facebook登入

• 選擇Facebook登入
• 選擇應用程式平台：網站
• 填寫電子信箱、上傳Logo
• 輸入有效的Oauth重新導向URI

https://localhost:44300/signin-facebook

Demo4-Step4-取得應用程式編號及密鑰

• 應用程式編號：000000000000
• 應用程式密錀：oxoxoxoxoxox
  

Demo4-Step5-輸入應用程式編號及密鑰

• 開啟App_Start資料夾中的Startup.Auth.cs
• 註解掉以下幾行，並輸入(請替換成自已的)
  • 應用程式編號：000000000000
  • 應用程式密錀：oxoxoxoxoxox

app.UseFacebookAuthentication(
               appId: "000000000000",
               appSecret: "oxoxoxoxoxox");

Demo5-Step1-產生及使用應用程式密碼

• 打開Google帳號：連結
• 安全性->兩步驟驗證：開啟
• 安全性->應用程式密碼：1組密碼
  

Demo5-Step2-設定應用程式密碼

• 選取應用程式：郵件
• 選取裝置：Windows電腦
• 產生：並記下密碼
  

Demo5-Step3-修改網站設定檔

• 打開根目錄中的Web.config
• 於configuration區段加入以下程式
• 修改Google E-Mail帳號
• 修改應用程式密碼

<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函數

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函數

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函數

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-Step1-修改網頁程式

• 打開Account中的Forgot.aspx.cs
• 修改Forgot函數：取消3行註解

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行註解

<%-- 一旦您的帳戶確認啟用了密碼重設功能請加以啟用 --%>
<asp:HyperLink runat="server" ID="ForgotPasswordHyperLink" ViewStateMode="Disabled">忘記密碼?</asp:HyperLink>

• 打開Account中的Login.aspx.cs
• 修改Form_Load函數：取消1行註解

// 一旦您啟用了帳戶確認以使用密碼重設功能，則會啟動此項目
ForgotPasswordHyperLink.NavigateUrl = "Forgot";

Demo6-Step3-寄發重設密碼郵件

• 打開Account中的Login.aspx.cs
• 新增SendEmailConfirmationToken函數

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行註解

// 若需重送確認信，可以手動顯示
ResendConfirm.Visible = true;

Demo6-Step5-測試重設密碼信件

• 打開Account中的Login.aspx
• 新增Button元件

<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-Step1-將資料庫檔案加入專案

1.顯示所有檔案	2.選擇檔案加入至專案

Demo7-Step2-將資料庫檔案加入專案

• 點選資料庫檔案並開啟，並於資料庫總管中顯示