繁體中文（香港）
介紹 Protected App：只需幾個點擊即可建立身份驗證，不需要編寫程式碼
Protected App 的背後故事。
Sijie
Developer
Developer
Stop wasting weeks on user auth
Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.
Get started
Protected App 的背後故事。
將 Logto 打造成為 Auth0 的開放替代品可謂一段不凡的旅程。網絡上有很多種方法來確認身份，那為何還要多此一舉？這就是我們思考的大問題。我們希望任何程式員都能快速上手使用，而不必學習一堆 SDK 或撰寫大量程式碼。
所以，這是個大新聞：我們製作了 Protected App。它非常簡單—只需填入兩個位置，然後 bam，你的應用程式就有了身份驗證保護。沒有煩惱。 🎉
在維護官方 SDK 的過程中，我們注意到一個顯著的問題：儘管為開發人員提供了豐富的 SDK 和範例專案，整合過程仍然很具挑戰性。開發人員必須了解各種 "令牌" 並撰寫額外的程式碼來整合它們。這讓我們質疑：使用 Logto 真的比從頭開始建立新的身份驗證系統更簡單嗎？遺憾的是，我們意識到這並不像預期那麼簡單。
在 Express SDK 中，我們建議開發人員添加一個中介件作為額外層來執行三個關鍵任務：處理身份驗證路徑、檢查身份驗證狀態並將使用者資訊附加到請求對象中。通過這樣做，開發人員可以從請求中訪問受信任的身份驗證對象，而不需要了解 "整合 SDK" 的複雜性。這促使我們思考：我們是否可以為開發人員處理前期任務，並直接引領他們進入下一步？
根據其官方介紹，Cloudflare Access 為所有自託管、SaaS 或非 Web 應用程式創建了一個安全訪問層，無需對應用程式本身進行任何程式碼變更。
作為一家 CDN 供應商，Cloudflare 可以在轉發請求到源伺服器之前，為其 CDN 服務添加身份驗證層。然而，它主要是為企業內部產品設計的，免費方案僅支持最多 50 個用戶，並且收費基於用戶數量。
Cloudflare 在廣泛的開發者社群中受到信任，而 Protected App 運行在 Cloudflare Workers 上，消除了對應用程式額外伺服器管理的擔憂。我們以類似於在 Express SDK 範例中展示的方式整合了 Logto，但增加了對自定義的支援。然後，我們將增強的請求轉發到你的源伺服器。
Protected App 維護會話狀態和用戶資訊。如果用戶未經身份驗證，Protected App 會重定向他們到登錄頁面。經身份驗證後，Protected App 會附帶用戶請求的身份驗證和用戶資訊，然後將其轉發到源伺服器。
此過程可以通過以下流程圖視覺化：
%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%7bcolor:%23333%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-0 .icon-shape%2c%23mermaid-0 .image-shape%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .icon-shape p%2c%23mermaid-0 .image-shape p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bpadding:2px%3b%7d%23mermaid-0 .icon-shape rect%2c%23mermaid-0 .image-shape rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointEnd'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 0 L 10 5 L 0 10 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='4.5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointStart'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 5 L 10 10 L 10 0 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='11' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleEnd'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='-1' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleStart'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='12' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossEnd'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='-1' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossStart'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cg class='root'%3e%3cg class='clusters'/%3e%3cg class='edgePaths'%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_A_B_0' d='M107.344%2c88L116.477%2c88C125.609%2c88%2c143.875%2c88%2c161.474%2c88C179.073%2c88%2c196.005%2c88%2c204.471%2c88L212.938%2c88'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_B_Condition_1' d='M347.453%2c88L351.62%2c88C355.786%2c88%2c364.12%2c88%2c371.87%2c88.07C379.62%2c88.141%2c386.787%2c88.281%2c390.37%2c88.351L393.954%2c88.422'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Condition_Matched_2' d='M505.275%2c105.606L512.96%2c108.213C520.644%2c110.821%2c536.014%2c116.035%2c549.457%2c118.717C562.901%2c121.399%2c574.419%2c121.549%2c580.179%2c121.623L585.938%2c121.698'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Matched_C_3' d='M711.716%2c102.25L723.741%2c96.75C735.766%2c91.25%2c759.817%2c80.25%2c777.556%2c72.828C795.296%2c65.406%2c806.725%2c61.563%2c812.44%2c59.641L818.154%2c57.719'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Matched_D_4' d='M739.553%2c135.269L746.939%2c136.599C754.325%2c137.929%2c769.096%2c140.59%2c782.157%2c141.92C795.219%2c143.25%2c806.57%2c143.25%2c812.246%2c143.25L817.922%2c143.25'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Condition_C_5' d='M498.674%2c58.192L507.459%2c51.827C516.244%2c45.462%2c533.813%2c32.731%2c561.972%2c26.365C590.13%2c20%2c628.878%2c20%2c667.625%2c20C706.372%2c20%2c745.12%2c20%2c770.182%2c20.921C795.244%2c21.841%2c806.62%2c23.682%2c812.308%2c24.603L817.997%2c25.523'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg transform='translate(162.140625%2c 88)' class='edgeLabel'%3e%3cg transform='translate(-29.796875%2c -12)' class='label'%3e%3cforeignObject height='24' width='59.59375'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3eRequest%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(551.3828125%2c 121.25)' class='edgeLabel'%3e%3cg transform='translate(-13.0546875%2c -12)' class='label'%3e%3cforeignObject height='24' width='26.109375'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3eYes%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(783.8671875%2c 69.25)' class='edgeLabel'%3e%3cg transform='translate(-13.0546875%2c -12)' class='label'%3e%3cforeignObject height='24' width='26.109375'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3eYes%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(783.8671875%2c 143.25)' class='edgeLabel'%3e%3cg transform='translate(-10.2265625%2c -12)' class='label'%3e%3cforeignObject height='24' width='20.453125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3eNo%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(667.625%2c 20)' class='edgeLabel'%3e%3cg transform='translate(-10.2265625%2c -12)' class='label'%3e%3cforeignObject height='24' width='20.453125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3eNo%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='nodes'%3e%3cg transform='translate(57.671875%2c 88)' id='flowchart-A-0' class='node default'%3e%3crect height='78' width='99.34375' y='-39' x='-49.671875' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-34.671875%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='69.34375'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eClient%3cbr /%3e(Browser)%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(282.1953125%2c 88)' id='flowchart-B-1' class='node default'%3e%3crect height='78' width='130.515625' y='-39' x='-65.2578125' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-50.2578125%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='100.515625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eLogto%3cbr /%3eProtected App%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(455.390625%2c 88)' id='flowchart-Condition-3' class='node default'%3e%3cpolygon transform='translate(-57.9375%2c31.5)' class='label-container' points='15.75%2c0 100.125%2c0 115.875%2c-31.5 100.125%2c-63 15.75%2c-63 0%2c-31.5'/%3e%3cg transform='translate(-34.6875%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='69.375'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eRoute%3cbr /%3ematches%3f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(667.625%2c 121.25)' id='flowchart-Matched-5' class='node default'%3e%3cpolygon transform='translate(-78.1875%2c19.5)' class='label-container' points='9.75%2c0 146.625%2c0 156.375%2c-19.5 146.625%2c-39 9.75%2c-39 0%2c-19.5'/%3e%3cg transform='translate(-60.9375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='121.875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eIs authenticated%3f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(882.734375%2c 36)' id='flowchart-C-7' class='node default'%3e%3crect height='54' width='121.578125' y='-27' x='-60.7890625' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-45.7890625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='91.578125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eOrigin server%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(882.734375%2c 143.25)' id='flowchart-D-9' class='node default'%3e%3crect height='54' width='121.625' y='-27' x='-60.8125' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-45.8125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='91.625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eLogto sign-in%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
使用 Protected App 極其簡單，只需兩個關鍵資訊：需要身份驗證的源 URL 和作為身份驗證保護代理的應用程式域名。此域名還作為你的應用程式的開放 URL。
在其用戶友好的表面之下，Protected App 採用了強大的 OpenID Connect 協議，這與其他普通 Logto 應用程式背後的技術相同。這保證了你的應用程式獲得行業級別的安全性和可擴展性，在不影響性能的情況下保護你的數據和用戶資訊。
此外，Protected App 提供了豐富的自定義選項。你可以自由微調站點不同區域的身份驗證規則，並綁定自定義域名。
通過採用 Protected App，其餘 Logto 強大功能自動向你開放：可定制的登入體驗，多重身份驗證，企業級 SSO，基於角色的訪問控制，組織管理等等！
在這個快速發展的行業中，我們希望所有創作者都能專注於他們的驚人想法和業務，而不是與整合和技術障礙作鬥爭。這是我們團隊的使命，也是 Logto 設計的初衷。我們致力於支持你將偉大的想法變成現實，確保你能夠將時間和資源放在真正重要的地方—你的願景和你的用戶。
Protected App 現在可以在 Logto Cloud 使用，我們也很高興地宣布它即將開源。
我們邀請你一起踏上這段旅程，簡化安全性，讓你專注於真正重要的事物。
保持安全，保持登錄！ 💻🔐