#Frontend

Эй! Давай создадим свою слот-машину, как в онлайн-казино! Это будет классный проект, где мы сделаем три вертикальных слота с эмодзи фруктов и овощей.

Сначала мы подготовим HTML-страничку с контейнерами для слотов и кнопкой. Потом добавим стиль, чтобы всё выглядело круто. А после этого напишем скрипт, который будет случайным образом менять эмодзи, когда мы будем нажимать на кнопку.

Также можем добавить какие-нибудь улучшения, например, проверку совпадений или звуки, когда слоты крутятся. В общем, будет весело и полезно! Попробуем?


🔗 Статья

🌐 Новости

🖥 Платформа

Программирование на гранях техники: Компьютеры, Редакторы и цифровые DSL

В программировании есть интересные концепции, делающие код более гибким и выразительным. Одной из таких концепций является метапрограммирование. Давайте разберемся, что это такое.


📝 Введение в метапрограммирование

Метапрограммирование позволяет изменять или генерировать код во время выполнения, адаптируя его к изменяющимся условиям.


📝 Метаклассы: магия за кулисами классов

Метаклассы — мощный инструмент для изменения процесса создания классов. Они позволяют автоматически регистрировать классы или динамически изменять их поведение, создавая более адаптивные структуры.


📝 Декораторы: магические обёртки для функций и классов

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


📝 Динамические DSL: создание доменно-специфичных языков

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

Понимание этих концепций повысит вашу эффективность как разработчика и поможет создавать более гибкие и расширяемые системы!


🔗 Статья

🌐 Новости

🖥 Платформа

#Tech

🎭 Советы для избежания частых ошибок в разработке


1. Недостаточная обработка исключений

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


2. Забывая о DRY, пишем дважды

Копирование кода кажется быстрым решением, но становится кошмаром при внесении изменений. Выделение повторяющихся частей в функции — инвестиция в будущую продуктивность.


3. Глобальные переменные

Удобные на первый взгляд, они становятся источником неожиданных проблем. Лучше передавать данные через параметры и возвращаемые значения.


4. Тесты

Код без тестов подобен сложному трюку без страховки. Тесты выявляют ошибки на ранних этапах и документируют ожидаемое поведение программы.


5. Искусство работы с данными

Оптимизируйте алгоритмы и структуры данных. Используйте современные инструменты — генераторы, встроенные функции, специализированные коллекции.


6. SOLID

Эти принципы помогают создавать гибкие, расширяемые системы, устойчивые к изменениям требований.


7. Многопоточность

Без правильных механизмов блокировки и синхронизации параллельное выполнение задач приводит к непредсказуемым результатам.


8. Структура проекта

Логическое разделение на модули и пакеты помогает быстро ориентироваться в проекте и понимать взаимосвязи компонентов.


9. Магические числа:

Замена числовых значений на константы с говорящими именами делает код понятнее.


10. Логирование

Грамотное логирование — ваш проводник при выявлении причин сбоев на продакшене.


11. Планирование

Анализ требований и проектирование архитектуры помогают избежать ненужных переделок.


12. Единообразие

Единый стиль кодирования делает код читаемым и упрощает командную работу.

Ошибки — не повод для разочарования, а возможность для роста. Применяя лучшие практики, middle-разработчики могут подняться на новую ступень мастерства.

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

🔗 Статья

🌐 Новости

🖥 Платформа

#Backend

SQL Practice

Это интерактивная платформа для освоения и совершенствования навыков SQL. Здесь вы решаете реальные задачи по работе с базами данных в удобной онлайн-среде.


Ключевые особенности:

- Обучение через практику — решайте задачи разной сложности
- Мгновенная обратная связь — система сразу проверяет ваши решения
- Реалистичные базы данных — работа с данными, имитирующими реальные сценарии
- Последовательное развитие — от простых запросов к сложным техникам


Как использовать

1. Перейдите на www.sql-practice.com
2. Выберите раздел и сложность
3. Напишите SQL-запрос для решения задачи
4. Получите результат и переходите к следующей задаче


🌐 Новости

🖥 Платформа

#Frontend

🎓 Crunchzilla - это образовательная платформа, которая предлагает несколько интерактивных обучающих инструментов для изучения JavaScript.


