meekob

ASP.Net 2.0 มาพร้อมกับระบบรักษาความปลอดภัยที่ใช้งานได้สะดวกยิ่งขึ้นกว่าเดิม จากที่เราเคยต้องลงมือเขียนโค้ดเองในงานที่ต้องทำเป็นประจำหลายๆส่วน อาทิ การทำเว็บเพจสำหรับ Login หรือ สร้างบัญชีผู้ใช้ใหม่ ใน .Net Framework 2.0 ได้จัดเตรียมชุดคอนโทรลสำหรับรักษาความปลอดภัยนี้มาให้อย่างครบครัน นอกจากนี้ชุดเครื่องมือที่ชื่อ Login นี้ยังช่วยเพิ่มประสิทธิภาพในการทำงานบางอย่างที่ควรทำเพื่อให้ข้อมูลปลอดภัยและถูกจัดเก็บแบบมีระบบมากขึ้น ซึ่งช่วยได้มากโดยเฉพาะสำหรับนักพัฒนาที่ยังขาดประสพการณ์ หรือมีเวลาจำกัดในการทำงาน เช่น การเข้ารหัสพาสเวิร์ด เป็นต้น

เครื่องมือชุด Login ในทูลบ๊อกซ์ของ Visual Studio นั้นประกอบด้วยคอนโทรลต่างๆ เช่น Login, LoginView, PasswordRecovery, LoginStatus, LoginName, CreateUserWizard และ ChangePassword คอนโทรล ซึ่งทำหน้าที่ช่วยในการรักษาความปลอดภัยของระบบ ดังที่ระบุไว้ในตารางที่ 1

ตารางที่ 1: หน้าที่ต่างๆของชุด Login คอนโทรล

เพื่อให้เราได้เห็นภาพการใช้งานจริง เราจะลองทำระบบล๊อคอินอย่างง่ายๆขึ้นใช้งานกัน โดยปรกติขั้นตอนในการสร้างระบบรักษาความปลอดภัยให้แก่เว็บไซต์นั้น มักจะประกอบด้วยการสร้างเว็บเพจที่ใช้สำหรับล๊อคอิน, การตั้งค่าสำหรับ Form Authentication, การตั้งค่า Membership Provider และทดสอบการใช้งาน นอกจากนี้เรายังจะทดสอบการใช้งานคอนโทรลอื่นๆ เช่น CreateUserWizard คอนโทรล, LoginView คอนโทรล ฯลฯ เป็นต้น อีกด้วย เนื่องจากเราจะเก็บข้อมูลของบัญชีผู้ใช้ไว้ใน Microsoft SQL Server จึงต้องติดตั้งเตรียมไว้ในเครื่องที่จะใช้พัฒนาก่อนจะทดลองทำตามขั้นตอนต่อไป

1. ให้เราเปิด Visual Studio 2005 แล้วสร้าง ASP.Net Website ใหม่ ชื่อ ASPNetSecureSample ขึ้นมา
   
2. เพิ่มเว็บฟอร์มใหม่เข้ามาในโปรเจ็ค ตั้งชื่อว่า Login.aspx จากนั้นลาก Login คอนโทรลจากทูลบ๊อกซ์ เข้ามาวางในเว็บฟอร์ม
   
   

รูปที่ 1: คอนโทรลต่างๆในชุด Login จาก Toolbox ของ Visual Studio


3. จากนั้นเปิดหน้าต่าง Visual Studio 2005 Command Prompt จากเมนู Visual Studio Tools แล้วพิมพ์ aspnet_regsql เพื่อเปิดวิซาร์ดสำหรับสร้างฐานข้อมูลระบบรักษาความปลอดภัย โดยเราจะสร้างฐานข้อมูลนี้ไว้ใน Microsoft SQL Server (ผู้เขียนใช้เวอร์ชั่น 2005 แต่เราอาจใช้เวอร์ชั่น 2000 ทดแทนได้เช่นกัน)
   
