Guest post: Integrare gli inviti di Facebook in una Universal Windows app

Artikel
03/16/2015

Questo post è stato scritto da Matteo Pagani , Support Engineer in Microsoft per il programma AppConsult, con il prezioso supporto di Gianluca Bertelli, Microsoft Support Engineer.

Nel corso di uno dei post precedenti abbiamo visto come integrare Facebook e, nello specifico, la parte di autenticazione, all’interno di una Universal Windows app. Al termine del post, eravamo in grado di sviluppare un’applicazione per Windows e Windows Phone in grado di far autenticare correttamente l’utente con le sue credenziali Facebook e, successivamente, di utilizzare le Graph API (tramite la libreria Facebook C# SDK) per effettuare operazioni come recuperare il profilo dell’utente o pubblicare un post sulla sua timeline.

Per motivi di sicurezza, però, alcune attività su Facebook (come invitare gli amici ad un gioco o ad usare un’applicazione) non posso essere gestite direttamente tramite API, ma devono passare tramite una schermata web gestita direttamente dal social network. Questo per evitare, ad esempio, che un’applicazione possa inviare in automatico centinaia di inviti senza l’esplicito consenso dell’utente. Allo sviluppatore però, vengono forniti gli strumenti necessari per generare correttamente l’URL della web view da mostrare e per ricevere l’esito dell’operazione effettuata dall’utente.

In questo esempio vedremo come integrare gli inviti di Facebook in una Universal Windows app. Darò per scontato che la parte di autenticazione, spiegata nel post precedente, sia già stata implementata e che l’utente si sia già loggato correttamente nell’applicazione.

Registrare l’applicazione sul portale Facebook

Il primo passo è collegarsi al portale sviluppatori di Facebook ed accedere alle impostazioni dell’applicazione che avevamo già creato e configurato in precedenza per il login.

Il trucco per gestire gli inviti all’interno di una Windows Store app è quello di trattare l’applicazione Facebook come se fosse un gioco, dotato di un suo Canvas (ovvero l’area nella quale viene fatto il rendering dell’applicazione web all’interno delle pagine di Facebook). Ad un Canvas è associato un URL, che viene invocato al termine della procedura di invito: useremo questo URL per determinare l’esito dell’operazione e recuperare l’elenco degli amici invitati.

Per proseguire, perciò, dovremo cliccare nella sezione Settings sul pulsante Add platform e aggiungere una nuova applicazione di tipo Facebook Canvas. L’unica impostazione che ci serve configurare è il Secure Canvas URL, che è l’indirizzo che viene richiamato quando l’operazione è terminata: ci servirà per determinare se si è conclusa correttamente o meno. Possiamo specificare un URL qualsiasi, l’importante è che sia HTTPS, come nell’esempio seguente.

Il gioco è fatto: ora possiamo passare a scrivere il codice vero e proprio nella nostra applicazione.

Visualizzare la pagina di invito nell’applicazione

Per mostrare il codice necessario per gestire gli inviti partiremo dal progetto di esempio usato nel primo post dedicato all’autenticazione: darò per scontato, perciò, che abbiamo già utilizzato le classi FacebookClient e WebAuthenticationBroker per far autenticare l’utente e che abbiate già ricevuto l’access token, ovvero la chiave necessaria per effettuare qualsiasi operazione con le Graph API di Facebook.

PPer implementare gli inviti tornPiamo ad usare la classe FacebookClient, che fa parte dell’SDK di Facebook C# e che è necessario installare tramite NuGet sia nel progetto Windows che in quello Windows Phone della nostra Universal Windows app. Tale classe offre un metodo chiamato GetDialogUrl() che, dato il tipo di dialog che si vuole visualizzare e i parametri di inizializzazione, restituisce l’URL da mostrare all’interno di un controllo WebView.

Ecco un esempio di utilizzo:

private void OnInviteFriendsClicked(object sender, RoutedEventArgs e)

{

FacebookClient client = new FacebookClient(AccessToken);

dynamic parameters = new ExpandoObject();

parameters.app_id = ClientId;

parameters.message = "Invite your friends";

parameters.title = "Invite friends";

parameters.redirect_uri = "https://wp.qmatteoq.com/";

Uri dialogUrl = client.GetDialogUrl("apprequests", parameters);

RequestView.Visibility = Visibility.Visible;

RequestView.Navigate(dialogUrl);

}

I parametri sono gestiti con un oggetto dinamico, che ha una serie di proprietà:

· app_id: è l’ID dell’applicazione Facebook, che si recupera dal portale sviluppatori e che avevamo già utilizzato in precedenza per il login. Si trova nel portale alla voce Settings dell’applicazione, all’interno del campo App ID.

· message: è il messaggio che spiega lo scopo dell’invito e che viene mostrata nella vista web.

· title: è il titolo della vista web che consente di invitare gli utenti.

· redirect_uri: è il Secure Canvas URL che abbiamo specificato in precedenza nella configurazione sul portale sviluppatori di Facebook.

Dopodiché, usando la classe FacebookClient (inizializzata con l’access token che abbiamo recuperato dopo la fase di login), chiamiamo il metodo GetDialogUrl() , passando come parametri il tipo di dialog (nel caso degli inviti, apprequests) e la configurazione. Ci viene così restituito l’URL della schermata da mostrare, che dobbiamo visualizzare all’interno di un controllo WebView. Nel nostro esempio, tale controllo è stato incluso nella pagina a tutto schermo, ma nascosto di default:

<Grid>

</StackPanel>

</Grid>

Quando viene invocato il metodo, il controllo WebView viene reso visibile (impostandone la proprietà Visibility su Visible) e viene scatenata una navigazione, tramite il metodo Navigate() , verso l’URL restituito dal metodo GetDialogUrl() .

L’utente vedrà una schermata simile alla seguente:

Elaborare il risultato dell’operazione

L’utente avrà la possibilità, direttamente nella vista web, di selezionare uno o più amici: dopo aver premuto il pulsante Send, l’operazione sarà completata e noi potremo elaborarne il risultato. Lo facciamo sottoscrivendo l’evento Navigation_Completed del controllo WebView, che viene scatenato nel momento in cui una pagina è stata caricata completamente.

Nel momento in cui l’utente ha premuto il pulsante Send, viene scatenata una navigazione verso l’URL specificato come Secure Canvas URL: è quello che dobbiamo intercettare. In questo caso, infatti, l’URL conterrà la risposta con le informazioni relative agli amici che sono stati invitati.

Ecco un esempio di codice:

private async void RequestView_OnNavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)

