Windows Live Tools for Microsoft Visual Studio - Parte III

Nei precedenti post sull'argomento avete visto un'introduzione a come utilizzare i controlli SilverlightStreamingMediaPlayer e Contacts presenti nei Windows Live Tools for Microsoft Visual Studio 2008 che sono attualmente in CTP.

Ora vediamo gli altri due IDLogin e IDLoginView, che permettono di utilizzare molto semplicemente Windows Live ID in un'applicazione web.

Windows Live ID è il servizio di autenticazione e identificazione delle utenze di Windows Live utilizzabile sia nelle applicazioni web che client tramite opportuni SDK. Windows Live ID vi permette di accedere con un unico account a tutti i siti che utilizzano Windows Live ID o ai servizi Windows Live.  Potete scaricare l'SDK per utilizzare Windows Live ID da una qualsiasi applicazione web, anche non .NET, al momento Java, Perl, PHP, Python, Ruby.

Se lavorate con ASP.NET potete trarre vantaggio da i due controlli che vi introduco brevemente oggi. Questi controlli estendono i corrispettivi controlli ASP.NET 2.0 che permettono di interagire direttamente con il provider ASP.NET della membership. In questo modo abbiamo la possibilità di:

• integrare facilmente Windows Live ID in un'applicazione Web
• se usiamo già la membership di ASP.NET, il nostro sito ha già degli utenti profilati, possiamo chiedere così all'utente di associare il proprio account all' account Windows Live ID ed implementare dunque un'unica autenticazione. Il nostro utente si troverà loggatto contemporaneamente al nostro sito e con Windows Live ID.

La prima cosa che faremo nel nostro esempio e creare un semplice sito d'esempio che sfrutta alcuni dei servizi di membership a cui poi, questa è la parte più nuova, andremo ad aggiungere l'integrazione con Windows Live ID tramite i due nuovi controlli.

Nota: L'esempio non è esaustivo di tutti i servizi offerti da ASP.NET 2.0 per autenticazione/autorizzazione nè sul funzionamento interno delle API e Servizi descritti.Per seguire l'esempio è necessario aver installato Visual Studio 2008 o Visual Web Developer 2008 e SQL Server 2005 Express Edition ed i Windows Live Tools December CTP.

1) Creiamo un sito che utilizza la Membership di ASP.NET

Creiamo il nostro sito web utilizzando il template Windows Live, come già mostrato qui che troverete dopo aver installato i tools. Trovate ora i controlli di ASP.NET 2.0 per lavorare con la membership nella toolbox sotto il tab Login. Un approccio che possiamo seguire nel nostro esempio è quello di utilizzare l'ASP.NET Web Site Administration Wizard, cliccando sul bottone che vedete in figura e che apre una nuova istanza del browser con un'applicazione web che permette di abilitare i servizi di membership sul sito web che andiamo a costruire.

1.1) Configurazione del sito e creazione di un utente

Essendo l'argomento già noto, metto ora alcuni screen-shot dei passi che seguo per la creazione del sito di esempio. Potrete poi trovare l'intero esempio scaricabile alla fine del post.

Dopo aver seguito il wizard, quello che è successo alla vostra applicazione è che viene creato un database che trovate sotto la cartella App_Data, che ha il nome ASPNETDB. MDF e viene inoltre modificato il file web.config per abilitare i servizi richiesti. In questo momento solo l'autenticazione di tipo Form.

1.2) Uso dei controlli di Login di ASP.NET 2.0

Aggiungiamo una pagina di Login.aspx e facciamo drag&drop del controllo Login che fornisce un controllo con le textbox ed i bottoni necessari per interfacciarsi con le API di Membership ed effettuale la login dell'utente creato in precedenza.

Nella pagina di Default.aspx aggiungiamo invece il controllo LoginStatus, come mostrato in figura. Possiamo inserire anche il controllo LoginName, che ci darà informazione sul nome dell'utente una volta che questo si è autenticato.

Ora se lanciamo la nostra applicazione sulla pagina di Default.aspx, il controllo precedentemente inserito ci dice che non siamo autenticati indicando un link con la scritta Login. Seguendo il link si viene indirizzati alla pagina di login.aspx. Inserite e validate le credenziali ritorniamo alla pagina Default.aspx. Questa volta autenticati, il link precedente ha ora cambiato la scritta da Login a LogOut e se abbiamo inserito il controllo LoginName ora appare il nostro nome o meglio quello dell'utente che abbiamo creato in precedenza.

Cosa succede se inseriamo il controllo dei Contatti visto nella seconda parte di questa mini-serie ?

L'utente del nostro ipotetico sito si troverà nella condizione di dover autenticarsi con Windows Live ID per poter utilizzare il controllo dei contatti ed autenticarsi con il proprio account per usufruire dei servizi del sito, possiamo vedere l'immagine seguente in cui l'utente sta navigando come anonimo nel sito e vede il controllo dei contatti che chiede l'autenticazione e anche il link alla Login con il proprio account del sito.