4. ทำตามขั้นตอนการสร้างฐานข้อมูลไปเรื่อยๆจนจบ โดยเลือกเซอร์ฟเวอร์ที่ต้องการใช้ แล้วตั้งชื่อฐานข้อมูลว่า ASPNetAuthSample เมื่อเสร็จสิ้นขั้นตอนแล้วให้กด Finish เพื่อปิดหน้าต่างวิซาร์ด พิมพ์ Exit ที่ Command Prompt เพื่อปิดหน้าต่าง
   
5. จากนั้นเราจะต้องตั้งค่าเพื่อกำหนดให้ระบบรักษาความปลอดภัยของเราใช้ฐานข้อมูลที่เพิ่งสร้างขึ้นเป็นที่เก็บข้อมูลเสียก่อน จึงจะสามารถใช้งานได้ ซึ่งสามารถทำได้โดยการกำหนดค่า Connection String และ Membership ในไฟล์ web.config ดังรายการที่ 1 และรายการที่ 3 ทั้งนี้ค่าของ connectionString อาจแตกต่างไปบ้างตามแต่เครื่องที่ใช้พัฒนา เราสามารถหาดูค่านี้อย่างง่ายๆได้ โดยการติดต่อไปยังฐานข้อมูลที่ต้องการผ่านหน้าต่าง Server Explorer แล้วจึงดูค่านี้ในหน้าต่าง Properties ของการเชื่อมต่อดังกล่าวนั่นเอง
   

รายการที่ 1: การกำหนด Connection String ใน web.config <connectionStrings>     <clear/>     <add name="LocalSQLServer" connectionString="Data Source=.;         Initial Catalog=ASPNetAuthSample; Integrated Security=True" /> </connectionStrings>



6. แล้วจึงกำหนดค่า Authentication และ Authorization ใน web.config เพื่อบังคับให้ผู้ใช้ต้อง Login ทุกครั้งเมื่อใช้งานเว็บไซต์
   

รายการที่ 2: การตั้งค่า Authentication และ Authorization ใน web.config <authentication mode="Forms">     <forms name=".AuthCookie" timeout="10"/> </authentication> <authorization>     <deny users="?"/>     <allow users="*"/> </authorization>



7. ลาก Label คอนโทรลมาวางใน Default.aspx กำหนดค่า Text ให้เป็น Hello, World! และค่าขนาดฟ้อนท์ให้เป็น x-large เพื่อแสดงผลคำนี้หลังจากผู้ใช้ล๊อคอิน
   
8. กด F5 เพื่อทดสอบ Visual Studio จะเปิด Internet Explorer ขึ้นมา และระบบจะ Redirect เราไปยังหน้าล๊อคอินเสมอตามที่ตั้งค่า Authorization ไว้ใน web.config แต่เนื่องจากเรายังไม่มีบัญชีผู้ใช้ใดๆ จึงต้องสร้างขึ้นมาใหม่เสียก่อนจึงจะสามารถล๊อคอินเข้าใช้งานระบบได้
   
9. ให้ปิด Internet Explorer แล้วเปิดไฟล์ Login.aspx ขึ้นมา จากนั้นลาก CreateUserWizard คอนโทรลจากทูลบ๊อกซ์เข้ามาวางในฟอร์ม ตรงด้านล่างของ Login คอนโทรล
   
10. กด F5 เพื่อทดสอบระบบอีกครั้ง คราวนี้ให้ลองสร้างบัญชีผู้ใช้ใหม่โดยใช้ชื่อว่า “user1” และพาสเวิร์ด “qwerty!!!” โดยทั่วไป CreateUserWizard คอนโทรลจะกำหนดค่ากฏพื้นฐานของพาสเวิร์ดไว้ให้ไม่ต่ำกว่าหกตัวอักษรและมีเครื่องหมายใดเครื่องหมายหนึ่งอย่างน้อยหนึ่งเครื่องหมาย ทั้งนี้ก็เพื่อความปลอดภัย แต่เราสามารถปรับแต่งส่วนนี้ได้ภายหลัง
    
