Skip to content

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (3 оценок, среднее: 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#?

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

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

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

https://dijix.com.ua

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


 

Published inAsp.Net Core
Subscribe
Notify of
guest
2 комментариев
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Hanna
Hanna
9 months ago

await _signInManager.SignOutAsync(); насправді не видаляє куки

2
0
Would love your thoughts, please comment.x
()
x