การพัฒนา Web Application – Page 7

เรียนรู้เทคโนโลยี OAuth2

March 3, 2019 18:00

OAuth2 คืออะไร ทำไมต้องใช้ OAuth2 คือมาตรฐานหนึ่งของระบบยืนยันตัวตน และจัดการสิทธิ์การเข้าใช้งานระบบต่าง ๆ เป็นมาตรฐาน rfc6747[1] ที่ใช้สำหรับ Client เชื่อมต่อกับ Server ที่ใช้ในการ Authen & Authorize เพื่อให้ได้รับสิ่งที่เรียกว่า Access Token เพื่อใช้แทน Username และ Password (สามารถใช้อย่างอื่นเพื่อขอ Token ก็ได้) เพื่อนำไปใช้กับบริการอื่น ๆ ทำให้มีความปลอดภัยมากขึ้น รวมถึงบอกว่าทำมีสิทธิ์ทำอะไรได้บ้างกับบริการนั้น ๆ (จริง ๆ แล้วถ้า Access Token หลุดก็เอาไปเข้าระบบอื่น ๆ ได้ อาจจะต่างตรงแค่ไม่เห็น Password) โดยแนะนำต้องใช้คู่กับ https อีกชั้นเพื่อความปลอดภัยสูงสุด โดยแสดงภาพคร่าว ๆ เป็น Protocol Flow ดังรูป[2] โดย Access Token จะมีเวลาจำกัดในการใช้งานเมื่อ Token หมดอายุ ก็ต้องไปขอใหม่ เมื่อเลิกใช้งานก็ขอยกเลิก Token รูปแบบการใช้งานมี 4 รูปแบบหรือเรียกว่า grant_type โดยแต่ละแบบมีรายละเอียดดังนี้[3] Authorization Codeใช้สำหรับ Web Server ที่ใช้ Code ด้านหลังในการเชื่อมต่อกับ OAuth Server โดยไม่ได้เปิดเผยให้สาธารณะเห็น อธิบายเป็นลักษณะการใช้งานคือ – ผู้ใช้งานเข้า Web Site – จะมีให้กด Login Facebook, Twitter, Google หรืออื่น ๆ – เมื่อผู้ใช้กดก็จะเด้งให้ไป Login ที่ผู้ให้บริการนั้น ๆ ถ้าเคย Login ไว้แล้วก็จะข้ามขั้นตอนนี้ไป – ถ้าผู้ให้บริการนั้น ๆ เช่น Facebook จะให้กดยอมรับข้ออนุญาต ส่วนมากจะถามเรื่องสิทธิ์ในการเข้าถึงข้อมูลส่วนตัว – เมื่อผู้ใช้กดอนุญาต ก็จะกลับมายัง Web Site โดยในเบื้องหลัง WebSite จะได้ authorization code มาเรียกร้อยแล้วจากผู้ให้บริการ – จากนั้นทาง Web Site ก็สามารถเข้าถึงข้อมูลของผู้ให้บริการนั้น ๆ ได้ตามสิทธิที่อนุญาตไว้ วิธีใช้ authorization code มีปุ่ม login ซึ่งมี link มี parameter คล้ายๆแบบนี้ https://[oauth-server]/authorize?response_type=code&client_id=testclient&client_secret=testpass&redirect_uri=http%3A%2F%2F10.1.0.20%3A32778%2F%3Fauth%3Dsso เมื่อกดปุ่ม login ระบบจะต้องแจ้งว่า จะขอใช้สิทธิเรื่องใดบ้าง เมื่อผู้ใช้กดตกลงอนุญาต หน้าจอจะถูกพาไปยัง redirect_uri ที่ระบุไว้ พร้อมทั้งส่ง authorization code มาให้ด้วย ซึ่งจะมีหน้าตาประมาณนี้ https://yoursite.com/oauth/callback?code=xxx อ่าน code ออกมาเพื่อนำไปขอ access_token กับ API ของผู้ให้บริการ login ตัวนั้นๆ POST https://api.blah.com/oauth/token?grant_type=authorization_code&code=xxx&redirect_uri=xxx&client_id=xxx&client_secret=xxx ค่า client_id, client_secret โดยมาก เจ้าของ login API (Identity provider) จะเป็นคนกำหนดมาให้ หลังจากส่ง code ด้วย HTTP method POST และบอกว่าเป็น grant_type แบบ authorization_code ไปแล้ว client จะได้ access_token กลับมา เราจะเอา access_token นั้นในการเรียก API อื่น ๆ

Refresh ข้อมูลในกรณีที่ฐานข้อมูลมีการอัพเดทใน LINQ และ Entity Framework (Refresh Query in LINQ)

