Accesso tramite siti esterni in un sito di Pagine Web ASP.NET (Razor)

Articolo
07/13/2023

Questo articolo spiega come accedere al sito di Pagine Web ASP.NET (Razor) usando Facebook, Google, Twitter, Yahoo e altri siti, ovvero come supportare OAuth e OpenID nel sito.

Contenuto dell'esercitazione:

Come abilitare l'accesso da altri siti quando si usa il modello webMatrix Starter Site.

Questa è la funzionalità ASP.NET introdotta nell'articolo:

Helper OAuthWebSecurity .

Versioni software usate nell'esercitazione

Pagine Web ASP.NET (Razor) 2

WebMatrix 3

Pagine Web ASP.NET include il supporto per i provider OAuth e OpenID. Usando questi provider, è possibile consentire agli utenti di accedere al sito usando le credenziali esistenti da Facebook, Twitter, Microsoft e Google. Ad esempio, per accedere usando un account Facebook, gli utenti possono semplicemente scegliere un'icona di Facebook, che li reindirizza alla pagina di accesso di Facebook in cui immettono le informazioni utente. Possono quindi associare l'account di accesso di Facebook al proprio account sul tuo sito. Un miglioramento correlato alle funzionalità di appartenenza alle pagine Web è che gli utenti possono associare più account di accesso (inclusi gli account di accesso dai siti di social networking) a un singolo account nel sito Web.

Questa immagine mostra la pagina Di accesso dal modello Starter Site , in cui un utente può scegliere un'icona Facebook, Twitter, Google o Microsoft per abilitare l'accesso con un account esterno:

provider esterni

È possibile abilitare l'appartenenza OAuth e OpenID annullando il commento di alcune righe di codice nel modello Starter Site . I metodi e le proprietà usati per lavorare con i provider OAuth e OpenID si trovano nella WebMatrix.Security.OAuthWebSecurity classe . Il modello Sito iniziale include un'infrastruttura di appartenenza completa, completa di una pagina di accesso, un database di appartenenza e tutto il codice necessario per consentire agli utenti di accedere al sito usando le credenziali locali o quelle di un altro sito.

Questa sezione fornisce un esempio di come consentire agli utenti di accedere da siti esterni a un sito basato sul modello Sito iniziale . Dopo aver creato un sito iniziale, eseguire questa operazione (i dettagli sono i seguenti):

Per i siti che usano un provider OAuth (Facebook, Twitter e Microsoft), si crea un'applicazione nel sito esterno. In questo modo sono disponibili le chiavi dell'applicazione necessarie per richiamare la funzionalità di accesso per tali siti.
Per i siti che usano un provider OpenID (Google), non è necessario creare un'applicazione. Per tutti questi siti, è necessario disporre di un account per accedere e creare applicazioni per sviluppatori.

Nota

Le applicazioni Microsoft accettano solo un URL attivo per un sito Web funzionante, pertanto non è possibile usare un URL del sito Web locale per testare gli account di accesso.
Modificare alcuni file nel sito Web per specificare il provider di autenticazione appropriato e inviare un account di accesso al sito che si vuole usare.

Questo articolo fornisce istruzioni separate per le attività seguenti:

Abilitazione degli account di accesso google
Abilitazione degli account di accesso di Facebook
Abilitazione degli account di accesso di Twitter

Abilitazione degli account di accesso Google

Creare o aprire un sito Pagine Web ASP.NET basato sul modello WebMatrix Starter Site .
Aprire la pagina _AppStart.cshtml e rimuovere il commento dalla riga di codice seguente.
```
OAuthWebSecurity.RegisterGoogleClient();
```

Eseguire la pagina default.cshtml del sito e scegliere il pulsante Accedi .
Nella pagina Account di accesso , nella sezione Usa un altro servizio per accedere , scegliere il pulsante Invia google o Yahoo . In questo esempio viene usato l'account di accesso di Google.

La pagina Web reindirizza la richiesta alla pagina di accesso di Google.
Immettere le credenziali per un account Google esistente.
Se Google chiede se si desidera consentire a Localhost di usare le informazioni dall'account, fare clic su Consenti.

Il codice usa il token Google per autenticare l'utente e quindi torna a questa pagina nel sito Web. Questa pagina consente agli utenti di associare il proprio account di accesso Google a un account esistente nel sito Web oppure di registrare un nuovo account nel sito per associare l'account di accesso esterno.
Scegliere il pulsante Associa . Il browser torna alla home page dell'applicazione.

Abilitazione degli account di accesso di Facebook

Passare al sito per sviluppatori di Facebook (accedere se non si è già connessi).
Scegliere il pulsante Crea nuova app e quindi seguire le istruzioni per assegnare un nome e creare la nuova applicazione.
Nella sezione Selezionare la modalità di integrazione dell'app con Facebook, scegliere la sezione Sito Web .
Compilare il campo URL sito con l'URL del sito , ad esempio http://www.example.com. Il campo Dominio è facoltativo; è possibile usarlo per fornire l'autenticazione per un intero dominio ,ad esempio example.com.

Nota

Se si esegue un sito nel computer locale con un URL come http://localhost:12345 (dove il numero è un numero di porta locale), è possibile aggiungere questo valore al campo URL sito per il test del sito. Tuttavia, ogni volta che il numero di porta del sito locale cambia, sarà necessario aggiornare il campo URL sito dell'applicazione.
Scegliere il pulsante Salva modifiche .
Scegliere di nuovo la scheda App e quindi visualizzare la pagina iniziale per l'applicazione.
Copiare i valori ID app e Segreto app per l'applicazione e incollarli in un file di testo temporaneo. Questi valori verranno passati al provider Facebook nel codice del sito Web.
Uscire dal sito per sviluppatori di Facebook.

