ส่วนหน้าของเว็บ

JSON Web Token Tutorial: ตัวอย่างใน Laravel และ AngularJS



ด้วยความนิยมที่เพิ่มขึ้นของแอปพลิเคชันหน้าเดียวแอปพลิเคชันมือถือและบริการ RESTful API จึงทำให้ นักพัฒนาเว็บ เขียนโค้ดส่วนหลังมีการเปลี่ยนแปลงอย่างมาก ด้วยเทคโนโลยีเช่น AngularJS และ BackboneJS เราไม่ได้ใช้เวลามากในการสร้างมาร์กอัปอีกต่อไป แต่เรากำลังสร้าง API ที่แอปพลิเคชันส่วนหน้าของเราใช้ ส่วนหลังของเราเป็นข้อมูลเพิ่มเติมเกี่ยวกับตรรกะทางธุรกิจและข้อมูลในขณะที่ตรรกะการนำเสนอจะถูกย้ายไปที่ส่วนหน้าหรือแอปพลิเคชันมือถือเท่านั้น การเปลี่ยนแปลงเหล่านี้นำไปสู่วิธีใหม่ในการใช้การพิสูจน์ตัวตนในแอปพลิเคชันสมัยใหม่

การพิสูจน์ตัวตนเป็นส่วนที่สำคัญที่สุดส่วนหนึ่งของเว็บแอปพลิเคชันใด ๆ เป็นเวลาหลายทศวรรษที่คุกกี้และการตรวจสอบสิทธิ์บนเซิร์ฟเวอร์เป็นวิธีแก้ปัญหาที่ง่ายที่สุด อย่างไรก็ตามการจัดการการรับรองความถูกต้องในแอปพลิเคชันมือถือและหน้าเดียวสมัยใหม่อาจเป็นเรื่องยุ่งยากและต้องการแนวทางที่ดีกว่า วิธีแก้ปัญหาการพิสูจน์ตัวตนที่รู้จักกันดีที่สุดสำหรับ API คือไฟล์ OAuth 2.0 และ JSON Web Token (JWT).



ก่อนที่เราจะเข้าสู่บทช่วยสอน JSON Web Token JWT คืออะไร?



JSON Web Token คืออะไร

JSON Web Token ใช้เพื่อส่งข้อมูลที่สามารถตรวจสอบและเชื่อถือได้โดยใช้ลายเซ็นดิจิทัล ประกอบด้วยอ็อบเจ็กต์ JSON ขนาดกะทัดรัดและปลอดภัย URL ซึ่งเซ็นชื่อแบบเข้ารหัสเพื่อยืนยันความถูกต้องและยังสามารถเข้ารหัสได้หากเพย์โหลดมีข้อมูลที่ละเอียดอ่อน



เนื่องจากโครงสร้างที่กะทัดรัดจึงมักใช้ JWT ใน HTTP Authorization ส่วนหัวหรือพารามิเตอร์การสืบค้น URL

โครงสร้างของ JSON Web Token

JWT แสดงเป็นลำดับของ base64url ค่าที่เข้ารหัสที่คั่นด้วยอักขระจุด



ตัวอย่างโทเค็นเว็บ JSON ใน laravel และ angularjs

นี่คือตัวอย่างโทเค็น JWT:



eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJpc3MiOiJ0b3B0YWwuY29tIiwiZXhwIjoxNDI2NDIwODAwLCJodHRwOi8vdG9wdGFsLmNvbS9qd3RfY2xhaW1zL2lzX2FkbWluIjp0cnVlLCJjb21wYW55IjoiVG9wdGFsIiwiYXdlc29tZSI6dHJ1ZX0. yRQYnWzskCZUxPwaQupWkiUzKELZ49eM7oWxAQK_ZXw

ส่วนหัวมีข้อมูลเมตาสำหรับโทเค็นและมีประเภทของลายเซ็นและอัลกอริทึมการเข้ารหัสน้อยที่สุด (คุณสามารถใช้ไฟล์ ตัวจัดรูปแบบ JSON เครื่องมือในการเตรียมวัตถุ JSON ไว้ล่วงหน้า)

ตัวอย่างส่วนหัว



{ 'alg': 'HS256', 'typ': 'JWT' }

ส่วนหัวตัวอย่าง JWT นี้ประกาศว่าอ็อบเจ็กต์ที่เข้ารหัสเป็น JSON Web Token และเซ็นชื่อโดยใช้อัลกอริทึม HMAC SHA-256

เมื่อเข้ารหัส base64 แล้วเราจะมีส่วนแรกของ JWT



eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

Payload (การเรียกร้อง)

ในบริบทของ JWT การอ้างสิทธิ์สามารถกำหนดเป็นคำสั่งเกี่ยวกับเอนทิตี (โดยทั่วไปคือผู้ใช้) ตลอดจนข้อมูลเมตาเพิ่มเติมเกี่ยวกับโทเค็นเอง การอ้างสิทธิ์ประกอบด้วยข้อมูลที่เราต้องการส่งและเซิร์ฟเวอร์สามารถใช้เพื่อจัดการกับการตรวจสอบสิทธิ์ JSON Web Token ได้อย่างเหมาะสม มีการอ้างสิทธิ์หลายอย่างที่เราสามารถให้ได้ ซึ่งรวมถึงชื่อการอ้างสิทธิ์ที่จดทะเบียนชื่อการอ้างสิทธิ์สาธารณะและชื่อการอ้างสิทธิ์ส่วนตัว

การอ้างสิทธิ์ JWT ที่ลงทะเบียนแล้ว



นี่คือการอ้างสิทธิ์ที่ลงทะเบียนใน รีจิสตรี IANA JSON Web Token Claims . การอ้างสิทธิ์ JWT เหล่านี้ไม่ได้มีวัตถุประสงค์เพื่อบังคับ แต่เป็นจุดเริ่มต้นสำหรับชุดการอ้างสิทธิ์ที่เป็นประโยชน์และสามารถทำงานร่วมกันได้