February 22, 2019 15:32

จากปัญหาที่เคยเจอในกรณีที่ฐานข้อมูลมีการอัพเดทไปแล้ว พอ Select ข้อมูลออกมาข้อมูลไม่ refresh ในกรณีนี้จะยกตัวอย่างการใช้งานฟังก์ชัน reload ของ System.Data.Entity.Infrastructure public class DbEntityEntry where TEntity : class // Summary:// Reloads the entity from the database overwriting any property values with values // from the database. The entity will be in the Unchanged state after calling this// method.public void Reload(); โดยการใช้งานนั้นจะยกตัวอย่างตามโค้ดด้านล่าง ProjectEntities pe = new ProjectEntities(); var project = pe.PROJECT.Where(w => w.ID == projectID && w.YEAR == year).FirstOrDefault(); if (project != null) { pe.Entry(project).Reload(); } หวังว่าคงจะได้ช่วยโปรแกรมเมอร์ทีมีปัญหาเรื่องการ refresh ข้อมูลผ่าน LINQ และ Entity Framework

การสร้างเงื่อนไขแบบหลายตัวแปรในการค้นหาข้อมูลผ่าน LINQ (Multiple Search In LINQ)

February 22, 2019 15:31

การสร้างเงื่อนไขแบบหลายตัวแปรในการค้นหาข้อมูลผ่าน Linq เพื่อให้เห็นภาพชัดเจน จะยกตัวอย่างโดย กำหนดเงื่อนไข 3 ตัวแปร ดังนี้ ตัวแปร “ชื่อ/นามสกุล/เลขประจำตัวประชาชน” โดยใช้ control TextBox ที่ชื่อ ID=”txtSearch” ตัวแปร “โครงการรับ” โดยใช้ control DropDownList ที่ชื่อ ID=”ddProject” ตัวแปร “สถานะการตรวจเอกสาร” โดยใช้ control DropDownList ที่ชื่อ ID=”ddStatus” จากนั้นเราสร้าง Entity ยกตัวอย่างเป็น UploadEntities ซึ่งในที่นี้ สร้าง DbSet ที่เชื่อมต่อฝั่งฐานข้อมูลยกตัวอย่างเป็น V_REGISTRATION_UPLOAD ผ่าน Entity Framework 4.5 จากนั้นใช้ LINQ ในการเขียนเงื่อนไข ยกตัวอย่างตามโค้ดด้านล่าง project = ddProject.SelectedValue; status = ddStatus.SelectedValue; search = txtSearch.Text.Trim(); outList = ue.V_REGISTRATION_UPLOAD .Where(w => (w.STUD_FNAME.Contains(search) || w.STUD_LNAME.Contains(search) || w.CITIZEN_ID.Contains(search)) || string.IsNullOrEmpty(search)) .Where(x => x.PROJECT_ID == project || string.IsNullOrEmpty(project)) .Where(y => y.APPROVED_STATUS == status || string.IsNullOrEmpty(status)) .ToList(); gvUploadedList.DataSource = outList; gvUploadedList.DataBind(); สรุปได้ว่าการนำฟังก์ชัน Where ของ LINQ มาใช้งานนั้น ทำให้โปรแกรมเมอร์สะดวกและลดการเขียนโค้ดให้ง่ายขึ้นจากเมื่อก่อนที่ต้องตรวจสอบเงื่อนไขเป็นแบบทีละเงื่อนไข

การสร้าง RESTful API สำหรับใช้งานจริง ง่าย ๆ ด้วย Flask และ Waitress

January 4, 2019 14:17

