Dans ce tutoriel, nous allons parler de la manière d’interagir avec l’API de Facebook et de tous les outils nécessaires pour vous connecter à celle-ci. Plus précisément, l'application que nous allons créer pourra se connecter au compte Facebook de l'utilisateur et mettre à jour son statut. Commençons!
Étape 1: Création de projet Visual Studio
Tout d’abord, nous devons créer un nouveau projet avec Visual Studio. Nous allons juste créer une application simple, alors sélectionnez l'option "Windows Phone App":
Si vous utilisez Visual Studio 2012 avec le nouveau kit de développement WP8 SDK, la version cible du système d'exploitation Windows Phone vous sera demandée. Si tel est le cas, il suffit de sélectionner le système d'exploitation 7.1.
Étape 2: Ajout de l'interface utilisateur
Le projet étant déjà créé, ouvrez le fichier "MainPage.xaml" s'il n'est pas déjà ouvert et modifiez la zone de texte d'application et de nom de page par défaut:
Maintenant, dans notre grille ContentPanel, nous allons ajouter deux lignes, une pour une zone de texte dans laquelle l'utilisateur entrera le nouveau statut et l'autre pour le bouton permettant de soumettre le statut:
Et puis ajoutez simplement une zone de texte sur la première ligne portant le nom "Message" et un bouton sur la seconde:
À la fin, vous devriez avoir ceci:
Étape 3: Création de comptes de développeur
Facebook dispose d'une API très complète permettant l'interaction entre les applications et le site. L'API permet à votre application de se connecter et d'interagir avec le compte FB de l'utilisateur..
Afin de connecter notre application à Facebook, nous devrons nous enregistrer en tant que développeur Facebook. Pour créer un compte de développeur Facebook, accédez au site de développement de Facebook., puis connectez-vous avec votre compte facebook ou créez-en un si vous n'en avez pas déjà. Une fois que vous êtes connecté, cliquez sur le bouton "Enregistrer" et suivez les instructions..
Étape 4: Enregistrement d'une nouvelle application
Maintenant, créez une nouvelle application en allant dans le menu de votre application, puis sélectionnez le bouton "Créer une nouvelle application".
Après avoir créé votre application, vous verrez votre page de paramètres d’application et un numéro de clé d’ID d’application / API..
Copiez ce numéro, revenez au projet et, à l'intérieur du fichier "MainPage.xaml.cs", créez une nouvelle chaîne de constante globale au-dessus de votre constructeur:
private const string FBApi = "VOTRE CLÉ D'API VONT ICI"; // Constructeur public MainPage () InitializeComponent ();
Étape 5: Choisir le SDK Facebook C #
Facebook propose d'excellents SDK pour iOS et Android, mais malheureusement pas pour WP7. Par conséquent, pour vous connecter à Facebook à partir d'une application WP7, nous avons deux options: (1) créer tous les appels manuellement ou (2) utiliser Facebook. SDK C #, SDK non officiel spécialement conçu pour les applications C #.
Pour ce tutoriel, nous utiliserons le SDK C #. Toutes les méthodes de l'API Facebook sont déjà intégrées, ce qui facilitera grandement notre tâche.!
Étape 6: téléchargement du SDK
Ce kit SDK est uniquement disponible via NuGet. Par conséquent, si Visual Studio n'inclut pas le gestionnaire de packages NugGet, vous aurez besoin de le télécharger à partir du hompage NuGet. Pour télécharger le package, ouvrez la console du gestionnaire de packages sous Visual Studio (Outils> Gestionnaire de packages de bibliothèque> Console du gestionnaire de packages), puis entrez la commande suivante:Paquet d'installation Facebook . Si vous rencontrez des problèmes avec la version téléchargée, essayez alors cette commande: Package d'installation Facebook - version 6.0.24
Étape 7: Ajouter le SDK FB à votre application
Maintenant que nous avons le SDK, nous allons l’ajouter à notre projet. Ajoutez une nouvelle importation dans le fichier "MainPage.xaml.cs":
en utilisant Facebook;
Étape 8: Ajout d'un navigateur
Pour qu'un utilisateur puisse se connecter à Facebook, il doit d'abord nous donner l'accès et la permission à son compte FB. Cela se fait via la page Web Facebook et nous devons donc ajouter un navigateur Web à notre application. Le navigateur doit couvrir la plus grande partie de la page. Elle sera donc initialement réduite et ensuite, elle deviendra visible au moment où l'utilisateur doit se connecter. Dans le fichier "MainPage.xaml", ajoutez un nouveau navigateur Web juste en dessous de ContentPanel:
Étape 9: Connexion avec Facebook
Lorsque tout est correctement défini, nous pouvons maintenant commencer à coder notre application. Créez une nouvelle variable FacebookClient et nommez-la simplement client. C'est là que toutes les connexions seront faites. De plus, lancez la variable à l'intérieur du constructeur:
client privé FacebookClient; // Constructeur public MainPage () InitializeComponent (); client = new FacebookClient ();
Étape 10: Ajout de l'événement Click
Pour pouvoir poster quelque chose, l'utilisateur doit cliquer sur le bouton "Publier". Allons ajouter un événement click à ce bouton:
Du côté du code, lorsque l'utilisateur clique sur le bouton, il doit se connecter avec Facebook et autoriser l'acceptation de notre application. Pour ce processus, nous devons rendre le navigateur visible et naviguer vers une URL que le client nous donnera, mais avant cela, nous devons envoyer quelques paramètres initiaux:
private void PostClicked (expéditeur de l'objet, RoutedEventArgs e) // Paramètres clients var parameters = new Dictionary(); paramètres ["client_id"] = FBApi; parameters ["redirect_uri"] = "https://www.facebook.com/connect/login_success.html"; parameters ["response_type"] = "jeton"; paramètres ["display"] = "touch"; // La portée est ce qui nous donne l'accès aux données des utilisateurs, dans ce cas // nous voulons simplement publier sur son mur parameters ["scope"] = "publish_stream"; Browser.Visibility = System.Windows.Visibility.Visible; Browser.Navigate (client.GetLoginUrl (paramètres));
Si vous exécutez votre code maintenant et cliquez sur le bouton Publier, le navigateur devrait apparaître, montrant la page de connexion Facebook:
Étape 11: Ajout d'un événement de navigation
Une fois l'utilisateur connecté sur Facebook, le navigateur accédera à une URL qui contiendra notre jeton d'accès pour les appels d'API. Une fois que nous l'avons récupéré, il ne reste plus qu'à l'assigner à notre client. Une chose à prendre en compte est que le navigateur peut accéder à de nombreuses pages (mot de passe incorrect, utilisateur ayant rejeté notre application, etc.). Nous devons donc essayer d'obtenir le jeton au moment où nous sommes sûrs d'être sur la liste. page correcte.
Ajoutez l'événement parcouru au navigateur Web:
Ajoutez ensuite les lignes suivantes au gestionnaire d'événements:
Void privé BrowserNavitaged (expéditeur d'objet, System.Windows.Navigation.NavigationEventArgs e) FacebookOAuthResult oauthResult; // S'assurer que l'URL a bien le jeton d'accès if (! Client.TryParseOAuthCallbackUrl (e.Uri, out oauthResult)) retourn; // Vérification que l'utilisateur a accepté notre application, sinon, il suffit d'afficher l'erreur if (oauthResult.IsSuccess) // Résultat du processus client.AccessToken = oauthResult.AccessToken; // Masquer le navigateur Browser.Visibility = System.Windows.Visibility.Collapsed; Poster sur le Mur(); else // Erreur de processus MessageBox.Show (oauthResult.ErrorDescription); Browser.Visibility = System.Windows.Visibility.Collapsed;
Étape 12: Ajout d'une méthode de publication
Maintenant que nous avons accès, nous pouvons continuer et publier sur le mur de l'utilisateur. Créez une nouvelle méthode de void privée appelée postToWall et ajoutez les lignes suivantes:
void privé PostToWall () var parameters = nouveau dictionnaire(); paramètres ["message"] = Message.Text; client.PostAsync ("me / feed", paramètres);
Le seul paramètre que nous devons envoyer à cet appel est le message que nous allons publier sur le mur de l'utilisateur. Le message que nous enverrons sera le texte de notre zone de texte appelé "Message". Le message sera posté de manière asynchrone, donc l'événement PostCompleted sera appelé une fois la tâche terminée. Par conséquent, nous n'avons pas besoin d'ajouter un gestionnaire d'événements pour cela..
Étape 13: gestionnaire d'événement PostCompleted
Comme nous souhaitons simplement ajouter le gestionnaire d'événements une fois, nous l'ajouterons au constructeur, juste après l'initialisation de notre client. Dans le gestionnaire, vérifiez si la publication a été complétée avec succès ou s'il y a eu des erreurs lors des opérations, puis informez l'utilisateur:
// Constructeur public MainPage () InitializeComponent (); client = new FacebookClient (); client.PostCompleted + = (o, args) => // Vérification des erreurs if (args.Error! = null) Dispatcher.BeginInvoke (() => MessageBox.Show (args.Error.Message)); else Dispatcher.BeginInvoke (() => MessageBox.Show ("Message posté avec succès")); ;
Étape 14: Test du code
Avec ce code, notre application devrait déjà être capable de poster un message via le compte Facebook de l'utilisateur.
Exécutez l'application dans l'émulateur, essayez de publier le message de test souhaité et, à la fin, vous recevrez un message vous indiquant: "Message envoyé avec succès".
Ouvrez maintenant le compte Facebook dans un navigateur Web et vous devriez voir le message que vous venez de publier:
Toutes nos félicitations! Vous avez maintenant une application capable de se connecter à Facebook, mais nous pouvons encore améliorer certaines choses. Par exemple, nous pourrions essayer de sauvegarder le jeton d'accès afin que les utilisateurs ne soient pas obligés de se connecter à chaque fois qu'ils ouvrent l'application..
Étape 15: Enregistrement du jeton d'accès
Nous allons enregistrer le jeton pour les paramètres de l'application, mais pour cela, nous devons d'abord importer la bibliothèque IsolatedStorage:
using System.IO.IsolatedStorage;
Avec cette bibliothèque, nous pouvons maintenant continuer et créer la méthode:
private void SaveToken (jeton de chaîne) // S'il s'agit de la première sauvegarde, créez la clé sur ApplicationSettings et enregistrez le jeton. Sinon, modifiez simplement la clé si (! IsolatedStorageSettings.ApplicationSettings.Contains ("jeton")) IsolatedStorageSettings.ApplicationSettings. Ajouter ("jeton", jeton); sinon IsolatedStorageSettings.ApplicationSettings ["token"] = token; IsolatedStorageSettings.ApplicationSettings.Save ();
Étape 16: Récupération avec le jeton enregistré
Nous devons maintenant obtenir le jeton d’IsolatedStorage:
chaîne privée GetToken () // S'il n'y a pas de jeton en mémoire, il suffit de renvoyer null. Sinon, renvoyer le jeton sous forme de chaîne if (! IsolatedStorageSettings.ApplicationSettings.Contains ("jeton")) return null; sinon, renvoyer IsolatedStorageSettings.ApplicationSettings ["token"] en tant que chaîne;
Étape 17: Connexion avec le jeton enregistré
Avec ces deux méthodes, nous pouvons maintenant récupérer le jeton et l'assigner à notre client à chaque ouverture de l'application:
// Constructeur public MainPage () InitializeComponent (); client = new FacebookClient (); client.PostCompleted + = (o, args) => // Vérification des erreurs if (args.Error! = null) Dispatcher.BeginInvoke (() => MessageBox.Show (args.Error.Message)); else Dispatcher.BeginInvoke (() => MessageBox.Show ("Message posté avec succès")); ; // Vérification du jeton enregistré si (GetToken ()! = Null) client.AccessToken = GetToken ();
Étape 18: Vérification des jetons expirés
Une autre chose à prendre en compte est que l'utilisateur peut refuser les autorisations de notre application. Nous devons donc le détecter et demander à nouveau des autorisations. Cette détection doit être effectuée sur notre gestionnaire PostCompleted, car c'est là que Facebook nous prévient d'un problème avec notre publication. Ajoutez les lignes suivantes à notre gestionnaire PostCompleted:
client.PostCompleted + = (o, args) => // Vérification des erreurs si (args.Error! = null) // Erreur d'autorisation if (args.Error est FacebookOAuthException) Dispatcher.BeginInvoke (() => MessageBox .Show ("Erreur d'autorisation")); // Supprime le jeton actuel puisqu'il ne fonctionne plus. SaveToken (null); client.AccessToken = null; else Dispatcher.BeginInvoke (() => MessageBox.Show (args.Error.Message)); else Dispatcher.BeginInvoke (() => MessageBox.Show ("Message posté avec succès")); ;
Étape 19: Modifier le bouton Précédent
En guise de dernière étape, nous devons donner à l'utilisateur la possibilité de fermer le navigateur à tout moment.. Cette action doit être attribuée au bouton retour, il suffit donc de modifier le gestionnaire d’événements pour l’atteindre..
Ajoutez la méthode suivante à votre code:
protégé remplacer void OnBackKeyPress (System.ComponentModel.CancelEventArgs e) // Si le navigateur est visible, masquez-le et annulez l'événement de navigation si (Browser.Visibility == System.Windows.Visibility.Visible) Browser.Visibility = System.Windows .Visibility.Collapsed; e.Cancel = true; base.OnBackKeyPress (e);
Étape 20: le produit final
Testez à nouveau votre application, vous disposez maintenant d'une application Facebook pleinement opérationnelle.!
Où aller en partant d'ici
Facebook ne se limite pas à mettre à jour votre statut. Vous pouvez ajouter beaucoup d'autres choses à votre application, telles que le partage de photos, l'envoi de recommandations d'applications à des amis, etc. Le SDK Facebook C # offre de nombreuses possibilités d'intégration à Facebook. Pour en savoir plus, consultez leur page Web et commencez à rendre votre application plus sociale.!
Share
Accentsconagua
