Ідеальний старт для майбутніх IT-розробників 👨‍💻 зі знижкою до 65%!
Дізнатися більше
27.02.2025
5 хвилин читання

Керівництво з Інтеграції SSO в Angular Додатки

Angular – це один із найпопулярніших фреймворків для Front End розробки, який дає змогу створювати потужні, чуйні та масштабовані веб-додатки. Коли мова заходить про управління доступом, важливим інструментом стає Single Sign-On (SSO) – технологія, що значно спрощує аутентифікацію користувачів.

Для її реалізації в Angular-додатках часто використовується комбінація протоколів OpenID Connect і OAuth2, яка забезпечує надійність і безпеку. Якщо тебе цікавить, як налаштувати openid connect angular, – ти на правильному шляху! Давай розберемося, як усе це працює на практиці!

А більше заглибитися в тему ти зможеш на курсах FoxmindEd.

🚀 Менторинг з Front End від FoxmindEd! 🚀 Працюйте над реальними завданнями, отримуйте досвід і ставайте експертом у React разом із FoxmindEd! 💡
Дізнатись більше

Що таке Single Sign-On в Angular?

Якщо говорити просто, angular single sign on – це механізм, який об’єднує аутентифікацію користувача для кількох додатків. Замість того щоб вводити логін і пароль для кожного сервісу, користувач авторизується один раз, і доступ автоматично надається до всіх пов’язаних додатків.

Чому це круто? По-перше, підвищується зручність. По-друге, безпека: ти централізуєш управління доступом і зменшуєш імовірність витоків даних. Наприклад, якщо ти створюєш корпоративний портал із кількома модулями, користувачі не страждатимуть від безлічі паролів. А для Angular це особливо важливо, адже більшість додатків на ньому працюють з компонентною архітектурою, де взаємодія між сервісами – ключова частина.

Основи роботи з OpenID Connect і OAuth2 в Angular

OpenID Connect в Angular

OpenID Connect (OIDC) – це протокол, побудований поверх OAuth2, який додає шар аутентифікації. У контексті Angular він дає змогу організувати безпечну взаємодію між клієнтом і сервером.

Як це працює?

  1. Користувач заходить у додаток.
  2. Angular-додаток перенаправляє його на провайдера OIDC.
  3. Після успішної авторизації користувач повертається в застосунок із токеном.

Для налаштування openid connect angular тобі знадобиться бібліотека на кшталт angular-oauth2-oidc. Вона дає змогу підключити авторизацію за кілька кроків:

import { AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {

  issuer: 'https://your-auth-server.com',

  redirectUri: window.location.origin,

  clientId: 'your-client-id',

  responseType: 'code',

  scope: 'openid profile email',

};

this.oauthService.configure(authConfig);

this.oauthService.loadDiscoveryDocumentAndTryLogin();

Ось і все! Токени підтягнуті, користувач авторизований.

OAuth2 в Angular

Тепер давай розберемося, як працює oauth2 angular. Цей протокол дає змогу керувати правами доступу до ресурсів. По суті, він визначає, хто і що може робити у твоєму застосунку.

Ключові моменти:

  • Access Token – тимчасовий ключ доступу, який дає змогу запитувати дані від імені користувача.
  • Refresh Token – ключ для оновлення доступу, щоб користувач не вилітав із системи кожні 5 хвилин.

Angular надає гнучкі можливості для інтеграції OAuth2. Тобі потрібно лише зареєструвати застосунок у системі провайдера (наприклад, Google або Auth0) і використовувати токени. Головне – регулярно перевіряй термін дії токена, щоб не змушувати користувачів мучитися з повторною авторизацією.

Практичні приклади інтеграції SSO в Angular

Тепер перейдемо до практики. Розглянемо два сценарії.

Сценарій 1: Інтеграція з Auth0

  1. Встановіть angular-auth0 і налаштуйте конфігурацію клієнта:
import { AuthModule } from '@auth0/auth0-angular';

@NgModule({

  imports: [

    AuthModule.forRoot({

      domain: 'your-domain.auth0.com',

      clientId: 'your-client-id',

    }),

  ],

})

export class AppModule {}
  1. Використовуй guard для захисту роутів:
import { AuthGuard } from '@auth0/auth0-angular';

const routes: Routes = [

  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },

];
  1. Налаштуй обробку автентифікації та управління токенами: щоб застосунок міг коректно керувати статусом користувача, додай обробку подій логіна і логаута:
