使用API​​成功登录Facebook后重定向

时间:2018-11-20 06:23:49

标签: javascript jsf web-applications primefaces facebook-javascript-sdk

我正在使用JSF / Primefaces在Netbeans中构建一个Web应用程序。我选择了FB API / JS SDK,以允许用户登录该应用程序。

我想在成功登录后将用户重定向到另一个页面。

我有一个可以正常工作的XHTML文件。但是,在testAPI()函数中,我添加了window.location.href = 'http://www.google.com';来测试重定向。除非我在登录后手动刷新(F5)页面,否则它将无法正常工作。

这是完整的XHTML,testAPI围绕第91行:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:fb="http://www.facebook.com/2008/fbml">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces</title>
            </f:facet>
        </h:head>

        <h:body>
            <script>
                // This is called with the results from from FB.getLoginStatus().
                function statusChangeCallback(response) {
                    console.log('statusChangeCallback');
                    console.log(response);
                    // The response object is returned with a status field that lets the
                    // app know the current login status of the person.
                    // Full docs on the response object can be found in the documentation
                    // for FB.getLoginStatus().
                    if (response.status === 'connected') {
                        // Logged into your app and Facebook.


                       //window.location.href = 'http://www.google.com'; //Will take you to Google.
                       testAPI();
                    } else {
                        // The person is not logged into your app or we are unable to tell.
                        document.getElementById('status').innerHTML = 'Please log ' +
                                'into this app.';
                    }
                }

                // This function is called when someone finishes with the Login
                // Button.  See the onlogin handler attached to it in the sample
                // code below.
                function checkLoginState() {
                    FB.getLoginStatus(function (response) {
                        statusChangeCallback(response);
                    });
                }

                window.fbAsyncInit = function () {
                    FB.init({
                        appId: '1943608085935991',
                        cookie: true, // enable cookies to allow the server to access 
                        // the session
                        xfbml: true, // parse social plugins on this page
                        version: 'v3.2' // use graph api version 2.8
                    });

                    // Now that we've initialized the JavaScript SDK, we call 
                    // FB.getLoginStatus().  This function gets the state of the
                    // person visiting this page and can return one of three states to
                    // the callback you provide.  They can be:
                    //
                    // 1. Logged into your app ('connected')
                    // 2. Logged into Facebook, but not your app ('not_authorized')
                    // 3. Not logged into Facebook and can't tell if they are logged into
                    //    your app or not.
                    //
                    // These three cases are handled in the callback function.

                    FB.getLoginStatus(function (response) {
                        statusChangeCallback(response);
                    });

                };

                // 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 = "https://connect.facebook.net/en_US/sdk.js";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));

                // Here we run a very simple test of the Graph API after login is
                // successful.  See statusChangeCallback() for when this call is made.


                function testAPI() {
                    console.log('Welcome!  Fetching your information.... ');
                    FB.api('/me', function (response) {

                    //If I uncomment the line below to redirect, the console logs and
                    //the getElementById lines won't work
                    //window.location.href = 'http://www.google.com'; 
                    console.log('Successful login for: ' + response.name);
                    document.getElementById('status').innerHTML =
                        'Thanks for logging in, ' + response.name + '!';
                    //If I uncomment the line below, the test api will execute correctly
                    //except for the windo.location below:                
                     //window.location.href = 'http://www.google.com';                      
                    });
                }
            </script>
            <!--
              Below we include the Login Button social plugin. This button uses
              the JavaScript SDK to present a graphical Login button that triggers
              the FB.login() function when clicked.
            -->

            <!-- I'm trying out these two buttons! -->

            <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
            </fb:login-button>

            <fb:login-button autologoutlink="true"></fb:login-button>

            <div id="status">
            </div>
        </h:body>
    </f:view>
</html>

如您所见,testAPI函数有两行注释,分别对应于我正在尝试的重定向(Google,作为测试)。

我愿意接受替代方案,如果您提出的建议比我正在做的更好,我将完全理解。

如果您要我添加更多信息或其他文件,请告诉我。

非常感谢!

0 个答案:

没有答案