На сайте представлены следующие программы:

1. Code Monster - интерактивный учебник по JavaScript для детей. Учит базовым концепциям программирования через создание анимации и графики.

2. Code Maven - более продвинутая версия для подростков и взрослых. Покрывает более сложные концепции JavaScript и создание интерактивных визуализаций.

3. Game Maven - учит создавать игры с использованием JavaScript, включая управление физикой, детектирование столкновений и другие игровые механики.

Все эти инструменты построены по принципу "учись, делая" - они предлагают пошаговые инструкции, которые пользователь выполняет прямо в браузере, сразу видя результаты своего кода.

Это отличный способ для начинающих узнать основы программирования в интерактивной форме.


🔗 Ссылка

🌐 Новости

🖥 Платформа

⛔️ Топ-10 ошибок при использовании микросервисов

Микросервисы зарекомендовали себя как эффективный подход в разработке, но бывают ли ситуации, когда они не оправдывают ожиданий?

В этой статье рассмотрены 10 распространенных антипаттернов в работе с микросервисами и решения для их предотвращения.


🔗 Ссылка

🌐 Новости

🖥 Платформа

🟡 Расширение для браузера за 10 минут

Всегда хотели создать собственное расширение для браузера, но думали, что это сложно? На самом деле, вы можете сделать простое, но полезное расширение всего за 10 минут!


➖ История проблемы

В конце 2020 года я разработал скрипт с падающим снегом для сайтов. Но возникла проблема: скрипт нужно было запускать через консоль браузера, что становилось невозможным на сайтах с жёсткой политикой безопасности. Решение? Создать собственное расширение!


➖ Создаём манифест

Манифест — это главный документ расширения, который определяет его параметры:
- Название
- Права доступа
- Фоновые скрипты
- Иконку
- Действия при клике

Создадим файл manifest.json:

{
  "name": "Snow Fall",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab", "scripting"],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

➖ Добавление расширения в браузер

1. Откройте Chrome и перейдите в раздел chrome://extensions/
2. Включите "Режим разработчика"
3. Нажмите "Загрузить распакованное расширение" и выберите папку с вашими файлами

Настройка иконок и разрешений

Для работы расширения нам нужны разрешения:
- activeTab — доступ к активной вкладке
- scripting — возможность запускать скрипты

А для всплывающего меню создадим файл popup.html:

<!DOCTYPE html>
<html>
<head>
  <style>
    button { width: 100px; height: 30px; }
  </style>
</head>
<body>
  <button id="start">Запустить снег</button>
  <script src="popup.js"></script>
</body>
</html>

➖ Запуск снежинок

Теперь создадим файл popup.js с кодом для запуска:

document.getElementById('start').addEventListener('click', async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: snowFall
  });
});

function snowFall() {
  // Здесь должен быть код со снежинками
  // Пример:
  const snow = document.createElement('div');
  snow.innerHTML = '❄️';
  snow.style.position = 'fixed';
  snow.style.top = '0';
  snow.style.left = Math.random() * 100 + '%';
  snow.style.animation = 'fall 10s linear';
  document.body.appendChild(snow);
  
  // Добавьте здесь полный код для снежинок
}

➖ Проверка работы

После создания всех файлов и добавления расширения в браузер, вы можете:
1. Зайти на любой сайт
2. Нажать на иконку расширения
3. Нажать кнопку "Запустить снег"

Вуаля! Снежинки появляются даже на сайтах с жёсткой политикой безопасности.


Оригинальная статья 👇

🔗 Ссылка

🌐 Новости

🖥 Платформа

#WebDevelopment

📡 Какие методы HTTP-запросов существуют?

HTTP — это основа для передачи данных в интернете. Разберём основные HTTP-методы:


➕ GET — Получение данных

GET /api/users?id=123 HTTP/1.1
Host: example.com

• Запрашивает данные без изменений
• Параметры в URL
• Кэшируется
• Можно добавить в закладки
• Идемпотентный


➕ POST — Создание ресурса

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "Алексей",
  "email": "alex@example.com"
}

• Отправляет данные на сервер
• Для создания новых ресурсов
• Данные в теле запроса
• Не кэшируется
• Не идемпотентный


➕ PUT — Полное обновление

