Develop Reference

chrome extension and Facebook login problems

I try to write a chrome extension which is triggered by visting a certain website. So far this works already. My extension users are from my web game where they login with their facebook account. For identifying the extension users with their game account I need to know their fb app scoped user id from my game.
So far I learned my background script is not able to use the facebook sdk for login because window.fbAsyncInit isn't called inside. I looked around for solutions and I found this page: http://brianmayer.com/2012/12/building-a-chrome-extension-that-connects-to-a-facebook-app/
He opens an invisible tab that contains an iframe. Inside of the iframe he calles the facebook login sdk from the webserver and then sends the user data with windows.postmessage to the parent. That sounds like the perfect solution for my problem. There is only one line that I don't understand what I have to add there:
parent.postMessage({connectStatus:"" + response.status + "", userID:"" + uid + "", accessToken:"" + at + ""}, "https://www.<PARENT_PAGE_DOMAIN>"); //This MUST match the root domain where the iFrame will be inserted, or the message won't get passed
What do I have to add in the field PARENT_PAGE_DOMAIN? I used the root domain of the page which is in the content_scripts/maches in the manifest file and I used the domain where the iframe page is hosted but I never receive the message in my background script

Did you try use this ?
enter link description here
First of all you need to get redirect url
Here is my code:
chrome.identity.launchWebAuthFlow({
url: AUTH_URL,
interactive: true
}, function(redirectURL) {
if (chrome.runtime.lastError) {
alert(chrome.runtime.lastError.message);
}
if(redirectURL){
var q = redirectURL.substr(redirectURL.indexOf('#')+1);
var parts = q.split('&');
for (var i = 0; i < parts.length; i++) {
var kv = parts[i].split('=');
if (kv[0] == 'access_token') {
var token = kv[1];
console.log(token)
// do something...
}
}
}
});

Chrome Extension: How to get user name?

