Historia za Protected App.
Tworzenie Logto jako otwartej alternatywy dla Auth0 było niesamowitą podróżą. Świat jest pełen sposobów na sprawdzenie, kto kim jest online, więc dlaczego dodawać kolejny? To było duże pytanie, które przeżuwaliśmy. Chcieliśmy czegoś, co każdy programista mógłby podjąć i używać go bez konieczności nauki wielu SDK-ów lub pisania nieskończonych wierszy kodu.
Więc, oto wielka wiadomość: Stworzyliśmy Protected App. Jest super proste - wystarczy wypełnić dwa miejsca i bum, twoja aplikacja jest chroniona autoryzacją. Bez bólów głowy. 🎉
Zaczęliśmy rozwijać Protected App po zauważeniu poważnego problemu podczas utrzymania naszych oficjalnych SDK-ów: pomimo dostarczania licznych SDK-ów i projektów przykładowych dla programistów, proces integracji wciąż był wyzwaniem. Programiści musieli nauczyć się o różnych rodzajach "tokenów" i napisać dodatkowy kod do ich integracji. To skłoniło nas do pytania: Czy korzystanie z Logto naprawdę jest łatwiejsze niż budowanie nowego systemu autoryzacji od podstaw? Niestety, zdałem sobie sprawę, że nie było to tak proste, jak mieliśmy nadzieję.
W Express SDK radzimy programistom dodawać oprogramowanie pośredniczące jako dodatkową warstwę do wykonania trzech kluczowych zadań: obsługiwać ścieżki autoryzacji, sprawdzać stan autoryzacji i dodawać informacje o użytkowniku do obiektu żądania. Dzięki temu programiści mogą uzyskać dostęp do zaufanego obiektu autoryzacji z żądania, nie musząc rozumieć zawiłości "integracji SDK". To skłoniło nas do myślenia: Czy moglibyśmy wykonać wstępne zadania dla programistów i bezpośrednio poprowadzić ich do kolejnych kroków?
Według oficjalnej prezentacji, Cloudflare Access tworzy bezpieczną warstwę dostępu do wszystkich twoich samodzielnie hostowanych, SaaS-owych czy nie-internetowych aplikacji bez potrzeby wprowadzania jakichkolwiek zmian w kodzie aplikacji.
Jako dostawca CDN, Cloudflare może dodać warstwę autoryzacji do swojego serwisu CDN przed przekazaniem żądań do serwera źródłowego. Jednak jest to przede wszystkim przeznaczone dla wewnętrznych produktów dla przedsiębiorstw, a darmowy plan obsługuje tylko do 50 użytkowników i opłatuje na podstawie liczby użytkowników.
Cloudflare jest zaufany przez szeroką społeczność programistów, a Protected App działa na Cloudflare Workers, eliminując obawy o zarządzanie dodatkowym serwerem dla twojej aplikacji. Zintegrowaliśmy Logto w sposób podobny do tego, co pokazaliśmy w przykładzie Express SDK, ale z dodanym wsparciem dla dostosowywania. Następnie przekazujemy ulepszone żądanie do twojego serwera źródłowego.
Protected App utrzymuje stan sesji i informacje o użytkowniku. Jeżeli użytkownik nie jest uwierzytelniony, Protected App przekierowuje go do strony logowania. Po uwierzytelnieniu, Protected App opakowuje żądanie użytkownika za pomocą uwierzytelniania i informacji o użytkowniku, a następnie przekazuje je do serwera źródłowego.
Ten proces jest zobrazowany na poniższym schemacie blokowym:
%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='M142.938%2c88L151.923%2c88C160.909%2c88%2c178.88%2c88%2c196.185%2c88C213.49%2c88%2c230.128%2c88%2c238.447%2c88L246.766%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_Warunek_1' d='M381.281%2c88L385.448%2c88C389.615%2c88%2c397.948%2c88%2c405.698%2c88.07C413.448%2c88.141%2c420.615%2c88.281%2c424.199%2c88.351L427.782%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_Warunek_Pasuje_2' d='M526.237%2c104.682L533.744%2c107.444C541.252%2c110.205%2c556.266%2c115.727%2c569.433%2c118.563C582.599%2c121.399%2c593.917%2c121.548%2c599.576%2c121.623L605.235%2c121.697'/%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_Pasuje_C_3' d='M751.552%2c102.25L765.087%2c96.75C778.623%2c91.25%2c805.694%2c80.25%2c825.135%2c73.019C844.575%2c65.787%2c856.384%2c62.325%2c862.288%2c60.594L868.193%2c58.862'/%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_Pasuje_D_4' d='M788.573%2c136.23L795.938%2c137.4C803.304%2c138.57%2c818.035%2c140.91%2c830.976%2c142.08C843.917%2c143.25%2c855.068%2c143.25%2c860.643%2c143.25L866.219%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_Warunek_C_5' d='M520.123%2c60.091L528.65%2c53.409C537.176%2c46.727%2c554.229%2c33.364%2c584.545%2c26.682C614.862%2c20%2c658.443%2c20%2c702.023%2c20C745.604%2c20%2c789.185%2c20%2c816.859%2c20.83C844.534%2c21.66%2c856.302%2c23.321%2c862.186%2c24.151L868.07%2c24.981'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg transform='translate(196.8515625%2c 88)' class='edgeLabel'%3e%3cg transform='translate(-28.9140625%2c -12)' class='label'%3e%3cforeignObject height='24' width='57.828125'%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%3e%c5%bb%c4%85danie%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(571.28125%2c 121.25)' class='edgeLabel'%3e%3cg transform='translate(-12.453125%2c -12)' class='label'%3e%3cforeignObject height='24' width='24.90625'%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%3eTak%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(832.765625%2c 69.25)' class='edgeLabel'%3e%3cg transform='translate(-12.453125%2c -12)' class='label'%3e%3cforeignObject height='24' width='24.90625'%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%3eTak%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(832.765625%2c 143.25)' class='edgeLabel'%3e%3cg transform='translate(-12.0078125%2c -12)' class='label'%3e%3cforeignObject height='24' width='24.015625'%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%3eNie%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(702.0234375%2c 20)' class='edgeLabel'%3e%3cg transform='translate(-12.0078125%2c -12)' class='label'%3e%3cforeignObject height='24' width='24.015625'%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%3eNie%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(75.46875%2c 88)' id='flowchart-A-0' class='node default'%3e%3crect height='78' width='134.9375' y='-39' x='-67.46875' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-52.46875%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='104.9375'%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%3eKlient%3cbr /%3e(Przegl%c4%85darka)%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(316.0234375%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(482.5546875%2c 88)' id='flowchart-Warunek-3' class='node default'%3e%3cpolygon transform='translate(-51.2734375%2c31.5)' class='label-container' points='15.75%2c0 86.796875%2c0 102.546875%2c-31.5 86.796875%2c-63 15.75%2c-63 0%2c-31.5'/%3e%3cg transform='translate(-28.0234375%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='56.046875'%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%3eScie%c5%bcka%3cbr /%3epasuje%3f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(702.0234375%2c 121.25)' id='flowchart-Pasuje-5' class='node default'%3e%3cpolygon transform='translate(-93.2890625%2c19.5)' class='label-container' points='9.75%2c0 176.828125%2c0 186.578125%2c-19.5 176.828125%2c-39 9.75%2c-39 0%2c-19.5'/%3e%3cg transform='translate(-76.0390625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='152.078125'%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%3eJest uwierzytelniony%3f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(946.1640625%2c 36)' id='flowchart-C-7' class='node default'%3e%3crect height='54' width='148.265625' y='-27' x='-74.1328125' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-59.1328125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='118.265625'%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%3eSerwer %c5%bar%c3%b3d%c5%82owy%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(946.1640625%2c 143.25)' id='flowchart-D-9' class='node default'%3e%3crect height='54' width='151.890625' y='-27' x='-75.9453125' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-60.9453125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='121.890625'%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%3eLogowanie Logto%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)
Korzystanie z Protected App jest niezwykle proste, wymaga tylko dwóch kluczowych informacji: oryginalnego adresu URL, który wymaga uwierzytelniania, i domeny aplikacji, która działa jako proxy ochrony uwierzytelniania. Ta domena służy także jako otwarty adres URL dla twojej aplikacji.
Pod przyjazną dla użytkownika powierzchnią, Protected App korzysta z solidnego protokołu OpenID Connect, tej samej technologii, która stoi za innymi regularnymi aplikacjami Logto. To gwarantuje, że twoja aplikacja korzysta z bezpieczeństwa i skalowalności na poziomie branżowym, chroniąc twoje dane i informacje o użytkownikach nie narażając na szwank wydajności.
Ponadto, Protected App oferuje szerokie możliwości dostosowania. Masz wolność, aby dostosować reguły uwierzytelniania dla różnych obszarów swojej strony i powiązać niestandardową domenę.
Przyjmując Protected App, reszta potężnych funkcji Logto automatycznie otwiera się dla ciebie: dostosowane doświadczenie logowania, wieloczynnikowe uwierzytelnianie, enterprise SSO, kontrola dostępu na podstawie ról, organizacje, i wiele więcej!
W tej szybko ewoluującej branży, mamy nadzieję, że wszyscy twórcy mogą skupić się na swoich niesamowitych pomysłach i biznesach, zamiast walczyć z integracjami i technicznymi przeszkodami. To jest misja naszego zespołu, i dla tego zostało zaprojektowane Logto. Jesteśmy zobowiązani do wspierania cię w realizacji twoich wielkich pomysłów, upewniając się, że możesz poświęcić swój czas i zasoby na to, co naprawdę ma znaczenie - twoją wizję i użytkowników.
Protected App jest teraz dostępne w Logto Cloud, i z przyjemnością ogłaszamy, że wkrótce zostanie udostępnione na licencji open source.
Zapraszamy cię do wyruszenia w tę podróż z nami, upraszczając bezpieczeństwo, abyś mógł skupić się na tym, co naprawdę jest ważne.
Bądź bezpieczny, pozostań zalogowany! 💻🔐