Как использовать AWS Cognito и Google OAuth2 в гибридном приложении MAUI для аутентификации пользователей
Я не буду обсуждать, как настроить Cognito и Google, так как это уже обсуждается во многих статьях. Но если вы начинаете с нуля, мой любимый справочник по этой теме — это статья в центре знаний AWS Настройка Google как федеративного поставщика удостоверений.
Стоит отметить, что в статье не упоминается, что в вашей консоли Google вы должны добавить области действия на экран согласия OAuth.
Создание примера приложения
В этом примере я использую приложение MAUI Hybrid Blazor, которое является гибридным приложением.
После создания проекта в Visual Studio вы сможете нажать кнопку воспроизведения:
Если у вас есть проблемы с запуском вашего приложения на Mac, посмотрите эту проблему GitHub. Пришлось идти и устанавливать все, что связано с мобильной разработкой. Надеюсь, это будет исправлено к тому времени, когда вы попробуете это.
У нас есть приложение Blazor по умолчанию, работающее как приложение Mac из коробки.
Давайте добавим кнопку на левой панели. В общей папке вашего тестового приложения создайте файл с именами LogInComponent.razor и LogInComponent.razor.css:
Для нашей кнопки нам нужен небольшой фрагмент CSS, чтобы показать/скрыть компонент HTML, который мы добавим логику для того, когда пользователь вошел или не вошел в систему.
Теперь давайте добавим в компонент бритвы две кнопки. Первая кнопка вызовет действие входа в систему; второй позаботится о выходе из системы.
Чтобы это работало, важно добавить этот новый компонент в приложение, чтобы показать его. Откройте NavMenu.razor и добавьте его после компонента Toggle Button.
Имея эти кнопки, мы можем создать службу для обработки этих действий. На уровне проекта давайте создадим папку с именем BL, как в BusinessLogic, для хранения действий, запускаемых из пользовательского интерфейса. Затем папку CognitoAuth для хранения логики Cognito.
Начнем с логики Cognito. Для простоты я буду записывать все необходимые объекты в один файл с именем CognitoClient.cs.
По умолчанию MAUI настраивает ServiceCollection для вашего приложения. Вы можете найти его в MauiProgram.cs. Мы настроим клиент Cognito так, чтобы он создавался контейнером DI и внедрял его там, где это необходимо. Мы можем начать с интерфейса для Cognito.
Затем необходимые параметры для вызова службы Cognito:
Домен: префикс домена Cognito вашего приложения.
ClientId: идентификатор клиента Cognito вашего приложения.
RedirectUri: Uri перенаправления вашего приложения.
Вы можете найти свои Domain и ClientId, перейдя в Консоль AWS › Cognito › Пулы пользователей › ‹Ваш пул› › Интеграция приложений. Там вы можете найти раздел «Домен» и раздел «Клиенты приложений и аналитика».
RedirectUri — это то, как служба аутентификации возвращается в ваше приложение после завершения процесса аутентификации. Это важно, и мы позаботимся об этой конфигурации позже.
Чтобы сохранить результат вызова Cognito.
После этого фактический CognitoClientвы можете увидеть конфигурацию аутентификации, внедряемую в конструктор, и то, как она используется позже в BuildCognitoEndpoint().
Как Microsoft рекомендует, мы используем WebAuthenticator для вызова нашей службы аутентификации, в данном случае Cognito. Мы передаем конечную точку Cognito и URI перенаправления в качестве параметров для этого действия.
Важное замечание. Я жестко запрограммировал свой регион на us-west-2, возможно, вы используете что-то другое. Или вы можете захотеть это как параметр. Просто настройте его в классе AuthConfiguration.
Результатом построения конечной точки является URI следующего формата:
На данный момент у нас есть Cognito. Воспользуемся этой услугой прямо сейчас. Вернувшись в папку BL, создайте файл с именем AuthenticationActions.cs. Здесь мы будем подключать действие кнопки из пользовательского интерфейса к вызову Cognito.
Поскольку служба Cognito уже существует, мы можем запросить ее внедрение непосредственно из контейнера внедрения зависимостей, и нам не нужно беспокоиться о ней или ее параметрах.
Для результатов, которые мы отправляем обратно в пользовательский интерфейс, создайте класс для хранения этих значений.
Для события OnLoginClicked мы просто вызываем клиент Cognito и затем выполняем простую проверку.
На данный момент мы почти готовы протестировать наш код. Нам не хватает некоторых труб. Давайте настроим контейнер внедрения зависимостей для обслуживания этих объектов при необходимости.
Как видите, здесь я устанавливаю RedirectUri. Давайте изменим Info.plist для приложений Mac. Здесь мы настраиваем схему URL, используемую нашим приложением, которое используется для этого обратного вызова.
Взгляните на строки с 30 по 44.
Этот RedirectUri должен быть настроен как URI обратного вызова в вашей конфигурации Cognito. Вы можете проверить это в консоли AWS. После открытия Cognito переключитесь на старый интерфейс (я не смог найти этот конфиг в новом интерфейсе; если вы знаете, где он находится, дайте мне знать!).
ХОРОШО! Это была работа!
Теперь давайте попробуем запустить наше приложение. Прежде чем нажать кнопку воспроизведения, давайте установим точку останова на AuthenticationActions.cs, чтобы мы могли проанализировать результат нашего процесса аутентификации.
Нажмите кнопку Play в Visual Studio. Ваше приложение должно выглядеть примерно так:
Теперь волшебный момент, давайте попробуем войти в систему! Нажмите кнопку входа в систему, и должен открыться ваш типичный экран входа в систему. Это происходит из коробки, благодаря Cognito.
Здесь важно отметить, что Google будет принимать только тестовые электронные письма, которые вы настроили для входа в систему. Если вы войдете с помощью пользователя и пароля, вы можете использовать любой адрес электронной почты.
После завершения этого процесса мы должны попасть в точку останова и проверить содержимое объекта LoginResult:
После запуска программы в пользовательском интерфейсе должна отображаться кнопка выхода из системы.
На данный момент у вас есть токены доступа/идентификатора/обновления, и вы готовы идентифицировать своего пользователя, как никогда раньше!
Я создам Часть 2 для этой статьи, чтобы описать процедуру выхода из системы.
