AngularjsDeveloper

AngularJS กับการสร้างหน้า Login และทำงานร่วมกับ Session API

บทเรียน AngularJS สำหรับผู้เริ่มต้นศึกษา ในตอนนี้จะนำเสนอส่วนของการทำ Login System ที่ต้องมีการดึงข้อมูลการเข้าระบบผ่าน API มาและใช้ร่วมกับ Session 

บทเรียนสำหรับให้ศึกษาก่อนหน้านี้

สำหรับการทำระบบ Login ของ AngularJS นั้นจะเอาไปฝัง On Page แบบ Javascript ดาดเดือดทั่วไปก็คงจะไม่เหมาะครับ มันดูเอารถ Volvo ไปขายไอติม ถ้ามันทำงานแบบ SPA แล้ว Key Value จึงเป้นสิ่งที่เราต้องคิดอันดับแรกๆ ดังนั้น เราต้องสร้าง API ขึ้นมาใหม่ครับ เป็น API ที่เกี่ยวกับการเข้าระบบ และ เก็บ Session การเข้าระบบโดย AngularJS ทำหน้าที่เป็น Front End ก็พอ

ให้เราไปสร้าง API ใหม่ชื่อว่า login_action() ด้วย PHP ไฟล์ login_action.php ครับ

เป็นการรับค่าจาก Form ของ View โดยใช้ ng-model ที่ชื่อ Username และ Password มาแบบ Method POST ครับ

ถ้าเราต้องเขียนส่วนของ API แล้ว เรื่องของ Security เป็นสิ่งจำเป็นครับ อันที่จริงการส่ง Parameter ต้องมี API_KEY ด้วยแต่ผมขอละมันไว้ก่อนไปหาวิธีทำเองนะครับ ผมจะมาเน้นในเรื่องของ Session ที่มี Access Token เป็น Key อ้างอิง ซึ่งผมใช้วิธีการสุ่ม Random String ออกมาจากฟังก์ชันนี้

ทำการ Check Username Password ด้วย SQL ปรกติถ้าตรงกับตารางของ driver ที่เราสร้างไว้แต่แรกก็ให้ทำการ เก็บ Session ครับ

ทำการ echo ค่า true และ Access Token ออกมาเพื่อเอาไปเช็คที่หน้า Form ครับ ดังนั้นส่วนของการกดปุ่ม API ตอน Login เราจะเสร็จสมบูรณ์แล้ว ซึ่งจะได้ส่วนของ username และ access_token เก็บในลงใน Session

ต่อมาเราต้องทำหน้า Form ขึ้นมาครับเป็น View ใหม่ที่ชื่อ login.html

“อันที่จริงก็แค่เอาหน้า register.html มาแก้ก็เท่านั้น ใช่ไหม?”

ใส่ ng-app ชื่อ loginModules

และ ng-controller ชื่อ loginController

ตามด้วย controller/login.js สร้างไฟล์ Controller ชื่อ login.js ขึ้นมา

ไฟล์ login.html จะเป็นดังนี้

ส่วนของ controller ไฟล์ login.js นั้นจะใช้ Code ต่อไปนี้ครับ

กดปุ่ม Submit เรียกฟังก์ชัน ใน $scope

ทำการทดสอบหน้าเว็บของเราครับ

Screen Shot 2558-07-13 at 10.33.26 PM

ถ้า Login ถูก Alert ว่า “ok” ถ้าผิด alert ว่า “no”

Screen Shot 2558-07-13 at 10.33.46 PM

Access Token เรียบร้อยแล้ว {รหัส ยาวมาก}

Screen Shot 2558-07-13 at 10.33.55 PM

ทำการสร้าง API มาหนึ่งตัวครับชื่อว่า session() ไว้เช็คว่า ค่าคนที่ login อยู่มีค่าอะไรค้างใน session บ้าง

ทดสอบยิง URL ตรงๆ เช็คหน่อยดีกว่า

Screen Shot 2558-07-13 at 10.38.37 PM

message ในระบบเขียนอะไรก็ได้ แต่ username และ access_token ต้องใช้งานครับ เรามาสร้างหน้า ที่ต้องใช้ session ในการเข้าดู และสร้าง redirect page กรณีที่เรา Login เข้าระบบไม่ผ่านแล้วไปหน้า login.html ทันที ให้เรา View ขำๆ มา 1 หน้าครับ ชื่อ “session.html”

ประกอบไปด้วย ng-app ชื่อ sessionModles, ng-controller ชื่อ sessionController และ ไฟล์ controller ชื่อ session.js ไว้รับค่า session มาไว้ใน $scope ชื่อ session ไว้ repeat

ไฟล์ Controller ของ session.js เขียนดังนี้

ทดสอบกันหน่อยลองเข้าไปดูสิ

Screen Shot 2558-07-13 at 10.42.48 PM

ถ้า Session ไม่มีไฟล์ session.html จะ Redirect ไปที่หน้า login.html ครับ

ส่วน logout ก็เอา Code API ของการ Clear Session ไปใช้ ตามด้วย $location ส่วนของ redirect ไปก็เป็นอันจบครับ

Tags

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน