AuthService

Компонент добавляет сниппет AuthService, системные настройки провайдеров и таблицу authservice_social_accounts, где хранится связь между пользователем MODX и аккаунтом социальной сети.

Быстрый старт
— 1. Установите пакет через менеджер пакетов MODX.

2. Создайте отдельный ресурс для callback-страницы, например:

/auth-callback.html

3. В контент callback-ресурса добавьте сниппет:

[[!AuthService]]

4. Укажите ID этого ресурса в системной настройке:

authservice_callback_resource_id

5. Заполните настройки Facebook и Google.

6. В шаблоне, чанке или меню выведите сниппет:

[[!AuthService]]

По умолчанию используется чанк tpl.AuthService.login — готовая карточка входа с кнопками Facebook и Google.

Для шапки сайта можно использовать компактный чанк tpl.AuthService.header:

{'!AuthService' | snippet: [
'tplLogin' => 'tpl.AuthService.header',
'tplUser' => 'tpl.AuthService.user'
]}

Если нужно полностью свое оформление, создайте свой чанк и передайте его в tplLogin или tplUser.

Готовые чанки:

— tpl.AuthService.login — карточка входа для отдельной страницы.
— tpl.AuthService.header — компактная кнопка с выпадающими кнопками входа для шапки.
— tpl.AuthService.user — блок авторизованного пользователя с аватаром и выходом.

CSS подключается автоматически из /assets/components/authservice/css/web/authservice.css. Если стили нужно подключать вручную, вызовите сниппет с &loadCss=`0`.

Как работает авторизация
— Пользователь нажимает ссылку входа, компонент отправляет его на страницу Facebook или Google, затем провайдер возвращает пользователя на callback-страницу.

После успешного входа AuthService:

— получает профиль пользователя у провайдера;
— ищет уже привязанный аккаунт в authservice_social_accounts;
— если связи нет, ищет пользователя MODX по email;
— если пользователя нет, создает нового пользователя MODX;
— привязывает соцсеть к пользователю;
— авторизует пользователя в контексте web;
— возвращает пользователя на страницу, с которой он начал вход.

URL действий
— По умолчанию используются такие GET-параметры:

?authservice_action=start&provider=facebook
?authservice_action=start&provider=google
?authservice_action=callback&provider=facebook
?authservice_action=callback&provider=google
?authservice_action=delete_data&provider=facebook
?authservice_action=logout

Пример выхода:

Выйти

Системные настройки
— — authservice_facebook_client_id — ID приложения Facebook.
— authservice_facebook_client_secret — секрет приложения Facebook.
— authservice_google_client_id — Client ID OAuth-клиента Google.
— authservice_google_client_secret — Client secret OAuth-клиента Google.
— authservice_callback_resource_id — ID ресурса MODX для callback-страницы.
— authservice_default_user_group — ID группы MODX, куда добавлять новых пользователей. Если 0, группа не назначается.
— authservice_link_by_email — привязывать соцаккаунт к существующему пользователю MODX с таким же email.

Чанки и внешний вид
— AuthService не зашивает HTML в PHP. Сниппет рендерит внешний вид через чанки, поэтому компонент удобно переносить между сайтами.

Пример обычной страницы входа:

[[!AuthService? &tplLogin=`tpl.AuthService.login`]]

Пример шапки на Fenom:

{'!AuthService' | snippet: [
'tplLogin' => 'tpl.AuthService.header',
'tplUser' => 'tpl.AuthService.user'
]}

В чанках доступны плейсхолдеры:

— [[+facebook_url]]
— [[+google_url]]
— [[+logout_url]]
— [[+name]]
— [[+username]]
— [[+email]]
— [[+avatar]]
— [[+avatar_html]]
— [[+initial]]

Настройка Facebook
— 1. Откройте Meta for Developers:
developers.facebook.com/apps/

2. Создайте новое приложение или откройте существующее.

3. Добавьте продукт Facebook Login.

4. В настройках Facebook Login добавьте Valid OAuth Redirect URI.

Пример:

example.com/auth-callback.html?authservice_action=callback&provider=facebook

Вместо example.com укажите домен своего сайта.

5. В поле User Data Deletion / Удаление данных пользователей укажите URL удаления данных.

Если вы используете отдельную callback-страницу /auth-callback.html, пример будет таким:

example.com/auth-callback.html?authservice_action=delete_data&provider=facebook

Если вы используете один общий ресурс /auth.html, пример будет таким:

example.com/auth.html?authservice_action=delete_data&provider=facebook

Facebook отправляет на этот адрес signed_request. AuthService проверяет подпись через authservice_facebook_client_secret, находит связь с Facebook в таблице authservice_social_accounts, удаляет ее и возвращает JSON с confirmation_code.

6. В настройках приложения скопируйте данные:

— App ID -> authservice_facebook_client_id
— App Secret -> authservice_facebook_client_secret

7. Для боевого сайта переведите приложение Facebook из режима разработки в публичный режим.

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

Настройка Google
— 1. Откройте Google Cloud Console:
console.cloud.google.com/

2. Создайте новый проект или выберите существующий.

3. Настройте OAuth consent screen.

4. Откройте раздел:

APIs & Services -> Credentials

5. Создайте OAuth client ID с типом:

Web application

6. В Authorized redirect URIs добавьте callback-адрес.

Пример:

example.com/auth-callback.html?authservice_action=callback&provider=google

Вместо example.com укажите домен своего сайта.

7. Скопируйте данные:

— Client ID -> authservice_google_client_id
— Client secret -> authservice_google_client_secret

Как проверить
— 1. Очистите кэш MODX.

2. Откройте страницу, где выведена ссылка входа.

3. Нажмите Войти через Facebook или Войти через Google.

4. После подтверждения доступа пользователь должен вернуться на сайт уже авторизованным.

5. В MODX должен появиться новый пользователь, если такого пользователя еще не было.

6. В таблице authservice_social_accounts должна появиться связь с провайдером.

Частые проблемы
— Если провайдер показывает ошибку redirect URI, проверьте callback URL. Он должен совпадать точно: протокол, домен, путь и GET-параметры.

Если Facebook не возвращает email, это может быть нормально. Email может быть недоступен у пользователя или пользователь не дал разрешение. В этом случае компонент использует ID провайдера.

Если Google пишет, что приложение не проверено, проверьте настройки OAuth consent screen и список разрешенных доменов.

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