11. เมื่อสร้างบัญชีผู้ใช้สำเร็จให้ลองทดสอบ Login ดู คราวนี้เมื่อใส่ข้อมูลผู้ใช้ที่ถูกต้อง ระบบก็จะนำเราไปยังหน้า Default.aspx โดยอัตโนมัติ
    
    เมื่อถึงขั้นตอนนี้จะเห็นว่าเราสามารถล๊อคอินเข้าใช้งานระบบได้อย่างสมบูรณ์พอสมควรแล้ว แต่ยังมีรายละเอียดปลีกย่อยอื่นที่จำเป็นต้องกล่าวถึงอีกพอสมควร เพื่อให้สอดคล้องกับการใช้งานจริง เช่น ระบบควรจะแสดงชื่อผู้ใช้งานและปุ่มล๊อคเอาท์เมื่อผู้ใช้ล๊อคอินเข้ามาใช้งานระบบ หรือระบบควรอนุญาตให้ผู้ใช้ที่ยังไม่ได้ล๊อคอินสามารถใช้งานระบบบางส่วนได้ เป็นต้น เราจึงจะทดลองใช้งานคอนโทรลอื่นๆที่มีในชุดเครื่องมือ Login นี้กันต่อ
    
12. ปิด Internet Explorer แล้วเปิด Default.aspx ขึ้นมา ลาก LoginView คอนโทรลเข้าไป กดปุ่ม Tasks ตรงมุมบนขวาของคอนโทรลดูให้แน่ใจว่า Views: ของคอนโทรลเป็น AnonymousTemplate เพื่อให้ส่วนการแสดงผลที่จะกำหนดต่อไปนี้เป็นส่วนที่ผู้ใช้ที่ยังไม่ได้ทำการล๊อคอินเห็น
    
13. ลาก Label1 คอนโทรลที่เราทำไว้เดิมไปปล่อยบน LoginView คอนโทรลที่เราเพิ่งสร้างขึ้น เปลี่ยนค่า Text เดิมให้เป็นคำว่า “Hello Guest!” จากนั้นลาก LoginStatus คอนโทรลเข้ามาวางไว้ต่อจาก Label1 คอนโทรลนี้จะแสดงปุ่มเพื่อเชื่อมต่อผู้ใช้ไปยังหน้าสำหรับล๊อคอินในกรณีที่ยังไม่ได้ล๊อคอิน และแสดงค่าเป็นล๊อคเอาท์เพื่อให้ผู้ใช้กดเมื่อต้องการออกจากระบบรักษาความปลอดภัย
    
14. เลือก Label1 คอนโทรลแล้วกด Ctrl+C เพื่อ Copy หลังจากนั้นกดปุ่ม Tasks ของ LoginView คอนโทรลแล้วเปลี่ยน Views: ไปยัง LoggedInTemplate ซึ่งจะเป็นส่วนที่ผู้ใช้เห็นหลังจากที่ได้ล๊อคอินแล้ว
    
15. เมื่อคอนโทรลแสดง Template ว่างๆ ให้กดด้านในแล้วกด Ctrl+V เพื่อวาง Label คอนโทรลที่ Copy มาลงไป แล้วลบค่า Text ของคอนโทรลออกให้เหลือเพียงคำว่า “Hello”
    
16. จากนั้นลาก LoginName คอนโทรลและ LoginStatus คอนโทรลไปวางต่อจาก Label คราวนี้ใน Tasks ของ LoginStatus ให้เลือก Views: เป็น LoggedIn ลิงค์จะแสดงค่าคำว่า “Logout” ขึ้นมาแทนค่าเดิม
    
