La historia detrás de la aplicación protegida.
Hacer Logto como una alternativa abierta a Auth0 ha sido todo un viaje. El mundo está lleno de formas de verificar quién es quién en línea, ¿así que por qué agregar otro? Esa es la gran pregunta que masticamos. Queríamos algo que cualquier codificador pudiera recoger y usarlo sin tener que aprender un montón de SDKs o escribir interminables líneas de código.
Entonces, aquí están las grandes noticias: Hicimos la Aplicación Protegida. Es súper simple, solo rellena dos lugares, y bam, tu aplicación está protegida con autenticación. Sin dolores de cabeza. 🎉
Comenzamos a desarrollar la Aplicación Protegida después de notar un problema significativo mientras manteníamos nuestros SDKs oficiales: a pesar de proporcionar numerosos SDKs y proyectos de muestra para desarrolladores, el proceso de integración seguía siendo un desafío. Los desarrolladores tenían que aprender sobre varios tipos de "tokens" y escribir código adicional para integrarlos. Esto nos llevó a preguntarnos: ¿Es el uso de Logto realmente más fácil que construir un nuevo sistema de autenticación desde cero? Desafortunadamente, nos dimos cuenta de que no era tan sencillo como esperábamos.
En el SDK Express, aconsejamos a los desarrolladores agregar middleware como una capa adicional para realizar tres tareas clave: manejar rutas de autenticación, verificar el estado de autenticación y agregar información del usuario al objeto de solicitud. Haciendo esto, los desarrolladores pueden acceder a un objeto de autenticación de confianza desde la solicitud sin necesidad de entender las complejidades de "integrar un SDK". Esto nos hizo pensar: ¿Podríamos manejar las tareas preliminares para los desarrolladores y llevarlos directamente a los pasos subsiguientes?
Según su introducción oficial, Cloudflare Access crea una capa de acceso seguro para todas sus aplicaciones alojadas, SaaS o no web sin requerir ningún cambio de código en las propias aplicaciones.
Como proveedor de CDN, Cloudflare puede agregar una capa de autenticación a su servicio CDN antes de reenviar las solicitudes al servidor de origen. Sin embargo, está diseñado principalmente para productos internos de la empresa, con el plan gratuito que solo admite hasta 50 usuarios y cobra en función del número de usuarios.
Cloudflare es confiable para una amplia comunidad de desarrolladores, y la Aplicación Protegida se ejecuta en Cloudflare Workers, eliminando las preocupaciones sobre la gestión de un servidor adicional para su aplicación. Integramos Logto de una manera similar a lo que demostramos en la muestra de SDK Express, pero con soporte adicional para personalización. Luego, reenviamos la solicitud mejorada a su servidor de origen.
La Aplicación Protegida mantiene el estado de la sesión y la información del usuario. Si un usuario no está autenticado, la Aplicación Protegida lo redirige a la página de inicio de sesión. Una vez autenticado, la Aplicación Protegida envuelve la solicitud del usuario con autenticación e información del usuario, luego la reenvía al servidor de origen.
Este proceso se visualiza en el siguiente diagrama de flujo:
%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='M126.938%2c88L136.145%2c88C145.352%2c88%2c163.766%2c88%2c181.513%2c88C199.26%2c88%2c216.341%2c88%2c224.882%2c88L233.422%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='M413.297%2c88L417.464%2c88C421.63%2c88%2c429.964%2c88%2c437.714%2c88.07C445.464%2c88.141%2c452.631%2c88.281%2c456.214%2c88.351L459.798%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='M568.978%2c106.356L575.81%2c108.838C582.642%2c111.321%2c596.305%2c116.285%2c607.981%2c118.841C619.656%2c121.397%2c629.344%2c121.543%2c634.188%2c121.616L639.032%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='M774.749%2c102.25L787.313%2c96.75C799.877%2c91.25%2c825.005%2c80.25%2c846.647%2c72.574C868.289%2c64.898%2c886.446%2c60.547%2c895.524%2c58.371L904.602%2c56.195'/%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='M808.246%2c136.07L815.227%2c137.266C822.209%2c138.463%2c836.171%2c140.857%2c848.356%2c142.053C860.542%2c143.25%2c870.951%2c143.25%2c876.155%2c143.25L881.359%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='M562.214%2c57.115L570.173%2c50.929C578.132%2c44.743%2c594.05%2c32.372%2c621.801%2c26.186C649.552%2c20%2c689.135%2c20%2c729.163%2c20C769.19%2c20%2c809.661%2c20%2c838.961%2c21.045C868.261%2c22.091%2c886.39%2c24.181%2c895.454%2c25.227L904.519%2c26.272'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg transform='translate(182.1796875%2c 88)' class='edgeLabel'%3e%3cg transform='translate(-30.2421875%2c -12)' class='label'%3e%3cforeignObject height='24' width='60.484375'%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%3eSolicitud%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(609.96875%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%ad%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(850.1328125%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%ad%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(850.1328125%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(728.71875%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(67.46875%2c 88)' id='flowchart-A-0' class='node default'%3e%3crect height='78' width='118.9375' y='-39' x='-59.46875' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-44.46875%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='88.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%3eCliente%3cbr /%3e(Navegador)%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(325.359375%2c 88)' id='flowchart-B-1' class='node default'%3e%3crect height='78' width='175.875' y='-39' x='-87.9375' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-72.9375%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='145.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%3eLogto%3cbr /%3eAplicaci%c3%b3n Protegida%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(520.3515625%2c 88)' id='flowchart-Condition-3' class='node default'%3e%3cpolygon transform='translate(-57.0546875%2c31.5)' class='label-container' points='15.75%2c0 98.359375%2c0 114.109375%2c-31.5 98.359375%2c-63 15.75%2c-63 0%2c-31.5'/%3e%3cg transform='translate(-33.8046875%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='67.609375'%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%3eRuta%3cbr /%3ecoincide%3f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(728.71875%2c 121.25)' id='flowchart-Matched-5' class='node default'%3e%3cpolygon transform='translate(-86.1875%2c19.5)' class='label-container' points='9.75%2c0 162.625%2c0 172.375%2c-19.5 162.625%2c-39 9.75%2c-39 0%2c-19.5'/%3e%3cg transform='translate(-68.9375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='137.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%3e%c2%bfEst%c3%a1 autenticado%3f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(988.8671875%2c 36)' id='flowchart-C-7' class='node default'%3e%3crect height='54' width='160.75' y='-27' x='-80.375' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-65.375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='130.75'%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%3eServidor de origen%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(988.8671875%2c 143.25)' id='flowchart-D-9' class='node default'%3e%3crect height='54' width='207.015625' y='-27' x='-103.5078125' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-88.5078125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='177.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' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eInicio de sesi%c3%b3n de 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)
El uso de la Aplicación Protegida es notablemente sencillo, requiriendo solo dos piezas claves de información: la URL de origen que requiere autenticación y el dominio de la aplicación, que actúa como un proxy de protección de autenticación. Este dominio también sirve como la URL abierta para su aplicación.
Bajo su superficie amigable para el usuario, la Aplicación Protegida emplea el robusto protocolo OpenID Connect, la misma tecnología detrás de otras aplicaciones regulares de Logto. Esto asegura que su aplicación se beneficie de la seguridad y escalabilidad a nivel de industria, protegiendo sus datos e información del usuario sin comprometer el rendimiento.
Además, la Aplicación Protegida ofrece amplias opciones de personalización. Tiene la libertad de ajustar las reglas de autenticación para diferentes áreas de su sitio y vincular un dominio personalizado.
Al adoptar la Aplicación Protegida, el resto de las poderosas características de Logto se abren automáticamente para usted: experiencia de inicio de sesión personalizable, autenticación de múltiples factores, SSO de la empresa, control de acceso basado en roles, organizaciones, ¡y más!
En esta industria que evoluciona rápidamente, esperamos que todos los constructores puedan centrarse en sus increíbles ideas y negocios, en lugar de luchar con integraciones y obstáculos técnicos. Esta es la misión de nuestro equipo, y para esto se diseñó Logto. Estamos comprometidos a apoyarte en dar vida a tus grandes ideas, asegurando que puedas dedicar tu tiempo y recursos a lo que realmente importa, tu visión y tus usuarios.
La Aplicación Protegida ya está disponible en Logto Cloud, y estamos emocionados de anunciar que pronto será de código abierto.
Te invitamos a embarcarte en este viaje con nosotros, simplificando la seguridad para que puedas concentrarte en lo que realmente importa.
Manténgase seguro, ¡manténgase conectado! 💻🔐