A história por trás do Protected App.
Tornar o Logto uma alternativa aberta ao Auth0 tem sido uma aventura. O mundo está cheio de maneiras de verificar quem é quem online, então por que adicionar mais uma? Essa é a grande questão que ponderamos. Queríamos algo que qualquer programador pudesse pegar e usar sem ter que aprender um monte de SDKs ou escrever inúmeras linhas de código.
Então, aqui está a grande novidade: Fizemos o Protected App. É super simples - basta preencher dois campos, e pronto, seu aplicativo está protegido com autenticação. Sem dores de cabeça. 🎉
Começamos a desenvolver o Protected App depois de perceber um problema significativo enquanto mantínhamos nossos SDKs oficiais: apesar de fornecermos diversos SDKs e projetos de exemplo para desenvolvedores, o processo de integração ainda era desafiador. Os desenvolvedores tinham que aprender sobre vários tipos de "tokens" e escrever código adicional para integrá-los. Isso nos levou a questionar: Usar o Logto é realmente mais fácil do que construir um novo sistema de autenticação do zero? Infelizmente, percebemos que não era tão direto quanto esperávamos.
No Express SDK, aconselhamos os desenvolvedores a adicionar um middleware como uma camada adicional para realizar três tarefas-chave: lidar com rotas de autenticação, verificar o estado de autenticação e anexar informações do usuário ao objeto de solicitação. Ao fazer isso, os desenvolvedores podem acessar um objeto de autenticação confiável da solicitação sem precisar entender as complexidades de "integrar um SDK". Isso nos levou a pensar: Poderíamos lidar com as tarefas preliminares para os desenvolvedores e levá-los diretamente aos passos subsequentes?
De acordo com sua apresentação oficial, o Cloudflare Access cria uma camada de acesso seguro para todos os seus aplicativos auto-hospedados, SaaS ou não-web sem necessidade de alterações de código nos próprios aplicativos.
Como um provedor de CDN, a Cloudflare pode adicionar uma camada de autenticação ao seu serviço de CDN antes de encaminhar as solicitações para o servidor de origem. No entanto, é principalmente projetado para produtos internos de empresas, com o plano gratuito suportando apenas até 50 usuários e cobranças baseadas na contagem de usuários.
A Cloudflare é confiada por uma ampla comunidade de desenvolvedores, e o Protected App roda em Cloudflare Workers, eliminando preocupações sobre a gestão de um servidor adicional para o seu aplicativo. Integrámos o Logto de uma maneira similar à que mostramos na amostra do Express SDK, mas com suporte adicional para personalização. Em seguida, encaminhamos a solicitação aprimorada para seu servidor de origem.
O Protected App mantém o estado da sessão e as informações do usuário. Se um usuário não está autenticado, o Protected App redireciona-o para a página de login. Uma vez autenticado, o Protected App envolve a solicitação do usuário com autenticação e informações do usuário, e a encaminha para o servidor de origem.
Este processo é visualizado no seguinte fluxograma:
%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%2c88L117.958%2c88C128.573%2c88%2c149.802%2c88%2c170.365%2c88C190.927%2c88%2c210.823%2c88%2c220.771%2c88L230.719%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_Condi%c3%a7%c3%a3o_1' d='M365.234%2c88L369.401%2c88C373.568%2c88%2c381.901%2c88%2c389.651%2c88.07C397.401%2c88.141%2c404.568%2c88.281%2c408.152%2c88.351L411.735%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_Condi%c3%a7%c3%a3o_Combinou_2' d='M523.111%2c105.496L530.908%2c108.122C538.704%2c110.748%2c554.297%2c115.999%2c567.974%2c118.699C581.651%2c121.4%2c593.412%2c121.549%2c599.292%2c121.624L605.172%2c121.699'/%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_Combinou_C_3' d='M735.835%2c102.25L748.353%2c96.75C760.872%2c91.25%2c785.909%2c80.25%2c804.397%2c73.126C822.885%2c66.003%2c834.825%2c62.756%2c840.795%2c61.132L846.765%2c59.509'/%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_Combinou_D_4' d='M764.99%2c135.302L772.649%2c136.627C780.308%2c137.951%2c795.627%2c140.601%2c811.674%2c141.925C827.721%2c143.25%2c844.497%2c143.25%2c852.885%2c143.25L861.273%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_Condi%c3%a7%c3%a3o_C_5' d='M516.54%2c58.361L525.432%2c51.967C534.323%2c45.574%2c552.107%2c32.787%2c581.012%2c26.393C609.917%2c20%2c649.943%2c20%2c690.118%2c20C730.294%2c20%2c770.62%2c20%2c796.735%2c20.779C822.85%2c21.558%2c834.754%2c23.116%2c840.707%2c23.895L846.659%2c24.674'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg transform='translate(171.03125%2c 88)' class='edgeLabel'%3e%3cg transform='translate(-38.6875%2c -12)' class='label'%3e%3cforeignObject height='24' width='77.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' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3eSolicita%c3%a7%c3%a3o%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(569.890625%2c 121.25)' class='edgeLabel'%3e%3cg transform='translate(-13.78125%2c -12)' class='label'%3e%3cforeignObject height='24' width='27.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' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3eSim%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(810.9453125%2c 69.25)' class='edgeLabel'%3e%3cg transform='translate(-13.78125%2c -12)' class='label'%3e%3cforeignObject height='24' width='27.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' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3eSim%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(810.9453125%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%3eN%c3%a3o%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(689.96875%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%3eN%c3%a3o%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(299.9765625%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(473.171875%2c 88)' id='flowchart-Condi%c3%a7%c3%a3o-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%3eRota%3cbr /%3ecombina%3f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(689.96875%2c 121.25)' id='flowchart-Combinou-5' class='node default'%3e%3cpolygon transform='translate(-81.296875%2c19.5)' class='label-container' points='9.75%2c0 152.84375%2c0 162.59375%2c-19.5 152.84375%2c-39 9.75%2c-39 0%2c-19.5'/%3e%3cg transform='translate(-64.046875%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='128.09375'%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%3eEst%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(933.2109375%2c 36)' id='flowchart-C-7' class='node default'%3e%3crect height='54' width='165.171875' y='-27' x='-82.5859375' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-67.5859375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='135.171875'%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 origem%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(933.2109375%2c 143.25)' id='flowchart-D-9' class='node default'%3e%3crect height='54' width='135.875' y='-27' x='-67.9375' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-52.9375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='105.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%3eLogin do 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)
Usar o Protected App é extremamente simples, requer apenas duas informações-chave: o URL de origem que requer autenticação, e o domínio do aplicativo, que atua como um proxy de proteção de autenticação. Este domínio também serve como o URL aberto para o seu aplicativo.
Sob sua superfície amigável ao usuário, o Protected App emprega o robusto protocolo OpenID Connect, a mesma tecnologia por trás dos outros aplicativos regulares do Logto. Isto garante que a sua aplicação se beneficia da segurança e escalabilidade ao nível da indústria, protegendo os seus dados e informações do usuário sem comprometer o desempenho.
Além disso, o Protected App oferece extensas opções de personalização. Você tem a liberdade de ajustar as regras de autenticação para diferentes áreas do seu site e vincular um domínio personalizado.
Ao adotar o Protected App, o resto dos poderosos recursos do Logto se abrem automaticamente para você: experiência de login personalizável, autenticação multi-fator, SSO empresarial, controle de acesso baseado em funções, organizações, e mais!
Nesta indústria em rápida evolução, esperamos que todos os construtores possam se concentrar em suas ideias e negócios incríveis, em vez de lutar com integrações e obstáculos técnicos. Esta é a missão da nossa equipe, e para isso o Logto foi projetado. Estamos comprometidos em apoiar você em trazer suas grandes ideias para a vida, garantindo que você possa dedicar seu tempo e recursos ao que realmente importa - sua visão e seus usuários.
O Protected App agora está disponível no Logto Cloud, e estamos animados para anunciar que em breve será open-source.
Convidamos você a embarcar nesta jornada conosco, simplificando a segurança para que você possa se concentrar no que realmente importa.
Mantenha-se seguro, mantenha-se logado! 💻🔐