Configurazione dell'account di accesso esterno di Facebook in ASP.NET Core

Da Valeriy Novytskyy e Rick Anderson

Questa esercitazione con esempi di codice illustra come consentire agli utenti di accedere con il proprio account Facebook usando un esempio ASP.NET progetto Core creato nella pagina precedente. Per iniziare, creare un ID app Facebook seguendo i passaggi ufficiali.

Creare l'app in Facebook

• Aggiungere il pacchetto NuGet Microsoft.AspNetCore.Authentication.Facebook al progetto.

• Passare alla pagina dell'app Facebook Developers e accedere. Se non hai già un account Facebook, usa il collegamento Iscrizione a Facebook nella pagina di accesso per crearne uno. Dopo aver creato un account Facebook, seguire le istruzioni per registrarsi come sviluppatore di Facebook.

• Dal menu App personali selezionare Crea app. Viene visualizzato il modulo Crea un'app .

• Selezionare un tipo di app più adatto al progetto. Per questo progetto selezionare Consumer e quindi Avanti. Viene creato un nuovo ID app.

• Compilare il modulo e toccare il pulsante Crea app .

  

• Nella pagina Aggiungi prodotti alla tua app selezionare Configura nella scheda Di accesso di Facebook.

  

• Viene avviata la procedura guidata di avvio rapido con Choose a Platform (Scegli una piattaforma ) come prima pagina. Ignorare la procedura guidata per il momento facendo clic sul collegamento FaceBook Login Settings (Impostazioni accesso FaceBook) nel menu in basso a sinistra:

  

• Viene visualizzata la pagina Impostazioni OAuth client:

  

• Immettere l'URI di sviluppo con /signin-facebook aggiunto nel campo URI di reindirizzamento OAuth valido (ad esempio: https://localhost:44320/signin-facebook). L'autenticazione di Facebook configurata più avanti in questa esercitazione gestirà automaticamente le richieste in /signin-facebook route per implementare il flusso OAuth.

Nota

L'URI /signin-facebook viene impostato come callback predefinito del provider di autenticazione di Facebook. È possibile modificare l'URI di callback predefinito durante la configurazione del middleware di autenticazione di Facebook tramite la proprietà ereditata RemoteAuthenticationOptions.CallbackPath della FacebookOptions classe .

• Seleziona Salva modifiche.

• Selezionare Il collegamento Impostazioni>di base nel riquadro di spostamento a sinistra.

• Prendere nota di App ID e dell'oggetto App Secret. Entrambe le applicazioni ASP.NET Core verranno aggiunte nella sezione successiva:

• Quando si distribuisce il sito è necessario rivedere la pagina di configurazione dell'account di accesso di Facebook e registrare un nuovo URI pubblico.

Archiviare l'ID e il segreto dell'app Facebook

Archiviare impostazioni riservate, ad esempio l'ID app Facebook e i valori dei segreti con Secret Manager. Per questo esempio, seguire questa procedura:

1. Inizializzare il progetto per l'archiviazione privata in base alle istruzioni in Abilitare l'archiviazione privata.

2. Archiviare le impostazioni sensibili nell'archivio segreto locale con le chiavi Authentication:Facebook:AppId segrete e Authentication:Facebook:AppSecret:

   dotnet user-secrets set "Authentication:Facebook:AppId" "<app-id>"
   dotnet user-secrets set "Authentication:Facebook:AppSecret" "<app-secret>"
   

Il separatore : non funziona con le chiavi gerarchiche delle variabili di ambiente in tutte le piattaforme. __, il doppio carattere di sottolineatura, è:

• Supportato da tutte le piattaforme. Ad esempio, il separatore : non è supportato da Bash, ma __ è supportato.
• Sostituito automaticamente da un :

Configurare l'autenticazione di Facebook

Aggiungere il servizio di autenticazione a Program:

var builder = WebApplication.CreateBuilder(args);
var services = builder.Services;
var configuration = builder.Configuration;

services.AddAuthentication().AddFacebook(facebookOptions =>
    {
        facebookOptions.AppId = configuration["Authentication:Facebook:AppId"];
        facebookOptions.AppSecret = configuration["Authentication:Facebook:AppSecret"];
    });

L'overload AddAuthentication(IServiceCollection, String) imposta la DefaultScheme proprietà . L'overload AddAuthentication(IServiceCollection, Action<AuthenticationOptions>) consente di configurare le opzioni di autenticazione, che possono essere usate per configurare schemi di autenticazione predefiniti per scopi diversi. Chiamate successive per eseguire l'override AddAuthentication delle proprietà configurate AuthenticationOptions in precedenza.

