Как настроить двухфакторную аутентификацию в ASP.NET Core с помощью Google Authenticator

kak nastroit dvuhfaktornuyu autentifikacziyu v aspnet core s pomoshhyu google

Введение

В этой статье мы узнаем, как выполнить двухфакторную аутентификацию в ASP.NET Core с помощью программы Google Authenticator.

Чтобы использовать его, вам нужно настроить Google Authenticator на своем смартфоне с помощью QR-кода, сгенерированного в веб-приложении. При входе в веб-приложение необходимо ввести шестизначный PIN-код, который будет сгенерирован в программе, чтобы завершить двухфакторную аутентификацию. Ключ, созданный в программе, будет уникален для вашего идентификатора пользователя и является одноразовым паролем на основе времени (TOTP) — то есть срок его действия истечет через некоторое время.

Предпосылки

  • Отсюда установите .NET Core 2.0.0 или более поздней версии SDK.
  • Отсюда установите последнюю версию Visual Studio 2017 Community Edition.

Исходный код

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

Создайте веб-приложение MVC

Откройте Visual Studio и выберите Файл >> Новый >> Проект. После выбора проекта откроется диалоговое окно Новый проект. Выберите .NET Core в меню Visual C# на левой панели. Затем выберите ASP.NET Core Web Application из доступных типов проектов. Назовите проект TwoFactAuth и нажмите OK.

5IZr6oGLiJEBiaR440jXpogP1cjJZGSg0fcs

После нажатия кнопки «ОК» откроется новое диалоговое окно с просьбой выбрать шаблон проекта. Вы можете увидеть два нижних меню в верхнем левом углу окна шаблона. Выберите «.NET Core» и «ASP.NET Core 2.0» в раскрывающемся меню. Затем выберите шаблон «Веб-приложение (модель-просмотр-контроллер)». Нажмите кнопку «Изменить проверку подлинности». Откроется диалоговое окно «Изменить проверку подлинности». Выберите «Индивидуальная учетная запись пользователя» и нажмите кнопку «ОК». Теперь снова нажмите OK, чтобы создать веб-приложение.

ec4V1Smjem3XvQmvmEa8Ajx0cVKtQO73Eqer

Добавление QR-кодов для настройки двухфакторной аутентификации

Мы будем использовать QR-код для настройки и синхронизации приложения Google authenticator с нашей веб-приложением. Загрузите библиотеку JavaScript qrcode.js и поместите ее в папку «wwwroot\lib» в вашем приложении. Теперь ваша папка wwwroot будет иметь такую ​​структуру.

NzN3wSvkRdHO8fbbgqhzMGDb0TU6EiAelb-t

Откройте «Views\Manage\EnableAuthenticator.cshtml» файл. Вы найдете @section Скрипты в конце файла. Введите следующий код.

