请求帮助让我了解Facebook登录网站

时间:2013-05-09 13:03:28

标签: facebook facebook-graph-api user-interface login

我想要在网站上实现“登录Facebook”,但我很难掌握整个概念,如果有人能帮助我,我会非常感激。

我一直在阅读此链接https://developers.facebook.com/docs/facebook-login/下的文档数日,但我仍然没有“获取它”。

让我们从...开始......

在文档中,它说JS SDK最容易使用(对于我不知道的人),但我认为NON JS版本会更好更快(我更容易理解)但我不知道知道要做什么。我被“困住”了

我的主要问题是我不明白我如何能够将自动递增ID以及该人的姓名和名字插入到我的数据库中。在我可以指定数据库,表格或列的Facebook代码中没有或者没有,所以这些数据如何被允许进入我的数据库以记录用户?

我在我的网站上有一个分类广告,我正在尝试创建一个FB登录名,但正如我上面所说,我被困住并可以使用帮助,因为我只有关于PHP和MySql的中级知识< / p>

1 个答案:

答案 0 :(得分:0)

就像在评论中讨论的那样,这里是使用JS SDK的例子

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <!-- jQuery library, makes things easier. -->
        <title>FB example</title>
    </head>
    <body>
    <div id="fb-root"></div>
    <script>
        window.fbAsyncInit = function() {
            // init the FB JS SDK
            FB.init({
                appId      : YOUR_APP_ID,                        // App ID from the app dashboard
                status     : true,                                 // Check Facebook Login status
                xfbml      : true                                  // Look for social plugins on the page
            });
// Additional initialization code such as adding Event Listeners goes here
    };

    // Load the SDK asynchronously
    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));


    /*
        This function gets information about user and alrets user's name.
     */
    function getUserInfo() {
    FB.api('/me', function(response) {
        $.ajax({
            url: "ajax.php", //url to send ajax request to
            data: {
                json: response, // Key => value pairs of items to send
            },
            success: function(ajaxResponse) { // upon successful request
                alert(ajaxResponse); //Alert whatever response we got.
            }
        })
    })
}

    /*
        This function gets the login status of user
     */
    function getLoginStatus() {
        FB.getLoginStatus(function(response) {
            if (response.status === 'connected') { //User is connected to Facebook and authorized your app
                getUserInfo();
            } else if (response.status === 'not_authorized') { //User is connected to Facebook, but hasn't authorized your app
                login();
            } else { //User is not connected to Facebook
                login();
            }
        });
    }

    /*
        Function promts user to log in and asks for permissions
     */
    function login() {
        FB.login(function(response) {
            if (response.authResponse) {
                getUserInfo();
            } else {
                alert('User cancelled login or did not fully authorize.');
            }
        }, {scope: 'email'}); // Comma separated permissions
    }

</script>

<a href="javascript:getLoginStatus()"/>Login</a>

</body>
</html>

这是一个非常简单的例子。在页面上,您将看到“登录”链接。按下它后,您将被要求登录(如果您没有登录Facebook,或者您尚未授权应用程序),或者它将显示带有您姓名的弹出窗口。大部分代码都来自JavaScript SDK documentation

修改

要将用户数据添加到数据库,我建议从getUserInfo()函数调用AJAX。使用对某个php文件的ajax调用替换警报部分,您将创建该文件并将其传递给response变量(其中包含有关用户的数据,如response.nameresponse.email)的数据。在php文件中,将您获取的信息插入数据库。

另一个编辑:

我再次更新了代码,即我添加了jQuery库(我更容易在其中进行ajax调用,尽管它与普通JS没有太大区别)。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

更新getUserInfo()函数以向ajax.php发出ajax请求。

ajax.php我只做了一行:

print_r($_REQUEST['json']);

这将打印出通过ajax发送的任何数据,您将在弹出窗口中看到它。下一步将检查您获得的信息,并采取您需要的任何信息($_REQUEST['json']是简单数组),并将其插入数据库。