AuthenticationBuilder I metodi di estensione che registrano un gestore di autenticazione possono essere chiamati una sola volta per ogni schema di autenticazione. Esistono overload che consentono di configurare le proprietà dello schema, il nome dello schema e il nome visualizzato.

Accedere con Facebook

• Eseguire l'app e selezionare Accedi.
• In Usa un altro servizio per accedere selezionare Facebook.
• Si viene reindirizzati a Facebook per l'autenticazione.
• Immettere le credenziali di Facebook.
• Si viene reindirizzati di nuovo al sito in cui è possibile impostare il messaggio di posta elettronica.

L'accesso viene eseguito usando le credenziali di Facebook:

Reagire per annullare l'autorizzazione di accesso esterno

AccessDeniedPath può fornire un percorso di reindirizzamento all'agente utente quando l'utente non approva la richiesta di autorizzazione richiesta.

Il codice seguente imposta su AccessDeniedPath "/AccessDeniedPathInfo":

services.AddAuthentication().AddFacebook(options =>
{
    options.AppId = Configuration["Authentication:Facebook:AppId"];
    options.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
    options.AccessDeniedPath = "/AccessDeniedPathInfo";
});

È consigliabile che la AccessDeniedPath pagina contenga le informazioni seguenti:

• L'autenticazione remota è stata annullata.
• Questa app richiede l'autenticazione.
• Per provare di nuovo l'accesso, selezionare il collegamento Account di accesso.

Test AccessDeniedPath

• Passare a facebook.com
• Se è stato eseguito l'accesso, è necessario disconnettersi.
• Eseguire l'app e selezionare Accesso a Facebook.
• Selezionare Non ora. Si viene reindirizzati alla pagina specificata AccessDeniedPath .

Inoltrare informazioni della richiesta con un proxy o un servizio di bilanciamento del carico

Se l'app viene distribuita dietro un server proxy o un servizio di bilanciamento del carico, alcune delle informazioni della richiesta originale possono essere inoltrate all'app nelle intestazioni della richiesta. Queste informazioni includono in genere lo schema della richiesta sicura (https), l'host e l'indirizzo IP del client. Le app non leggono automaticamente queste intestazioni della richiesta per individuare e usare le informazioni della richiesta originale.

Lo schema viene usato nella generazione di collegamenti che influisce sul flusso di autenticazione con provider esterni. La perdita dello schema sicuro (https) fa sì che l'app generi URL di reindirizzamento non sicuri e non corretti.

Usare il middleware delle intestazioni inoltrate per rendere disponibili per l'app le informazioni della richiesta originale per l'elaborazione delle richieste.

Per altre informazioni, vedere Configurare ASP.NET Core per l'utilizzo di server proxy e servizi di bilanciamento del carico.

Più provider di autenticazione

Quando l'app richiede più provider, concatenare i metodi di estensione del provider dietro AddAuthentication:

services.AddAuthentication()
    .AddMicrosoftAccount(microsoftOptions => { ... })
    .AddGoogle(googleOptions => { ... })
    .AddTwitter(twitterOptions => { ... })
    .AddFacebook(facebookOptions => { ... });

Per altre informazioni sulle opzioni di configurazione supportate dall'autenticazione di Facebook, vedere le informazioni di riferimento sulle FacebookOptions API. Le opzioni di configurazione possono essere usate per:

• Richiedere informazioni diverse sull'utente.
• Aggiungere argomenti stringa di query per personalizzare l'esperienza di accesso.

Risoluzione dei problemi

• ASP.NET Solo Core 2.x: se Identity non è configurato chiamando services.AddIdentity in ConfigureServices, il tentativo di autenticazione comporterà ArgumentException: è necessario specificare l'opzione 'SignInScheme'. Il modello di progetto usato in questa esercitazione garantisce che questa operazione venga eseguita.
• Se il database del sito non è stato creato applicando la migrazione iniziale, si ottiene un'operazione di database non riuscita durante l'elaborazione dell'errore di richiesta . Toccare Applica migrazioni per creare il database e aggiornare per continuare oltre l'errore.

Passaggi successivi

• Questo articolo ha illustrato come eseguire l'autenticazione con Facebook. È possibile seguire un approccio simile per l'autenticazione con altri provider elencati nella pagina precedente.

• Dopo aver pubblicato il sito Web nell'app Web di Azure, è necessario reimpostare nel AppSecret portale per sviluppatori di Facebook.

• Impostare le impostazioni dell'applicazione Authentication:Facebook:AppId e Authentication:Facebook:AppSecret nella portale di Azure. Il sistema di configurazione è configurato per leggere le chiavi dalle variabili di ambiente.