ซึ่งรวมถึง:

  • คือ : ผู้ออกโทเค็น
  • ย่อย : เรื่องของโทเค็น
  • ฉันได้ยิน : ผู้ชมของโทเค็น
  • ประสบการณ์ : เวลาหมดอายุของ JWT ที่กำหนดในเวลา Unix
  • nbf : เวลา“ ไม่ทัน” ที่ระบุเวลาก่อนหน้านี้ที่ต้องไม่ยอมรับ JWT สำหรับการประมวลผล
  • iat : เวลา 'ออกเมื่อ' ในเวลา Unix ซึ่งมีการออกโทเค็น
  • jti : การอ้างสิทธิ์ JWT ID ให้ตัวระบุเฉพาะสำหรับ JWT

การเรียกร้องสาธารณะ

การอ้างสิทธิ์สาธารณะจำเป็นต้องมีชื่อที่ทนต่อการชนกัน การตั้งชื่อเป็น URI หรือ URN จะหลีกเลี่ยงการชนกันของการตั้งชื่อสำหรับ JWT ที่ผู้ส่งและผู้รับไม่ได้เป็นส่วนหนึ่งของเครือข่ายปิด

ตัวอย่างของชื่อการอ้างสิทธิ์สาธารณะอาจเป็น: https://www.toptal.com/jwt_claims/is_admin และแนวทางปฏิบัติที่ดีที่สุดคือวางไฟล์ไว้ที่ตำแหน่งนั้นเพื่ออธิบายการอ้างสิทธิ์เพื่อให้สามารถยกเลิกการอ้างอิงสำหรับเอกสารประกอบได้

การอ้างสิทธิ์ส่วนตัว

สามารถใช้ชื่อการอ้างสิทธิ์ส่วนตัวในสถานที่ที่มีการแลกเปลี่ยน JWT ในสภาพแวดล้อมแบบปิดระหว่างระบบที่รู้จักเท่านั้นเช่นภายในองค์กร นี่คือการอ้างสิทธิ์ที่เราสามารถกำหนดได้เองเช่น ID ผู้ใช้บทบาทของผู้ใช้หรือข้อมูลอื่น ๆ

การใช้ชื่อเรียกร้องที่อาจมีความหมายเชิงความหมายที่ขัดแย้งกันนอกระบบปิดหรือระบบส่วนตัวอาจมีการปะทะกันดังนั้นโปรดใช้ด้วยความระมัดระวัง

โปรดทราบว่าเราต้องการให้โทเค็นของเว็บมีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ดังนั้นควรใช้เฉพาะข้อมูลที่จำเป็นภายในการอ้างสิทธิ์สาธารณะและส่วนตัว

JWT ตัวอย่าง Payload

{ 'iss': 'toptal.com', 'exp': 1426420800, 'https://www.toptal.com/jwt_claims/is_admin': true, 'company': 'ApeeScape', 'awesome': true }

เพย์โหลดตัวอย่างนี้มีการอ้างสิทธิ์ที่ลงทะเบียนไว้สองรายการการอ้างสิทธิ์สาธารณะหนึ่งรายการและการอ้างสิทธิ์ส่วนตัวสองรายการ เมื่อเข้ารหัส base64 แล้วเราจะมีส่วนที่สองของ JWT ของเรา

eyJpc3MiOiJ0b3B0YWwuY29tIiwiZXhwIjoxNDI2NDIwODAwLCJodHRwOi8vdG9wdGFsLmNvbS9qd3RfY2xhaW1zL2lzX2FkbWluIjp0cnVlLCJjb21wYW55IjoiVG9wdGFsIiwiYXdlc29tZSI6dHJ1ZX0

ลายเซ็น

มาตรฐาน JWT เป็นไปตามข้อกำหนด JSON Web Signature (JWS) เพื่อสร้างโทเค็นที่เซ็นชื่อขั้นสุดท้าย สร้างขึ้นโดยการรวม JWT Header ที่เข้ารหัสและ JWT Payload ที่เข้ารหัสและเซ็นชื่อโดยใช้อัลกอริทึมการเข้ารหัสที่แข็งแกร่งเช่น HMAC SHA-256 รหัสลับของลายเซ็นถูกเก็บไว้โดยเซิร์ฟเวอร์ดังนั้นจึงสามารถตรวจสอบโทเค็นที่มีอยู่และเซ็นชื่อใหม่ได้

$encodedContent = base64UrlEncode(header) + '.' + base64UrlEncode(payload); $signature = hashHmacSHA256($encodedContent);

นี่เป็นส่วนสุดท้ายของ JWT ของเรา

yRQYnWzskCZUxPwaQupWkiUzKELZ49eM7oWxAQK_ZXw

JWT ความปลอดภัยและการเข้ารหัส

จำเป็นอย่างยิ่งที่จะต้องใช้ TLS / SSL ร่วมกับ JWT เพื่อป้องกันการโจมตีจากคนตรงกลาง ในกรณีส่วนใหญ่สิ่งนี้จะเพียงพอที่จะเข้ารหัสเพย์โหลด JWT หากมีข้อมูลที่ละเอียดอ่อน อย่างไรก็ตามหากเราต้องการเพิ่มชั้นการป้องกันเพิ่มเติมเราสามารถเข้ารหัสเพย์โหลด JWT เองโดยใช้ไฟล์ การเข้ารหัสเว็บ JSON (เล่น)

แน่นอนว่าหากเราต้องการหลีกเลี่ยงค่าใช้จ่ายเพิ่มเติมในการใช้ JWE อีกทางเลือกหนึ่งคือเพียงแค่เก็บข้อมูลที่ละเอียดอ่อนไว้ในฐานข้อมูลของเราและใช้โทเค็นของเราสำหรับการเรียก API เพิ่มเติมไปยังเซิร์ฟเวอร์เมื่อใดก็ตามที่เราต้องการเข้าถึงข้อมูลที่ละเอียดอ่อน

