Статьи

Безопасная аутентификация без пароля с использованием Auth0

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

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

Позвольте мне кратко изложить, что может предложить Auth0:

  • Единая точка входа
  • многофакторная аутентификация
  • логин без пароля
  • Управление пользователями
  • и многое другое!

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

Прежде чем двигаться дальше, обязательно установите Composer, поскольку он будет использоваться для установки актуальных Auth0 SDK с использованием файла composer.json . Кроме того, если вы хотите следовать примерам, приведенным в этой статье, получите бесплатную учетную запись Auth0.

Давайте начнем с захвата клона примера проекта.

1
git clone https://github.com/auth0-samples/auth0-php-web-app.git .

Для запуска зависимостей выполните команду composer install .

1
2
cd 00-Starter-Seed
composer install

Согласно файлу composer.json вы должны установить пакеты vlucas / phpdotenv и auth0 / auth0-php .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
{
    «name»: «auth0/basic-webapp-sample»,
    «description»: «Basic sample for securing a WebApp with Auth0»,
    «require»: {
         «vlucas/phpdotenv»: «2.4.0»,
         «auth0/auth0-php»: «~5.0»
    },
    «license»: «MIT»,
    «authors»: [
        {
            «name»: «Martin Gontovnikas»,
            «email»: «martin@gon.to»
        },
        {
            «name»: «Germán Lena»,
            «email»: «german.lena@gmail.com»
        }
    ]
}

Библиотека vlucas / phpdotenv используется для инициализации переменных среды из файла .env . Таким образом, он позволяет отделить конфигурацию от кода, который изменяется между средами.

С другой стороны, пакет auth0 / auth0-php поможет нам настроить авторизацию в нашем приложении.

Далее, давайте настроим конфигурацию для нашего приложения в файле .env . Создайте файл .env , скопировав его из файла .env.example .

1
cp .env.example .env

Он содержит значения конфигурации, которые будут использоваться библиотекой Auth0.

1
2
3
4
5
AUTH0_CLIENT_ID={CLIENT_ID}
AUTH0_DOMAIN={DOMAIN_NAME}
AUTH0_CLIENT_SECRET={CLIENT_SECRET}
AUTH0_CALLBACK_URL={CALLBACK_URL}
AUTH0_AUDIENCE=

Вы сможете найти большинство настроек в разделе « Приложения»> «Приложение по умолчанию»> «Настройки» на панели мониторинга Auth0. Обратите внимание, что я использую приложение по умолчанию, созданное системой. Конечно, вы можете создать новое приложение, если хотите.

AUTH0_CALLBACK_URL — это URL вашего приложения, куда Auth0 будет перенаправлять пользователей после входа в систему и выхода из нее. Значение, которое вы задаете в этом поле, должно быть настроено в разделе « Разрешенные обратные вызовы» в настройках приложения на панели мониторинга Auth0.

Чтобы включить вход без пароля с помощью электронной почты, перейдите в « Подключения»> «Без пароля» на панели мониторинга Auth0 и включите опцию « Электронная почта» .

В большинстве случаев настройки конфигурации по умолчанию в разделе « Электронная почта» работают просто из коробки. Конечно, если вы хотите изменить какие-либо настройки, сделайте это. Не забудьте включить приложения, для которых требуется аутентификация без пароля, в меню «Подключения»> « Без пароля»> «Электронная почта»> «Приложения» .

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

Создайте файл email_auth_example.php со следующим содержимым.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<?php
  // Require composer autoloader
  require __DIR__ .
 
  require __DIR__ .
 
  use Auth0\SDK\Auth0;
 
  $domain = getenv(‘AUTH0_DOMAIN’);
  $client_id = getenv(‘AUTH0_CLIENT_ID’);
  $client_secret = getenv(‘AUTH0_CLIENT_SECRET’);
  $redirect_uri = getenv(‘AUTH0_CALLBACK_URL’);
  $audience = getenv(‘AUTH0_AUDIENCE’);
 
  if($audience == »){
    $audience = ‘https://’ .
  }
 
  $auth0 = new Auth0([
    ‘domain’ => $domain,
    ‘client_id’ => $client_id,
    ‘client_secret’ => $client_secret,
    ‘redirect_uri’ => $redirect_uri,
    ‘audience’ => $audience,
    ‘scope’ => ‘openid profile’,
    ‘persist_id_token’ => true,
    ‘persist_access_token’ => true,
    ‘persist_refresh_token’ => true,
  ]);
 
  $userInfo = $auth0->getUser();
