Рубрики
Без рубрики

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

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

Автор оригинала: FreeCodeCamp Community Member.

Вступление

В этой статье мы собираемся узнать, как выполнить двухфакторную аутентификацию в приложении Core Asp.net, используя приложение Google Authenticator.

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

Предпосылки

  • Установите .NET CORE 2.0.0 или выше SDK из здесь Отказ
  • Установите последнюю версию издания сообщества Visual Studio 2017 от здесь Отказ

Исходный код

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

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

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

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

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

Мы будем использовать QR-код для настройки и синхронизации приложения Google Authenticator с нашим веб-приложением. Загрузите библиотеку qrcode.js javaScript из https://davidshimss.github.io/qrcodejs/ И поместите его в папку «WWWRoot \ lib» в своем приложении. Теперь ваша папка «WWWroot» будет иметь следующую структуру.

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

@section Scripts {      @await Html.PartialAsync("_ValidationScriptsPartial")              }

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

Так что, наконец, ваш «EnableAuthenticator.cshtml» Файл будет выглядеть так.

@model EnableAuthenticatorViewModel  @{      ViewData["Title"] = "Enable authenticator";      ViewData.AddActivePage(ManageNavPages.TwoFactorAuthentication);  }    

@ViewData["Title"]

To use an authenticator app go through the following steps:

  1. Download a two-factor authenticator app like Microsoft Authenticator for Windows Phone, Android and iOS or Google Authenticator for Android and iOS.

  2. Scan the QR Code or enter this key @Model.SharedKey into your two factor authenticator app. Spaces and casing do not matter.

    To enable QR code generation please read our documentation.
  3. 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.

@section Scripts { @await Html.PartialAsync("_ValidationScriptsPartial") }

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

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

Перед запуском приложения нам нужно применить миграции в наше приложение. Перейдите к инструментам >> Nuget Package Manager >> Консоль менеджера пакетов. Он откроет консоль менеджера пакетов. Поместите команду «Обновить-базу данных» и нажмите Enter. Это обновит базу данных с использованием первых миграций Antity Framework.

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

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

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

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

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

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

Нажмите на «Начало». Он попросит вас добавить учетную запись, предоставив два варианта:

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

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

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

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

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

Исполнение демонстрации

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

Теперь вы можете увидеть экран двухфакторного аутентификации, спрашивающий код аутентификатора. Поместите в код, который генерируется в вашем приложении Google Authenticator, и нажмите «Войти». Вы будете успешно войти в приложение и навес на домашнюю страницу.

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

Заключение

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

Вы также можете найти эту статью на C # угол Отказ

Вы можете проверить мои другие статьи на ядро ASP .NET здесь Отказ

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

Первоначально опубликовано в https://ankitsharmablogs.com/