ทำไมต้องใช้ Web Token?

ก่อนที่เราจะเห็นประโยชน์ทั้งหมดของการใช้การพิสูจน์ตัวตน JWT เราต้องดูวิธีการพิสูจน์ตัวตนในอดีต

การรับรองความถูกต้องบนเซิร์ฟเวอร์

การรับรองความถูกต้องบนเซิร์ฟเวอร์

เนื่องจากโปรโตคอล HTTP ไม่มีสถานะจึงจำเป็นต้องมีกลไกในการจัดเก็บข้อมูลผู้ใช้และวิธีการพิสูจน์ตัวตนผู้ใช้ในทุกคำขอที่ตามมาหลังจากล็อกอิน เว็บไซต์ส่วนใหญ่ใช้คุกกี้เพื่อจัดเก็บรหัสเซสชันของผู้ใช้

มันทำงานอย่างไร

เบราว์เซอร์ส่งคำขอ POST ไปยังเซิร์ฟเวอร์ที่มีรหัสประจำตัวผู้ใช้และรหัสผ่าน เซิร์ฟเวอร์ตอบสนองด้วยคุกกี้ซึ่งตั้งค่าบนเบราว์เซอร์ของผู้ใช้และมีรหัสเซสชันเพื่อระบุผู้ใช้

ในทุกคำขอที่ตามมาเซิร์ฟเวอร์จำเป็นต้องค้นหาเซสชันนั้นและยกเลิกการกำหนดค่าเริ่มต้นเนื่องจากข้อมูลผู้ใช้ถูกเก็บไว้บนเซิร์ฟเวอร์

ข้อเสียของการรับรองความถูกต้องบนเซิร์ฟเวอร์

  • ยากที่จะปรับขนาด : เซิร์ฟเวอร์จำเป็นต้องสร้างเซสชันสำหรับผู้ใช้และคงอยู่ที่ใดที่หนึ่งบนเซิร์ฟเวอร์ สามารถทำได้ในหน่วยความจำหรือในฐานข้อมูล หากเรามีระบบแบบกระจายเราต้องตรวจสอบให้แน่ใจว่าเราใช้พื้นที่จัดเก็บเซสชันแยกต่างหากที่ไม่ได้เชื่อมต่อกับแอ็พพลิเคชันเซิร์ฟเวอร์

  • การแบ่งปันคำขอข้ามแหล่งที่มา (CORS) : เมื่อใช้การเรียก AJAX เพื่อดึงทรัพยากรจากโดเมนอื่น (“ ข้ามแหล่งที่มา”) เราอาจประสบปัญหากับคำขอที่ต้องห้ามเนื่องจากโดยค่าเริ่มต้นคำขอ HTTP จะไม่รวมคุกกี้ในคำขอข้ามแหล่งที่มา

  • การเชื่อมต่อกับเว็บเฟรมเวิร์ก : เมื่อใช้การพิสูจน์ตัวตนบนเซิร์ฟเวอร์เราจะเชื่อมโยงกับโครงร่างการตรวจสอบสิทธิ์ของเฟรมเวิร์ก เป็นเรื่องยากมากหรือเป็นไปไม่ได้เลยที่จะแบ่งปันข้อมูลเซสชันระหว่างเว็บเฟรมเวิร์กต่างๆที่เขียนด้วยภาษาโปรแกรมต่างๆ

การรับรองความถูกต้องโดยใช้โทเค็น

การรับรองความถูกต้องโดยใช้โทเค็น

การตรวจสอบความถูกต้องโดยใช้โทเค็น / JWT ไม่มีสถานะดังนั้นจึงไม่จำเป็นต้องจัดเก็บข้อมูลผู้ใช้ในเซสชัน สิ่งนี้ช่วยให้เราสามารถปรับขนาดแอปพลิเคชันของเราได้โดยไม่ต้องกังวลว่าผู้ใช้เข้าสู่ระบบที่ไหนเราสามารถใช้โทเค็นเดียวกันเพื่อดึงทรัพยากรที่ปลอดภัยจากโดเมนอื่นที่ไม่ใช่โดเมนที่เราลงชื่อเข้าใช้

JSON Web Tokens ทำงานอย่างไร

เบราว์เซอร์หรือไคลเอนต์มือถือส่งคำขอไปยังเซิร์ฟเวอร์การพิสูจน์ตัวตนที่มีข้อมูลการเข้าสู่ระบบของผู้ใช้ เซิร์ฟเวอร์การพิสูจน์ตัวตนสร้างโทเค็นการเข้าถึง JWT ใหม่และส่งคืนให้กับไคลเอ็นต์ ในทุกคำขอไปยังทรัพยากรที่ถูก จำกัด ไคลเอ็นต์จะส่งโทเค็นการเข้าถึงในสตริงแบบสอบถามหรือ Authorization หัวข้อ. จากนั้นเซิร์ฟเวอร์จะตรวจสอบความถูกต้องของโทเค็นและหากถูกต้องจะส่งคืนทรัพยากรที่ปลอดภัยให้กับไคลเอ็นต์

เซิร์ฟเวอร์การตรวจสอบสิทธิ์สามารถลงนามโทเค็นโดยใช้วิธีลายเซ็นที่ปลอดภัย ตัวอย่างเช่นสามารถใช้อัลกอริทึมคีย์สมมาตรเช่น HMAC SHA-256 ได้หากมีช่องทางที่ปลอดภัยเพื่อแบ่งปันคีย์ลับระหว่างทุกฝ่าย หรืออีกวิธีหนึ่งคือระบบคีย์สาธารณะแบบไม่สมมาตรเช่น RSA ก็สามารถใช้ได้เช่นกันโดยไม่จำเป็นต้องแชร์คีย์เพิ่มเติม

