![[BurpSuiteJapan]Burp Suite回答編](https://cdn.slidesharecdn.com/ss_thumbnails/burpsuite-170529011744-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
![[ES] Introducción a Java EE 7](https://cdn.slidesharecdn.com/ss_thumbnails/introduccinajavaee7-140705184511-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Similar to LaravelConf Taiwan 2017 單頁面應用與前後端分離開發 (20)
![[WebConf Taiwan 2023] 一份 Zend Engine 外帶！透過 Micro 讓一次打包、多處運行變得可能](https://cdn.slidesharecdn.com/ss_thumbnails/building-app-with-zend-engine-using-micro-230816092930-84eda384-thumbnail.jpg?width=560&fit=bounds)
LaravelConf Taiwan 2017 單頁面應用與前後端分離開發
- 2. ? Maras Chen ? 4Gamers 後端工程師 ? https://codingweb.tw ? maraschen@codingweb.tw ? C# / PHP / Python LaravelConf2017
- 3. 摘要 1.什麼是 SPA 2.Laravel API 開發 3.Laravel API 開發 Packages LaravelConf2017 4. Laravel x Vue 5. 地雷分享 6. Laravel 5.5 New Artisan
- 6. 什麼是 SPA ? ? Single Page Application ? 中文譯名「單頁式應用程式」 ? 只在一個頁面中完成動作 LaravelConf2017
- 8. SPA 優點 ? 頁面能更快的被呈現出來 ? UX 大幅提升 ? 降低資料傳輸 ? APP、Web前端 不用重複開發 LaravelConf2017
- 9. SPA 缺點 ? SEO 問題 ? 舊型瀏覽器不支援 LaravelConf2017
- 10. 為什麼我們需要 ? ? 前端/後端不維護相同專案 ? 前/後端可以不用互相了解程式碼資料夾結構 ? 讓後端只需要顧好 Request 資料處理與商業邏輯 ? 讓前端選擇自己的前端框架 LaravelConf2017
- 12. 傳統工作示意圖 LaravelConf2017 ? HTML ? CSS ? Javascript ? RWD ? PHP ? Database ? Server後端 全端工程師 設計師 ? Illustrator ? photoshop ? flash ? HTML ? CSS ? RWD 串資料是我們 所以資料出不來或掛掉都是我們
- 13. LaravelConf2017
- 15. LaravelConf2017
- 18. 當有前/後端透過SPA分工後 LaravelConf2017 工作內容 ? PHP ? Database ? Server 當資料出問題… 後端工程師 前端工程師 工作內容 ? CSS ? Javascript ? RWD 請後端工程師修復 當設計或是畫面出問題… 請前端工程師修復 透過文件溝通
- 21. ? APIDOC ? http://apidocjs.com/ ? Sample code: ? https://goo.gl/dDN8oy ? Demo ? https://goo.gl/NccwQ1 LaravelConf2017
- 22. LaravelConf2017
- 23. 後端總是開發的很慢？ 1. 可以先拿 example response 來串接API - http://myjson.com/ 2. 前端遵循 restful 方式串接API - https://github.com/typicode/json-server LaravelConf2017
- 24. LaravelConf2017
- 25. Laravel API 開發 STEP 1 (TDD) LaravelConf2017
- 26. Laravel API 開發 STEP 2 (Provider) LaravelConf2017
- 27. Laravel API 開發 STEP 3 (Route) LaravelConf2017
- 28. API 認證及授權 ? JSON Web Tokens (JWT) ? OAuth2 授權 – Laravel5.3-Passport LaravelConf2017
- 29. JSON Web Token 認證 LaravelConf2017 圖片來源：https://auth0.com/blog/cookies-vs-tokens-definitive-guide/
- 30. JSON Web Token 組成 LaravelConf2017https://jwt.io
- 31. Laravel 5.2 API 認證 ? Laravel 5.2+ 提供 guard web、api 認證 1. 需要先在 User 建立 api_token 欄位 2. 接著用 seeder 或是在會員註冊的時候生成一個 60 碼隨機字串 3. 在 call 受保護的 api 時傳入參數 api_token 或是 header 帶 Bearer <api_token> LaravelConf2017
- 32. Laravel 5.2 API 認證 - API 開發 STEP 1 (TDD) LaravelConf2017
- 33. Laravel 5.2 API 認證 - API 開發 STEP 2 (Route) LaravelConf2017
- 34. Laravel 5.3 - API 認證與授權 - Passport ? Laravel 5.3+ 整合了 OAuth2-Server – Passport ? Authorization Code Grant Flow ? Implicit Grant Flow ? Resource Password Owner Grant Flow LaravelConf2017
- 35. OAuth2 認證 ? Laravel 5.3 以後提供 Passport 用法 ? 可以參考一下這篇教學 https://goo.gl/7wJ4Wr LaravelConf2017
- 36. Passport OAuth2 測試怎麼寫 … LaravelConf2017
- 37. Laravel Passport Testing - ActingAs LaravelConf2017
- 39. Dingo ? 更複雜的需求？ ? Content Negotiation (內容協商) ? Multiple Authentication Adapters (支援多種認證) ? API Versioning (版本控制) ? Rate Limiting (速率限制) ? Response Transformers and Formatters (統一格式回傳) ? Error and Exception Handling (錯誤及例外處理) ? Internal Requests (內部請求) ? API Blueprint Documentation (API 文件產生) LaravelConf2017
- 40. Multiple Authentication Adapters ? Specific Authentication Providers ? Custom Authentication Providers ? Multiple Authentication Providers ? Http Basic ? JSON Web Tokens ? OAuth 2.0 LaravelConf2017
- 42. Response Transformers and Formatters LaravelConf2017
- 44. Laravel x Vuejs ? Laravel5.3+ 預設可以在專案中安裝 bootstrap + vue + axios + jquery LaravelConf2017
- 45. LaravelConf2017
- 47. Vuex ? 狀態管理模式 – 集中式儲存組件狀態 ? 適用於中大型 SPA 專案 LaravelConf2017
- 48. LaravelConf2017
- 49. LaravelConf2017
- 50. LaravelConf2017
- 52. LaravelConf2017 ● CORS (跨來源資源共享) - 受同源政策影響 ● X-Rate-Limit-Limit (頻率限制) ● SEO (搜尋引擎最佳化)
- 53. 同源政策 (Same-origin policy) https://a.com https://a.com https://b.com
- 54. CORS – 在後端解決 ? 套件 ? https://github.com/barryvdh/laravel-cors LaravelConf2017
- 55. CORS – 前端解決 (Vue2) LaravelConf2017 來源參考(如何在 Vue-CLI 建立的開發環境呼叫跨域遠端 RESTful APIs): https://kuro.tw/ Local Only!!
- 57. SEO – Prerender service ? Prerender.io (https://prerender.io) ? 免費 250 個頁面 ? 開源 (https://github.com/prerender) Request Nginx Crawler? Prerender.io Application Yes No LaravelConf2017
- 58. SEO – Server side render LaravelConf2017
- 59. LaravelConf2017
- 60. LaravelConf2017
- 61. LaravelConf2017
- 63. ? 對於前端工程師 ? 可以選擇 Javascript 框架（VueJS、reactJS、angularJS ） ? 取得資料後的頁面應用 ? 對於後端工程師 ? 不需要管畫面 僅管測試及邏輯通過 當一個真正的全端後端工程師 ? 可以不用再被前端凹了 可以更專注在後端工程的應用（資料存取、商業邏輯） LaravelConf2017
- 68. LaravelConf2017
- 71. 案例分享 – 某單位可任意使用者修改密碼 ? 可任意修改其他使用者的密碼，進而查看其他使用者個資、使用 記錄，註冊/刪除卡片。 https://zeroday.hitcon.org/vulnerability/ZD-2017-00300 LaravelConf2017
- 72. LaravelConf2017 Laravel 5.5 New Artisan
- 73. LaravelConf2017
- 74. LaravelConf2017
- 75. LaravelConf2017
- 76. Source Code ? Single Page Application (Laravel+VueJS) sample code: ? Backend(Laravel5.4+dingo): https://github.com/Maras0830/spa-example-with-laravel-vue-backend ? Frontend(Vue2): https://github.com/Maras0830/spa-example-with-laravel-vue-frontend ? Frontend(Nuxtjs): https://github.com/Maras0830/spa-example-with-laravel-vue-frontend-nuxtjs ? APIDoc: https://github.com/Maras0830/spa-example-with-laravel-vue-doc LaravelConf2017