Het verhaal achter Protected App.
Het maken van Logto als een open alternatief voor Auth0 is een hele ervaring geweest. De wereld zit vol met manieren om te controleren wie online is, dus waarom er nog een toevoegen? Dat is de grote vraag waar we over nadachten. We wilden iets dat elke programmeur kon oppakken en gebruiken zonder een hoop SDK's te moeten leren of eindeloze regels code te schrijven.
Dus, hier is het grote nieuws: We hebben Protected App gemaakt. Het is super eenvoudig - vul twee velden in en bam, je app is beschermd met authenticatie. Geen hoofdpijn. 🎉
We begonnen met het ontwikkelen van Protected App nadat we een groot probleem opmerkten bij het onderhouden van onze officiële SDK's: ondanks het aanbieden van talloze SDK's en voorbeeldprojecten voor ontwikkelaars, bleef het integratieproces uitdagend. Ontwikkelaars moesten leren over verschillende soorten "tokens" en extra code schrijven om ze te integreren. Dit bracht ons tot de vraag: Is het gebruik van Logto echt gemakkelijker dan het bouwen van een nieuw authenticatiesysteem vanaf nul? Helaas realiseerden we ons dat het niet zo eenvoudig was als we hadden gehoopt.
In de Express SDK adviseren we ontwikkelaars om middleware toe te voegen als een extra laag om drie hoofd taken uit te voeren: authenticatieroutes afhandelen, de authenticatiestatus controleren en gebruikersinformatie toevoegen aan het verzoekobject. Door dit te doen, krijgen ontwikkelaars toegang tot een vertrouwd authenticatieobject vanuit het verzoek zonder de ingewikkeldheden van "het integreren van een SDK" te hoeven begrijpen. Dit bracht ons op het idee: Kunnen we de voorbereidende taken voor de ontwikkelaars uitvoeren en ze direct naar de volgende stappen leiden?
Volgens de officiële introductie creëert Cloudflare Access een veilige toegangslaag voor al je self-hosted, SaaS, of niet-webapplicaties zonder dat er codewijzigingen aan de applicaties zelf nodig zijn.
Als een CDN-provider kan Cloudflare een authenticatielaag toevoegen aan zijn CDN-dienst voordat verzoeken naar de oorsprongserver worden doorgestuurd. Het is echter primair ontworpen voor interne bedrijfsproducten, waarbij het gratis abonnement slechts tot 50 gebruikers ondersteunt en kosten in rekening brengt op basis van het aantal gebruikers.
Cloudflare wordt vertrouwd door een brede ontwikkelaarscommunity, en Protected App draait op Cloudflare Workers, wat zorgen over het beheren van een extra server voor je applicatie wegneemt. We hebben Logto geïntegreerd op een manier die vergelijkbaar is met wat we in het Express SDK-voorbeeld hebben gedemonstreerd, maar met extra ondersteuning voor aanpassing. Daarna sturen we het verbeterde verzoek door naar je oorsprongserver.
De Protected App onderhoudt de sessiestatus en gebruikersinformatie. Als een gebruiker niet geauthenticeerd is, leidt de Protected App hen door naar de inlogpagina. Eenmaal geauthenticeerd, verpakt de Protected App het verzoek van de gebruiker met authenticatie en gebruikersinformatie en stuurt het naar de oorsprongserver.
Dit proces wordt in het volgende stroomdiagram weergegeven:
%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.328%2c88C125.313%2c88%2c143.281%2c88%2c160.583%2c88C177.885%2c88%2c194.521%2c88%2c202.839%2c88L211.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_Voorwaarde_1' d='M345.672%2c88L349.839%2c88C354.005%2c88%2c362.339%2c88%2c370.089%2c88.07C377.839%2c88.141%2c385.006%2c88.281%2c388.589%2c88.351L392.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_Voorwaarde_Overeenkomend_2' d='M538.485%2c108.561L545.649%2c110.676C552.813%2c112.791%2c567.141%2c117.02%2c579.297%2c119.209C591.453%2c121.397%2c601.438%2c121.544%2c606.43%2c121.618L611.422%2c121.691'/%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_Overeenkomend_C_3' d='M750.646%2c102.25L763.813%2c96.75C776.98%2c91.25%2c803.314%2c80.25%2c822.454%2c73.019C841.594%2c65.787%2c853.54%2c62.324%2c859.513%2c60.593L865.486%2c58.861'/%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_Overeenkomend_D_4' d='M783.502%2c135.683L791.193%2c136.944C798.884%2c138.205%2c814.266%2c140.728%2c829.159%2c141.989C844.052%2c143.25%2c858.456%2c143.25%2c865.658%2c143.25L872.859%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_Voorwaarde_C_5' d='M523.126%2c57L532.85%2c50.833C542.574%2c44.667%2c562.021%2c32.333%2c591.908%2c26.167C621.794%2c20%2c662.12%2c20%2c703.483%2c20C744.846%2c20%2c787.247%2c20%2c814.401%2c20.83C841.554%2c21.661%2c853.46%2c23.322%2c859.413%2c24.152L865.366%2c24.982'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg transform='translate(161.25%2c 88)' class='edgeLabel'%3e%3cg transform='translate(-28.90625%2c -12)' class='label'%3e%3cforeignObject height='24' width='57.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%3eVerzoek%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(581.46875%2c 121.25)' class='edgeLabel'%3e%3cg transform='translate(-8.453125%2c -12)' class='label'%3e%3cforeignObject height='24' width='16.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%3eJa%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(829.6484375%2c 69.25)' class='edgeLabel'%3e%3cg transform='translate(-8.453125%2c -12)' class='label'%3e%3cforeignObject height='24' width='16.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%3eJa%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(829.6484375%2c 143.25)' class='edgeLabel'%3e%3cg transform='translate(-14.6796875%2c -12)' class='label'%3e%3cforeignObject height='24' width='29.359375'%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%3eNee%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(702.4453125%2c 20)' class='edgeLabel'%3e%3cg transform='translate(-14.6796875%2c -12)' class='label'%3e%3cforeignObject height='24' width='29.359375'%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%3eNee%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%3eKlant%3cbr /%3e(Browser)%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(280.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(471.84375%2c 88)' id='flowchart-Voorwaarde-3' class='node default'%3e%3cpolygon transform='translate(-76.171875%2c31.5)' class='label-container' points='15.75%2c0 136.59375%2c0 152.34375%2c-31.5 136.59375%2c-63 15.75%2c-63 0%2c-31.5'/%3e%3cg transform='translate(-52.921875%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='105.84375'%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 /%3ekomt overeen%3f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(702.4453125%2c 121.25)' id='flowchart-Overeenkomend-5' class='node default'%3e%3cpolygon transform='translate(-87.5234375%2c19.5)' class='label-container' points='9.75%2c0 165.296875%2c0 175.046875%2c-19.5 165.296875%2c-39 9.75%2c-39 0%2c-19.5'/%3e%3cg transform='translate(-70.2734375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='140.546875'%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 geauthenticeerd%3f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(944.3515625%2c 36)' id='flowchart-C-7' class='node default'%3e%3crect height='54' width='150.046875' y='-27' x='-75.0234375' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-60.0234375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='120.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%3eOorsprongserver%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(944.3515625%2c 143.25)' id='flowchart-D-9' class='node default'%3e%3crect height='54' width='134.984375' y='-27' x='-67.4921875' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-52.4921875%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='104.984375'%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 inloggen%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)
Het gebruik van Protected App is opvallend eenvoudig en vereist slechts twee belangrijke stukjes informatie: de oorsprong-URL die authenticatie vereist en het app-domein, dat fungeert als een authenticatiebeschermingsproxy. Dit domein dient ook als de open URL voor je applicatie.
Onder het gebruiksvriendelijke oppervlak maakt Protected App gebruik van het robuuste OpenID Connect-protocol, dezelfde technologie achter andere reguliere Logto-apps. Dit zorgt ervoor dat je applicatie profiteert van industriële beveiliging en schaalbaarheid, waardoor je gegevens en gebruikersinformatie worden beschermd zonder in te boeten op prestaties.
Bovendien biedt Protected App uitgebreide aanpassingsmogelijkheden. Je hebt de vrijheid om authenticatieregels voor verschillende delen van je site fijn af te stemmen en een aangepast domein te binden.
Door Protected App te adopteren, worden de rest van de krachtige Logto-functies automatisch voor je geopend: aanpasbare inlogervaring, multi-factor authenticatie, enterprise SSO, rolgebaseerde toegangscontrole, organisaties, en meer!
In deze snel evoluerende industrie hopen we dat alle makers zich kunnen concentreren op hun geweldige ideeën en bedrijven, in plaats van te vechten met integraties en technische obstakels. Dit is de missie van ons team, en dit is waar Logto voor is ontworpen. We zijn toegewijd om je te ondersteunen bij het tot leven brengen van je geweldige ideeën, zodat je je tijd en middelen kunt wijden aan wat echt belangrijk is - je visie en je gebruikers.
Protected App is nu beschikbaar in Logto Cloud, en we zijn verheugd om aan te kondigen dat het binnenkort open source zal zijn.
We nodigen je uit om met ons mee te gaan op deze reis, waarbij we de beveiliging vereenvoudigen zodat je gefocust kunt blijven op wat echt belangrijk is.
Blijf veilig, blijf ingelogd! 💻🔐