17. เปิดไฟล์ web.config ขึ้นมาแล้ว ลบส่วนที่เราตั้งค่าของ Authorization ไว้ก่อนหน้านี้ออกไป เพื่อกำหนดสิทธิ์ให้เว็บไซต์สามารถเข้าถึงได้จากผู้ใช้ทั่วไป
    
18. หลังจากนั้นกด F5 เพื่อทดสอบ ในหน้า Default.aspx เราจะเห็นคำว่า “Hello, Guest!” แสดงพร้อมกับลิงค์เพื่อไปยังหน้า Login เมื่อเราลอง Login ดูด้วยบัญชีผู้ใช้ “user1” ที่เพิ่งสร้างขึ้นจะพบว่าระบบนำเรากลับมายังหน้า Default.aspx พร้อมกับแสดงค่า “Hello, user1” แทน นอกจากนี้เรายังสามารถกด Logout เพื่อออกจากระบบได้อีกด้วย
    
     
    รูปที่ 2: การแสดงผลเมื่อผู้ใช้ล๊อคอิน
    
19. ปิด Internet Explorer เปิดหน้า Login.aspx แล้วลบ CreateUserWizard คอนโทรลออก เราจะสร้างหน้าเว็บเพจใหม่สำหรับการสร้างบัญชีผู้ใช้ใหม่โดยเฉพาะในขั้นตอนต่อไป
    
20. สร้างไฟล์ Register.aspx ขึ้นใหม่ในโปรเจ็ค จากนั้นลาก CreateUserWizard คอนโทรลมาวาง เลือกกำหนดค่า ContinueDestinationPageUrl ให้เป็นไฟล์ Default.aspx เพื่อกำหนดให้เมื่อสร้างบัญชีใหม่เสร็จ ให้ระบบนำเราไปยังหน้าหลัก
    
21. กลับไปที่ไฟล์ Login.aspx ให้คลิ๊กที่ Login คอนโทรล แล้วตั้งค่า CreateUserText เป็น “Register” และเลือกไฟล์ Register.aspx สำหรับค่า CreateUserUrl เมื่อสังเกตที่คอนโทรลจะเห็นว่ามีลิงค์ไปยังหน้าลงทะเบียนเพิ่มขึ้นมา กด F5 เพื่อทดลองสร้าง account ผ่านหน้าที่สร้างขึ้นมาใหม่ เช่น user2 เป็นต้น
    

รายการที่ 3: การกำหนดค่า MembershipProvider ให้ระบบรักษาความปลอดภัย <membership defaultProvider="LocalMembershipProvider">     <providers>         <add name="LocalMembershipProvider"             connectionStringName="LocalSQLServer"             minRequiredPasswordLength="5"             minRequiredNonalphanumericCharacters="0"             passwordStrengthRegularExpression="^[0-9a-zA-Z'.\s]{5,40}$"             type="System.Web.Security.SqlMembershipProvider"/>     </providers> </membership>



