1

我是使用 FB JS SDK 的新手,所以请多多包涵。

我目前正在尝试为网站设置 facebook 登录。我遇到的问题是,当我单击登录按钮并输入我的登录详细信息时,facebook 仅在我使用创建应用程序的帐户时才返回用户信息。当我使用不同的帐户时,response.authResponse 返回“未知”状态,我觉得这很不寻常。

我在这里提到的主要功能是this.loginUser。

我还注意到,当我在帐户上输入我的详细信息时,我在 facebook 上创建了该应用程序会通知我该应用程序想要访问...详细信息但是当我使用其他帐户时,登录面板将在登录提交时消失,而不是请求许可。

这是我的代码:

var FBUser = function(options) {

    this.userInfo  = null;
    var that = this;


    /* **********************************************
     * Default parameter options
     * **********************************************/
    this.options = $.extend({
        signInBtn: null,
        messageContainer: null,
        accountContainer: null
    }, options);


    /* **********************************************
     * Initialise functions
     * **********************************************/
    this.init = function (){

        //Load FB JS SDK
        this.checkIfLoggedIn();

        //Bind event handlers
        this.bindEventHandlers();
    };


    //Check if user is already logged in, if so return data
    this.checkIfLoggedIn = function(){

        // Additional init code here
        FB.getLoginStatus(function(response) {
            if (response.status === 'connected') {
                console.log("You logged in before so were retrieving your info...");

                // the user is logged in and has authenticated your app
                var uid = response.authResponse.userID;
                var accessToken = response.authResponse.accessToken;

                that.userInfo = response;
                that.showUserInfo();

                // connected
            } else if (response.status === 'not_authorized') {
                alert("not connected");
                // not_authorized
            } else {
                // not_logged_in
            }
        });
    };

    //Run event handlers to window
    this.bindEventHandlers = function() {

        if(that.options.signInBtn !== null){

            //Trigger fb Login
            $(document).on("click", that.options.signInBtn, function(){

                console.log("triggered get login");

                that.loginUser();
            });

        }else{
            console.log("Btn ID's are null");
        }
    };

    //Trigger FB login
    this.loginUser = function(){
        FB.login(function(response) {

            console.log("RESPONSE IS: ");
            console.log(response);

            if (response.authResponse) {

                var access_token = FB.getAuthResponse()['accessToken'];
                console.log('Access Token = '+ access_token);

                console.log('Welcome! You just logged in. Fetching your information.... ');
                that.userInfo = response;
                that.showUserInfo();

            } else {
                // sign out
                console.log('User does not grant extended permissions'); 
            }
        }, {scope: 'email, read_friendlists, user_birthday, user_location'});
    };

    //Show user info
    this.showUserInfo = function (){

        var info = this.userInfo;

        if(this.userInfo){
            FB.api('/me', function(info) {

                console.log('Good to see you, ' + info.name);
                console.log("USER DATA IS: ");
                console.log(info);

                //Append user info
                if(that.options.messageContainer){

                    $(that.options.accountContainer).show();
                    $(that.options.messageContainer).html(info.name)
                    .prepend('<img src="https://graph.facebook.com/'+info.id+'/picture" alt="'+info.name+'">');
                }else{
                    console.log("facebook container is null");
                }

                if(that.options.signInBtn){
                    $(that.options.signInBtn).hide();
                }else{
                    console.log("Login button is null");
                }
            });
        }
    };

    //Log user out
    this.FBLogout = function(){
        FB.logout(function(response) {

            console.log("user is now logged out");

            $(that.options.signInBtn).show();
            $(that.options.accountContainer).hide();
        });
    };

    return this.init();
};


/* **********************************************
 * Initialise FB app
 * **********************************************/
window.fbAsyncInit = function() {

    FB.init({
        appId      : '', // App ID
        channelUrl : ''
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true, // parse XFBML
        oauth      : true
    });

    FB.Event.subscribe('auth.statusChange', function(response) {
        alert('The status of the session is: ' + response.status);
    });

    /* **********************************************
     * Initialise FB user object
     * **********************************************/
    //Make sure document is ready before creating object due to jquery references
    $(document).ready(function (){

        //FB initialise options
        var FBUserOptions = {
            signInBtn: '#fb_login',
            messageContainer: '#welcome',
            accountContainer: '#account_area'
        };

        //create FB user object
        var fb_user = new FBUser(FBUserOptions);
    });
};


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

的HTML:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Facebook Login</title>

    <script type="text/javascript" src="static/js/plugins/jquery-1.9.1.min.js"></script>
    <script src="//connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript" src="static/js/fb_login.js?=v33"></script>

    <style type="text/css">
        body{font-family: Arial, Helvetica, sans-serif;}

        #account_area{display: none;}
    </style>
</head>
<body>
    <div id="fb-root"></div>

    <a href="#" id="fb_login">Login to facebook</a>

    <div id="account_area">
        <div id="welcome"></div>
        <a href="#" id="fb_sign_out">Sign out</a>
    </div>
</body>
</html>
4

0 回答 0