ข้อดีของการพิสูจน์ตัวตนโดยใช้โทเค็น

ไร้สัญชาติและปรับขนาดได้ง่ายกว่า : โทเค็นมีข้อมูลทั้งหมดเพื่อระบุตัวผู้ใช้โดยไม่จำเป็นต้องมีสถานะเซสชัน หากเราใช้ตัวโหลดบาลานเซอร์เราสามารถส่งผู้ใช้ไปยังเซิร์ฟเวอร์ใดก็ได้แทนที่จะถูกผูกไว้กับเซิร์ฟเวอร์เดียวกันกับที่เราล็อกอิน

การนำกลับมาใช้ใหม่ : เราสามารถมีเซิร์ฟเวอร์แยกกันได้หลายเครื่องทำงานบนหลายแพลตฟอร์มและโดเมนโดยใช้โทเค็นเดิมซ้ำเพื่อพิสูจน์ตัวตนผู้ใช้ ง่ายต่อการสร้างแอปพลิเคชันที่แชร์สิทธิ์กับแอปพลิเคชันอื่น

JWT Security : เนื่องจากเราไม่ได้ใช้คุกกี้เราจึงไม่จำเป็นต้องป้องกันการโจมตีด้วยการปลอมแปลงคำขอข้ามไซต์ (CSRF) เราควรเข้ารหัสโทเค็นของเราโดยใช้ JWE หากเราต้องใส่ข้อมูลที่ละเอียดอ่อนใด ๆ ลงไปและส่งโทเค็นของเราผ่าน HTTPS เพื่อป้องกันการโจมตีจากคนตรงกลาง

ประสิทธิภาพ : ไม่มีการค้นหาฝั่งเซิร์ฟเวอร์เพื่อค้นหาและยกเลิกการกำหนดค่าเซสชันในแต่ละคำขอ สิ่งเดียวที่เราต้องทำคือคำนวณ HMAC SHA-256 เพื่อตรวจสอบความถูกต้องของโทเค็นและแยกวิเคราะห์เนื้อหา

กระบวนการพยายามสร้างความมั่งคั่งด้วยการเริ่มธุรกิจ

ตัวอย่างโทเค็นเว็บ JSON โดยใช้ Laravel 5 และ AngularJS

ในบทช่วยสอน JWT นี้ฉันจะสาธิตวิธีใช้การรับรองความถูกต้องพื้นฐานโดยใช้ JSON Web Tokens ในเทคโนโลยีเว็บยอดนิยมสองแบบ: Laravel 5 สำหรับโค้ดแบ็กเอนด์และ AngularJS สำหรับตัวอย่าง Frontend Single Page Application (SPA) (คุณสามารถค้นหาการสาธิตทั้งหมดได้ ที่นี่ และซอร์สโค้ดใน ที่เก็บ GitHub นี้ เพื่อให้คุณสามารถทำตามบทช่วยสอนได้)

ตัวอย่างโทเค็นเว็บ JSON นี้จะไม่ใช้การเข้ารหัสใด ๆ เพื่อให้แน่ใจว่าข้อมูลที่ส่งในการอ้างสิทธิ์นั้นเป็นความลับ ในทางปฏิบัติมักจะไม่เป็นไรเนื่องจาก TLS / SSL เข้ารหัสคำขอ อย่างไรก็ตามหากโทเค็นมีข้อมูลที่ละเอียดอ่อนเช่นหมายเลขประกันสังคมของผู้ใช้ก็ควรเข้ารหัสโดยใช้ JWE

ตัวอย่างแบ็กเอนด์ Laravel

เราจะใช้ Laravel เพื่อจัดการการลงทะเบียนผู้ใช้ข้อมูลผู้ใช้ที่ยังคงอยู่ไปยังฐานข้อมูลและให้ข้อมูลที่ จำกัด บางอย่างที่ต้องการการตรวจสอบสิทธิ์เพื่อให้แอป Angular ใช้ เราจะสร้างโดเมนย่อย API ตัวอย่างเพื่อจำลองการแชร์ทรัพยากรข้ามแหล่งที่มา (CORS) ด้วย

การติดตั้งและการเริ่มต้นโครงการ

ในการใช้ Laravel เราต้องติดตั้งไฟล์ นักแต่งเพลง ผู้จัดการแพ็คเกจบนเครื่องของเรา เมื่อพัฒนาใน Laravel ขอแนะนำให้ใช้ 'กล่อง' ของ Vagrant ที่บรรจุไว้ล่วงหน้าของ Laravel Homestead มันทำให้เรามีสภาพแวดล้อมการพัฒนาที่สมบูรณ์โดยไม่คำนึงถึงระบบปฏิบัติการของเรา

วิธีที่ง่ายที่สุดในการบูตแอปพลิเคชัน JWT Laravel ของเราคือการใช้โปรแกรมติดตั้ง Laravel ของแพ็คเกจ Composer

composer global require 'laravel/installer=~1.1'

ตอนนี้เราทุกคนพร้อมที่จะสร้างโครงการ Laravel ใหม่โดยการเรียกใช้ laravel new jwt

หากมีคำถามใด ๆ เกี่ยวกับกระบวนการนี้โปรดดูที่เจ้าหน้าที่ เอกสาร Laravel .

หลังจากที่เราสร้างแอปพลิเคชัน Laravel 5 พื้นฐานแล้วเราจำเป็นต้องตั้งค่า Homestead.yaml ซึ่งจะกำหนดค่าการแมปโฟลเดอร์และการกำหนดค่าโดเมนสำหรับสภาพแวดล้อมภายในของเรา

ตัวอย่างของ Homestead.yaml ไฟล์:

--- ip: '192.168.10.10' memory: 2048 cpus: 1 authorize: /Users/ttkalec/.ssh/public.psk keys: - /Users/ttkalec/.ssh/private.ppk folders: - map: /coding/jwt to: /home/vagrant/coding/jwt sites: - map: jwt.dev to: /home/vagrant/coding/jwt/public - map: api.jwt.dev to: /home/vagrant/coding/jwt/public variables: - key: APP_ENV value: local