Ora si apportano modifiche a due pagine nel sito Web in modo che gli utenti possano accedere al sito usando i propri account Facebook.

Creare o aprire un sito Pagine Web ASP.NET basato sul modello WebMatrix Starter Site .
Aprire la pagina _AppStart.cshtml e rimuovere il commento dal codice per il provider OAuth di Facebook. Il blocco di codice non commentato è simile al seguente:
```
OAuthWebSecurity.RegisterFacebookClient(
        appId: "",
        appSecret: "");
```
Copiare il valore id app dall'applicazione Facebook come valore del appId parametro (all'interno delle virgolette).
Copiare il valore del segreto dell'app dall'applicazione Facebook come valore del appSecret parametro.
Salvare e chiudere il file.

Eseguire la pagina default.cshtml del sito e scegliere il pulsante Accedi .
Nella pagina Account di accesso , nella sezione Usa un altro servizio per accedere , scegliere l'icona Facebook .

La pagina Web reindirizza la richiesta alla pagina di accesso di Facebook.
Accedere a un account Facebook.

Il codice usa il token di Facebook per autenticarti e quindi torna a una pagina in cui puoi associare il tuo account di accesso di Facebook all'account di accesso del tuo sito. Il nome utente o l'indirizzo di posta elettronica viene compilato nel campo Email del modulo.
Scegliere il pulsante Associa .

Il browser torna alla home page ed è stato effettuato l'accesso.

Abilitazione degli account di accesso di Twitter

Passare al sito per sviluppatori twitter.
Scegliere il collegamento Crea un'app e quindi accedere al sito.
Nel modulo Crea un'applicazione compilare i campi Nome e Descrizione .
Nel campo Sito Web immettere l'URL del sito , ad esempio http://www.example.com.

Nota

Se si sta testando il sito in locale (usando un URL come http://localhost:12345), Twitter potrebbe non accettare l'URL. Tuttavia, potrebbe essere possibile usare l'indirizzo IP di loopback locale , ad esempio http://127.0.0.1:12345. Questo semplifica il processo di test dell'applicazione in locale. Tuttavia, ogni volta che il numero di porta del sito locale cambia, è necessario aggiornare il campo Sito Web dell'applicazione.
Nel campo URL di callback immettere un URL per la pagina del sito Web a cui si vuole che gli utenti tornino dopo l'accesso a Twitter. Ad esempio, per inviare gli utenti alla home page del sito iniziale (che riconoscerà lo stato di accesso), immettere lo stesso URL immesso nel campo Sito Web .
Accettare i termini e scegliere il pulsante Crea l'applicazione Twitter .
Nella pagina di destinazione Applicazioni personali scegliere l'applicazione creata.
Nella scheda Dettagli scorrere fino alla fine e scegliere il pulsante Crea token di accesso personale.
Nella scheda Dettagli copiare i valori Chiave consumer e Segreto consumer per l'applicazione e incollarli in un file di testo temporaneo. Questi valori verranno passati al provider Twitter nel codice del sito Web.
Uscire dal sito Twitter.

Ora si apportano modifiche a due pagine nel sito Web in modo che gli utenti possano accedere al sito usando i propri account Twitter.

Creare o aprire un sito Pagine Web ASP.NET basato sul modello webMatrix Starter Site.
Aprire la pagina _AppStart.cshtml e annullare ilcommentazione del codice per il provider OAuth di Twitter. Il blocco di codice non commentato è simile al seguente:
```
OAuthWebSecurity.RegisterTwitterClient(
        consumerKey: "",
        consumerSecret: "");
```
Copiare il valore di Consumer Key dall'applicazione Twitter come valore del parametro (all'interno delle consumerKey virgolette).
Copiare il valore Consumer Secret dall'applicazione Twitter come valore del consumerSecret parametro.
Salvare e chiudere il file.

Eseguire la pagina default.cshtml del sito e scegliere il pulsante Login .
Nella pagina Account di accesso selezionare l'icona Twitter nella sezione Usa un altro servizio per accedere.

La pagina Web reindirizza la richiesta a una pagina di accesso Twitter per l'applicazione creata.
Accedere a un account Twitter.
Il codice usa il token Twitter per autenticare l'utente e quindi restituisce una pagina in cui è possibile associare l'account di accesso all'account del sito Web. Il nome o l'indirizzo di posta elettronica vengono compilati nel campo Email nel modulo.
Scegliere il pulsante Associa .

Il browser torna alla home page e viene eseguito l'accesso.

Accesso tramite siti esterni in un sito di Pagine Web ASP.NET (Razor)

Versioni software usate nell'esercitazione

Abilitazione degli account di accesso Google

Abilitazione degli account di accesso di Facebook

Abilitazione degli account di accesso di Twitter

Risorse aggiuntive

Commenti e suggerimenti

Commenti e suggerimenti

Risorse aggiuntive

Accesso tramite siti esterni in un sito di Pagine Web ASP.NET (Razor)

Versioni software usate nell'esercitazione

Abilitazione degli account di accesso Google

Test dell'account di accesso di Google

Abilitazione degli account di accesso di Facebook

Test dell'account di accesso di Facebook

Abilitazione degli account di accesso di Twitter

Test dell'account di accesso twitter

Risorse aggiuntive

Commenti e suggerimenti

Commenti e suggerimenti

Risorse aggiuntive