Exemple simple d'authentification contextuelle avec Facebook Graph API

Essayer d'obtenir Facebook pour authentifier mes utilisateurs via un popup javascript. À l'heure actuelle, j'ai:

<input type="button" value="Connect with Facebook" onclick="window.open('https://graph.facebook.com/oauth/authorize?client_id=XXXXXXXXXXX&redirect_uri=http://example.com/step2&display=popup')" /> 

Mais lorsque l'utilisateur se connecte via Facebook, la fenêtre contextuelle affiche la page d'accueil Facebook.com. Je voudrais que le popup authentifie l'utilisateur et disparaisse afin que je puisse commencer à récupérer les données utilisateur à partir du graphe api.

Existe-t-il un moyen meilleur / plus simple de le faire? Des exemples simples sont appréciés.

Je vous remercie.

Oauth2 dans facebook comporte deux étapes, appelez autoriser à obtenir un code, puis appelez access_token pour obtenir un jeton. Une façon de traiter la connexion pop:

Ouvrez l'URL de connexion dans une nouvelle fenêtre comme vous l'avez fait, lorsque le réseau de Facebook redirige vers votre URL dans la fenêtre contextuelle, vous définissez le cookie soit à l'aide du code côté serveur, soit en utilisant javascript pour capturer le paramètre de requête url, lorsque la page est chargée dans la fenêtre contextuelle, fermer La fenêtre immédiatement fenêtre.close.

Sur votre page principale, après votre code window.open, ajoutez le code JavaScript pour détecter si la fenêtre contextuelle est fermée et capturez le cookie:

 var signinWin; $('#FacebookBtn').click(function () { var pos = screenCenterPos(800, 500); signinWin = window.open("[URL]", "SignIn", "width=780,height=410,toolbar=0,scrollbars=0,status=0,resizable=0,location=0,menuBar=0,left=" + pos.x + ",top=" + pos.y); setTimeout(CheckLoginStatus, 2000); signinWin.focus(); return false; }); function CheckLoginStatus() { if (signinWin.closed) { $('#UserInfo').text($.cookie("some_cookie"); } else setTimeout(CheckLoginStatus, 1000); } 

Pourquoi pas simplement …

 function authorizeAppInPopup() { FB.login(function(response) { if (response.authResponse) { // User authorized app } else { // User cancelled login or did not fully authorize } }, {scope: 'publish_stream'}); } 

??? :]

https://developers.facebook.com/docs/reference/javascript/FB.login/

Cochez cet article: Créez une fenêtre d'authentification Facebook PopUp en utilisant PHP et javascript pour personnaliser l'authentification contextuelle.

Il pourrait être judicieux de faire à la fois une fonction de rappel à partir de la fenêtre enfant, comme le dit Avner, ainsi qu'une minuterie qui surveille la fermeture de la fenêtre. De cette façon, si la fenêtre Enfant est fermée sans une action spécifique, vous pouvez prendre les mesures appropriées sur la fenêtre Parent.

 **On Child** // Set oAuthToken from server side when it comes back from authenticating // and you have the token on the server side. var oAuthToken = ""; oAuthToken = "--STRING INSERTED BY SERVER SIDE CODE--"; window.opener.pbFromPopup(oAuthToken); **On Parent :** function CheckLoginStatus() { if (authWindow.closed) { // Handle error if authentication window is closed // without any action on Allow or Deny alert("window closed"); //location.href = "errorPage.aspx?error=authwinclosed; } else setTimeout(CheckLoginStatus, 1000); } function pbFromPopup(token) { // Function called from child window, // token is passed back from child authWindow.close(); // Put token in a hidden form field and submit the form to pass // it back to the server $("#authToken").val(token); $("#form1").submit(); }