מדריך CSHTML – הוספת אבטחה וחברות באתר

פרק זה מראה לך כיצד לאבטח את האתר שלך, כך שחלק מהדפים יהיו זמינים רק לאנשים שנרשמו לאתר (תראה גם איך ליצור דפים שכל אחד יכול לגשת אליהם).

מה תלמד:

• כיצד ליצור אתר אינטרנט בעל דף הרשמה ודף ההתחברות, כך שבמספר דפים באתר תוכל להגביל את הגישה לחברים רשומים בלבד.
• כיצד ליצור דפים ציבוריים ודפים לחברים בלבד.

אלו הם העוזרים (Helpers) שנציג בפרק זה:

· WebSecurity Helper.

מבוא לחברות (Membership) באתר

אתה יכול להגדיר את האתר שלך כך שתהיה לו תמיכה ברישום של משתמשים לאתר והזדהות שלהם בכניסה חוזרת. זה יכול להיות שימושי מסיבות רבות. לדוגמה, האתר שלך יכול להכיל תכונות הזמינות רק עבור חברים. במקרים מסוימים, ייתכן שתדרוש מהמשתמשים להתחבר על מנת לשלוח לך משוב או להשאיר תגובה.

גם אם האתר שלך תומך בחברות, המשתמשים אינם נדרשים בהכרח להתחבר לפני שהם משתמשים בדפים מסוימים באתר. משתמשים שאינם מחוברים ידועים כמשתמשים אנונימיים.