จาก From LAB to Production – จาก Machine Learning Model สู่ Flask RESTful ซึ่งได้นำ Machine Learning แบบ Statistical Approach อย่าง Logistic Regression ที่สร้างโมเดล และ Train กับข้อมูลเรียบร้อยแล้ว (บนเครื่อง Development) จากนั้น ได้นำโมเดลออกมาใช้งาน โดยใช้ วิธีการ Serialization ด้วย joblib ในภาษา Python ได้เป็นไฟล์ออกมา แล้วจึงนำไปใช้เพื่อใช้ในการทำนาย (predict) ชนิดของดอก Iris บนเครื่อง Production โดยรับ Input จากผู้ใช้ผ่าน HTTP Protocol ทั้ง GET/POST ที่ TCP/5000 ตัวอย่างดังกล่าว ยังเป็นเพียงการ “ทดสอบ” แต่ในบทความนี้ จะเป็นวิธีการ ซึ่งนำไปสู่การใช้งานจริง ๆ ซึ่ง Flask แนะนำให้ใช้งานกับ “waitress” (น่าจะเลียนแบบจาก Server) ซึ่งเป็น WSGI (Web Server Gateway Interface) อีกตัวหนึ่ง ใช้งานง่าย เพราะไม่ต้องติดตั้ง Apache/Nginx เลย ติดตั้ง waitress predict.py from flask import Flask, request, jsonify from flask_restful import Resource, Api, reqparse from flask_cors import CORS app = Flask(__name__) # Enable CORS CORS(app) @app.route(“/predict”, methods=[“POST”]) def predict(): result = 0 if request.method == “POST”: input_value = request.form[“input_value”] # ประมวลผล # … # ตัวอย่างเช่น รับค่ามา แล้ว คูณ 2 result=input_value * 2 # ### return jsonify( prediction=result ),201 ไฟล์ predict.py เป็นตัวอย่าง python ซึ่งรับค่า input_value จาก HTML form ผ่าน POST method เข้ามา ที่ /predict ซึ่งเขียนด้วย Flask ที่จะไปเรียกใช้ฟังก์ชั่น prediction() แล้วก็ทำการคำนวณที่ต้องการ จากนั้น ตอบค่ากลับไปเป็น JSON ด้วยฟังก์ชั่น jsonify โดยสามารถกำหนด key ชื่อ prediction และ value เป็น result ที่คำนวณได้ และแจ้ง Response Code เป็น 201 waitress_server.py from waitress import serve import predict serve(predict.app, host=’0.0.0.0′, port=8080) ไฟล์ waitress_server.py ก็เพียงแค่ import serve จาก waitress ที่ติดตั้งไป และ import predict ซึ่งก็คือไฟล์ predict.py ข้างต้น (อยู่ในไดเรคทอรีเดียวกัน)

Stencil : Styling

December 9, 2018 09:44

Shadow DOM Shadow DOM เป็น API ที่อยู่ใน browser ที่ให้ความสามารถในทำ DOM encapsulation และ style encapsulation โดย Shadow DOM จะแยก component ออกจากภายนอก ทำให้ไม่ต้องกังวลกับ scope ของ css หรือผลกระทบกับ component ภายนอก หรือ component ภายนอกจะกระทบกับ component ภายใน ใน Stencil ค่า default การใช้งาน Shadow DOM ใน web component ที่สร้างด้วย Stencil จะถูกปิดอยู่ หากต้องการเปิดใช้งาน Shadow DOM ใน web component ต้องกำหนดค่า shadow param ใน component decorator ดังตัวอย่างด้านล่างนี้ @Component({ tag: ‘shadow-component’, styleUrl: ‘shadow-component.scss’, shadow: true }) export class ShadowComponent { } สิ่งจำเป็นเมื่อเปิดใช้งาน Shadow DOM QuerySelector เมื่อต้องการ query element ที่อยู่ภายใน web component จะต้องใช้ this.el.shadowRoot.querySelector() เนื่องจาก DOM ภายใน web component อยู่ภายใน shadowRoot Global Styles จะต้องใช้ CSS custom properties css selector สำหรับ web component element คือ “:host” selector โดยทั่วไป จะเก็บ styles ไว้ภายไต้ ชื่อ tag ของ component นั้น my-element { div { background: blue; } } ในกรณีของ Shadow DOM อยู่ภายใต้ tag :host :host { div { background: blue; } } Scoped CSS สำหรับ browser ที่ไม่สนับสนุน Shadow DOM, web component ที่สร้างโดย Stencil จะกลับไปใช้ scoped CSS แทนที่จะ load Shadow DOM polyfill ที่มีขนาดใหญ่ Scoped CSS จะทำการกำหนดขอบเขต CSS ให้กับ element โดยอัตโนมัตตอน runtime CSS Variables CSS Variables เหมือนกับ Sass Variables แต่ต่างกันตรงที่ CSS Variables รวมอยู่ใน browser โดยที่ CSS Variables ให้ความสามารถในการกำหนด CSS properties ที่ใช้ได้ภายใน app ตัวอย่างการใช้งานที่พบบ่อยคือ การกำหนดสี (color) ถ้ามีสีหลักที่ต้องการใช้ร่วมกันทั้ง app แทนที่จะกำหนดสีนั้นๆในแต่ละที่ที่ใช้งาน ก็จะสร้าง variable ขึ้นมาและใช้ variable นั้นในทุกๆที่ที่ต้องการ ซึ่งถ้าต้องการเปลี่ยนสี ก็สามารถเปลี่ยนที่ variable ที่เดียว การใช้งาน CSS Variables ใน Stencil สร้าง