@section Scripts {      @await Html.PartialAsync("_ValidationScriptsPartial")      <script src="      <script type="text/javascript">          new QRCode(document.getElementById("qrCode"),              {                  text: "@Html.Raw(Model.AuthenticatorUri)",                  width: 200,                  height: 200              });      </script>  }

Этот «EnableAuthenticator.cshtml» файл уже имеет div с идентификатором qrCode (см. фрагмент кода ниже). Мы генерируем QR-код внутри этого div с помощью qrcode.js библиотека. Мы также определяем размеры QR-кода с точки зрения ширины и высоты.

И, наконец, ваш «EnableAuthenticator.cshtml» файл будет выглядеть следующим образом.

@model EnableAuthenticatorViewModel  @{      ViewData["Title"] = "Enable authenticator";      ViewData.AddActivePage(ManageNavPages.TwoFactorAuthentication);  }    <h4>@ViewData["Title"]</h4>  <div>      <p>To use an authenticator app go through the following steps:</p>      <ol class="list">          <li>              <p>                  Download a two-factor authenticator app like Microsoft Authenticator for                  <a href=" Phone</a>,                  <a href=" and                  <a href=" or                  Google Authenticator for                  <a href=" and                  <a href="              </p>          </li>          <li>              <p>Scan the QR Code or enter this key <kbd>@Model.SharedKey</kbd> into your two factor authenticator app. Spaces and casing do not matter.</p>              <div class="alert alert-info">To enable QR code generation please read our <a href="              <div id="qrCode"></div>              <div id="qrCodeData" data-url="@Model.AuthenticatorUri"></div>          </li>          <li>              <p>                  Once you have scanned the QR code or input the key above, your two factor authentication app will provide you                  with a unique code. Enter the code in the confirmation box below.              </p>              <div class="row">                  <div class="col-md-6">                      <form method="post">                          <div class="form-group">                              <label asp-for="Code" class="control-label">Verification Code</label>                              <input asp-for="Code" class="form-control" autocomplete="off" />                              <span asp-validation-for="Code" class="text-danger"></span>                          </div>                          <button type="submit" class="btn btn-default">Verify</button>                          <div asp-validation-summary="ModelOnly" class="text-danger"></div>                      </form>                  </div>              </div>          </li>      </ol>  </div>  @section Scripts {      @await Html.PartialAsync("_ValidationScriptsPartial")      <script src="      <script type="text/javascript">          new QRCode(document.getElementById("qrCode"),              {                  text: "@Html.Raw(Model.AuthenticatorUri)",                  width: 200,                  height: 200              });      </script>  }

Когда мы запустим приложение, в этом представлении будет сгенерирован QR-код. Затем можно настроить двухфакторную аутентификацию с помощью аутентификатора Google с помощью этого QR-кода.

Настройте двухфакторную аутентификацию

Прежде чем запустить программу, нам нужно применить миграции к нашей программе. Перейти к Инструменты >> Диспетчер пакетов NuGet >> Консоль диспетчера пакетов. Откроется консоль менеджера пакетов. Введите команду «Обновить базу данных» и нажмите Enter. Это обновит базу данных с помощью Entity Framework Code First Migrations.

tDY3UBG3ufUbbw0LAA01N0c9hAxPMQ-5-cav

Нажмите F5, чтобы запустить приложение, и нажмите «Зарегистрироваться» в правом верхнем углу домашней страницы. Вы можете просмотреть страницу регистрации пользователя. Заполните детали и нажмите кнопку «Зарегистрироваться», как показано ниже.

tWrSzu0RRYMDBjFhNieFzwmYJwblB7hPYpkt

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

qh4Kyd-XETDCOuiTsNAo4XuKBiP8kX26woY8

Нажмите кнопку «Настройка программы аутентификации». Вы можете увидеть QR-код, сгенерированный на вашем экране – он просит ввести «Код подтверждения», также как показано на рисунке ниже.

RK22LzdtmJ1Nx-sxWyeIAaH8cStx9VmMsoSY

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

Загрузите и установите Google Authenticator из Play Store для Android и App Store для iOS. Для этой демонстрации мы используем устройство Android.

Запустите приложение на своем смартфоне. Вы можете увидеть экран приветствия, как показано на рисунке ниже.

tEJqq53r4dFXOA097u94Y0fZGGSvSWTjyX2J

Щелкните «Начать». Он попросит вас добавить аккаунт, предоставив два варианта:

  1. Сканируйте штрих-код
  2. Введите предоставленный ключ
bryFzQGbXD7oC7ieexuK6sNXMDlfzEDXjIEK

Нажмите «Сканировать штрих-код» и отсканируйте QR-код, созданный веб-приложением. Это добавит новый аккаунт к аутентификатору Google и сгенерирует шестизначный PIN-код на экране вашего мобильного телефона. Это наш двухфакторный код аутентификации. Это TOTP (одноразовый пароль на основе времени). Вы можете заметить, что она постоянно меняется (продолжительность жизни 30 секунд).

Теперь вы можете увидеть название программы, а также ваш зарегистрированный идентификатор электронной почты в программе, как показано ниже.

WXpRAzi07uMytCK2YS6BrT563wDJvMGcFFso

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

kjzE1nDGYby1Tiy2LRwPesYMixgKJ396JtUK

Таким образом, настройка двухфакторной аутентификации завершена. Давайте проверим, работает ли наша двухфакторная аутентификация правильно или нет.

Демонстрация выполнения

Выйдите из программы и снова нажмите «Войти». Введите зарегистрированный идентификатор электронной почты и пароль и нажмите «Вход».

-9fvzE-9jFdLLYYp1kWJoomjOW7jo9YhGYuU

Теперь вы можете увидеть экран двухфакторной аутентификации с запросом на код Authenticator. Введите код, созданный в программе Google Authenticator, и нажмите Войти. Вы успешно войдете в программу и перейдете на домашнюю страницу.

1opsb7gnoKI56CVI5jrSJA8Yy6ahWu7U3BK7

Если вы поставите флажок «Запомнить этот аппарат», он не будет запрашивать код Authenticator снова на той же машине. В этом случае можно пропустить двухфакторную аутентификацию.

Вывод

Мы успешно создали QR-код с помощью библиотеки JavaScript qrcode.js и использовали его для настройки Google Authenticator. Это приложение создает шестизначный TOTP, который вам нужно ввести при входе в веб-приложение. Это реализует двухфакторную аутентификацию в программе ASP.NET Core.

Вы также можете найти статью на C# Corner.

Вы можете просмотреть мои другие статьи о ASP .NET Core здесь.

Смотрите также

Первоначально опубликовано на

Добавить комментарий

Ваш адрес email не будет опубликован.