Сторонняя аутентификация
Помимо безопасного входа в систему по умолчанию, Directus позволяет использовать несколько внешних служб в качестве средств аутентификации. В этой статье мы кратко рассмотрим, что, почему и как используется сторонняя аутентификация.
Directus позволяет вам перестать беспокоиться о еще одном пароле, позволяя использовать существующую учетную запись из другой службы, например Facebook или Twitter, для входа в панель администратора Directus.
Настройка
Добавление возможности входа в Directus через внешние службы не означает, что каждый, у кого есть учетная запись Facebook, может просто войти в систему в любое время. Directus использует существующий список пользователей для перекрестных ссылок на информацию, которую получает от внешней службы. Можно сказать, что Directus использует собственные учетные записи пользователей в качестве белого списка разрешенных внешних учетных записей.
По умолчанию Directus поддерживает четыре внешних сервиса для аутентификации: Facebook, Twitter, GitHub и Google. Настройка всех этих сервисов практически одинакова. Вы создаете новую учетную запись в Directus, используя тот же адрес электронной почты, который используется в учетной записи на внешней службе, входите во внешнюю службу, создаете новое «приложение» и добавляете ключи в конфигурацию Directus. Поскольку процесс создания этого «приложения» и получения ключей у разных поставщиков услуг разный, мы рассмотрим каждый шаг для каждой услуги.
Чтобы создать приложение Facebook, которое позволяет пользователям входить во внешние службы, перейдите на https://developers.facebook.com и войдите в свою учетную запись Facebook.
Наведите указатель мыши на «Мои приложения» в правом верхнем углу и нажмите «Добавить новое приложение»:
На странице обзора панели инструментов добавьте в свое приложение продукт «Вход в Facebook».
Добавьте корневой URL-адрес вашего экземпляра Directus, а затем /auth/facebook/receive
в поле «Действительные URI перенаправления OAuth». Остальные настройки по умолчанию подходят для использования с Directus.
Сохраните изменения и перейдите на страницу настроек. Нажмите кнопку «+ Добавить платформу» и добавьте веб-сайт с URL-адресом вашего экземпляра Directus:
Рекомендуется также заполнить другие поля и добавить значок приложения, чтобы пользователь узнал ваш бренд при входе в систему через Facebook. Однако для работы Directus не требуется, поэтому мы опустим его для простоты.
Наконец, перейдите на страницу панели инструментов, чтобы получить ключи, которые нам нужно добавить в Directus:
Эти значения необходимо добавить в поле auth
в файле /api/configuration.php
в вашем экземпляре Directus следующим образом:
// /api/configuration.php ... 'auth' => [ 'facebook' => [ 'client_id' => 'abcdef123456', 'client_secret' => '123456abcdef', 'graph_api_version' => 'v2.10' ] ], ...
Вот и все! Теперь при переходе на страницу входа в систему экземпляра Directus отображается кнопка входа в Facebook:
Твиттер
Чтобы создать приложение Twitter, которое позволяет пользователям входить во внешние службы, перейдите на https://apps.twitter.com и войдите в свою учетную запись Twitter.
Нажмите «Создать новое приложение» и введите необходимую информацию:
Обратите внимание, что URL-адрес обратного вызова - это корневой URL-адрес вашего экземпляра Directus, за которым следует /auth/twitter/receive
.
Перейдите на вкладку «Разрешения», установите «Доступ» только для чтения и убедитесь, что адрес электронной почты включен в полезные данные, установив флажок «Запрашивать адреса электронной почты у пользователей».
Примечание: вам может потребоваться заполнить «URL-адрес политики конфиденциальности» и «URL-адрес условий обслуживания», прежде чем Twitter позволит вам сохранить эти разрешения.
После настройки разрешений перейдите на вкладку «Ключи и токены доступа» и скопируйте ключи.
Добавьте «Ключ потребителя» и «Секрет потребителя» в файл конфигурации Directus (/api/configuration.php
):
// /api/configuration.php ... 'auth' => [ 'facebook' => [ 'client_id' => 'abcdef123456', 'client_secret' => '123456abcdef', 'graph_api_version' => 'v2.10' ], 'twitter' => [ 'identifier' => 'abcdef123456', 'secret' => '123456abcdef' ] ], ...
Вот и все! На странице входа в систему экземпляра Directus теперь отображается добавленная кнопка входа в Twitter:
GitHub
Чтобы создать приложение GitHub, которое позволяет пользователям входить во внешние службы, перейдите на https://github.com/settings/developers и войдите в свою учетную запись GitHub.
Нажмите кнопку «Новое приложение OAuth» и введите необходимую информацию:
Примечание. URL-адрес обратного вызова авторизации - это корневой URL-адрес вашего экземпляра Directus, за которым следует /auth/github/receive
.
Скопируйте идентификатор клиента и секрет клиента в конфигурацию Directus API (/api/configuration.php
):
// /api/configuration.php ... 'auth' => [ 'facebook' => [ 'client_id' => 'abcdef123456', 'client_secret' => '123456abcdef', 'graph_api_version' => 'v2.10' ], 'twitter' => [ 'identifier' => 'abcdef123456', 'secret' => '123456abcdef' ], 'github' => [ 'client_id' => 'abcdef123456', 'client_secret' => '123456abcdef' ] ], ...
Вот и все! Теперь при переходе на страницу входа в экземпляр Directus отображается добавленная кнопка входа в GitHub:
Чтобы создать проект Google, который позволяет пользователям входить во внешние службы, перейдите на https://console.developers.google.com/projectcreate и войдите в свою учетную запись Google.
Введите название своего проекта и перейдите на страницу «Библиотека» (подстраница «API и сервисы»).
Найдите библиотеку API Google+ и включите ее для этого проекта:
Перейдите на страницу «Учетные данные», щелкните вкладку «Экран согласия OAuth» и введите необходимую информацию:
Сохраните информацию, вернитесь на вкладку «Учетные данные» и нажмите «Создать учетные данные», а затем «Идентификатор клиента OAuth»:
Заполните необходимую информацию следующим образом:
Нам не нужно заполнять поле «Авторизованные источники JavaScript».
Когда вы нажимаете "Сохранить", вам сразу же выдаются необходимые ключи. Добавьте эти ключи в массив auth
в файле конфигурации Directus /api/configuration.php
:
// /api/configuration.php ... 'auth' => [ 'facebook' => [ 'client_id' => 'abcdef123456', 'client_secret' => '123456abcdef', 'graph_api_version' => 'v2.10' ], 'twitter' => [ 'identifier' => 'abcdef123456', 'secret' => '123456abcdef' ], 'github' => [ 'client_id' => 'abcdef123456', 'client_secret' => '123456abcdef' ], 'google' => [ 'client_id' => 'abcdef123456', 'client_secret' => '123456abcdef' ] ], ...
Вот и все! Заголовок страницы входа в экземпляр Directus теперь показывает добавленную кнопку входа в Google:
Вот и все! Четыре новых безопасных способа доступа к вашим ценным данным.
Какой сервис вы собираетесь использовать для доступа к Directus? Дайте нам знать в комментариях ниже!
Удачного кодирования!
Ваши друзья в Directus
🐰
PS: Есть хорошая идея по теме для следующих статей? Дайте нам знать в комментариях или присоединяйтесь к нам на нашем публичном канале Slack!