หลังจากที่เราบูตกล่อง Vagrant ของเราด้วย vagrant up คำสั่งและเข้าสู่ระบบโดยใช้ vagrant ssh เราไปที่ไดเร็กทอรีโครงการที่กำหนดไว้ก่อนหน้านี้ ในตัวอย่างด้านบนนี้จะเป็น /home/vagrant/coding/jwt ตอนนี้เราสามารถเรียกใช้ php artisan migrate คำสั่งเพื่อสร้างตารางผู้ใช้ที่จำเป็นในฐานข้อมูลของเรา

การติดตั้ง Composer Dependencies

โชคดีที่มีชุมชนนักพัฒนาที่ทำงานเกี่ยวกับ Laravel และดูแลรักษาแพ็คเกจที่ยอดเยี่ยมมากมายที่เราสามารถนำมาใช้ซ้ำและขยายแอปพลิเคชันของเราได้ ในตัวอย่างนี้เราจะใช้ tymon/jwt-auth โดย Sean Tymon สำหรับจัดการโทเค็นทางฝั่งเซิร์ฟเวอร์และ barryvdh/laravel-cors โดย Barry vd. Heuvel สำหรับการจัดการ CORS

jwt-auth

ต้องมี tymon/jwt-auth แพ็คเกจใน composer.json ของเรา และอัปเดตการอ้างอิงของเรา

composer require tymon/jwt-auth 0.5.*

เพิ่ม JWTAuthServiceProvider ถึง app/config/app.php ของเรา อาร์เรย์ผู้ให้บริการ

'TymonJWTAuthProvidersJWTAuthServiceProvider'

ถัดไปใน app/config/app.php ภายใต้ aliases อาร์เรย์เราเพิ่ม JWTAuth ซุ้ม.

'JWTAuth' => 'TymonJWTAuthFacadesJWTAuth'

สุดท้ายเราต้องการเผยแพร่การกำหนดค่าแพคเกจโดยใช้คำสั่งต่อไปนี้: php artisan config: published tymon / jwt-auth

โทเค็นเว็บ JSON ถูกเข้ารหัสโดยใช้คีย์ลับ เราสามารถสร้างคีย์นั้นโดยใช้ php artisan jwt:generate คำสั่ง มันจะอยู่ใน config/jwt.php ของเรา ไฟล์. อย่างไรก็ตามในสภาพแวดล้อมการใช้งานจริงเราไม่ต้องการให้รหัสผ่านหรือคีย์ API ของเราอยู่ในไฟล์คอนฟิกูเรชัน แต่เราควรวางไว้ในตัวแปรสภาพแวดล้อมเซิร์ฟเวอร์และอ้างอิงในไฟล์กำหนดค่าด้วย env ฟังก์ชัน ตัวอย่างเช่น:

'secret' => env('JWT_SECRET')

เราสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับแพ็คเกจนี้และการตั้งค่าการกำหนดค่าทั้งหมด บน Github .

laravel-cors

ต้องมี barryvdh/laravel-cors แพ็คเกจใน composer.json ของเรา และอัปเดตการอ้างอิงของเรา

composer require barryvdh/laravel-cors [email protected]

เพิ่ม CorsServiceProvider ถึง app/config/app.php ของเรา อาร์เรย์ผู้ให้บริการ

'BarryvdhCorsCorsServiceProvider'

จากนั้นเพิ่มตัวกลางใน app/Http/Kernel.php ของเรา

'BarryvdhCorsMiddlewareHandleCors'

เผยแพร่การกำหนดค่าไปยังโลคัล config/cors.php ไฟล์โดยใช้ php artisan vendor:publish คำสั่ง

ตัวอย่างของ cors.php การกำหนดค่าไฟล์:

return [ 'defaults' => [ 'supportsCredentials' => false, 'allowedOrigins' => [], 'allowedHeaders' => [], 'allowedMethods' => [], 'exposedHeaders' => [], 'maxAge' => 0, 'hosts' => [], ], 'paths' => [ 'v1/*' => [ 'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'], 'maxAge' => 3600, ], ], ];

การกำหนดเส้นทางและการจัดการคำขอ HTTP

เพื่อความสั้นฉันจะใส่รหัสทั้งหมดของฉันไว้ในไฟล์ route.php ที่รับผิดชอบการกำหนดเส้นทาง Laravel และการมอบหมายคำขอไปยังคอนโทรลเลอร์ โดยปกติเราจะสร้างคอนโทรลเลอร์เฉพาะสำหรับจัดการคำขอ HTTP ทั้งหมดของเราและทำให้โค้ดของเราเป็นโมดูลและสะอาด

เราจะโหลดมุมมอง AngularJS SPA ของเราโดยใช้

Route::get('/', function () { return view('spa'); });

การลงทะเบียนผู้ใช้

เมื่อเราสร้าง POST ขอ /signup ด้วยชื่อผู้ใช้และรหัสผ่านเราจะพยายามสร้างผู้ใช้ใหม่และบันทึกลงในฐานข้อมูล หลังจากสร้างผู้ใช้แล้ว JWT จะถูกสร้างและส่งคืนผ่านการตอบสนอง JSON

Route::post('/signup', function () { $credentials = Input::only('email', 'password'); try { $user = User::create($credentials); } catch (Exception $e) { return Response::json(['error' => 'User already exists.'], HttpResponse::HTTP_CONFLICT); } $token = JWTAuth::fromUser($user); return Response::json(compact('token')); });

ผู้ใช้ลงชื่อเข้าใช้

เมื่อเราสร้าง POST ขอ /signin ด้วยชื่อผู้ใช้และรหัสผ่านเราตรวจสอบว่ามีผู้ใช้อยู่และส่งคืน JWT ผ่านการตอบสนอง JSON