PUT /api/users/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "name": "Алексей",
  "email": "new.alex@example.com"
}

• Заменяет ресурс полностью
• Может создать новый ресурс
• Идемпотентный


➕ DELETE — Удаление

DELETE /api/users/123 HTTP/1.1
Host: example.com

• Удаляет ресурс
• Идемпотентный


➕ PATCH — Частичное обновление

PATCH /api/users/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "email": "newest.alex@example.com"
}

• Частично изменяет ресурс
• Передаёт только изменяемые поля
• Обычно не идемпотентный


➕ HEAD — Только заголовки

• Возвращает только HTTP-заголовки
• Для проверки доступности ресурса
• Идемпотентный


➕ OPTIONS — Информация о ресурсе

• Запрашивает информацию о методах и заголовках
• Используется для CORS
• Идемпотентный


➕ CONNECT — Туннелирование

• Создаёт туннель через прокси
• Для HTTPS через HTTP-прокси


➕ TRACE — Диагностика

• Возвращает запрос обратно
• Для отладки
• Обычно отключен


💡 Что такое идемпотентность?

Идемпотентность — многократное выполнение одной операции даёт один результат.

Идемпотентные методы:
• GET
• PUT
• DELETE
• HEAD
• OPTIONS

Не идемпотентные:
• POST
• PATCH (обычно)

🌐 Новости

🖥 Платформа

#Tech

🔐 Хеширование: защита данных в цифровом мире

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

Но как убедиться, что эти данные в безопасности? На помощь приходит хеширование — мощный инструмент в арсенале кибербезопасности.

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

В этой статье мы погрузимся в мир хеш-функций, разберем их типы и применение в реальной жизни — от защиты ваших паролей до блокчейн-технологий.


🔗 Статья

🌐 Новости

🖥 База вопросов

#Tech

Вспоминая школьные годы, когда мы часами разбирали старые гаджеты в попытке понять, как они работают, я недавно наткнулась на нечто особенное. Это Retro Gadgets – игра, которая переносит магию создания электроники в цифровой мир.

Представьте себе: вы берёте виртуальные микросхемы, кнопки, дисплеи и соединяете их в устройство своей мечты. Может быть портативную игровую консоль? Или музыкальный синтезатор?

Что действительно зацепило меня — это возможность не просто собирать, но и программировать свои создания на Lua.

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


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Tech

Рейтинги языков программирования: не верь одному источнику!

Думаешь, какой язык учить или куда двигаться дальше? Разные рейтинги дают совершенно разные картины популярности!


Что показывают основные рейтинги в 2025:

TIOBE:
- Python
- C++
- Java
- Delphi внезапно на 9 месте (серьезно?!)

PYPL (Google Trends):
- Python по-прежнему король
- Java обгоняет C++
- Delphi скромно сидит на 30-м месте

RedMonk (GitHub + StackOverflow):
- JavaScript впереди Python
- CSS попал в топ-7 (хотя это не язык программирования)

Вакансии в России:
- Python (10 526)
- JavaScript (6198)
- Java (4354)


Почему языки становятся популярными:

- Python = машинное обучение и AI
- Go & Rust = облачные технологии и микросервисы
- TypeScript = надежный фронтенд
- C++ = сырая производительность

Не верь одному рейтингу! Сравнивай разные источники. Смотри на тренды в своей сфере. Некоторые всплески популярности (как с Delphi) — просто статистические аномалии или результат маркетинга.

🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Frontend

🏗️ Шаблоны проектирования

Что такое шаблоны проектирования:
- Руководства по решению конкретных проблем
- Не являются законченными архитектурными решениями
- Описывают подход к решению проблемы, а не её поиск


1️⃣ Порождающие шаблоны

Описывают механизмы создания объектов:

Простая фабрика
- Генерирует экземпляр объекта без предоставления логики экземпляра
- Пример: создание дверей на фабрике

Фабричный метод
- Использует генерирующие методы для создания объектов
- Пример: создание интервьюеров на фабрике

Абстрактная фабрика
- Группирует индивидуальные фабрики без указания конкретных классов
- Пример: создание дверей и специалистов для их установки

Строитель
- Помогает при создании объектов с несколькими свойствами или большим количеством этапов
- Пример: создание бургеров с различными ингредиентами
- Позволяет добавлять новые опции без изменения структуры

