Блог

Главная - Вопросы по программированию - Поиск ключей аутентификации на основе ролей Angular и SpringBoot

Поиск ключей аутентификации на основе ролей Angular и SpringBoot

#angular #spring-boot #oauth-2.0 #keycloak #jwt-auth

#angular #spring-boot #oauth-2.0 #поиск ключей #jwt-auth

Вопрос:

Я хотел бы настроить аутентификацию между моим угловым интерфейсом и моим бэкэндом SpringBoot. У меня есть сервер аутентификации SpringBoot, настроенный с помощью SpringBoot и функциональный. Интерфейс может проходить аутентификацию с помощью Keycloak и иметь доступ к API SpringBoot.

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

И второе, я бы хотел, чтобы некоторые страницы отображались, а другие нет, в зависимости от роли пользователя.

И в качестве бонуса, если вы знаете… Я хотел бы отобразить некоторые части DOM в зависимости от роли пользователя.

(я впервые настраиваю эту систему … спасибо за помощь) На стороне Keycloak и Spring проблем нет, соединение в порядке, и перенаправление на Angular тоже в порядке. Носитель сохранен нормально

app.component.ts

 import { Component } from '@angular/core';
import { OAuthService, NullValidationHandler, AuthConfig } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  constructor(private oauthService: OAuthService) {
    this.configure();
  }
authConfig: AuthConfig = {
    issuer: 'http://localhost:8081/auth/realms/api-team', // Keycloak Server
    redirectUri: window.location.origin   "/api-team", // My SpringBoot
    clientId: 'api-team-client-angular',
    scope: 'openid profile email offline_access api-angular',
    responseType: 'code',
    // at_hash is not present in JWT token
    // disableAtHashCheck: true,
    showDebugInformation: true
  }
  
  public login() {
    this.oauthService.initLoginFlow();
  }
  
  public logoff() {
    this.oauthService.logOut();
  }
  
  private configure() {
    this.oauthService.configure(this.authConfig);
    this.oauthService.tokenValidationHandler = new  NullValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }
}

Просто тест..
app.component.html

 <router-outlet>
  <button class="btn btn-default" (click)="login()">
    Login
  </button>
  <button class="btn btn-default" (click)="logoff()">
    Logout
  </button>
    <app-loader></app-loader>
</router-outlet>

Один из моих маршрутизаторов

 export const MaterialRoutes: Routes = [
    {
        path: '',
        children: [
            // {
            //     path: 'services-namespace',
            //     component: ServicesProjetComponent,
            //     data: {
            //         title: "Composants d'un projet",
            //         urls: [
            //             { title: 'Dashboard', url: '/dashboard1' },
            //             { title: "Composants d'un projet" }
            //         ]
            //     }
            // },
            {
                path: 'namespaces',
                component: ProjetsComponent,
                data: {
                    title: "Liste des Projets",
                    urls: [
                        { title: 'Dashboard', url: '/dashboard1' },
                        { title: "Liste de Projets" }
                    ]
                }
            }

Ответ №1:

Все, что вам нужно добавить, это защита Angular (и, возможно, служба аутентификации).

Я настроил минимальное моно-репозиторий для встречи об Open ID с очень похожим стеком: spring RESTful API (хорошо, это сервлет, а не реактивный), интерфейс Angular и сервер авторизации Keycloak.

Я предлагаю вам клонировать и взломать его. Для деталей, специфичных для Angular, внимательно ознакомьтесь с:

Метки: