История создания Protected App.
Создание Logto как открытой альтернативы для Auth0 было довольно сложным процессом. В мире существует множество способов проверки личности в интернете, так зачем добавлять еще один? Вот над этим вопросом мы долго думали. Мы хотели создать что-то, что любой разработчик смог бы использовать без необходимости изучения кучи SDK или написания кучи кода.
Итак, вот наше главное объявление: мы создали Protected App. Это очень просто - просто заполните два поля, и вуаля, ваше приложение защищено аутентификацией. Без головной боли. 🎉
Мы начали разработку Protected App после того, как заметили серьезную проблему в ходе поддержки наших официальных SDK: несмотря на предоставление множества SDK и образцовых проектов для разработчиков, процесс интеграции оставался сложным. Разработчикам нужно было изучить различные типы "токенов" и написать дополнительный код для их интеграции. Это подвигло нас задаться вопросом: Действительно ли использование Logto проще, чем создание новой системы аутентификации с нуля? К сожалению, мы поняли, что это не так просто, как нам хотелось бы.
В Express SDK мы рекомендуем разработчикам добавлять промежуточное ПО как дополнительный слой для выполнения трех ключевых задач: обработка маршрутов аутентификации, проверка состояния аутентификации и добавление информации о пользователе в объект запроса. Делая это, разработчики могут получить доступ к проверенному объекту аутентификации из запроса, не заботясь о тонкостях "интеграции SDK". Это подтолкнуло нас к мысли: Могли бы мы сами выполнить предварительные задачи для разработчиков и напрямую направить их к следующим шагам?
Согласно официальному описанию, Cloudflare Access создает безопасный уровень доступа ко всем вашим самохостинговым, SaaS или не-веб-приложениям, не требуя внесения изменений в код самих приложений.
Как провайдер CDN, Cloudflare может добавить слой аутентификации к своему CDN сервису перед перенаправлением запросов к оригинальному серверу. Однако, он в первую очередь предназначен для продуктов корпоративного уровня, причем бесплатный план поддерживает только до 50 пользователей и взимает плату в зависимости от количества пользователей.
Cloudflare доверяет широкое сообщество разработчиков, а Protected App работает на Cloudflare Workers, исключая необходимость управления дополнительным сервером для вашего приложения. Мы интегрировали Logto таким же образом, как демонстрировали в образце Express SDK, но добавили поддержку настройки. Затем мы перенаправляем улучшенный запрос к вашему серверу.
Protected App поддерживает состояние сеанса и информацию о пользователе. Если пользователь не прошел аутентификацию, Protected App перенаправляет его на страницу входа в систему. После аутентификации Protected App обертывает запрос пользователя с информацией об аутентификации и пользователе и перенаправляет его на оригинальный сервер.
Этот процесс визуализирован на следующей блок-схеме:
%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='M109.734%2c88L118.32%2c88C126.906%2c88%2c144.078%2c88%2c160.583%2c88C177.089%2c88%2c192.927%2c88%2c200.846%2c88L208.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_%d0%a3%d1%81%d0%bb%d0%be%d0%b2%d0%b8%d0%b5_1' d='M343.281%2c88L347.448%2c88C351.615%2c88%2c359.948%2c88%2c367.698%2c88.07C375.448%2c88.141%2c382.615%2c88.281%2c386.199%2c88.351L389.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_%d0%a3%d1%81%d0%bb%d0%be%d0%b2%d0%b8%d0%b5_%d0%a1%d0%be%d0%b2%d0%bf%d0%b0%d0%b4%d0%b5%d0%bd%d0%b8%d0%b5_2' d='M516.897%2c107.207L524.183%2c109.547C531.47%2c111.888%2c546.044%2c116.569%2c558.558%2c118.983C571.073%2c121.398%2c581.529%2c121.546%2c586.757%2c121.62L591.985%2c121.693'/%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_%d0%a1%d0%be%d0%b2%d0%bf%d0%b0%d0%b4%d0%b5%d0%bd%d0%b8%d0%b5_C_3' d='M739.096%2c102.25L752.78%2c96.75C766.465%2c91.25%2c793.834%2c80.25%2c813.308%2c73.341C832.783%2c66.433%2c844.362%2c63.616%2c850.152%2c62.207L855.941%2c60.799'/%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_%d0%a1%d0%be%d0%b2%d0%bf%d0%b0%d0%b4%d0%b5%d0%bd%d0%b8%d0%b5_D_4' d='M775.891%2c136.125L783.443%2c137.312C790.995%2c138.5%2c806.099%2c140.875%2c825.461%2c142.062C844.823%2c143.25%2c868.443%2c143.25%2c880.253%2c143.25L892.063%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_%d0%a3%d1%81%d0%bb%d0%be%d0%b2%d0%b8%d0%b5_C_5' d='M506.849%2c57L515.811%2c50.833C524.772%2c44.667%2c542.695%2c32.333%2c573.058%2c26.167C603.422%2c20%2c646.227%2c20%2c689.658%2c20C733.089%2c20%2c777.146%2c20%2c804.95%2c20.676C832.754%2c21.352%2c844.305%2c22.704%2c850.08%2c23.381L855.855%2c24.057'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg transform='translate(161.25%2c 88)' class='edgeLabel'%3e%3cg transform='translate(-26.515625%2c -12)' class='label'%3e%3cforeignObject height='24' width='53.03125'%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%d0%97%d0%b0%d0%bf%d1%80%d0%be%d1%81%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(560.6171875%2c 121.25)' class='edgeLabel'%3e%3cg transform='translate(-9.8671875%2c -12)' class='label'%3e%3cforeignObject height='24' width='19.734375'%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%d0%94%d0%b0%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(821.203125%2c 69.25)' class='edgeLabel'%3e%3cg transform='translate(-9.8671875%2c -12)' class='label'%3e%3cforeignObject height='24' width='19.734375'%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%d0%94%d0%b0%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(821.203125%2c 143.25)' class='edgeLabel'%3e%3cg transform='translate(-13.625%2c -12)' class='label'%3e%3cforeignObject height='24' width='27.25'%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%d0%9d%d0%b5%d1%82%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(689.03125%2c 20)' class='edgeLabel'%3e%3cg transform='translate(-13.625%2c -12)' class='label'%3e%3cforeignObject height='24' width='27.25'%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%d0%9d%d0%b5%d1%82%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(58.8671875%2c 88)' id='flowchart-A-0' class='node default'%3e%3crect height='78' width='101.734375' y='-39' x='-50.8671875' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-35.8671875%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='71.734375'%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%d0%9a%d0%bb%d0%b8%d0%b5%d0%bd%d1%82%3cbr /%3e(%d0%91%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80)%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(278.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(459.515625%2c 88)' id='flowchart-%d0%a3%d1%81%d0%bb%d0%be%d0%b2%d0%b8%d0%b5-3' class='node default'%3e%3cpolygon transform='translate(-66.234375%2c31.5)' class='label-container' points='15.75%2c0 116.71875%2c0 132.46875%2c-31.5 116.71875%2c-63 15.75%2c-63 0%2c-31.5'/%3e%3cg transform='translate(-42.984375%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='85.96875'%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%d0%9c%d0%b0%d1%80%d1%88%d1%80%d1%83%d1%82%3cbr /%3e%d1%81%d0%be%d0%b2%d0%bf%d0%b0%d0%b4%d0%b0%d0%b5%d1%82%3f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(689.03125%2c 121.25)' id='flowchart-%d0%a1%d0%be%d0%b2%d0%bf%d0%b0%d0%b4%d0%b5%d0%bd%d0%b8%d0%b5-5' class='node default'%3e%3cpolygon transform='translate(-93.546875%2c19.5)' class='label-container' points='9.75%2c0 177.34375%2c0 187.09375%2c-19.5 177.34375%2c-39 9.75%2c-39 0%2c-19.5'/%3e%3cg transform='translate(-76.296875%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='152.59375'%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%d0%90%d1%83%d1%82%d0%b5%d0%bd%d1%82%d0%b8%d1%84%d0%b8%d1%86%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%3f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(957.875%2c 36)' id='flowchart-C-7' class='node default'%3e%3crect height='54' width='196.09375' y='-27' x='-98.046875' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-83.046875%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='166.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%3e%d0%9e%d1%80%d0%b8%d0%b3%d0%b8%d0%bd%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b9 %d1%81%d0%b5%d1%80%d0%b2%d0%b5%d1%80%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(957.875%2c 143.25)' id='flowchart-D-9' class='node default'%3e%3crect height='54' width='123.625' y='-27' x='-61.8125' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-46.8125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='93.625'%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%d0%92%d1%85%d0%be%d0%b4 %d0%b2 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)
Использование Protected App невероятно просто, требуя всего два ключевых элемента информации: URL-адрес исходного сервера, которому требуется аутентификация, и домен приложения, который выступает в качестве прокси для защиты аутентификации. Этот домен также служит открытым URL для вашего приложения.
За своим пользовательским интерфейсом, Protected App использует мощный протокол OpenID Connect, ту же технологию, что и остальные обычные приложения Logto. Это обеспечивает вашему приложению безопасность и масштабируемость на уровне отрасли, обеспечивая защиту ваших данных и информации о пользователях без ущерба для производительности.
Кроме того, Protected App предлагает широкие возможности для настройки. У вас есть свобода точной настройки правил аутентификации для различных областей вашего сайта и привязки собственного домена.
Принимая в работу Protected App, вы автоматически получаете доступ ко всем мощным функциям Logto: настраиваемый опыт входа в систему, многофакторная аутентификация, корпоративная SSO, контроль доступа на основе ролей, организации, и многое другое!
В этой быстро меняющейся отрасли, мы надеемся, что все строители смогут сосредоточиться на своих удивительных идеях и проектах, а не на борьбе с интеграциями и техническими препятствиями. Это - миссия нашей команды, и для этого предназначен Logto. Мы решительно настроены на поддержку вас в воплощении ваших великих идей в жизнь, обеспечивая, чтобы вы могли посвятить свое время и ресурсы тому, что действительно важно - вашей мечте и вашим пользователям.
Protected App теперь доступен в Logto Cloud, и мы рады сообщить, что скоро он будет открыт для всех.
Мы приглашаем вас присоединиться к нам в этом путешествии, упрощая безопасность, чтобы вы могли оставаться сосредоточенными на том, что действительно важно.
Оставайтесь в безопасности, оставайтесь в системе! 💻🔐