Se effettua la login con il suo account del sito deve poi loggarsi con l'account Windows Live ID per poter avere a disposizione i propri contatti del Messenger.Quello che vogliamo fare e fare in modo che l'utente possa associare il suo account Windows Live ID con quello offerto dalla Membership.

2) Aggiungiamo il controllo IDLoginStatus e IDLoginView

Cominciamo ad usare i nuovi controlli di Windows Live. Questi controlli estendono i corrispondenti controlli di ASP.NET aggiungendo la necessaria integrazione con WL ID.

Inseriamo dunque il controllo IDLoginStatus, clicchiamo su new Application ID. Avere un Application ID è necessario. Quello che va fatto è registrare l'url alla pagina del nostro sito a cui verremo rediretti dopo l'autenticazione tramite Windows Live. Nel nostro esempio usiamo un url locale: localhost, con la porta utilizzata dall' ASP.NET Development Server di Visual Studio. Ricordiamoci di impostare come fissa la porta, che altrimenti verrebbe rigenerata da VS ad ogni riavvio dell' ASP.NET Dev Server: nelle properties del sito, Use Dynamic Ports: impostare a false. Dopo questa operazione Windows Live sarà in grado di riportarci sul nostro sito dopo l'autenticazione dell'utente.

Dopo aver aggiunto il controllo, sempre in Visual Studio 2008, clicchiamo su Create new Application. Si apre una finestra per la registrazione. Loggiamoci con WLID, quindi possiamo registrare una nuova applicazione come mostrato in figura. Tra le informazioni importanti ci sono il Return Url e una chiave segreta che può essere rigenerata. In figura è illustrato parte del processo.

Il Wizard creerà l'"Application ID" che insieme al "Secret" verranno impostati nel file web.config: cercate wll_appid e wll_secret. In figura sono evidenziati solo alcuni dei campi necessari per la registrazione della nuova applicazione ...

Nella nostra pagina Default.aspx avremo un link in più "Sign-in", premendo il quale effettuiamo l'autenticazione tramite Windows Live ID, con l'effetto che una volta ritornati nella pagina anche il controllo dei contatti risulterà già autenticato, come mostrato in figura in cui si vede che siamo loggati per Windows Live, ma non con l'account del nostro sito.

Aggiungiamo ora alla nostra pagina il controllo IDLoginView, questo controllo, che come già detto estende il controllo standard LoginView, si basa sull'uso di template (di codice dichiarativo) che vengono visualizzati in diversi stati della pagina.

• AnonymousTemplate: viene presentato all'utente se non è autenticato
• LoggedInTemplate: se l'utente è loggato con il suo profilo della membership di ASP.NET
• LoggedInIDTemplate: se l'utente è loggato con il suo account Windows Live ID
• LoggedInAlltemplate: se l'utente è loggato sia con il suo account ASP.NET che Windows Live.
• AssociateTemplate: viene chiesto all'utente se vuole associare il suo account ASP.NET a quello di Windows Live ID

Quest'ultimo template è quello che fa al caso nostro. Il comportamento è influenzato dalla proprietà AutomaticallyAssociateAuthentication, che se impostata a true chiede all'utente di fare l'associazione la prima volta che l'utente si logga con entrambe le modalità

Nell'immagine seguente si vede il codice del controllo IDLoginView con i vari template:

Nel file web.config troverete configurato il provider LiveMembershipProvider. Spostando inoltre il controllo dei contatti nel template LoggedInAlltemplate, posso ad esempio visualizzarlo solo in quel particolare "stato" della mia applicazione.

Ma vediamo quale può essere una possibile interazione dell'utente: 1) Si logga con il suo account ASP.NET 2) Si logga con il suo account Windows Live 3) Dà il consenso all'associazione, come mostrato in figura:

Dalla figura si nota che sono autenticato sia con l'account ASP.NET che Windows Live ID, infatti i due controlli LoginStatus e IDLoginStuatus mi danno la possibilità di fare la logout e la sign-out rispettivamente. Premendo ora sul tasto yes avviene l'associazione vera e propria.

Dopo aver dato il consenso all' associazione ecco il risultato atteso.

Da questo momento in poi il mio account Windows Live ID è associato all'account ASP.NET. Quindi se mi loggo premendo il link sign-in mi loggo contemporaneamente con il mio account del sito e con Windows Live. Mentre se seguo il solo link LogIn mi loggo solo con l'account di ASP.NET come in precedenza.

Conclusione

In questo ultimo post della serie abbiamo visto come utilizzare i controlli IDLoginView e IDLoginStatus per integrare in modo semplice e rapido il sistema di autenticazione Windows Live ID in un sito web che utilizzi il sistema di membership di ASP.NET. Il risultato è che un utente che abbia un account Windows Live ID che già utilizzi per accedere a siti che supportano WL possa utilizzarlo anche con il nostro sito d'esempio, previa un'associazione di account. L'utente potrà comunque mantenere il suo account "standard" del sito e utilizzarlo in modo indipendente.

Se volete altre informazioni sulla piattaforma Windows Live per sviluppatori vi consiglio di partire da dev.live.com.

Download Esempio

Vi allego per comodità l'esempio che ho costruito durante il post. Spero possa essere d'aiuto.