Pull to refresh
4
0.1
Олег Бубнов @bubn0ff

Frontend-developer

Send message

Обзор способов и протоколов аутентификации в веб-приложениях

Reading time18 min
Views675K


Я расскажу о применении различных способов аутентификации для веб-приложений, включая аутентификацию по паролю, по сертификатам, по одноразовым паролям, по ключам доступа и по токенам. Коснусь технологии единого входа (Single Sign-On), рассмотрю различные стандарты и протоколы аутентификации.

Перед тем, как перейти к техническим деталям, давайте немного освежим терминологию.

  • Идентификация — это заявление о том, кем вы являетесь. В зависимости от ситуации, это может быть имя, адрес электронной почты, номер учетной записи, итд.
  • Аутентификация — предоставление доказательств, что вы на самом деле есть тот, кем идентифицировались (от слова “authentic” — истинный, подлинный).
  • Авторизация — проверка, что вам разрешен доступ к запрашиваемому ресурсу.


Например, при попытке попасть в закрытый клуб вас идентифицируют (спросят ваше имя и фамилию), аутентифицируют (попросят показать паспорт и сверят фотографию) и авторизуют (проверят, что фамилия находится в списке гостей), прежде чем пустят внутрь.

Аналогично эти термины применяются в компьютерных системах, где традиционно под идентификацией понимают получение вашей учетной записи (identity) по username или email; под аутентификацией — проверку, что вы знаете пароль от этой учетной записи, а под авторизацией — проверку вашей роли в системе и решение о предоставлении доступа к запрошенной странице или ресурсу.

Однако в современных системах существуют и более сложные схемы аутентификации и авторизации, о которых я расскажу далее. Но начнем с простого и понятного.
Читать дальше →

Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Reading time7 min
Views89K
Аккордеон и faq

Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary

Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:

  1. Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
  2. Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
  3. Будет доступно управление элементами с клавиатуры и других устройств.
  4. Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
  5. Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
  6. Работает при выключенном javascript.

Ультимативный список инструментов для разработчиков и опытных пользователей для Windows

Reading time6 min
Views77K
Можете ли вы поверить, что с момента моего последнего списка инструментов прошло 6 лет? Инструменты изменились, многие из них доступны онлайн, но, честно говоря, для составления нового списка инструментов требуется ОЧЕНЬ МНОГО РАБОТЫ. Но я смог, вот список на 2020-2021 годы. Это инструменты в моей папке Utils. Я создал папку d:\dropbox\utils и добавил ее в свой PATH. Таким образом, он будет на всех моих компьютерах, и я могу мгновенно добраться до любого из них.

Это обновленный до версии 2020-21 мой список 2003, 2005, 2006, 2007, 2009, 2011 и 2014 годов, который в настоящее время включает все остальные мои списки. Я занимаюсь этим более 17 лет. Вау. Думаю, стоит тратить на это больше времени.

Все собирают утилиты, и у большинства есть список из тех, которые, по их мнению, незаменимы. Вот мой. У всех есть свои задачи, и я, скорее всего, использую каждую хотя бы несколько раз в неделю. Для меня «утилита» означает утилитарность. По этому принципу и построен список.

Все это очень любимые и часто используемые утилиты. Я бы не рекомендовал их, если бы не использовал их постоянно. Никто не платил деньги за то, чтобы быть в этом списке.

Эту статью написал наш коллега Скотт. Вот версия на английском. Ну а сам список под катом.

Читать дальше →

Вы не знаете деструктуризацию, пока

Reading time4 min
Views13K

С тех пор, как в ES6 была введена деструктуризация (destructuring assignment), прошло уже достаточно времени - теперь она поддерживается во всех передовых браузерах. Ее можно использовать в любой допустимой операции присваивания, например, при присваивании значений переменным, параметрам функции и т. д. Для начала давайте рассмотрим, что такое деструктуризация.

Синтаксис присваивания значений массива или объекта отдельным переменным до введения деструктуризации был чересчур подробным.

Читать далее

Путь верстальщика: с нуля до сеньора

Reading time8 min
Views363K

Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик.
Многократно я слышал мнение, что верстка — удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это то, что пользователи видят в первую очередь. На текущий момент качественная вёрстка (особенно проектирование блоков) в крупном проекте требует большого количества различных навыков.


В данной статье представляю схему развития верстальщика


image
[большая по клику]
Само собой, это не всеобъемлющая и единственно верная схема. Есть ещё целая гора связанных навыков, релевантных технологий и так далее. Градация является субъективной.

Описание пути код катом
12 ...
13

Information

Rating
5,722-nd
Location
Россия
Registered
Activity