Прототип
- Создаёт объекты путём клонирования существующего объекта
- Пример: клонирование объекта «Овца» для создания новых объектов
- Используется, когда создание объекта с нуля дороже клонирования

Одиночка
- Ограничивает создание класса единственным объектом
- Пример: создание единственного экземпляра класса «Президент»
- Антипаттерн, так как вносит глобальное состояние в приложение


2️⃣ Структурные шаблоны

Определяют способ взаимоотношений между сущностями:


Адаптер
- Помещает несовместимый объект в обёртку для совместимости с другим классом
- Пример: адаптер для совместимости дикой собаки с охотником

Мост
- Предпочитает компоновку наследованию
- Пример: реализация тем оформления веб-страниц

Компоновщик
- Позволяет клиентам обрабатывать объекты в едином порядке
- Пример: обработка сотрудников компании как единой группы, с расчетом зарплаты

Декоратор
- Позволяет динамически изменять поведение объекта
- Пример: добавление ингредиентов к кофе (молоко, взбитые сливки, ваниль)

Фасад
- Предоставляет упрощённый интерфейс для сложной подсистемы
- Пример: компьютерный фасад с функциями включения и выключения

Приспособленец
- Минимизирует использование памяти за счёт общего использования объектов
- Пример: кэширование типов чая в чайном магазине

Заместитель
- Представляет функциональность другого класса
- Пример: класс безопасности проверяет пароль и выполняет функции двери


3️⃣ Поведенческие шаблоны

Определяют алгоритмы и способы взаимодействия объектов:

Цепочка ответственности
- Создание цепочек объектов для обработки запросов
- Пример: банковский счёт и цепочка оплаты

Команда
- Инкапсуляция действий в объекты
- Пример: система заказов в ресторане и пульт управления

Итератор
- Доступ к элементам объекта без раскрытия базового представления
- Пример: перебор радиостанций

Посредник
- Добавление стороннего объекта для управления взаимодействием
- Пример: чат-комната как посредник между пользователями

Хранитель
- Фиксирует текущее состояние объекта для лёгкого восстановления
- Пример: сохранение состояния текстового редактора

Наблюдатель
- Определяет зависимость между объектами для уведомления об изменениях
- Пример: уведомления о новых вакансиях для соискателей

Посетитель
- Позволяет добавлять будущие операции без изменения объектов
- Пример: зоопарк с различными видами животных и типами посетителей

Стратегия
- Переключается между алгоритмами в зависимости от ситуации
- Пример: выбор между пузырьковой и быстрой сортировкой

Состояние
- Меняет поведение класса при изменении состояния
- Пример: инструмент «Кисть» в графическом редакторе
- Реализует машину состояний объектно-ориентированным способом
- Каждое состояние представлено производным классом
- Пример: текстовый редактор с различными начертаниями текста

Шаблонный метод
- Определяет каркас выполнения алгоритма
- Реализация этапов делегируется дочерним классам
- Пример: инструмент для сборки и тестирования с реализациями для Android и iOS


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Frontend

🍪 Работа с куки: эволюция подходов

Работа с куки в JavaScript никогда не была удобной. Метод появился в 1996 году и почти не изменился. Разберем разницу между старым и новым подходом.


1️⃣ Классический способ (document.cookie)

Недостатки:

- Синхронные операции блокируют поток
- Нельзя узнать срок действия или домен куки
- Неудобно работать с несколькими куки
- Нельзя использовать в сервис-воркерах


2️⃣ Современный Cookie Store API

Преимущества:

- Асинхронный API не блокирует поток
- Доступ ко всей информации о куки
- Работает в сервис-воркерах
- Подписка на изменения куки


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Tech

Прогрессивное совершенствование долгое время считалось несовместимым с современными JavaScript-фреймворками. Однако развитие технологий изменило ландшафт веб-разработки. В статье разбираются проблемы, которые решает PE, архитектурные подходы, соответствие нормативным требованиям и новые инструменты, способные объединить надежность и мощные UI-возможности. Как современные фреймворки адаптируются к принципам PE, и есть ли среди них идеальные решения? Давайте разберемся 👇


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#WebDevelopment