משתמש יכול להירשם באתר האינטרנט שלך ולאחר מכן יכול להתחבר לאתר. האתר דורש שם משתמש (בדרך כלל כתובת דוא"ל) וסיסמה כדי לאשר כי המשתמש הוא מי שהוא טוען להיות. תהליך זה של התחברות ואישור זהות המשתמש נקרא אימות (authentication).

ב- WebMatrix, אתה יכול להשתמש בתבנית אתר Starter כדי ליצור אתר אינטרנט המכיל את הפעולות הבאות:

· מסד נתונים המשמש לאחסון שמות המשתמש והסיסמאות עבור החברים באתר.

· דף רישום שבו משתמש אלמוני (משתמש חדש) יכול להירשם.

· דף התחברות ודף התנתקות.

· דף שחזור/איפוס סיסמה.

הערה: אף על פי שתבנית האתר Starter יוצרת באופן אוטומטי את הדפים האלה בשבילך, בפרק זה תוכלו ליצור גירסאות פשוטות של אותם דפים באופן ידני על מנת ללמוד את היסודות של אבטחה וחברות ב- CSHTML.

יצירת אתר אינטרנט אשר מכיל דפי הרשמה והתחברות

1. התחל את WebMatrix.

2. בדף Quick Start, בחר ב- Site From Template (אתר מתבנית).

3. בחר בתבנית Starter Site ולאחר מכן לחץ על OK.
WebMatrix יוצר אתר חדש.

4. בחלונית השמאלית, לחץ על הבורר Files .

5. בתיקיית השורש של האתר שלך, פתח את הקובץ AppStart.cshtml_, קובץ מיוחד זה מכיל הגדרות גלובליות. הוא מכיל כמה הגדרות המופיעות כהערות:

@{
  WebSecurity.InitializeDatabaseConnection("StarterSite",
                "UserProfile", "UserId", "Email", true);
  // WebMail.SmtpServer = "mailserver.example.com";
  // WebMail.EnableSsl = true;
  // WebMail.UserName = "[email protected]";
  // WebMail.Password = "your-password";
  // WebMail.From = "[email protected]";
}

כדי להיות מסוגל לשלוח דוא"ל, אתה יכול להשתמש בעוזר WebMailהמחייב גישה לשרת דואר SMTP, כפי שמתואר במאמר "שליחת מיילים מהאתר באמצעות CSHTML", המאמר תיאר כיצד להגדיר הגדרות SMTP שונות לדף בודד. לעומת זאת, במאמר זה, נראה כיצד להשתמש באותן ההגדרות אך נאחסן אותן בקובץ מרכזי אחד, כך שלא נצטרך לכתוב את ההגדרות בכל דף מחדש.

6. הסר את סימוני ההערות (//) מהשורות בקוד בקובץAppStart.cshtml_ .

7. שנה את ההגדרות הבאות הקשורות לדוא"ל בקוד:

• הגדר את WebMail.SmtpServer לשם של שרת ה- SMTP שיש לך גישה אליו.
• השאירו את WebMail.EnableSsl מוגדר ל- true . הגדרה זו מאבטחת את האישורים שנשלחים לשרת SMTP על-ידי הצפנתם.
• הגדר את WebMail.UserName לשם המשתמש של חשבון שרת ה-SMTP שלך.
• הגדר את WebMail.Password לסיסמה של חשבון שרת ה-SMTP שלך.
• הגדר את WebMail.From לכתובת הדוא"ל שלך. זוהי כתובת הדוא"ל שההודעה נשלחת ממנו.

8. שמור וסגור את AppStart.cshtml_.

9. פתח את הקובץ Default.cshtml.

10. הפעל את הדף Default.cshtml בדפדפן.

11. בפינה הימנית העליונה של הדף, לחץ על הקישור Register (הרשמה).

12. הזן את שם המשתמש והסיסמה ולאחר מכן לחץ על כפתור Register.

בעת יצירת אתר אינטרנט מתוך התבנית Site Starter , מסד נתונים בשם StarterSite.sdf נוצר באתר בתיקיית App_Data. במהלך הרישום, פרטי הרישום של המשתמש מתווספים למסד נתונים זה. בנוסף, נשלחת הודעה לכתובת הדוא"ל שבה המשתמש נרשם כדי שיוכל לסיים את תהליך ההרשמה.

13. עבור לתוכנת הדואר האלקטרוני שלך ומצא את ההודעה, בהודעה יהיה קוד האישור שלך וקישור לאתר.

14. לחץ על הקישור כדי להפעיל את החשבון שלך. קישור האישור פותח את דף אישור ההרשמה.

15. לחץ על הקישור Login (התחבר), ולאחר מכן היכנס באמצעות החשבון שבו נרשמת.

לאחר שתיכנס, הקישורים Register ו- Login מוחלפים על ידי הקישור Logout (התנתקות).

16. לחץ על הקישור אודות.

הדף About.cshtml מוצג.

עכשיו, השינוי היחידי הנראה לעין הוא רק כאשר אתה מתחבר (הודעת Welcome Joe! וקישור Logout).

הערה: כברירת מחדל, CSHTML שולח אישורים לשרת בטקסט פשוט. אתר שנמצא באינטרנט צריך להשתמש בפרוטוקול HTTP מאובטח (HTTPS) כדי להצפין מידע רגיש שמוחלף עם השרת. ניתן להצפין מידע רגיש על ידי הגדרת WebMail.EnableSsl=true כמו בדוגמה הקודמת.

יצירת דף לחברים רשומים בלבד

כרגע, כל אחד יכול לגלוש לכל דף באתר האינטרנט שלך. אבל יכול להיות שתרצה דפים מסויימים שיהיו זמינים באתר רק עבור אנשים שהתחברו (כלומר, חברים שנרשמו מראש). CSHTML מאפשרת לך להגדיר דפים שרק חברים מחוברים יוכלו לגשת אליהם. בדרך כלל, אם משתמשים אנונימיים מנסים לגשת לדף לחברים בלבד, עליך להפנות אותם אוטומטית אל דף ההתחברות (Login).

בהליך זה, תוכל להגביל את הגישה לדף אודות (About.cshtml) כך שרק משתמשים רשומים שמחוברים יוכלו לגשת אליו.

1. פתח את הקובץ About.cshtml.

2. הוסף בתחילת הקובץ About.cshtml את הקוד הבא:

@if (!WebSecurity.IsAuthenticated)
{
  Response.Redirect("/Account/Login");
}

קוד זה בודק את המאפיין IsAuthenticated של האובייקט WebSecurity. אם המשתמש מחובר, המאפיין מחזיר true. אחרת, הקוד קורא לפונקציה Response.Redirect השולחת את המשתמש לדף Login.cshtml בתיקייה Account.

הנה הקובץ המלא – About.cshtml:

@if (!WebSecurity.IsAuthenticated)
{
  Response.Redirect("/Account/Login");
}
@{
  Layout = "~/_SiteLayout.cshtml";
  Page.Title = "About My Site";
}
<p>
  This web page was built using ASP.NET Web Pages.
  For more information, visit the
  <a href="http://www.asp.net">ASP.NET homepage</a>.
</p>

הערה: כתובת ה- URL בדוגמה ("Account/Login/") לא כוללת את סיומת הדף (cshtml) מיכוון ש- CSHTML לא מחייבת לציין את הסיומת cshtml . זוהי ברירת המחדל.

3. הפעל את Default.cshtml בדפדפן. אם אתה מחובר לאתר, לחץ על הקישור Logout.

4. לחץ על הקישור About. אתה מנותב לדף Login.cshtml, מכיוון שאתה לא מחובר.

כדי לאבטח את הגישה עבור דפים מרובים, באפשרותך להוסיף את בדיקת האבטחה הנ"ל לכל דף או להוסיף את הבדיקה ל- Layout page (כמו הדף SiteLayout.cshtml_ ) ואז כל דף שיתבסס על קובץ ה- layout יכיל את הבדיקה.

יצירת אבטחה עבור קבוצות משתמשים (תפקידים – Roles)

אם לאתר שלך יש הרבה חברים, זה לא יעיל לבדוק הרשאה עבור כל משתמש בנפרד, לפני שאתה נותן להם לגשת לדף. במקום זאת, אתה יכול ליצור קבוצות משתמשים (תפקידים – Roles) שמשתמשים אינדיבידואליים משויכים אליהם. לאחר מכן, תוכל לבדוק את ההרשאות בהתבסס על התפקיד. בסעיף זה, תוכל ליצור תפקיד "admin" ("מנהל") ולאחר מכן ליצור דף שיהיה נגיש רק עבור משתמשים השייכים לתפקיד זה.

כדי להתחיל, אתה צריך להוסיף מידע על תפקיד זה למסד הנתונים של החברים באתר.

1. ב- WebMatrix, לחץ על הבורר "Databases" (בפינה השמאלית-תחתונה של הסביבה).

2. בחלונית השמאלית, פתח את הענף StarterSite.sdf, ולאחר מכן את ענף הטבלאות (Tables). מרשימת הטבלאות שמופיעה בחר (באמצעות דאבל-קליק) את הטבלה webpages_Roles.

3. הוסף תפקיד בשם "admin" בעמודת RoleName. השדה RoleId יתמלא באופן אוטומטי (זהו המפתח הראשי של הטבלה שמוגדר למספור אוטומטי).

4. שימו לב מה הערך עבור השדה RoleId. (אם זה התפקיד הראשון שאתה מגדיר, זה יהיה 1) .

5. סגור את הטבלה webpages_Roles.

6. פתח את הטבלה UserProfile.

7. רשום לעצמך את הערך UserId של אחד או יותר מהמשתמשים שבטבלה ולאחר מכן סגור את הטבלה.

8. פתח את הטבלה webpages_UserInRoles והזן את ערכי UserID ו–RoleID בטבלה. לדוגמה, כדי לשים את משתמש 2 לתוך תפקיד "admin" (תפקיד מספר 1), עליך להכניס ערכים אלה:

9. סגור את הטבלה webpages_UsersInRoles.

עכשיו שיש לך תפקידים מוגדרים, אתה יכול להגדיר את דף שיהיה נגיש למשתמשים שנמצאים בתפקיד זה.

10. בתיקיית השורש של האתר, צור דף חדש בשם AdminError.cshtml. זה יהיה דף שמשתמשים מופנים אליו במידה והם אינם מורשים לגשת לדף שניצור בסעיף הבא. החלף את התוכן הקיים בדף עם הקוד הבא:

@{
    Layout = "/_SiteLayout.cshtml";
    PageData["Title"] = "Admin-only Error";
}
<p>
  You must log in as an admin to access that page.
</p>

11. בתיקיית השורש של האתר, צור דף חדש בשם AdminOnly.cshtml.

החלף את התוכן הקיים בדף עם הקוד הבא:

@{
  Layout = "/_SiteLayout.cshtml";
  PageData["Title"] = "Administrators only";
}
@if (Roles.IsUserInRole("admin"))
{
  <span>Welcome <b>
  @WebSecurity.CurrentUserName</b>! </span>
}
else
{
  Response.Redirect("/AdminError");
}

הפונקציה Roles.IsUserInRole מחזירה true אם המשתמש הנוכחי הוא חבר בתפקיד "admin".

12. הפעל את הדף Default.cshtml בדפדפן, אבל אל תתחבר (אם אתה כבר מחובר, התנתק).

13. בשורת הכתובת של הדפדפן, שנה את כתובת ה- URL מ-"Default" ל- "AdminOnly". (כלומר, לבקש את הקובץ AdminOnly.cshtml). אתה מנותב לדף AdminError.cshtml, כי אתה לא מחובר כעת כמשתמש בתפקיד "admin".

14. חזור לדף Default.cshtml והתחבר כמשתמש שהוספת לתפקיד "admin".

15. עבור שוב לדף AdminOnly.cshtml. הפעם אתה רואה את הדף.

יצירת דף 'שינוי סיסמה'

אתה יכול לאפשר למשתמשים לשנות את הסיסמה שלהם על ידי יצירת דף שינוי סיסמה. דוגמה זו מראה את הבסיס של איך ליצור דף שעושה את זה. (תבנית Starter Site כוללת קובץ ChangePassword.cshtml המכיל בדיקות שגיאה מורכבות יותר מאשר הבדיקות בדף שניצור בהליך זה).

1. בתיקיית Account של האתר, צור דף בשם ChangePassword2.cshtml.

2. החלף את כל הקוד בדף בקוד הבא:

@{
  Layout = "/_SiteLayout.cshtml";
  PageData["Title"] = "Change Password";
 
  var message = "";
  if (IsPost)
  {
 
    string username = Request["username"];
    string newPassword = Request["newPassword"];
    string oldPassword = Request["oldPassword"];
 
    if (WebSecurity.ChangePassword(username,
                    oldPassword, newPassword))
    {
      message = "Password changed successfully!";
    }
    else
    {
      message = "Password could not be changed.";
    }
  }
}
<style>
  .message
  {
    font-weight: bold;
    color: red;
    margin: 10px;
  }
</style>
<form method="post" action="">
Username:
<input type="text" name="username"
    value="@WebSecurity.CurrentUserName" />
<br />
Old Password:
<input type="password" name="oldPassword" 
  value="" />
<br />
New Password:
<input type="password" name="newPassword"
   value="" />
<br />
<br />
<input type="submit" value="Change Password" />
<div class="message">@message</div>
<div>
  <a href="Default.cshtml">Return to home page</a>
</div>
</form>

הגוף של הדף מכיל תיבות טקסט המאפשרות למשתמשים להזין את שם המשתמש והסיסמאות שלהם (ישנה וחדשה). בקוד, אתה קורא לפונקציה ChangePassword של העוזר WebSecurity ומעביר לה את הערכים שאתה מקבל מהמשתמש.

3. הפעל את הדף בדפדפן. אם אתה כבר מחובר, שם המשתמש שלך יוצג בדף.

4. נסה להזין את הסיסמה הישנה שלך באופן שגוי. כאשר אתה לא מזין סיסמה נכונה, הפונקציה WebSecurity.ChangePassword נכשלת והודעה מוצגת.

5. הזן ערכים חוקיים ונסה שוב לשנות את הסיסמה.

יצירת סיסמה חדשה במקרה שהמשתמש שכח סיסמה

אם משתמשים שכחו את הסיסמה שלהם, אתה יכול לתת להם ליצור סיסמה חדשה. (זה שונה משינוי סיסמה שהם יודעים). כדי לאפשר למשתמשים לקבל סיסמה חדשה, עליך להשתמש בפונקציה GeneratePasswordResetToken של העוזר WebSecurity כדי ליצור אסימון (token).

אסימון מורכב ממחרוזת מוצפנת ומאובטחת הנשלחת למשתמש ומזהה באופן ייחודי את המשתמש למטרות כמו איפוס סיסמה. הליך זה מראה בצורה אופיינית כיצד לעשות את כל זה – להפיק את האסימון, לשלוח אותו למשתמש בדואר אלקטרוני, ולאחר מכן לקשר לדף שקורא את האסימון ומאפשר למשתמש להזין סיסמה חדשה. הקישור שהמשתמש יראה בדוא"ל ייראה משהו כזה:

http://localhost:36916/Account/PasswordReset2?PasswordResetToken=08HZGH0ALZ3CGz3

התווים האקראיים בסוף כתובת ה- URL הם האסימון.

(תבנית Starter Site כוללת קובץ ForgotPassword.cshtml המכיל בדיקות שגיאה מלאה יותר מאשר הבדיקות בדף שניצור בהליך זה).

1. בתיקיית Account של האתר, צור דף בשם ForgotPassword2.cshtml.

2. החלף את כל הקוד בדף בקוד הבא:

@{
  Layout = "/_SiteLayout.cshtml";
  PageData["Title"] = "Forgot your password?";
 
  var message = "";
  var username = "";
 
  if (WebMail.SmtpServer.IsEmpty())
  {
    //The default SMTP configuration occurs in _start.cshtml
    message = "Please configure the SMTP server.";
  }
 
  if (IsPost)
  {
    username = Request["username"];
    var resetToken =
      WebSecurity.GeneratePasswordResetToken(username);
 
    var portPart = ":" + Request.Url.Port;
    var confirmationUrl = Request.Url.Scheme
      + "://"
      + Request.Url.Host
      + portPart
      + VirtualPathUtility.ToAbsolute(
      "/Account/PasswordReset2?PasswordResetToken="
      + Server.UrlEncode(resetToken));
 
    WebMail.Send(
      to: username,
      subject: "Password Reset",
      body: @"Your reset token is:<br/><br/>"
        + resetToken
        + @"<br/><br/>Visit <a href="""
        + confirmationUrl
        + @""">"
        + confirmationUrl
        + @"</a> to activate the new password."
    );
 
    message = "An email has been sent to " + username
        + " with a password reset link.";
  }
}
<style>
  .message
  {
    font-weight: bold;
    color: red;
    margin: 10px;
  }
</style>
<form method="post" action="">
@if (!message.IsEmpty())
{
  <div class="error">@message</div>
}
else
{
  <div>
    Enter your email address:
    <input type="text" name="username" />
    <br />
    <br />
    <br />
    <input type="submit" value="Get New Password" />
  </div>
}
</form>

הגוף של הדף מכיל תיבת טקסט המבקשת מהמשתמש שיכניס כתובת דוא"ל. כאשר המשתמש שולח את הטופס, אתה ראשית מוודא שהגדרות דואר SMTP נעשו, מיכוון שמטרת הדף היא לשלוח הודעת דוא"ל למשתמש.

הלב של הדף היא יצירת האסימון לאיפוס הסיסמה עפ"י שם המשתמש (במקרה זה כתובת הדוא"ל של המשתמש):

string resetToken = 
  WebSecurity.GeneratePasswordResetToken(username);

שאר הקוד הוא עבור שליחת הודעת דוא"ל. רוב הקוד הוא עיבוד של מה שכבר נוצר בקובץ Register.cshtml (חלק מתבנית האתר).

אתה בעצם שולח את הדוא"ל על ידי קריאה לפונקציה Send של העוזר WebMail. גוף ההודעה נוצר על ידי שרשור יחד של משתנים עם מחרוזות הכוללות טקסט ותגיות HTML. כאשר המשתמש מקבל את הדוא"ל, גוף ההודעה יראה לדוגמה כך:

3. בתיקיית Account של האתר, צור דף נוסף בשם PasswordReset2.cshtml. והחלף את כל הקוד בדף בקוד הבא:

@{
  Layout = "/_SiteLayout.cshtml";
  PageData["Title"] = "Password Reset";
 
  var message = "";
  var passwordResetToken = "";
 
  if (IsPost)
  {
    var newPassword = Request["newPassword"];
    var confirmPassword = Request["confirmPassword"];
    passwordResetToken = Request["passwordResetToken"];
 
    if (!newPassword.IsEmpty() &&
       newPassword == confirmPassword &&
       WebSecurity.ResetPassword(passwordResetToken,
                                  newPassword))
    {
      message = "Password changed!";
    }
    else
    {
      message = "Password could not be reset.";
    }
  }
}
<style>
  .message
  {
    font-weight: bold;
    color: red;
    margin: 10px;
  }
</style>
<div class="message">@message</div>
<form method="post" action="">
Enter your new password:
<input type="password" name="newPassword" />
<br />
Confirm new password:
<input type="password" name="confirmPassword" />
<br />
<br />
<input type="submit" value="Submit" />
</form>

דף זה מה פועל כאשר המשתמש לוחץ על הקישור בדוא"ל כדי לאפס את הסיסמה שלו. הגוף מכיל תיבות טקסט כדי לאפשר למשתמש להזין סיסמה ולאשר אותה.

אתה מקבל את האסימון של הסיסמה מכתובת האתר על ידי קריאה של ["Request["passwordResetToken . זכור כי כתובת ה- URL של האתר תראה בסגנון הזה:

http://localhost:36916/Account/PasswordReset2?PasswordResetToken=08HZGH0ALZ3CGz3

הקוד שלך מקבל את האסימון (במקרה זה, 08HZGH0ALZ3CGz3) ולאחר מכן קורא לפונקציה ResetPassword של העוזר WebSecurity, מעביר לה את האסימון ואת הסיסמה החדשה. אם האסימון תקין, העוזר מעדכן את הסיסמה עבור המשתמש שקיבל את האסימון בדוא"ל. אם האיפוס הצליח, הפונקציה ResetPassword מחזירה true .

בדוגמה זו, הקריאה לפונקציה ResetPassword היא בשילוב עם כמה בדיקות אימות המשתמשות באופרטור הלוגי && ("וגם"). האיפוס מוצלח במידה ואם:

• תיבת הטקסט newPassword לא ריקה.
• הערכים newPassword ו- confirmPassword תואמים.
• הפונקציה ResetPassword הצליחה (מחזירה true).

4. הפעל את ForgotPassword2.cshtml בדפדפן.

5. הזן את כתובת הדוא"ל שלך ולאחר מכן לחץ על כפתור "Get New Password".

הדף שולח הודעת דוא"ל (זה יכול לקחת מספר שניות).

6. בדוק את תיבת הדוא"ל שלך וחפש הודעה שהנושא שלה הוא "Password Reset".

7. בהודעת הדואר האלקטרוני, לחץ על הקישור. אתה מופנה לדף PasswordReset2.cshtml.

8. הזן את הסיסמה החדשה ולאחר מכן לחץ על Submit.