22. เนื่องจาก CreateUserWizard คอนโทรลถูกตั้งค่าไว้ให้รับพาสเวิร์ดไม่ต่ำกว่าหกตัวอักษร และต้องมีเครื่องหมายอย่างน้อยหนึ่งตัวอักษรดังที่กล่าวไปแล้วข้างต้น อาจทำให้ไม่สะดวกกับผู้ใช้หรือไม่เข้ากับกฏที่เว็บไซต์เคยใช้อยู่เดิม เราสามารถปรับแต่งข้อบังคับนี้ได้ ด้วยการกำหนดค่า PasswordRegularExpression ในคอนโทรล และค่า passwordStrengthRegularExpression ของ LocalMembershipProvider ในไฟล์ web.config ให้ลองกำหนดค่าทั้งสองเป็น ^[0-9a-zA-Z'.\s]{5,40}$ ซึ่งเป็น Regular Expression ที่แทนการรับค่าตัวอักษร เช่น 0-9, a-z, A-Z, ช่องว่างและเครื่องหมาย . หรือ ‘ เป็นต้น โดยมีความยาวระหว่าง 5 ถึง 40 ตัวอักษร เพื่อกำหนดให้ขอบเขตของกฏกว้างขึ้น
    
23. กฏที่เราตั้งบังคับความยาวของพาสเวิร์ดให้เริ่มที่ 5 ตัวอักษรและจะไม่กำหนดว่าต้องมีเครื่องหมายพิเศษ เราจึงต้องกำหนดค่า minRequiredPasswordLength และ minRequiredNonalphanumericCharacters ของ LocalMembershipProvider ให้เท่ากับ 5 และ 0 ตามลำดับ
    
    
    รูปที่ 3: CreateUserWizard คอนโทรลขณะใช้งาน
    
24. เมื่อลองทดสอบสร้างบัญชีของผู้ใช้ใหม่เช่น user3 จะพบว่าเราสามารถตั้งพาสเวิร์ดได้อย่างอิสระมากขึ้น ทั้งนี้เราสามารถปรับแต่งกฏของเราได้ตามต้องการ โดยสามารถหาอ่านเรื่องเกี่ยวกับการใช้ Regular Expression เพิ่มเติมได้จากบทความเรื่อง How To: Use Regular Expressions to Constrain Input in ASP.NET ในเว็บไซต์ของไมโครซอฟท์ที่ http://msdn2.microsoft.com/en-us/library/ms998267.aspx

หากเราต้องการให้ผู้ใช้สามารถเปลี่ยนพาสเวิร์ดของตนเองได้ก็สามารถทำได้ง่ายๆ โดยใช้ ChangePassword คอนโทรล ดังตัวอย่าง


25. สร้างไฟล์ใหม่โดยตั้งชื่อว่า ChangePassword.aspx จากนั้นลาก ChangePassword คอนโทรลลงมาวาง กำหนดค่า ContinueDestinationPageUrl ให้เป็นไฟล์ Default.aspx
    
26. ต่อมาให้เราเปิดไปที่ไฟล์ Default.aspx เลือก LoggedInTemplate จาก Tasks ของ LoginView จากนั้นลาก HyperLink คอนโทรลมาวางระหว่าง LoginName คอนโทรลและ LoginStatus คอนโทรล กำหนดค่า Text เป็น “Change Password” และค่า NavigateUrl ให้เป็น “~/ChangePassword.aspx”
    
27. กด F5 เพื่อทดสอบ โดยการล๊อคอินด้วยบัญชีที่เราสร้างขึ้นในขั้นตอนก่อนๆ จากนั้น Browse ไปยังหน้า ChangePassword.aspx เพื่อทดลองเปลี่ยนพาสเวิร์ด

นอกจากนี้เรายังสามารถอนุญาตให้ผู้ใช้รีเซตพาสเวิร์ดได้ในกรณีที่ลืม โดยใช้ PasswordRecovery คอนโทรลซึ่งก็มีวิธีการใช้งานที่คล้ายคลึงกันกับ ChangePassword คอนโทรลมาก จะเห็นได้ว่าการใช้งานชุดเครื่องมือ Login เพื่อสร้างระบบรักษาความปลอดภัยพื้นฐานนั้นสะดวกและมีประสิทธิภาพมาก นอกจากนี้เรายังสามารถควบคุมคอนโทรลเหล่านี้ผ่านโค้ด และนำไปปรับใช้ได้ในหลายๆสถานการณ์ สามารถตรวจสอบสถานะการล๊อคอินผ่าน User.Identity.IsAuthenticated ก่อนจะแสดงผล และสามารถปรับแต่งการแสดงผลของคอนโทรลด้วย Auto Format… ใน Tasks ของแต่ละคอนโทรลได้ เป็นต้น นับว่าเป็นชุดเครื่องมือที่ช่วยทุ่นแรงนักพัฒนาไปได้อย่างยิ่งยวดจริงๆ ใช่ไหมครับ