Перейти к содержанию

Google Авторизация с Identity

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...

[ Полезный рекламный блок ]

Попробуйте свои силы в игре, где ваши навыки программирования на C# станут решающим фактором. Переходите по ссылке 🔰.


Сегодня мы разработаем приложение типа Asp.Net Core MVC Identity, с использованием Google Авторизации.

Видите ли, в настоящее время у многих людей уже есть учетные записи, созданные в сторонних приложениях, таких как Microsoft, Google, Facebook, Twitter и т. д. Мы доверяем этим сторонним приложениям и используем их для аутентификации и идентификации пользователя. Поэтому такие сторонние приложения называются доверенными поставщиками идентификационных данных. 

Google Авторизация с Identity

  1. Создание учетной записи Google OAuth
  2. Создание проекта
  3. Авторизация пользователей в Identity

Если пользователь захочет войти в наше приложение, используя свой аккаунт Google, он нажмет на созданную нами кнопку Google:

Введет свои данные:

После чего, будет успешно авторизован на вашем сайте! 

Создание учетной записи Google OAuth

Google Авторизация с Identity требует создание учетной записи у компании Google. Нам нужны ClientId и Client Secret в приложении для аутентификации Google. Перейдите на следующий сайт и войдите в систему с учетными данными Google:

https://console.cloud.google.com/apis/

Как только вы вошли в систему, первым шагом будет создание нового проекта, если у вас его еще нет. В данный момент у меня нет никаких проектов, поэтому давайте создадим новый проект, нажав на Select a project. Если у вас уже есть проекты, то сверху будет выведено название текущего проекта, по которому необходимо нажать:

Теперь дайте осмысленное имя своему проекту. Я назвал свой проект Google Auth STS. STS означает Security Token Service, потому что мы используем этот проект для обеспечения службы идентификации нашего приложения .NET Core:

Нажмем CREATE, чтобы создать этот новый проект.

После создания нового проекта следующим шагом будет включение API класса Google.

Для этого, нажмите на навигационное меню библиотеки слева, но если по какой-то причине вы не видите этого навигационного меню, нажмите на логотип Google APIs, и вы увидите его. В самом меню, выберите пункт – Library:

У вас откроется страница поиска, найдите здесь Google+ API и нажмите на него:

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

Тип пользователя – External:

Я указал ниже название приложения, почту поддержки пользователей и адрес электронной почты разработчика:

Теперь прокрутите страницу вниз и нажмите кнопку — Сохранить и продолжить.

После этого нужно нажать на навигационную панель учетных данных, а затем выбрать пункт: CREATE CREDENTIALSOAuth client ID.

Теперь на этом экране выберите Web Application, потому что это тип нашего клиентского приложения, далее укажите имя для клиента. Я указал имя Identity client. Далее Authorised JavaScript origins, является URI адресом, на котором размещено клиентское приложение:

В настоящее время наш проект все еще работает на локальной машине. Чтобы получить URI, по которому наш проект размещен на локальной машине, в структуре проекта Solution ExplorerProperties launchSettings.json, в данном файле будет локальный url адрес проекта:

Наконец, вы должны настроить авторизованные URI перенаправления. Это URI, на который пользователь будет перенаправлен после аутентификации в Google. Укажите там следующий адрес: 

https://localhost:7172/signin-google

Страница с названием signin-google, обязательна!

Нажмем кнопку – Create. Итак, теперь вы получаете Client_Id и Client_Secret:

Нам нужны оба этих идентификатора для интеграции аутентификации google в наш проект, благодаря им Google Авторизация с Identity будет работать.

Создание проекта

Я ожидаю от вас знания концепций объектно-ориентированного программирования на C#. Я предполагаю, что вы также знаете концепции .NET Core, особенно паттерн MVC.

Откройте Visual Studio 2022. 

Создайте проект «Asp.Net Core Web Application(.Net Core)» с шаблоном MVC Template. В графе “Authentication type”, оставляем значение None.

Итак, теперь вам нужно настроить аутентификацию Google для нашего приложения .NET Core, мы сделаем это в нашем начальном классе Program:

Если у вас уже добавляется данный сервис, просто расширите его настройки, если не добавляется, добавьте как в примере.  Код, необходимый для аутентификации Google, включая этот метод AddGoogle(), присутствует в пакете: 

Microsoft.AspNetCore.Authentication.Google

Не забудьте добавить его в проект.

Теперь займемся настройкой Identity с нуля. Вначале добавим в папку Models новый класс User:

Класс User представляет пользователя и наследуется от класса IdentityUser, перенимая все его свойства. Кроме того, для примера здесь добавлено свойство Year, которое будет представлять год рождения пользователя. При желании можно определить любые другие свойства. 

