Ví dụ đơn giản về xác thực cửa sổ bật lên với Facebook Graph API

Question

Cố gắng truy cập Facebook để xác thực người dùng của tôi thông qua cửa sổ bật lên javascript. Ngay bây giờ, tôi có:

<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')" /> 

Nhưng khi người dùng đăng nhập qua Facebook, cửa sổ bật lên chỉ hiển thị trang chủ Facebook.com. Tôi muốn cho popup để xác thực người dùng và đi xa để tôi có thể bắt đầu lấy dữ liệu người dùng từ api đồ thị.

Có cách nào tốt hơn/dễ dàng hơn để thực hiện việc này không? Các ví dụ đơn giản được đánh giá cao.

Cảm ơn bạn.

Answer 1

oauth2 trong facebook liên quan đến hai bước, gọi ủy quyền để nhận mã, sau đó gọi access_token để nhận mã thông báo. Một cách để xử lý thông tin đăng nhập pop:

url đăng nhập mở trong cửa sổ mới giống như bạn đã làm, khi chuyển hướng trở lại url của bạn trong cửa sổ bật lên, bạn đặt cookie hoặc thông qua mã phía máy chủ hoặc sử dụng javascript nắm bắt tham số truy vấn url, khi trang được tải trong cửa sổ bật lên, đóng cửa sổ ngay lập tức window.close.

Trên trang chính của bạn, sau khi mã window.open của bạn, thêm mã JavaScript để phát hiện nếu cửa sổ bật lên được đóng lại và nắm bắt được 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); 
} 

Answer 2

Thanh toán bài viết này: Create Facebook PopUp Authentication Window using PHP and javascript để xác thực tùy chỉnh popup.

Answer 3

Có thể là một ý tưởng hay khi thực hiện cả chức năng gọi lại từ cửa sổ Con khi Avner nói cũng như bộ hẹn giờ đồng hồ đóng cửa sổ. Bằng cách đó, nếu cửa sổ Con bị đóng mà không có hành động cụ thể, bạn có thể thực hiện hành động thích hợp trên cửa sổ Chính.

**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(); 
     } 

Answer 4

Tại sao không chỉ đơn giản là ...

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/