La storia dietro Protected App.
Fare di Logto un'alternativa aperta ad Auth0 è stato un bel viaggio. Il mondo è pieno di modi per verificare chi è chi online, quindi perché aggiungerne un altro? Questa è la grande domanda a cui abbiamo riflettuto. Volevamo qualcosa che qualsiasi programmatore potesse prendere e usarlo senza dover imparare un mucchio di SDK o scrivere innumerevoli righe di codice.
Ecco la grande notizia: Abbiamo fatto Protected App. È super semplice, basta riempire due campi e, bam, la tua app è protetta con autenticazione. Nessun mal di testa. 🎉
Abbiamo iniziato a sviluppare Protected App dopo aver notato un problema significativo durante la manutenzione dei nostri SDK ufficiali: nonostante fornissimo numerosi SDK e progetti campione per gli sviluppatori, il processo di integrazione rimaneva difficile. Gli sviluppatori dovevano imparare diverse tipologie di "token" e scrivere ulteriori codici per integrarli. Questo ci ha portato a domandarci: Utilizzare Logto è davvero più semplice che costruire un nuovo sistema di autenticazione da zero? Purtroppo, abbiamo capito che non era così semplice come speravamo.
Nel SDK Express, consigliamo agli sviluppatori di aggiungere il middleware come strato aggiuntivo per svolgere tre compiti chiave: gestire le rotte di autenticazione, verificare lo stato di autenticazione e aggiungere le informazioni dell'utente all'oggetto richiesta. Facendo ciò, gli sviluppatori possono accedere a un oggetto di autenticazione di fiducia dalla richiesta senza dover capire le sfumature di "integrare un SDK". Questo ci ha indotto a pensare: Potremmo gestire i compiti preliminari per gli sviluppatori e indirizzarli direttamente verso i passaggi successivi?
Secondo la sua presentazione ufficiale, Cloudflare Access crea uno strato di accesso sicuro per tutte le tue applicazioni self-hosted, SaaS o non web senza richiedere alcuna modifica del codice alle applicazioni stesse.
Come provider di CDN, Cloudflare può aggiungere uno strato di autenticazione al suo servizio CDN prima di inoltrare le richieste al server di origine. Tuttavia, è progettato principalmente per prodotti interni aziendali, con il piano gratuito che supporta solo fino a 50 utenti e addebita sulla base del conteggio degli utenti.
Cloudflare è fidato da una vasta comunità di sviluppatori, e Protected App è eseguito su Cloudflare Workers, eliminando le preoccupazioni sulla gestione di un server aggiuntivo per la tua applicazione. Abbiamo integrato Logto in un modo simile a quello che abbiamo dimostrato nel campione di SDK Express, ma con il supporto aggiunto per la personalizzazione. Dopodiché, inoltriamo la richiesta migliorata al server di origine.
L'App Protetta mantiene lo stato della sessione e le informazioni dell'utente. Se un utente non è autenticato, l'App Protetta lo reindirizza alla pagina di accesso. Una volta autenticato, l'App Protetta avvolge la richiesta dell'utente con autenticazione e informazioni dell'utente, quindi la inoltra al server di origine.
Il processo è visualizzato nel seguente diagramma di flusso:
%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.995%2c88C126.646%2c88%2c145.948%2c88%2c164.583%2c88C183.219%2c88%2c201.188%2c88%2c210.172%2c88L219.156%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='M353.672%2c88L357.839%2c88C362.005%2c88%2c370.339%2c88%2c378.089%2c88.07C385.839%2c88.141%2c393.006%2c88.281%2c396.589%2c88.351L400.173%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='M511.055%2c106.483L517.898%2c108.944C524.74%2c111.405%2c538.425%2c116.328%2c550.111%2c118.862C561.797%2c121.397%2c571.485%2c121.543%2c576.329%2c121.616L581.172%2c121.69'/%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='M692.43%2c102.25L703.141%2c96.75C713.852%2c91.25%2c735.273%2c80.25%2c751.219%2c73.108C767.165%2c65.966%2c777.635%2c62.682%2c782.87%2c61.04L788.105%2c59.398'/%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='M715.405%2c134.878L722.287%2c136.273C729.168%2c137.668%2c742.932%2c140.459%2c755.716%2c141.855C768.5%2c143.25%2c780.305%2c143.25%2c786.207%2c143.25L792.109%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='M504.032%2c57L512.045%2c50.833C520.058%2c44.667%2c536.084%2c32.333%2c560.923%2c26.167C585.763%2c20%2c619.417%2c20%2c653.514%2c20C687.612%2c20%2c722.154%2c20%2c744.636%2c20.787C767.119%2c21.573%2c777.543%2c23.147%2c782.755%2c23.933L787.967%2c24.72'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg transform='translate(165.25%2c 88)' class='edgeLabel'%3e%3cg transform='translate(-32.90625%2c -12)' class='label'%3e%3cforeignObject height='24' width='65.8125'%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%3eRichiesta%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(552.109375%2c 121.25)' class='edgeLabel'%3e%3cg transform='translate(-7.5625%2c -12)' class='label'%3e%3cforeignObject height='24' width='15.125'%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%3eS%c3%ac%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(756.6953125%2c 69.25)' class='edgeLabel'%3e%3cg transform='translate(-7.5625%2c -12)' class='label'%3e%3cforeignObject height='24' width='15.125'%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%3eS%c3%ac%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(756.6953125%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(653.0703125%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%3eCliente%3cbr /%3e(Browser)%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(288.4140625%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(461.609375%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(653.0703125%2c 121.25)' id='flowchart-Matched-5' class='node default'%3e%3cpolygon transform='translate(-68.3984375%2c19.5)' class='label-container' points='9.75%2c0 127.046875%2c0 136.796875%2c-19.5 127.046875%2c-39 9.75%2c-39 0%2c-19.5'/%3e%3cg transform='translate(-51.1484375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='102.296875'%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%3e%c3%88 autenticato%3f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(862.703125%2c 36)' id='flowchart-C-7' class='node default'%3e%3crect height='54' width='141.5625' y='-27' x='-70.78125' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-55.78125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='111.5625'%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%3eServer d'origine%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(862.703125%2c 143.25)' id='flowchart-D-9' class='node default'%3e%3crect height='54' width='133.1875' y='-27' x='-66.59375' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-51.59375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='103.1875'%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 accesso%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)
L'uso di Protected App è notevolmente semplice, richiede solo due informazioni chiave: l'URL di origine che richiede l'autenticazione e il dominio dell'app, che funge da proxy di protezione dell'autenticazione. Questo dominio serve anche come URL aperto per la tua applicazione.
Sotto la sua superficie user-friendly, Protected App impiega il robusto protocollo OpenID Connect, la stessa tecnologia dietro le altre app Logto regolari. Ciò garantisce alla tua applicazione benefici dalla sicurezza e scalabilità a livello di settore, salvaguardando i tuoi dati e le informazioni dell'utente senza compromettere le prestazioni.
Inoltre, Protected App offre ampie opzioni di personalizzazione. Hai la libertà di perfezionare le regole di autenticazione per diverse aree del tuo sito e di associare un dominio personalizzato.
Adottando Protected App, il resto delle potenti funzioni di Logto si apre automaticamente a te: esperienza di accesso personalizzabile, autenticazione multi-fattore, SSO aziendale, controllo degli accessi basato sui ruoli, organizzazioni e altro ancora!
In questo settore in rapida evoluzione, speriamo che tutti i costruttori possano concentrarsi sulle loro fantastiche idee e imprese, invece di lottare con le integrazioni e gli ostacoli tecnici. Questa è la missione del nostro team e questo è ciò per cui è stato progettato Logto. Ci impegniamo a supportarti nel portare alla vita le tue grandi idee, assicurandoti di poter dedicare tempo e risorse a ciò che veramente conta: la tua visione e i tuoi utenti.
Protected App è ora disponibile su Logto Cloud, e siamo entusiasti di annunciare che sarà open source presto.
Ti invitiamo a intraprendere questo viaggio con noi, semplificando la sicurezza in modo che tu possa rimanere concentrato su ciò che veramente conta.
Rimani sicuro, rimani collegato! 💻🔐