import { AuthService } from '@auth0/auth0-angular';

constructor(private auth: AuthService) {}

login(): void {

  this.auth.loginWithRedirect();

}

logout(): void {

  this.auth.logout({ returnTo: document.location.origin });

}

Тепер додаток готовий до використання Auth0 для реалізації SSO!

Сценарій 2: Інтеграція з Google OAuth2

  1. Зареєструй проєкт у Google Cloud Console. Створи облікові дані для клієнта OAuth2, вказавши client_id і redirect_uris. Переконайся, що домен твого застосунку включено до списку дозволених джерел.
  1. Підключи бібліотеку gapi і налаштуй OAuth2: використовуй клієнтську бібліотеку Google API для ініціалізації OAuth2:
gapi.load('auth2', () => {

  gapi.auth2.init({

    client_id: 'your-google-client-id.apps.googleusercontent.com',

  });

});

3. Додай кнопку для авторизації та обробку подій логіна:3. Додай кнопку для авторизації та обробку подій логіна:

Створи інтерфейс для взаємодії користувача з Google OAuth2 і підключи обробники:

login(): void {

  const authInstance = gapi.auth2.getAuthInstance();

  authInstance.signIn().then((user) => {

    const profile = user.getBasicProfile();

    console.log('User logged in:', profile.getName(), profile.getEmail());

  });

}

logout(): void {

  const authInstance = gapi.auth2.getAuthInstance();

  authInstance.signOut().then(() => {

    console.log('User logged out');

  });

}

4. Захисти роути додатка:

canActivate(): boolean {

  const authInstance = gapi.auth2.getAuthInstance();

  return authInstance.isSignedIn.get();

}

Особливості та найкращі практики інтеграції SSO в Angular

Лайфхаки для успішної інтеграції:

  1. Зберігай токени в пам’яті. Використання localStorage може бути небезпечним через XSS-атаки.
  2. Реалізуй автоматичне оновлення токенів. Ніхто не любить “вилітати” із системи в найважливіший момент.
  3. Захищай API. Використовуй backend-проксі для захисту запитів із клієнтського боку.
Підпишіться на наш Ютуб-канал! Корисні відео для програмістів чекають на вас! YouTube
Оберіть свій курс програмування! Шлях до кар’єри програміста починається тут! Подивитись

Загальні помилки:

  • Ігнорування CORS. Налаштуйте сервер правильно, щоб уникнути головного болю.
  • Пропуск перевірки токена. Переконайся, що токени валідні, перш ніж використовувати їх.

Висновок

SSO – це не просто зручність, а потужний інструмент для безпеки та підвищення юзабіліті твоїх додатків. Детальніше вивчити його ти зможеш на курсах програмування FoxmindED.

FAQ
Що таке Single Sign-On в Angular?

Це механізм єдиної аутентифікації, який дає змогу користувачам входити в кілька додатків з одним обліковим записом.

Навіщо використовувати OpenID Connect і OAuth2?

OpenID Connect відповідає за аутентифікацію, а OAuth2 - за управління доступом, забезпечуючи безпеку і зручність.

Які бібліотеки потрібні для інтеграції SSO в Angular?

Часто використовуються angular-oauth2-oidc для OpenID Connect і @auth0/auth0-angular для Auth0.

Як зберігати токени безпечно?

Найкраще зберігати їх у пам'яті (session storage) і уникати використання localStorage через XSS-атаки.

Які помилки найчастіше трапляються під час інтеграції?

Ігнорування CORS, відсутність перевірки валідності токена і неправильне налаштування редиректів.

Який провайдер обрати для SSO?

Це залежить від завдань: Google OAuth2 підходить для масових користувачів, Auth0 - для гнучкого налаштування, а корпоративні рішення - для внутрішніх систем.

Хочете дізнатися більше про інтеграцію SSO в Angular додатки? Задайте своє питання в коментарях нижче! 🤔👇

Додати коментар

Ваш імейл не буде опубліковано. Обов'язкові поля відзначені *

Зберегти моє ім'я, імейл та адресу сайту у цьому браузері для майбутніх коментарів