Redirect after Successful Facebook Login with API
0
I'm using JSF / Primefaces to build a web app in Netbeans. I chose the FB API / JS SDK to allow users to log into the app.
I'd like to redirect the user to another page upon a successful login.
I've an XHTML file that kinda works. However, within the testAPI() function, I added a window.location.href = 'http://www.google.com'; to test the redirection. It won't work unless I manually refresh (F5) the page after logging in.
Here's the full XHTML, testAPI around line 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>
As you can see, the testAPI function has two lines commented, corresponding to the redirection I'm attempting (Google, as test).
I'm open to alternatives and I would totally understand if you suggest a better practice than what I'm doing.
Please let me know if you would like me to add more info, or another file.
Thank you a lot!
javascript jsf web-applications primefaces facebook-javascript-sdk
asked Nov 20 at 6:23
Daniel Segura
16528
add a comment |
0
I'm using JSF / Primefaces to build a web app in Netbeans. I chose the FB API / JS SDK to allow users to log into the app.
I'd like to redirect the user to another page upon a successful login.
I've an XHTML file that kinda works. However, within the testAPI() function, I added a window.location.href = 'http://www.google.com'; to test the redirection. It won't work unless I manually refresh (F5) the page after logging in.
Here's the full XHTML, testAPI around line 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>
As you can see, the testAPI function has two lines commented, corresponding to the redirection I'm attempting (Google, as test).
I'm open to alternatives and I would totally understand if you suggest a better practice than what I'm doing.
Please let me know if you would like me to add more info, or another file.
Thank you a lot!
javascript jsf web-applications primefaces facebook-javascript-sdk
asked Nov 20 at 6:23
Daniel Segura
16528
The title of your (x)html is PrimeFaces but there is nothing PrimeFaces related in this question. And besides facelets being used there is not even really jsf related things in here.
– Kukeltje
Nov 20 at 9:37
FB.getLoginStatususes a cached result, unless you explicitly instruct it to do otherwise.
– misorude
Nov 23 at 10:44
add a comment |
0
0
0
I'm using JSF / Primefaces to build a web app in Netbeans. I chose the FB API / JS SDK to allow users to log into the app.
I'd like to redirect the user to another page upon a successful login.
I've an XHTML file that kinda works. However, within the testAPI() function, I added a window.location.href = 'http://www.google.com'; to test the redirection. It won't work unless I manually refresh (F5) the page after logging in.
Here's the full XHTML, testAPI around line 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>
As you can see, the testAPI function has two lines commented, corresponding to the redirection I'm attempting (Google, as test).
I'm open to alternatives and I would totally understand if you suggest a better practice than what I'm doing.
Please let me know if you would like me to add more info, or another file.
Thank you a lot!
javascript jsf web-applications primefaces facebook-javascript-sdk
asked Nov 20 at 6:23
Daniel Segura
16528
I'm using JSF / Primefaces to build a web app in Netbeans. I chose the FB API / JS SDK to allow users to log into the app.
I'd like to redirect the user to another page upon a successful login.
I've an XHTML file that kinda works. However, within the testAPI() function, I added a window.location.href = 'http://www.google.com'; to test the redirection. It won't work unless I manually refresh (F5) the page after logging in.
Here's the full XHTML, testAPI around line 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>
As you can see, the testAPI function has two lines commented, corresponding to the redirection I'm attempting (Google, as test).
I'm open to alternatives and I would totally understand if you suggest a better practice than what I'm doing.
Please let me know if you would like me to add more info, or another file.
Thank you a lot!
javascript jsf web-applications primefaces facebook-javascript-sdk
javascript jsf web-applications primefaces facebook-javascript-sdk
asked Nov 20 at 6:23
Daniel Segura
16528
asked Nov 20 at 6:23
Daniel Segura
16528
asked Nov 20 at 6:23
Daniel Segura
16528
asked Nov 20 at 6:23
Daniel Segura
16528
asked Nov 20 at 6:23
Daniel Segura
16528
16528
The title of your (x)html is PrimeFaces but there is nothing PrimeFaces related in this question. And besides facelets being used there is not even really jsf related things in here.
– Kukeltje
Nov 20 at 9:37
FB.getLoginStatususes a cached result, unless you explicitly instruct it to do otherwise.
– misorude
Nov 23 at 10:44
add a comment |
The title of your (x)html is PrimeFaces but there is nothing PrimeFaces related in this question. And besides facelets being used there is not even really jsf related things in here.
– Kukeltje
Nov 20 at 9:37
FB.getLoginStatususes a cached result, unless you explicitly instruct it to do otherwise.
– misorude
Nov 23 at 10:44
The title of your (x)html is PrimeFaces but there is nothing PrimeFaces related in this question. And besides facelets being used there is not even really jsf related things in here.
– Kukeltje
Nov 20 at 9:37
The title of your (x)html is PrimeFaces but there is nothing PrimeFaces related in this question. And besides facelets being used there is not even really jsf related things in here.
– Kukeltje
Nov 20 at 9:37
FB.getLoginStatus uses a cached result, unless you explicitly instruct it to do otherwise.– misorude
Nov 23 at 10:44
FB.getLoginStatus uses a cached result, unless you explicitly instruct it to do otherwise.– misorude
Nov 23 at 10:44
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387353%2fredirect-after-successful-facebook-login-with-api%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387353%2fredirect-after-successful-facebook-login-with-api%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The title of your (x)html is PrimeFaces but there is nothing PrimeFaces related in this question. And besides facelets being used there is not even really jsf related things in here.
– Kukeltje
Nov 20 at 9:37
FB.getLoginStatususes a cached result, unless you explicitly instruct it to do otherwise.– misorude
Nov 23 at 10:44