I'm working on a responsive website that require the user to authenticate with Facebook.
I've set up the Facebook JS SDK, and the login and login-success callback. The setup I have works great on desktop, but on iPhone (seems to work on iPad!) I'm having an issue I am yet to resolve.
When tapping the Login button, the user is brought to a new tab that asks the user to log in. After the user has entered his/her credentials, the tab is closed, but Safari does not reopen my page. Instead, Safari sits in the "tab selection" screen with my page highlighted. The user has to explicitly re-open my page by tapping the tab. When tapping the tab, it doesn't seem to fire the authResponseChange consistently.
Please note that if I make sure that Safari on iPhone has no tabs open except my page, then I am automatically directed back to it (as expected by the Safari app's design) and the site functions correctly.
<div id="fb-root"></div>
<script>
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_US/all.js', function() {
FB.init({
appId : 'xxx',
xfbml : true,
status : true,
cookie : true
});
});
});
$("#login_button").bind("vclick", function() {
// Require explicit login
FB.Event.subscribe("auth.authResponseChange", function(response) {
if (response.status === "connected") {
// Perform API calls and display more of the page ...
// $.get("https://graph.facebook.com/me/friends?access_token=")
// FB.api("/me/friends", function(data) {});
}
});
FB.login(function(response) {}, {scope: 'email,friends_birthday,friends_hometown'});
});
</script>
Related
I'm developing my first chrome extension and I'm stuck with a "session restore" problem. At the begging of the developement when a user log in to my extension and close the popup, when he open the plugin again he had to login again.
I've used chrome.storage.sync to be able to save the session infomation to make the user to be still logged in and if he close the plugin, and his session is still active he will be redirected to the welcome page. But how can I check at the extension's startup in what page of the plugin the user was and bring him back to that page?
For example, if a user is logged and was on the "choose a book" section, how can i make the plugin open at "choose a book" section and not in "welcome" section?
Angular 2 for client side
NodeJs for server side
Consider that the session object is something like:
{
logged: true,
last_section: 'books'
}
When the user visits the books section, save it.
// this code goes inside some listener for visiting a section
chrome.storage.sync.get('session', function (items) {
const session = items.session || {}
session.last_section = 'books'
chrome.storage.sync.set({ session })
})
At the beginning of the popup script, you can simply call chrome.storage.sync.get to get the last session object state.
chrome.storage.sync.get('session', function (items) {
const session = items.session
if (session && session.logged) {
if (session.last_section === 'books') {
// render books section
}
if (session.last_section === 'welcome') {
// render welcome section
}
}
})
I'm using the express-socket.io-session on my app. I've integrated it and it works properly. There is only one case though.
Have a look at the following code:
io.use(...);
io.sockets.on("connection", function (socket) {
socket.onVerify = (msg, fn) => {
socket.on(msg, (data) => {
console.log(socket.handshake.session.passport);
if (typeof socket.handshake.session.passport === "undefined") {
socket.emit("auth failed emit", {
msg: "Please login via the website"
});
return false;
}
fn(data, socket.handshake.session);
});
}
socket.onVerify("chat message", function (req, session) {
Chat.publish(session.email, req.msg);
});
});
Basically, on each socket request, I verify socket.handshake.session.passport being defined, which means user is logged in.
It works in this case:
I open a browser tab, login with my credentials, get redirected to /game endpoint where my game loads and connects to socket.io
I click on "logout" button, get redirected to /game endpoint, game tells me "I need to authorize."
However, it doesn't work in this case:
I open a browser tab, login with my credentials, get redirected to /game endpoint where my game loads and connects to socket.io
I click on "logout" button ON A NEW TAB, and logout in that tab.
I switch back to main tab, and game is still online.
I added a debug in my code (console.log(socket.handshake.session.passport)) and it shows { user: 1 } although I logged out already so it must be undefined
For some reason, socket.io handshake/session doesn't recognize it, so I probably need to refresh it on certain cases.
Is there any way to do it with socket.io?
This is just a try to resolve your issue, i'm not really sure it would work. But you could try something like that :
app.get("/logout", function(req,res){
//do other logging out stuff
sockets.disconnectUser(req.session.user_id);
}
// Disconnect User function
sockets.disconnectUser = function(user_id){
sockets.socket(users[user_id]).disconnect();
}
Like described here : Destroying a handshake after logout. socket.io
Hi I am in need to show a popup just once during installation of the extension asking for username and a log in button.When the user first clicks on the extension icon,a pop up should appear asking for username.when the user enters his username correctly,and clicks login,the pop up should be closed and then when the user again clicks on the extension icon,it should navigate to a website.What I did is when the user enters his username,it is stored in the localStorage,Each time when the user clicks on the extension icon,it checks for whether there is username in localstorage.if yes,then it should navigate to website otherwise,it should show the popup again.How can this be done?Please help me.
Here is my background.js
chrome.browserAction.onClicked.addListener(function(tab) {
if(!localStorage.username){
chrome.browserAction.setPopup({
popup: "userinfo.html"
});
}
else{//navigate to website }
});
Here the problem is that when the user first clicks on the icon,the pop up appears and the user enters his name and login.Next time when i click it again shows the pop up only.IT is not navigating to the website.Until i reload the extension,it shows only the popup on the onclick event.Anyone please help me.
You could register a listener for the chrome.browserAction.onClicked event that checks if the username is stored in localStorage and:
if it is there navigate to the website.
if it is not there navigate to userinfo.html (either in a new tab or opening a new popu window (using chrome.windows.create()), which enables you to define its location and size).
when submitting the username and password in your userinfo.html page you can store them in localStorage and log the user in.
E.g.:
In background.js:
var myWebsite = 'https://your.domain.goes/here';
var myUserinfo = chrome.extension.getURL('userinfo.html');
chrome.browserAction.onClicked.addListener(function(tab) {
if (localStorage.username) {
/* Navigate to website */
chrome.tabs.create({ url: myWebsite });
} else {
/* Navigate to `userifo.html` */
chrome.tabs.create({ url: myUserinfo });
}
});
chrome.runtime.onMessage.addListener(function(msg, sender) {
if ((msg.action === 'saveCredentials')
&& msg.user && msg.pass) {
/* Store the credentials in localStorage */
localStorage.username = user;
localStorage.password = pass;
/* For a better user-experience, let's
* navigate the user to the website right away */
chrome.tabs.updated(sender.tab.id, { url: myWebsite });
}
});
In userinfo.html's JS:
// ...once the userinfo is "submitted"
var user = ...;
var pass = ...;
chrome.runtime.sendMessage({
action: 'saveCredentials',
user: user,
pass: pass
});
I have a own page on my server where people can download a track of my own.
My idea is to put a like button on that page to my Facebook page. People must first hit the like button, and after that they can download the track. Probably this must fix with a form with name, e-mail and the like button that they have to click! After submit, there must be something that will check if the user realy hit the like button before they get the page with the special content (download link)
So the idea is if it is possible that there's a check that the page is liked before they can submit and get the download button!
Can someone tell me if this is possible and can someone help me with the code?
I have no other Facebook social plugins! I only want to use a like button!
You can check if someone clicks the like button using the Javascript SDK
You can either use the social plugin or the XFBML button,
Implementing the XFBML button and the Javascript SDK you can find here:
https://developers.facebook.com/docs/reference/javascript/
Then you can create an event listener that listens if an user clicks the like button:
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
Using this you can store if someone clicked the like button then save that to either your database or in a session and let the user download their track.
Your code would be something like this
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.stackoverflow.com" data-send="false" data-width="450" data-show-faces="true"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
It is possible to do what you're asking. You may find this SO question and answer useful:
How to check if a user likes my Facebook Page or URL using Facebook's API
I'm trying to pass data that is saved in sessionStorage from background.html to popup.html
background.html:
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
data = sessionStorage.getItem(request.tabId);
alert(data);
sendResponse({ data: data });
});
and in popup.html:
chrome.tabs.getSelected(null, function(tab) {
chrome.extension.sendRequest({ tabId: tab.id }, function(response) {
alert(response.data);
});
});
The popup is opened by a pageAction button, when I click the button I get an alert box with "null" on the popup and then an alert box with the data that I stored in sessionStorage on the background!
Any ideas how to fix this?
You don't need to use message/request APIs. I think this response may help you.
You also don't need sessionStorage, just store your data in a global variable of the background page. It will persist until the browser is closed or until the extension is restarted.
So, here is how I would rewrite your code:
background.html:
var data = {}; // Object storing data indexed by tab id
and in popup.html:
chrome.tabs.getSelected(null, function(tab) {
alert(chrome.extension.getBackgroundPage().data[tab.id]);
});
Note that chrome.tabs.getSelected is deprecated since Chrome 16, so popup code should be:
chrome.windows.getCurrent(function(win) {
chrome.tabs.query({'windowId': win.id, 'active': true}, function(tabArray) {
alert(chrome.extension.getBackgroundPage().data[tabArray[0].id]);
});
});
Well, I've done something dumb.
I inspected the background page by opening chrome-extension://[extension-id]/background.html in a tab instead of clicking on "inspect active views: background.html" in the extensions management page. This caused the tab to catch the request and call sendResponse, but the popup expected the REAL background page to call sendResponse (and if I understand Google's documentation regarding message passing, the fact that sendResponse was called twice is root of the problem, because the first call clears the request object)