I'm creating a Google chrome extension. For some functionality, I need user's system login name (no password). By using JavaScript, it is not possible to do so.
Some suggest NPAPI, but I have no idea about it, so I quit.
Next thing I'm trying to get user name in Chrome Browser. But still no success.
I try to use some thing like:
var currentUser;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(data) {
if (xhr.readyState == 1) {
currentUser = null;
if (xhr.status == 200)
{
var re = new RegExp(/<b class="?gb4"?>[\s]*([^<]+#[^<]+) <\/b>/i);
var m = re.exec(xhr.responseText);
if (m && m.length == 2) {
currentUser = m[1];
}
}
console.log("Currently logged user (on google.com): " + currentUser);
}
};
xhr.open('GET', ' https://myaccount.google.com/?pli=1', false);
xhr.send(); `
still no success.
My whole agenda is to get user name (either desktop login name or Chrome login name), and I'm not able to get it.
I need to send this username as parameter to my service, as user name works as primary key.

First off, you say that you need this login information to identify a user, using it as a primary key.
That automatically disqualifies system login names: they are not unique.
Now, let's get back to logged-in Chrome user. Google Account is reasonably unique.
There are two approaches to take here.
Chrome's chrome.identity API can provide both the email and, maybe better for your purposes, a unique ID for the account.
You will need "identity" and "identity.email" permissions. Then:
chrome.identity.getProfileUserInfo(function(userInfo) {
/* Use userInfo.email, or better (for privacy) userInfo.id
They will be empty if user is not signed in in Chrome */
});
An alternative approach is to use Google's OAuth on your service. Again, see the chrome.identity documentation.

Chrome.identity has a method getProfileUserInfo but it gives out the details of only primary user.
There is an alternative:
When you open chrome, you launch onto the home screen and you should be able to see a circle on the top right corner which shows image of logged in user. You can access that using DOM. Once you do that you will be able to get information about all the logged in users.

getting access token from Facebook - alloy titanium

I have built an app using titanium alloy
index.js
// Use the Alloy.Globals.Facebook namespace to make Facebook module API calls
var facebookModule = Alloy.Globals.Facebook;
//set facebook app id
facebookModule.appid = Ti.App.Properties.getString("ti.facebook.appid");
//set permissions i.e what data I want
facebookModule.permissions = ['user_friends','user_photos'];
// Do not force a facebook html popover but use the native dialog if possible
facebookModule.forceDialogAuth = false;
//invoke method onto button from module
$.fbButton.style = facebookModule.BUTTON_STYLE_WIDE;
$.index.open();
In my index.js controller I have this segment of code, it executes and I am presented with a log in screen.
I then fall into 2 problems:
1) "FB Session: Should only be used from a single thread"
2) I am unable to get the access token.
Not sure how to resolve both as the inbuilt login function has it's own event handler.
Cheers

Like you said, the inbuilt login function does have it's own handler.. so you should listen for event changes, something like this:
facebookModule.addEventListener('login', function(e) {
if (e.success) {
Ti.App.Properties.setString('face_token', facebookModule.getAccessToken());
// DO SOMETHING WITH THE TOKEN - open new window, auth the user...
}
});
If you try to get the access token BEFORE the login event is fired, you'll end up bad.
Now about the single thread thing.. I did run into this a while back.. I'm not sure exactly what I did to solve it, but I think it might be related to opening multiple windows or event allowing more than one call to the facebook API. Try to check if you are closing your windows and if the login function is being called more than once.
Let me know if that works for you. Good luck.

Google+ login via Sign In button: Trouble with persisting session across different pages, and displaying Login/Logout buttons

My page /login.php displays the signin button and signs you in. So far I have managed to:
Include relevant code in common files so that G+ signin code is present in all pages
Moved stuff from the button element itself to tags in the header
Instead of keeping any significant logic in my signinCallback, I attached a callback function that is called on each page load, like this:
po.src = 'https://apis.google.com/js/client:plusone.js?onload=OnLoadCallback';
I then made that function look like this:
function OnLoadCallback(){
var sessionParams = {
'client_id': 'myapp-id-here',
'session_state': null
}
gapi.auth.checkSessionState(sessionParams, function(stateMatched){
if(stateMatched === true){
console.log("You do not seem to be logged in!");
}else{
console.log("You should be logged in!");
// Trigger request to get the email address.
gapi.client.load('plus','v1', loadProfile);
if(window.location.pathname === '/login.php'){
toggleElement('signin-button');
window.location = "/";
}
}
});
}
I found this bit of code regarding the session state in some article but I'm not sure it works as it's supposed to. In Chrome it seems more or less OK but in FF, when I first tried it, it should give me "not logged" in my console. Since I was logged in FF with my google account (but not in my app!), it seemed to recognize me as logged in, or at least my session was anything but the null (as stated in the code).
So, what should I use instead of "null" when it comes to determining session state?

Windows Store HTML app with popup window

I'm wrapping a web app in a Windows Store app shell using a x-ms-webview. This works fine, but I have one problem. I use PayPal and since PayPal doesn't allow to be iframed I need to open PayPal in a new browser window.
On regular browsers this isn't a problem. The window open and when the user returns from PayPal I can a callback on "opener" and update the users account.
But when doing this in a Windows Store app the window.open triggers IE to launch. The problem is to return to my app and let it know that the user finished the transaction.
My first idea was just to use a URI activation. This kind of works, but I having trouble knowing if the PayPal page was launch from a regular browser or an app. I also think it is confusing for the user to be taken to another app to make the purchase.
I would prefer to have the window open in my app, but I'm not sure how I would open open a new x-ms-webview as a modal window overlapping existing webview.
What is the best way to communicate from the current web view and the app?
Can I use postMessage to send messages between the app and the x-ms-webview even though the src of the web view is a http hosted site?
Thank you for your help.

I found a solution to this.
First, you will need to use a https url for the embedded site. The reason for this is that the solution include postMessage and invokeScriptAsync.
First, my markup in my app looks something like this to have one webview for the app and one web view for the PayPal popup.
<x-ms-webview id="webview" src="https://myapp"></x-ms-webview>
<div id="paypalContainer">
<div class="paypal-header"><button id="paypalClose" type="reset">Close</button></div>
<div class="paypal-body"><x-ms-webview id="paypalWebView" src="about:blank"></x-ms-webview></div>
</div>
Then, when the web app is ready to use PayPal, I use window.external.notify to send a message to the Windows Store app.
if (window.external && 'notify' in window.external) {
window.external.notify(JSON.stringify({ action: 'paypal' }));
}
The windows store app listens for Script Notify events and displays the paypalWebView.
webview.addEventListener("MSWebViewScriptNotify", scriptNotify);
function scriptNotify(e) {
var data = JSON.parse(e.value);
if (data.action === "paypal") {
var loading = document.getElementById("loading-indicator");
var container = document.getElementById("paypalContainer");
var paypalWebView = document.getElementById("paypalWebView");
var paypalClose = document.getElementById("paypalClose");
if (paypalWebView.src === "about:blank") {
paypalWebView.addEventListener('MSWebViewNavigationCompleted', function (e) {
loading.classList.remove('loading');
var successUrl = '/paypal/success';
if (event.target.src.indexOf(successUrl) !== -1) {
var operation = webview.invokeScriptAsync("updateUser");
operation.oncomplete = function () {
(new Windows.UI.Popups.MessageDialog("Your account is refreshed", "")).showAsync().done();
};
operation.start();
}
});
paypalWebView.addEventListener('MSWebViewNavigationStarting', function (e) {
console.log("Started loading");
loading.classList.add('loading');
});
paypalClose.addEventListener('click', function () {
container.classList.remove("visible");
});
}
paypalWebView.src = "https://myapp/paypal/";
container.classList.add("visible");
}
}
So, basically, when the script notify event fires, I parse the sent json string to an object and check what kind of action it is. If it's the first time I run this I setup some naviation event handlers that check if the web view reach the Success page. If we have, I use incokeScriptAsync to let the web app know that we're done so it can refresh the user account the new payment.
I think you can use a similar solution for authentication and just check your your return URL after authenticating.
Hope this helps!