💯 Прогрессивные веб-приложения (PWA)

Что такое PWA?

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

По сути: PWA — это веб-приложения, использующие стратегию прогрессивного улучшения. Они проверяют возможности браузера и подстраиваются под них, чтобы обеспечить максимально качественный пользовательский опыт.

Технически: Сайты, удовлетворяющие определенным критериям:
- Работа через HTTPS
- Наличие манифеста (JSON-файл с описанием приложения)
- Обычно используют Service Worker (фоновый JavaScript-код)

Термин создан в 2015 году инженерами Google, хотя сама концепция зародилась раньше. Интересно, что Стив Джобс еще в 2007 году, до выпуска первого iPhone, предлагал создавать приложения на веб-технологиях. Apple называет такие приложения "Home Screen Web Apps".

✅ Главные преимущества

Универсальность

- Работают на любых устройствах с браузером
- Единая кодовая база для всех платформ
- Не нужно разрабатывать отдельные версии для iOS, Android или Windows


Поведение как у нативных приложений

- Запуск через иконку на главном экране
- Интеграция с операционной системой
- Доступ к аппаратным возможностям (камера, микрофон, Bluetooth)
- Push-уведомления


Удобство использования

- Работают без интернета
- Не требуют установки через магазины приложений
- Автоматически обновляются
- Занимают меньше места в памяти устройства


Свобода и открытость

- Независимость от правил магазинов приложений
- Индексация контента поисковыми системами
- Возможность делиться прямыми ссылками на конкретные разделы
- Стандартные возможности веба (копирование, перевод, печать)


Безопасность и доступность

- Выполнение в песочнице браузера
- Защищенное соединение HTTPS
- Понятная модель разрешений
- Низкий порог входа для разработчиков (HTML, CSS, JS)


❌ Ограничения

Разрозненность

- Нет единого крупного каталога PWA
- Пользователям сложнее находить такие приложения


Неравномерная поддержка

- Разные браузеры поддерживают разные функции
- Особенно заметно на iOS, где все браузеры используют движок WebKit
- Некоторые современные функции могут быть недоступны на старых устройствах


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Tech

🖥 В этой статье вы найдете пошаговое руководство по тому, как закрепить приложение React с использованием Docker.

1️⃣Вы рассмотрите, как контейнеризация помогает упростить процесс разработки и развертывания, предоставляя изолированные среды, которые предотвращают конфликты зависимостей и конфигураций.

2️⃣Вы узнаете, как настроить Docker для вашего проекта, создать Docker-образ с помощью Dockerfile, исключить лишние файлы с .dockerignore, а также использовать Docker Compose для работы с многоконтейнерными приложениями.

Также мы обсудим важные особенности Docker Desktop и WSL 2, которые значительно улучшат производительность работы с контейнерами.


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Tech

Важный инструмент для разработчиков: Model Context Protocol (MCP)

Это инновационное решение от Anthropic, которое позволяет интегрировать LLM с внешними сервисами без лишнего кода. Больше не нужно создавать кучу клеевого кода для работы с API, базами данных или другими системами. Всё упрощается благодаря MCP-серверам.


Суть проста: вместо того чтобы вручную настраивать каждое подключение, ты запускаешь MCP-сервер, который уже знает, как взаимодействовать с нужными сервисами.

Например, чтобы LLM комментировал PR в GitHub, достаточно просто запустить соответствующий MCP-сервер, и задача выполняется без кастомного кода.

🔥 На GitHub появился потрясающий список кастомных MCP-серверов, которые делают жизнь разработчиков легче. Эти решения можно адаптировать под разные нужды и сервисы.


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Tech

❓ Почему вместо текста появляются ромбики с вопросами?

Бывало ли у вас, что вместо привычных букв на веб-странице появляются странные ромбики или непонятные символы?

Чаще всего причина в том, что файл был сохранён в неподходящей кодировке, например, в ANSI, а браузер ожидает UTF-8. Просто добавление <meta charset="utf-8"> в HTML-код не решит проблему — сам файл тоже должен быть сохранён в правильной кодировке.

Как исправить?
Используйте текстовые редакторы, поддерживающие преобразование кодировок. В Notepad++ на Windows достаточно открыть файл, перейти в Кодировки → Преобразовать в UTF-8 и сохранить изменения. После этого текст отобразится корректно.


