Для упрощения работы с oAuth для клиента, вы можете установить специальную кнопку на сайт. При нажатии пользователем на кнопку, будет открыто модальное окно выбора аккаунта и авторизации приложения в нём, после подтверждения пользователь будет перенаправлен на указанный Redirect URI с GET-параметрами. Подробней про этот механизм читайте в статье.
В кнопку на сайт вы можете передать уже существующий client-id, чтобы установить именно его, либо вы можете передать метаданные, чтобы была создана новая внешняя интеграция. Ниже рассмотрим оба варианта параметров кнопки и особенности кнопки с метаданными.
Для установки кнопки на сайт для существующей интеграции необходимо разместить несколько строк JS кода в том месте, где вы хотите увидеть кнопку. Кнопка поддерживает параметры, которые описаны ниже.
<script
class="amocrm_oauth"
charset="utf-8"
data-client-id="xxxx"
data-title="Button"
data-compact="false"
data-class-name="className"
data-color="default"
data-state="state"
data-error-callback="functionName"
data-mode="popup"
src="https://www.amocrm.ru/auth/button.min.js"
></script>
| Параметр | Описание |
|---|---|
| data-client-id | ID интеграции |
| data-title | Текст, который будет отображаться пользователю на кнопку (по умолчанию “Авторизоваться через amoCRM”) |
| data-compact | Если передано значение true, текст на кнопке не будет отображаться, будет отображаться только логотип amoCRM |
| data-class-name | Класс, который будет установлен элементу кнопки на странице |
| data-color | Цветовая схема кнопки, доступны следующие схемы:
|
| data-state | Параметр состояния, который будет передан в модальное окно |
| data-error-callback | Название функции, которая должна быть в глобальной области видимости. Функция будет вызвана, если пользователь отказал в предоставлении доступа к приложению. На вход функция получит объект с ключами client_id (id интеграции) и error (код ошибки). В данный момент доступен только один код ошибки – access_denied, если пользователь отказался предоставлять доступы. |
| data-mode | Доступные параметры: popup и post_message. При параметре popup, открывшееся окно будет закрыто, а перенаправление на Redirect URI будет произведено в основном окне, из которого было вызвано модальное. При параметре post_message перенаправление произойдет в окне, которое было открыто, после обработки кода авторизации вам нужно закрыть окно. Также можно сообщить информацию об успешности действия в основное окно с использованием функции postMessage. |
Ниже рассмотрим кнопку с метаданными, необходимую для создания внешней интеграции. Такой механизм дистрибьюции подходит для небольших систем, у которых количество пользователей не превышает несколько десяткой клиентов. Для каждой установки будет создана отдельная интеграция, которой сможет управлять администратор аккаунта.
Для установки кнопки на сайт для внешней интеграции необходимо разместить несколько строк JS кода в том месте, где вы хотите увидеть кнопку. Кнопка поддерживает параметры, которые описаны ниже.
<script
class="amocrm_oauth"
charset="utf-8"
data-name="Integration name"
data-description="Integration description"
data-redirect_uri="https://example.com"
data-secrets_uri="https://example.com/secrets"
data-logo="https://example.com/amocrm_logo.png"
data-scopes="crm,notifications"
data-title="Button"
data-compact="false"
data-class-name="className"
data-color="default"
data-state="state"
data-error-callback="functionName"
data-mode="popup"
src="https://www.amocrm.ru/auth/button.min.js"
></script>
| Параметр | Описание |
|---|---|
| data-name | Название интеграции |
| data-description | Описание интеграции |
| data-redirect_uri | Redirect URI интеграции. Адрес, куда пользователь будет перенаправлен после предоставления доступа. Протокол https является обязательным. |
| data-secrets_uri | Адрес, куда будет отправлен вебхук с ID интеграции, секретным ключом и переданным state параметров. Вебхук всегда приходит раньше редиректа пользователя с кодом авторизации. Протокол https является обязательным. |
| data-logo | Адрес логотипа интеграции. Рекомендуемый размер 400×272. Протокол https является обязательным. |
| data-scopes | Запрашиваемые доступы для интеграции. Перечисляются через запятую. Доступные значения – crm, notifications |
| data-title | Текст, который будет отображаться пользователю на кнопку (по умолчанию “Авторизоваться через amoCRM”) |
| data-compact | Если передано значение true, текст на кнопке не будет отображаться, будет отображаться только логотип amoCRM |
| data-class-name | Класс, который будет установлен элементу кнопки на странице |
| data-color | Цветовая схема кнопки, доступны следующие схемы:
|
| data-state | Параметр состояния, который будет передан в модальное окно |
| data-error-callback | Название функции, которая должна быть в глобальной области видимости. Функция будет вызвана, если пользователь отказал в предоставлении доступа к приложению. На вход функция получит объект с ключами client_id (id интеграции) и error (код ошибки). В данный момент доступен только один код ошибки – access_denied, если пользователь отказался предоставлять доступы. |
| data-mode | Доступные параметры: popup и post_message. При параметре popup, открывшееся окно будет закрыто, а перенаправление на Redirect URI будет произведено в основном окне, из которого было вызвано модальное. При параметре post_message перенаправление произойдет в окне, которое было открыто, после обработки кода авторизации вам нужно закрыть окно. Также можно сообщить информацию об успешности действия в основное окно с использованием функции postMessage. |
Для того, чтобы вы могли самостоятельно использовать кнопку без самой механики открытия окна, либо изменять ее – мы делаем доступными ее исходники по ссылке.