Route::post('/signin', function () { $credentials = Input::only('email', 'password'); if ( ! $token = JWTAuth::attempt($credentials)) { return Response::json(false, HttpResponse::HTTP_UNAUTHORIZED); } return Response::json(compact('token')); });

การดึงทรัพยากรที่ถูก จำกัด บนโดเมนเดียวกัน

เมื่อผู้ใช้ลงชื่อเข้าใช้แล้วเราสามารถดึงทรัพยากรที่ จำกัด ได้ ฉันได้สร้างเส้นทางแล้ว /restricted ที่จำลองทรัพยากรที่ต้องการผู้ใช้ที่พิสูจน์ตัวตน ในการดำเนินการนี้คำขอ Authorization ส่วนหัวหรือสตริงการสืบค้นจำเป็นต้องระบุ JWT สำหรับแบ็กเอนด์เพื่อตรวจสอบ

Route::get('/restricted', [ 'before' => 'jwt-auth', function () { $token = JWTAuth::getToken(); $user = JWTAuth::toUser($token); return Response::json([ 'data' => [ 'email' => $user->email, 'registered_at' => $user->created_at->toDateTimeString() ] ]); } ]);

ในตัวอย่างนี้ฉันใช้ jwt-auth มิดเดิลแวร์ที่มีให้ใน jwt-auth แพ็กเกจโดยใช้ 'before' => 'jwt-auth'. มิดเดิลแวร์นี้ใช้เพื่อกรองคำร้องขอและตรวจสอบความถูกต้องของโทเค็น JWT หากโทเค็นไม่ถูกต้องไม่มีอยู่หรือหมดอายุมิดเดิลแวร์จะแสดงข้อยกเว้นที่เราสามารถจับ

ใน Laravel 5 เราสามารถจับข้อยกเว้นได้โดยใช้ app/Exceptions/Handler.php ไฟล์. การใช้ render เราสามารถสร้างการตอบสนอง HTTP ตามข้อยกเว้นที่ถูกโยนทิ้ง

public function render($request, Exception $e) { if ($e instanceof TymonJWTAuthExceptionsTokenInvalidException) { return response(['Token is invalid'], 401); } if ($e instanceof TymonJWTAuthExceptionsTokenExpiredException) { return response(['Token has expired'], 401); } return parent::render($request, $e); }

หากผู้ใช้ได้รับการตรวจสอบสิทธิ์และโทเค็นถูกต้องเราสามารถส่งคืนข้อมูลที่ จำกัด ไปยังส่วนหน้าได้อย่างปลอดภัยผ่านทาง JSON

การดึงทรัพยากรที่ถูก จำกัด จากโดเมนย่อยของ API

ในตัวอย่างโทเค็นเว็บ JSON ถัดไปเราจะใช้วิธีอื่นในการตรวจสอบโทเค็น แทนที่จะใช้ jwt-auth มิดเดิลแวร์เราจะจัดการข้อยกเว้นด้วยตนเอง เมื่อเราสร้าง POST ร้องขอไปยังเซิร์ฟเวอร์ API api.jwt.dev/v1/restricted เรากำลังสร้างคำขอข้ามแหล่งที่มาและต้องเปิดใช้งาน CORS บนแบ็กเอนด์ โชคดีที่เราได้กำหนดค่า CORS แล้วใน config/cors.php ไฟล์.

Route::group(['domain' => 'api.jwt.dev', 'prefix' => 'v1'], function () { Route::get('/restricted', function () { try { JWTAuth::parseToken()->toUser(); } catch (Exception $e) { return Response::json(['error' => $e->getMessage()], HttpResponse::HTTP_UNAUTHORIZED); } return ['data' => 'This has come from a dedicated API subdomain with restricted access.']; }); });

AngularJS Frontend ตัวอย่าง

เรากำลังใช้ AngularJS เป็นส่วนหน้าโดยอาศัยการเรียก API ไปยังเซิร์ฟเวอร์การตรวจสอบสิทธิ์ส่วนหลังของ Laravel สำหรับการตรวจสอบผู้ใช้และข้อมูลตัวอย่างรวมถึงเซิร์ฟเวอร์ API สำหรับข้อมูลตัวอย่างข้ามแหล่งที่มา เมื่อเราไปที่หน้าแรกของโครงการของเราแบ็กเอนด์จะให้บริการ resources/views/spa.blade.php มุมมองที่จะบูตแอปพลิเคชัน Angular

นี่คือโครงสร้างโฟลเดอร์ของแอพ Angular:

