坚持facebook javascript登录状态?

时间:2016-07-18 17:20:28

标签: facebook facebook-login

我创建了一个Facebook登录按钮组件,因为我需要非默认权限。 这里的问题是,登录后,我在页面刷新后再次注销。

我应该在登录后将内容存储在会话或cookie中吗?

组件

let FbLoginComponent = React.createClass ( {
    getInitialState() {
        return {
            is_loggedin      : 0, // 0 == not logged in.
            is_not_authorized: 0, // 0 == not authorized.
            intv             : 0
        }
    },
    componentDidMount() {
        // Check if user is logged in
        this.getLoginStatus ();
        console.log ( this.state );
    },
    getLoginStatus() {

        if ( typeof FB !== 'undefined' ) {
            clearInterval ( this.state.intv );

            FB.getLoginStatus ( ( r ) => {
                if ( r.status === 'connected' ) {
                    this.setState ( { is_loggedin: 1, is_not_authorized: 0 } );
                } else if ( r.status === 'not_authorized' ) {
                    this.setState ( { is_loggedin: 1, is_not_authorized: 1 } );
                } else {
                    this.setState ( { is_loggedin: 0, is_not_authorized: 0 } );
                }
            } );
        } else {
            console.log ( 'Oops, let try again later.' );
            if ( this.state.intv === 0 ) {
                let intv = setInterval ( this.getLoginStatus, 1000 );
                console.log ( 'intv: ' + intv );
                this.setState ( { intv } );
            }
        }
    },
    toggleLogin() {
        if ( this.state.is_loggedin === 1 ) {
            FB.logout ( ( r ) => {
                if ( typeof r.authResponse !== 'undefined' ) {
                    this.setState ( { is_loggedin: 0, is_not_authorized: 0 } );
                    console.log ( 'logged out.' );
                } else {
                    console.log ( 'User already logged out.' );
                }
            } );
        } else {
            FB.login ( ( r ) => {
                if ( r.status === 'connected' ) {
                    this.setState ( { is_loggedin: 1, is_not_authorized: 0 } );
                } else if ( r.status === 'not_authorized' ) {
                    this.setState ( { is_loggedin: 1, is_not_authorized: 1 } );
                } else {
                    this.setState ( { is_loggedin: 0, is_not_authorized: 0 } );
                }
            }, { scope: 'email, publish_actions' } );
        }
    },
    renderButton() {
        console.log ( 'rendering.......' );
        console.log ( this.state );
        if ( this.state.is_loggedin === 1 ) {
            return (
                <img src="/images/fb-logout-btn.jpg" onClick={this.toggleLogin} className="fb-login-btn"/>
            )
        } else {
            return (
                <img src="/images/fb-login-btn.jpg" onClick={this.toggleLogin} className="fb-login-btn"/>
            )
        }
    },
    render () {
        return (
            <div className="fb-login-component">
                {this.renderButton ()}
            </div>
        )
    }
} );

ReactDOM.render ( <FbLoginComponent/>, document.getElementById ( 'fb-login-btn-root' ) );

1 个答案:

答案 0 :(得分:0)

需要在cookie:true

中设置FB.init
FB.init ( {
    appId: '',
    xfbml: true,
    cookie:true,
    status: true,
    version: 'v2.7'
} );

请参阅https://www.sammyk.me/best-practice-for-facebook-login-with-the-javascript-sdk-and-php-sdk-v4-1了解更多信息。