Passer au contenu principal
Ce tutoriel est conçu pour vous guider dans l’authentification PlayFab à l’aide de Facebook et de HTML5/JavaScript.

Exigences

Si vous n’êtes pas certain de répondre aux exigences de cette activité, consultez le tutoriel Exécution d’un serveur HTTP pour les tests.

Serveur et domaine

Dans le cadre des exigences pour configurer votre authentification PlayFab, vous devez disposer d’un serveur avec un domaine valide. Si vous n’avez pas encore de domaine inscrit ni de serveur Web distant, suivez notre tutoriel Exécution d’un serveur HTTP pour les tests pour exécuter un serveur Web local avec un nom de domaine valide. Tout au long de ce guide, nous supposerons que votre domaine est ['http://playfab.example'](http://playfab.example).

Inscription d’une application Facebook

Commencez par accéder au portail des développeurs Facebook.
  1. Sélectionnez le bouton My Apps.
Facebook - ajouter une nouvelle application
  1. Sélectionnez Create App pour créer une nouvelle application.
Facebook - créer une nouvelle application Une nouvelle fenêtre contextuelle Application s’ouvre.
  1. Entrez un nom pour votre Application dans le champ sous Add an app name.
  2. Entrez une adresse courriel de contact dans le champ sous App contact email.
  3. Sélectionnez le bouton Create app pour enregistrer.
Assurez-vous de choisir votre propre nom d’application et votre propre adresse courriel uniques, comme dans l’exemple ci-dessous.
Facebook - nouvel ID d'application
  1. Accédez à l’onglet Settings.
  2. Sélectionnez le sous-onglet Basic.
  3. Repérez votre App ID.
Copiez votre App ID dans un endroit sûr; nous l’utiliserons plus tard pour configurer le Facebook SDK.
Facebook - enregistrer l'ID d'application
  1. Allez dans le menu à gauche de votre écran et sélectionnez l’élément Products.
  2. Repérez Configure dans la zone Facebook Login et sélectionnez Settings dans le menu déroulant.
Facebook Login - démarrer La page devrait s’ouvrir et afficher l’exemple ci-dessous.
  1. Vérifiez que Client OAuth et Web OAuth sont tous deux activés (marqués Yes).
  2. Définissez Valid OAuth redirect URIs sur l’URI de votre propre page d’authentification.
Dans votre cas, ce sera playfab.example.
Paramètres du produit Facebook Login Dans l’écran Client OAuth Settings :
  1. Vérifiez que Login with the JavaScript SDK est activé (marqué Yes)
  2. Définissez Valid OAuth redirect URIs sur l’URI de votre propre page d’authentification.
Dans votre cas, ce sera playfab.example.
  1. Sélectionnez Save Changes pour valider.
Facebook - définir l'URI de redirection OAuth Sur la page Application Manager :
  • Ouvrez Settings/Basic (1) dans votre menu.
  • Sélectionnez le bouton Add Platform (2).
Facebook Application Manager - Add Platform Une fenêtre contextuelle s’affiche à l’écran :
  1. Sélectionnez l’icône Website.
  2. Sélectionnez ensuite Next.
Facebook - options de plateforme Website Le panneau de configuration Website devrait maintenant apparaître.
  1. Dans le champ Site URL, entrez l’URL de votre page d’authentification (dans votre cas, playfab.example).
  2. Sélectionnez Save changes pour valider.
Panneau de configuration Website de Facebook

Test

Utilisez le fichier HTML suivant pour tester votre authentification PlayFab avec Facebook.
Assurez-vous de remplacer YOUR-APPLICATION-ID et YOUR-PLAYFAB-TITLE par vos propres valeurs.
Demandez ce fichier à votre serveur en utilisant le domaine que vous avez configuré lors de la configuration de l’application Facebook (playfab.example dans notre cas).
  1. Une fois la page Facebook Auth Example ouverte, sélectionnez le bouton Log In with Facebook.
  2. Suivez les instructions de Facebook dans la fenêtre contextuelle.
Observez la sortie. Exemple d'authentification Facebook Vous obtiendrez un ticket de session PlayFab. À ce stade, vous avez configuré avec succès l’authentification PlayFab et Facebook à l’aide de HTML5 et JavaScript.
Dernière modification le 6 octobre 2026