Tempo di lettura: 7 minuti
Introduzione
Le applicazioni web moderne richiedono metodi di autenticazione solidi e coerenti per garantire la sicurezza dei dati degli utenti e offrire un’esperienza fluida. Le soluzioni tradizionali, come l’uso di nomi utente e password univoci per ogni servizio, sono inefficienti e vulnerabili alle violazioni di sicurezza. Per rispondere a queste sfide, OAuth2 si è affermato come uno dei framework di autorizzazione più diffusi, offrendo un sistema scalabile per gestire l’accesso degli utenti tramite token di identità senza esporre credenziali sensibili.
L’integrazione di OAuth2, anche con provider noti come Google, può sembrare complessa, soprattutto se si utilizzano gli ultimi componenti standalone di Angular. Questo articolo ti guiderà passo dopo passo nell’implementazione dell’accesso OAuth2 in un’applicazione Angular 19, utilizzando il Google Cloud Client ID e sfruttando l’approccio modulare offerto da Angular.
Iniziamo subito!
Perché scegliere OAuth2 con Google?
OAuth2 è un protocollo di autorizzazione consolidato, ideale per garantire un accesso sicuro e senza password. L’utilizzo di Google come provider offre vantaggi significativi:
- Sicurezza: elimina la necessità di memorizzare dati sensibili.
- Semplicità: consente agli utenti di autenticarsi con il proprio account Google esistente.
- Scalabilità: sfrutta l’infrastruttura robusta di Google per gestire un ampio numero di utenti.
Prerequisiti
Prima di procedere con l’implementazione, assicurati di avere:
- Familiarità con i concetti di base di Angular (componenti, servizi, moduli).
- Node.js e npm installati.
- Angular CLI configurata.
- Un account Google Cloud Platform.
- Conoscenza delle basi di OAuth2.
- Un progetto Angular esistente o uno nuovo (creato con
ng new oauth).
Guida passo passo: configurazione di OAuth2 in Angular 19
Passaggio 1: Configurare Google Cloud
Per utilizzare Google come provider OAuth2, segui questi passaggi:
-
Crea un progetto Google Cloud:
- Accedi alla Google Cloud Console.
- Crea un nuovo progetto.
-
Configura la schermata di consenso OAuth:
- Vai alla sezione API e servizi > Schermata di consenso OAuth.
- Compila i campi richiesti, come nome del progetto e ambiti richiesti, per informare gli utenti su come verranno utilizzati i loro dati.
-
3. Creare credenziali OAuth 2.0:
Vai a Credenziali > Crea credenziali > ID client OAuth 2.0 .
Seleziona Applicazione Web, assegna un nome descrittivo e configura gli URI di reindirizzamento richiesti.
salva le credenziali come il CLIENT SECSCRET ed il CLIENTID
-
Scaricare e configurare Angular 19
Angular 19 introduce miglioramenti significativi in termini di performance e funzionalità, rendendolo una scelta ideale per i moderni sviluppatori web. In questa guida, vedremo come configurare Angular 19 passo dopo passo.
Prerequisiti
Prima di iniziare, assicurati di avere i seguenti strumenti installati nel tuo sistema:
- Node.js (versione 16 o successiva)
- npm (gestore di pacchetti di Node.js)
Puoi verificare le versioni di Node.js e npm già installate eseguendo i seguenti comandi nel terminale:
node -v npm -v
Se non sono installati o le versioni non sono aggiornate, scarica e installa l’ultima versione di Node.js da nodejs.org, che include anche npm.
Aggiornare o installare Angular CLI
Angular CLI è lo strumento ufficiale per creare e gestire applicazioni Angular. Per lavorare con Angular 19, è necessario avere l’ultima versione di Angular CLI. Esegui il comando seguente per installare o aggiornare Angular CLI globalmente sul tuo sistema:
npm install -g @angular/cli@latest
Per confermare l’installazione, controlla la versione di Angular CLI:
ng version
Dovresti vedere l’ultima versione elencata.
Creare un nuovo progetto Angular 19
Dopo aver configurato Angular CLI, puoi creare un nuovo progetto Angular con il comando:
ng new apishield
Durante la creazione, il sistema ti chiederà di specificare alcune preferenze, come l’utilizzo del routing e il tipo di fogli di stile (CSS, SCSS, ecc.). Seleziona le opzioni più adatte al tuo progetto.
Avviare il progetto
Una volta creato il progetto, accedi alla directory del progetto:
cd apishield
E avvia il server di sviluppo con:
ng serve -o
Questo comando avvierà l’applicazione e la renderà disponibile su http://localhost:4200 nel browser.
Con questi semplici passaggi, sei pronto per iniziare a lavorare con Angular 19.
Configurazione del Progetto Angular
Installare i pacchetti necessari
Per implementare OAuth2 in Angular, dobbiamo utilizzare la libreria angular-oauth2-oidc, che semplifica la gestione dell’autenticazione e dei token OAuth.
Esegui il seguente comando nel terminale per installarla:
npm install angular-oauth2-oidc
Creare i file di configurazione per l’autenticazione
Creazione di auth-config.ts
Inizia creando un file auth-config.ts nella directory dei servizi o in una posizione adeguata del tuo progetto. Questo file contiene la configurazione per l’OAuth.
import { AuthConfig } from 'angular-oauth2-oidc';
export const authConfig: AuthConfig = {
issuer: 'https://accounts.google.com',
redirectUri: window.location.origin,
clientId: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'openid profile email',
strictDiscoveryDocumentValidation: false,
};
Nota: sostituisci YOUR_GOOGLE_CLIENT_ID con l’ID client effettivo ottenuto dalla Console di Google Cloud.
Creazione di auth-google.service.ts
Crea un servizio Angular chiamato auth-google.service.ts che gestisce l’autenticazione e l’accesso ai dati dell’utente.
import { Injectable, inject, signal } from '@angular/core';
import { Router } from '@angular/router';
import { AuthConfig, OAuthService } from 'angular-oauth2-oidc';
import { authConfig } from './auth-config';
@Injectable({
providedIn: 'root',
})
export class AuthGoogleService {
private oAuthService = inject(OAuthService);
private router = inject(Router);
profile = signal<any>(null);
constructor() {
this.initConfiguration();
}
initConfiguration() {
this.oAuthService.configure(authConfig);
this.oAuthService.setupAutomaticSilentRefresh();
this.oAuthService.loadDiscoveryDocumentAndTryLogin().then(() => {
if (this.oAuthService.hasValidIdToken()) {
this.profile.set(this.oAuthService.getIdentityClaims());
}
});
}
login() {
this.oAuthService.initImplicitFlow();
}
logout() {
this.oAuthService.revokeTokenAndLogout();
this.profile.set(null);
}
getProfile() {
return this.profile();
}
}
Questo servizio fornisce funzioni chiave come il login, il logout e il recupero dei dati del profilo utente.
Creare Componenti Standalone
L’utilizzo di componenti standalone semplifica l’architettura del progetto e riduce la complessità.
1. Creare un componente di login
Esegui il comando seguente per generare un nuovo componente standalone per il login:
ng generate component login --standalone
Aggiorna il file login.component.html per aggiungere un pulsante di autenticazione con Google:
<div class="login-button">
<button mat-raised-button (click)="signInWithGoogle()">
<img src="https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-09-512.png" alt="Google" class="google-icon" />
Sign in with Google
</button>
</div>
Aggiorna il file login.component.ts:
import { Component, inject } from '@angular/core';
import { AuthGoogleService } from '../services/auth-google.service';
@Component({
selector: 'app-login',
standalone: true,
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
})
export class LoginComponent {
private authService = inject(AuthGoogleService);
signInWithGoogle() {
this.authService.login();
}
}
Creare un componente per la dashboard
Genera un componente per la dashboard:
ng g c dashboard --standalone
Aggiorna il file dashboard.component.html:
<div class="dashboard">
<h1>Dashboard - User Logged In</h1>
<p>{{ profile() | json }}</p>
<button (click)="logOut()">LogOut</button>
</div>
Aggiorna il file dashboard.component.ts:
import { Component, inject } from '@angular/core';
import { AuthGoogleService } from '../services/auth-google.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-dashboard',
standalone: true,
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent {
private authService = inject(AuthGoogleService);
private router = inject(Router);
profile = this.authService.profile;
logOut() {
this.authService.logout();
this.router.navigate(['/login']);
}
}
Configurare OAuthService nell’app
Aggiorna il file app.config.ts per fornire il servizio OAuth in tutta l’applicazione:
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideOAuthClient } from 'angular-oauth2-oidc';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient(),
provideOAuthClient(),
provideAnimationsAsync(),
],
};
Aggiorna main.ts per avviare l’applicazione con la configurazione aggiornata:
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
Conclusione
L’implementazione di OAuth2 con Google Cloud Client ID in Angular utilizzando componenti standalone consente di creare un sistema di autenticazione modulare e scalabile. Questo approccio migliora la sicurezza e l’esperienza utente, riducendo la complessità del codice e semplificando l’estendibilità dell’applicazione.
Se hai trovato utile questa guida, esplora ulteriori risorse su Angular e sull’autenticazione per continuare a perfezionare i tuoi progetti.