{

if (args.Uri.DnsSafeHost == "wp.qmatteoq.com")

{

sender.Visibility = Visibility.Collapsed;

AppContent.Visibility = Visibility.Visible;

FacebookClient client = new FacebookClient(AccessToken);

dynamic result = client.ParseDialogCallbackUrl(args.Uri);

if (result.error_code == null)

{

var items = (IDictionary<string, object>) result;

ObservableCollection<FacebookUser> invitedFriends = new ObservableCollection<FacebookUser>();

foreach (KeyValuePair<string, object> value in items)

{

if (value.Key != "request")

{

string query = string.Format("/{0}", value.Value);

dynamic user = await client.GetTaskAsync(query);

FacebookUser facebookUser = new FacebookUser();

facebookUser.FullName = user.name;

invitedFriends.Add(facebookUser);

}

Friends.Visibility = Visibility.Visible;

FriendsHeader.Visibility = Visibility.Visible;

Friends.ItemsSource = invitedFriends;

}

else

{

MessageDialog dialog = new MessageDialog("The user has canceled the operation");

await dialog.ShowAsync();

}

Se l’host dell’URL (contenuto all’interno della proprietà Uri dei parametri di ritorno) coincide con quello specificato sul portale sviluppatori Facebook, allora ci troviamo nel caso in cui l’utente ha terminato di invitare i suoi amici. Possiamo perciò elaborare il risultato dell’operazione tramite il metodo ParseDialogCallbacUrl() , che ci restituisce un oggetto dinamico (usiamo, infatti, la keyword dynamic). L’operazione, però, potrebbe non essere andata a buon fine, oppure semplicemente l’utente potrebbe aver premuto il pulsante Cancel della dialog: a questo scopo, verifichiamo se il risultato contiene una proprietà di nome error_code. In caso negativo, vuol dire che tutto è andato a buon fine e l’utente ha selezionato uno o più amici dall’elenco. Possiamo perciò procedere a trattare il risultato come una collezione di tipo Dictionary<string, object> , che contiene:

· Un primo valore, identificato dalla chiave request, che rappresenta l’identificativo univoco della richiesta.

· Una serie di valori numerici, uno per ogni amico invitato dall’utente, con l’identificativo univoco della persona invitata.

Nel codice di esempio, tramite un ciclo foreach, passiamo in rassegna tutti gli utenti invitati (scartando l’identificativo della richiesta, che per i nostri scopi non ci serve) e, per ognuno di essi, andiamo a chiamare il servizio delle Graph API che ci restituisce le informazioni dettagliate sull’utente (la sintassi è semplicemente l’identificativo numerico dell’utente preceduto dal simbolo /, ad esempio /123456890), sfruttando il metodo GetTaskAsync() della classe FacebookClient.

Nell’esempio, per ogni utente, ci limitiamo a recuperarne il nome (contenuto nella proprietà name) e a salvarlo nella proprietà FullName della classe FacebookUser, che è una semplice wrapper in C# alle informazioni ritornate dalle Graph API così definito:

public class FacebookUser

{

public string FullName { get; set; }

}

Ognuno di questi oggetti viene infine aggiunto in una collezione di tipo ObservableCollection<FacebookUser> , così poi da mostrare all’utente l’elenco di tutti gli amici che ha invitato tramite un controllo ListView così definito:

<ListView.ItemTemplate>

</StackPanel>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

Come vedete, viene utilizzato un template molto semplice, che si limita a mostrare il nome dell’utente invitato.

In conclusione

Nel corso di questo post abbiamo visto come integrare il meccanismo di gestione degli inviti di Facebook (per invitare i nostri amici ad utilizzare il nostro gioco o la nostra applicazione) all’interno di una Universal Windows app. Potete scaricare il codice sorgente del progetto di esempio da GitHub all’indirizzo https://github.com/qmatteoq/FacebookSample-Universal: ricordatevi, come sempre, di sostituire i parametri di configurazione (come l’App Id di Facebook o il Canvas Secure URL) con quelli della vostra applicazione Facebook.

Freigeben über

Guest post: Integrare gli inviti di Facebook in una Universal Windows app

Registrare l’applicazione sul portale Facebook

Visualizzare la pagina di invito nell’applicazione

Elaborare il risultato dell’operazione

In conclusione

Zusätzliche Ressourcen