Для взаимодействия с MS SQL Server через ASP.NET Core Identity добавим в проект через Nuget пакеты:

Далее добавим в папку Data класс контекста данных ApplicationContext. Так как мы используем Identity, то класс контекста данных будет наследоваться не от DbContext, а от IdentityDbContext:

У нас есть контекст и модели, и теперь нам необходима база данных, которая будет хранить все данные. Вначале определим в файле appsettings.json строку подключения:

Далее нам надо изменить класс Program, чтобы применить все необходимые сервисы для работы с Identity и базой данных:

Метод AddIdentity() позволяет установить некоторую начальную конфигурацию. Здесь мы указываем тип пользователя и тип роли, которые будут использоваться системой Identity. В качестве типа пользователя выступает созданный нами выше класс User, а в качестве типа роли взят стандартный класс IdentityRole, который находится в пространстве имен Microsoft.AspNetCore.Identity.EntityFrameworkCore. 

Метод AddEntityFrameworkStores() устанавливает тип хранилища, которое будет применяться в Identity для хранения данных. В качестве типа хранилища здесь указывается класс контекста данных. 

Затем, чтобы использовать Identity, в методе Configure() устанавливается компонент middeware — UseAuthentication. Причем это middleware вызывается перед app.UseEndpoints(), тем самым гарантируя, что ко времени обращения к системе маршрутизации, контроллерам и их методам, куки должным образом обработаны и установлены.

Теперь система Identity подключена в проект, и мы можем с ней работать.

Авторизация пользователей в Identity

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

Для этого лучше воспользоваться вспомогательной моделью, которая установит все необходимые свойства. Итак, добавим в проект новую папку, которую назовем ViewModels. Затем в этой папке определим новый класс LoginViewModel, который будет представлять авторизующего пользователя:

Включите свойства ReturnUrl и ExternalLogins.

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

Так же необходимо показать все внешние логины (Facebook, Google и т.д.) на странице входа. Для этого добавляем свойство ExternalLogins в LoginViewModel.

Для работы с учетными записями пользователей добавим в папку Controllers новый контроллер AccountController и определим в нем метод для авторизации пользователей через обычный вход:

Для представлений этого контроллера в каталоге Views определим подкаталог Account, в который добавим новое представление Login.cshtml. Это представление будет служить для регистрации пользователя:

Запустим приложение, при обращении по адресу: 

https://localhost:7243/account/login

мы увидим следующую страницу:

Если вы нажмете на кнопку Google,  эта кнопка является кнопкой типа Submit в коде представления, тогда вы обнаружите ошибку. Потому что вы еще не создали действие ExternalLogin в контроллере — AccountController. Создадим его:

Теперь запустим приложение снова, и нажмем на кнопку Google:

Вы увидите название вашего проекта, в моем случае – Auth, но сам процесс авторизации, еще не готов. В контроллер AccountController, добавим действие ExternalLoginCallback

Для проверки логина и удобства работы с приложением, определим в представлении Layout.cshtml вывод имени пользователя и ссылки на вход, если пользователь не авторизован и выход, если он авторизован:

Если вы запустите приложение и нажмете кнопку Google, затем выберите учетную запись Gmail, затем укажите свой пароль для входа в Gmail, то вы увидите результат, как и ожидалось:

Вы успешно вошли в свой аккаунт, используя внешнего поставщика услуг входа. 

Если вы посмотрите на таблицу AspNetUsers, то обнаружите интересную вещь. В таблице AspNetUsers у нас есть новая строка, посмотрите на колонку PasswordHash, она равна NULL. На самом деле, нам не нужен пароль для этого пользователя. Нам больше не нужно его поддерживать, потому что этот пользователь переходит к внешнему провайдеру входа в аккаунт Google.

Надеюсь, вам понравилась эта статья. Вы можете скачать исходный код в моем репозитории — Github.

Поделитесь вашим опытом в комментариях, как вы выполняете Google Авторизация с Identity, в ваших приложениях?

Вы начинающий программист, который хочет изучить все тонкости языка C#?

Пройдите наш тест на 13 вопросов, чтобы узнать, как много вы знаете на самом деле!

C# Braincheck


Вы хотите научится писать код на языке программирования C#?

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

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

  • Доступ к пройденному материалу
  • Тематические статьи
  • Библиотека книг
  • Онлайн тестирование
  • Общение в закрытых группах

https://dijix.com.ua

Живи в своем мире, программируй в нашем.


 

Опубликовано в рубрикеAsp.Net Core
Подписаться
Уведомить о
guest
1 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Светослав
Светослав
2 лет назад

Спасибо большое!

1
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x