public/ |-- css/ `-- bootstrap.superhero.min.css |-- lib/ |-- loading-bar.css |-- loading-bar.js `-- ngStorage.js |-- partials/ |-- home.html |-- restricted.html |-- signin.html `-- signup.html `-- scripts/ |-- app.js |-- controllers.js `-- services.js

การบูตแอปพลิเคชันเชิงมุม

spa.blade.php มีสิ่งจำเป็นที่จำเป็นในการเรียกใช้แอปพลิเคชัน เราจะใช้ Twitter Bootstrap ในการจัดแต่งทรงผมพร้อมกับธีมที่กำหนดเองจาก รองเท้าบูท . หากต้องการรับข้อเสนอแนะที่เป็นภาพเมื่อโทรหา AJAX เราจะใช้ไฟล์ เชิงมุมโหลดบาร์ สคริปต์ซึ่งสกัดกั้นคำขอ XHR และสร้างแถบการโหลด ในส่วนส่วนหัวเรามีสไตล์ชีตดังต่อไปนี้:

ngStorage

ส่วนท้ายของมาร์กอัปของเรามีการอ้างอิงถึงไลบรารีรวมถึงสคริปต์ที่กำหนดเองของเราสำหรับโมดูล Angular คอนโทรลเลอร์และบริการ

Authorization

เรากำลังใช้ token ไลบรารีสำหรับ AngularJS เพื่อบันทึกโทเค็นลงในที่จัดเก็บในตัวของเบราว์เซอร์เพื่อให้เราสามารถส่งไปตามคำขอแต่ละครั้งผ่านทาง Toggle navigation JWT Angular example

หัวข้อ.

แน่นอนว่าในสภาพแวดล้อมการใช้งานจริงเราจะลดขนาดและรวมไฟล์สคริปต์และสไตล์ชีตทั้งหมดของเราเข้าด้วยกันเพื่อปรับปรุงประสิทธิภาพ

ฉันได้สร้างแถบนำทางโดยใช้ Bootstrap ซึ่งจะเปลี่ยนการแสดงลิงก์ที่เหมาะสมขึ้นอยู่กับสถานะการลงชื่อเข้าใช้ของผู้ใช้ สถานะการลงชื่อเข้าใช้จะถูกกำหนดโดยการมี app.js ตัวแปรในขอบเขตของคอนโทรลเลอร์

angular.module('app', [ 'ngStorage', 'ngRoute', 'angular-loading-bar' ]) .constant('urls', { BASE: 'http://jwt.dev:8000', BASE_API: 'http://api.jwt.dev:8000/v1' }) .config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) { $routeProvider. when('/', { templateUrl: 'partials/home.html', controller: 'HomeController' }). when('/signin', { templateUrl: 'partials/signin.html', controller: 'HomeController' }). when('/signup', { templateUrl: 'partials/signup.html', controller: 'HomeController' }). when('/restricted', { templateUrl: 'partials/restricted.html', controller: 'RestrictedController' }). otherwise({ redirectTo: '/' });

การกำหนดเส้นทาง

เรามีไฟล์ชื่อ HomeController ซึ่งรับผิดชอบในการกำหนดค่าเส้นทางส่วนหน้าทั้งหมดของเรา

RestrictedController

ที่นี่เราจะเห็นว่าเราได้กำหนดสี่เส้นทางที่จัดการโดย Authorization หรือ $httpProvider.interceptors.push(['$q', '$location', '$localStorage', function ($q, $location, $localStorage) { return { 'request': function (config) { config.headers = config.headers || {}; if ($localStorage.token) { config.headers.Authorization = 'Bearer ' + $localStorage.token; } return config; }, 'responseError': function (response) { if (response.status === 401 || response.status === 403) { $location.path('/signin'); } return $q.reject(response); } }; }]); . ทุกเส้นทางสอดคล้องกับมุมมอง HTML บางส่วน เราได้กำหนดค่าคงที่สองรายการที่มี URL สำหรับคำขอ HTTP ของเราไปยังแบ็กเอนด์

ขอ Interceptor

บริการ $ http ของ AngularJS ช่วยให้เราสามารถสื่อสารกับแบ็กเอนด์และส่งคำขอ HTTP ในกรณีของเราเราต้องการสกัดกั้นคำขอ HTTP ทั้งหมดและฉีดด้วย controllers.js ส่วนหัวที่มี JWT ของเราหากผู้ใช้ได้รับการพิสูจน์ตัวตน เรายังสามารถใช้ตัวสกัดกั้นเพื่อสร้างตัวจัดการข้อผิดพลาด HTTP ส่วนกลาง นี่คือตัวอย่างของตัวสกัดกั้นของเราที่ฉีดโทเค็นหากมีอยู่ในพื้นที่เก็บข้อมูลในตัวของเบราว์เซอร์

HomeController

ตัวควบคุม

ใน RestrictedController ไฟล์เราได้กำหนดคอนโทรลเลอร์สองตัวสำหรับแอปพลิเคชันของเรา: HomeController และ Auth. angular.module('app') .controller('HomeController', ['$rootScope', '$scope', '$location', '$localStorage', 'Auth', function ($rootScope, $scope, $location, $localStorage, Auth) { function successAuth(res) { $localStorage.token = res.token; window.location = '/'; } $scope.signin = function () { var formData = { email: $scope.email, password: $scope.password }; Auth.signin(formData, successAuth, function () { $rootScope.error = 'Invalid credentials.'; }) }; $scope.signup = function () { var formData = { email: $scope.email, password: $scope.password }; Auth.signup(formData, successAuth, function () { $rootScope.error = 'Failed to signup'; }) }; $scope.logout = function () { Auth.logout(function () { window.location = '/' }); }; $scope.token = $localStorage.token; $scope.tokenClaims = Auth.getTokenClaims(); }]) จัดการการลงชื่อเข้าใช้การสมัครและออกจากระบบ โดยจะส่งข้อมูลชื่อผู้ใช้และรหัสผ่านจากแบบฟอร์มลงชื่อเข้าใช้และลงทะเบียนไปยัง RestrictedController บริการซึ่งส่งคำขอ HTTP ไปยังแบ็กเอนด์ จากนั้นจะบันทึกโทเค็นลงในที่จัดเก็บในตัวเครื่องหรือแสดงข้อความแสดงข้อผิดพลาดขึ้นอยู่กับการตอบสนองจากแบ็กเอนด์

getRestrictedData

getApiData ทำงานในลักษณะเดียวกันเพียง แต่ดึงข้อมูลโดยใช้ Data และ .controller('RestrictedController', ['$rootScope', '$scope', 'Data', function ($rootScope, $scope, Data) { Data.getRestrictedData(function (res) { $scope.data = res.data; }, function () { $rootScope.error = 'Failed to fetch restricted content.'; }); Data.getApiData(function (res) { $scope.api = res.data; }, function () { $rootScope.error = 'Failed to fetch restricted API content.'; }); }]); ฟังก์ชันบน Authorization บริการ.

tokenClaims

แบ็กเอนด์มีหน้าที่ให้บริการข้อมูลที่ถูก จำกัด ก็ต่อเมื่อผู้ใช้ได้รับการตรวจสอบสิทธิ์ ซึ่งหมายความว่าในการตอบสนองกับข้อมูลที่ถูก จำกัด การร้องขอสำหรับข้อมูลนั้นจำเป็นต้องมี JWT ที่ถูกต้องอยู่ภายใน getTokenClaims ส่วนหัวหรือสตริงแบบสอบถาม หากไม่เป็นเช่นนั้นเซิร์ฟเวอร์จะตอบสนองด้วยรหัสสถานะข้อผิดพลาด 401 ที่ไม่ได้รับอนุญาต

บริการรับรองความถูกต้อง

บริการ Auth มีหน้าที่ในการลงชื่อเข้าใช้และลงทะเบียนคำขอ HTTP ไปยังแบ็กเอนด์ หากการร้องขอสำเร็จการตอบกลับจะมีโทเค็นที่เซ็นชื่อซึ่งจะถูกถอดรหัส base64 และข้อมูลการอ้างสิทธิ์โทเค็นที่แนบมาจะถูกบันทึกลงใน angular.module('app') .factory('Auth', ['$http', '$localStorage', 'urls', function ($http, $localStorage, urls) { function urlBase64Decode(str) { var output = str.replace('-', '+').replace('_', '/'); switch (output.length % 4) { case 0: break; case 2: output += '=='; break; case 3: output += '='; break; default: throw 'Illegal base64url string!'; } return window.atob(output); } function getClaimsFromToken() { var token = $localStorage.token; var user = {}; if (typeof token !== 'undefined') { var encoded = token.split('.')[1]; user = JSON.parse(urlBase64Decode(encoded)); } return user; } var tokenClaims = getClaimsFromToken(); return { signup: function (data, success, error) { $http.post(urls.BASE + '/signup', data).success(success).error(error) }, signin: function (data, success, error) { $http.post(urls.BASE + '/signin', data).success(success).error(error) }, logout: function (success) { tokenClaims = {}; delete $localStorage.token; success(); }, getTokenClaims: function () { return tokenClaims; } }; } ]); ตัวแปร. สิ่งนี้ถูกส่งไปยังคอนโทรลเลอร์ผ่านทาง angular.module('app') .factory('Data', ['$http', 'urls', function ($http, urls) { return { getRestrictedData: function (success, error) { $http.get(urls.BASE + '/restricted').success(success).error(error) }, getApiData: function (success, error) { $http.get(urls.BASE_API + '/restricted').success(success).error(error) } }; } ]); ฟังก์ชัน

|_+_|

บริการข้อมูล

นี่เป็นบริการง่ายๆที่ส่งคำขอไปยังเซิร์ฟเวอร์การตรวจสอบความถูกต้องตลอดจนเซิร์ฟเวอร์ API สำหรับข้อมูลที่ จำกัด แบบจำลอง ทำให้การร้องขอและมอบหมายความสำเร็จและการเรียกกลับข้อผิดพลาดไปยังคอนโทรลเลอร์

|_+_|

นอกเหนือจากการสอนโทเค็นเว็บ JSON นี้

การพิสูจน์ตัวตนโดยใช้โทเค็นช่วยให้เราสามารถสร้างระบบแยกส่วนที่ไม่ได้เชื่อมโยงกับโครงร่างการพิสูจน์ตัวตนเฉพาะ โทเค็นอาจถูกสร้างขึ้นที่ใดก็ได้และใช้บนระบบใดก็ได้ที่ใช้รหัสลับเดียวกันในการเซ็นชื่อโทเค็น พวกเขาพร้อมใช้งานบนมือถือและไม่ต้องการให้เราใช้คุกกี้

JSON Web Tokens ทำงานในภาษาโปรแกรมยอดนิยมทั้งหมดและได้รับความนิยมอย่างรวดเร็ว ได้รับการสนับสนุนจาก บริษัท ต่างๆเช่น Google, Microsoft และ Zendesk ข้อกำหนดมาตรฐานของ Internet Engineering Task Force (IETF) คือ ยังอยู่ในเวอร์ชันร่าง และอาจมีการเปลี่ยนแปลงเล็กน้อยในอนาคต

ยังมีอีกหลายอย่างที่ต้องพูดถึงเกี่ยวกับ JWT เช่นวิธีจัดการไฟล์ ความปลอดภัย รายละเอียดและการรีเฟรชโทเค็นเมื่อหมดอายุ แต่บทแนะนำ JSON Web Token ควรแสดงให้เห็นถึงการใช้งานพื้นฐานและที่สำคัญกว่านั้นคือข้อดีของการใช้ JWT

ทำความเข้าใจพื้นฐาน

โทเค็นผู้ถือคืออะไร?

สิ่งนี้หมายถึง JWT ซึ่งส่งผ่านส่วนหัว HTTP ที่เรียกว่า Authorization ในรูปแบบสตริง 'Bearer $ your_token_here'

JWT คืออะไร?

JWT ย่อมาจาก JSON Web Token ซึ่งเป็นกลยุทธ์การตรวจสอบสิทธิ์ทั่วไปที่ใช้ในเว็บแอปสมัยใหม่

JSON ทำงานอย่างไร

JSON เป็นเพียงรูปแบบข้อมูลที่ใกล้เคียงกับรูปแบบ data literal ที่ JavaScript อนุญาต เป็นรูปแบบลำดับชั้นที่อนุญาตให้มีอ็อบเจ็กต์และอาร์เรย์ที่ซ้อนกันตลอดจนตัวอักษรสตริงและตัวเลข

Mastering Disruption - ศิลปะแห่งความซับซ้อนว่องไว

วงจรชีวิตของผลิตภัณฑ์

Mastering Disruption - ศิลปะแห่งความซับซ้อนว่องไว
การออกแบบสำหรับสภาพแวดล้อมแบบโต้ตอบและพื้นที่อัจฉริยะ

การออกแบบสำหรับสภาพแวดล้อมแบบโต้ตอบและพื้นที่อัจฉริยะ

การออกแบบ Ui