🌐 Новости

🖥 База вопросов

#Tech

Что если LLM лучше, чем мы думаем?

Оценка больших языковых моделей (LLM) во многом строится на бенчмарках — стандартизированных наборах данных, предназначенных для тестирования их возможностей. Однако эти наборы данных не всегда столь надежны, как принято считать.

Ранее их проверяли вручную, но с увеличением объемов это стало нецелесообразным. Краудсорсинг позволил ускорить процесс и снизить затраты, но привел к росту ошибок. Теперь же появляется новый подход: аннотирование данных самими LLM.

Некоторые исследования показывают, что модели способны не только быстро и дешево разметить данные, но и делают это точнее, чем краудсорсинг или даже обученные аннотаторы. Это ставит под вопрос традиционные методы оценки и открывает новые перспективы: возможно, LLM уже достигли большего, чем нам кажется.


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Tech

🟡 Авторизация через OAuth 2.0: принципы работы и применение

Знакомы с кнопкой "Войти через Google"? Это удобное решение, которое избавляет нас от необходимости запоминать ещё один пароль. Давайте разберемся в механизме работы этой технологии, почему крупные сервисы вроде Spotify и Medium активно её используют, и как вы можете внедрить подобную систему в своё приложение. Стоит отметить, что реализация такой системы проще, чем может показаться, и значительно безопаснее традиционных форм регистрации.


Что представляет собой OAuth

OAuth – это протокол, позволяющий приложениям получить авторизацию через сторонние платформы (Google, GitHub, Яндекс и другие) без необходимости хранения и обработки паролей пользователей.


Ключевые участники процесса OAuth:

➖Пользователь (Владелец ресурса)
Человек, желающий авторизоваться в приложении. Например, пользователь с аккаунтом в Google, владеющий информацией в этом аккаунте.

➖Приложение (Клиент)
Ваш веб-сервис, которому требуется авторизация. Приложение стремится получить доступ к определенным данным пользователя, например имени, для подтверждения личности, не запрашивая пароль напрямую. Приложение делегирует проверку и авторизацию пользователя сервисам вроде Google или GitHub.

➖Хранилище данных (Сервер ресурсов)
Сервер, где хранится информация об учетной записи пользователя. При использовании авторизации через Google, сервером ресурсов будут системы Google, содержащие пользовательские данные.

➖Система проверки (Сервер авторизации)
Сервер, проверяющий личность пользователя и выдающий токен доступа вашему приложению. В случае с Google авторизацией, это тоже сервер Google.


Последовательность действий в процессе OAuth

1️⃣Подготовка приложения
Для использования OAuth необходимо зарегистрировать ваше приложение у провайдера OAuth (Google, Яндекс и др.). На портале разработчиков вы указываете:
- Название приложения
- Адрес веб-сайта
- URL для перенаправления пользователя после авторизации (Callback URL)

После регистрации вы получаете два важных идентификатора:
- ID клиента (Client ID)
- Секретный ключ (Client Secret)

Эти данные подтверждают, что запросы поступают именно от вашего приложения.

2️⃣Начало авторизации
Пользователь открывает ваше приложение и хочет войти. Ваше приложение предоставляет ссылку для авторизации, которая перенаправит на сервис OAuth-провайдера.

3️⃣Вход пользователя и разрешение доступа
После перехода по ссылке пользователь попадает на страницу входа провайдера, вводит свои учетные данные и видит запрос на разрешение доступа к своим данным для вашего приложения.

4️⃣Получение авторизационного кода
После подтверждения доступа провайдер перенаправляет пользователя обратно на указанный URL, одновременно передавая код авторизации.

5️⃣Обмен кода на токен
Ваше приложение получает код авторизации и отправляет запрос на сервер авторизации провайдера для получения токена доступа. Сервер проверяет код и выдаёт токен доступа (иногда также токен для продления доступа). С этим токеном ваше приложение может получать информацию о пользователе до истечения срока его действия.

Несмотря на существование различных сценариев авторизации в OAuth, описанная выше схема остаётся наиболее распространённой в современных веб-приложениях.


🌐 Новости

🖥 База вопросов