Эта статья написана для устаревшей версии Directus. Ссылайтесь на эту информацию, только если вы используете Directus 6 и не можете выполнить обновление до версии 7.

Сторонняя аутентификация

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

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

Настройка

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

По умолчанию Directus поддерживает четыре внешних сервиса для аутентификации: Facebook, Twitter, GitHub и Google. Настройка всех этих сервисов практически одинакова. Вы создаете новую учетную запись в Directus, используя тот же адрес электронной почты, который используется в учетной записи на внешней службе, входите во внешнюю службу, создаете новое «приложение» и добавляете ключи в конфигурацию Directus. Поскольку процесс создания этого «приложения» и получения ключей у разных поставщиков услуг разный, мы рассмотрим каждый шаг для каждой услуги.

Facebook

Чтобы создать приложение 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

Чтобы создать проект 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!