?>
<html>
    <head>
        <script src=»http://code.jquery.com/jquery-3.1.0.min.js» type=»text/javascript»></script>
 
        <meta name=»viewport» content=»width=device-width, initial-scale=1″>
 
        <!— font awesome from BootstrapCDN —>
        <link href=»//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css» rel=»stylesheet»>
        <link href=»//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css» rel=»stylesheet»>
 
        <link href=»public/app.css» rel=»stylesheet»>
    </head>
    <body class=»home»>
        <div class=»container»>
            <div class=»login-page clearfix»>
              <?php if(!$userInfo): ?>
                <script src=»https://cdn.auth0.com/js/lock/11.6.1/lock.min.js»></script>
                <script type=»text/javascript»>
                  function login() {
                    var lock = new Auth0LockPasswordless(‘<?php echo $client_id; ?>’, ‘<?php echo $domain; ?>’, {
                      allowedConnections: [’email’], // Should match the Email connection name, it defaults to ’email’
                      passwordlessMethod: ‘code’, // If not specified, defaults to ‘code’
                      auth: {
                        redirectUrl: ‘<?php echo $redirect_uri;
                        responseType: ‘code’
                      }
                    });
 
                    lock.show();
                  }
                </script>
 
                <a href=»javascript:login()»>Passwordless Login Using Email</a>
              <?php else: ?>
                <div class=»logged-in-box auth0-box logged-in»>
                  <h1 id=»logo»><img src=»//cdn.auth0.com/samples/auth0_logo_final_blue_RGB.png» /></h1>
                  <img class=»avatar» src=»<?php echo $userInfo[‘picture’] ?>»/>
                  <h2>Welcome <span class=»nickname»><?php echo $userInfo[‘nickname’] ?>
                  <a class=»btn btn-warning btn-logout» href=»/logout.php»>Logout</a>
                </div>
              <?php endif ?>
            </div>
        </div>
    </body>
</html>

В начале мы включили автозагрузчики, которые отвечают за загрузку классов, связанных с переменными среды Auth0 и Auth0.

После этого мы инициализируем переменные конфигурации из файла .env с помощью функции getenv .

Затем мы getUser метод getUser для объекта Auth0, чтобы проверить, присутствует ли какой-либо активный сеанс. Исходя из этого, мы отображаем ссылку SignIn если нет активного сеанса. В противном случае отображается имя пользователя, вошедшего в систему со ссылкой « Logout .

Запустите файл email_auth_example.php, чтобы протестировать ваше приложение!

Чтобы включить вход без пароля с помощью SMS, перейдите в Соединения> Без пароля на панели инструментов Auth0 и включите опцию SMS . По умолчанию Auth0 использует сервис Twilio для отправки сообщений. Так что дерзайте и получите себе счет в Twilio.

Из панели мониторинга Twilio получите свой SID ACCOUNT и AUTH TOKEN и введите эти значения в поля Twilio SID и Twilio AuthToken в Соединения> Без пароля> SMS> Настройки на панели мониторинга Auth0.

Кроме того, вам необходимо создать новую службу обмена сообщениями в разделе SMS> Службы обмена сообщениями на панели мониторинга Twilio. После успешного создания сервиса вы получите идентификатор сервиса , и вам нужно будет ввести его в поле SID Copilot в разделе Соединения> Без пароля> SMS> Настройки .

Наконец, давайте посмотрим, как работает вход без пароля с помощью SMS. Создайте файл sms_auth_example.php . Содержимое совпадает с email_auth_example.php , за исключением функции login() , которая выглядит следующим образом.

01
02
03
04
05
06
07
08
09
10
function login() {
   var lock = new Auth0LockPasswordless(‘<?php echo $client_id; ?>’, ‘<?php echo $domain; ?>’, {
     allowedConnections: [‘sms’], // Should match the SMS connection name
       auth: {
         redirectUrl: ‘<?php echo $redirect_uri;
         responseType: ‘code’
       }
     });
   lock.show();
 };

Все почти так же, за исключением того, что мы предоставили sms вместо email в свойстве allowedConnections .

Запустите файл sms_auth_example.php, чтобы протестировать ваше приложение!

Сегодня мы рассмотрели возможность входа без пароля с помощью сервиса Auth0. Среди возможных методов мы реализовали методы электронной почты и SMS с примерами кода.

Не стесняйтесь оставлять любые мысли или вопросы, используя канал ниже!