Handling the google interactive post onclick via javascript - google-plus

My scenario is as follows:
Our application is building on top of google-plus and takes advantage of the google-plus connections.
Is this supported with Interactive posts? I want to:
Block showing the interactive post dialog on the button click if a certain condition is not met
Perform a certain action once the button to show the dialog is clicked - onClick works for this but I could not find documentation on it.
var options = {
contenturl: url,
clientid: googleappid,
cookiepolicy: "single_host_origin",
prefilltext: text,
calltoactionlabel: "START",
calltoactionurl: ctaurl,
recipients: connectionid,
onClick: specialFunctionToRunOnClick(params)
};
gapi.interactivepost.render('submitInvitationongoogle', options);
Is there something like beforeSend that can prevent the click from firing?

There currently is not an API for testing whether the user has created an interactive post on their stream. You can know when the interactive post was rendered to the user by logging the API calls for gapi.interactivepost.render and can use the call-to-action url for testing when the recipient clicked the button. You can also look at their public stream activity to test whether the post was shared publicly but this is probably not what you want.

Related

Intercepting a HTTP request in the middle of a test in Testcafe

I am writing a functional test using Testcafe. The test scenario is as below,
There is a toggle button that activates/deactivates based on an API call
When I open my application, an API call is made that returns a value ON/OFF; based on that, the toggle switch is activated or deactivated.
I want to intercept that call when the user clicks on that toggle button again.
Long story short:
User logs in
XYZ API is called made, and it gives the response ON
Based on that response, the toggle button is activated
Then user will click on the toggle button
Now the XYZ API should be called again which will return OFF
await t.navigateTo(`${url}`);
await t
.click(myPage.toggleSwitch)
.addRequestHooks(myPage.xyzAPI.respond([{ valueBar: "ON" }
]))
.expect(myPage.toggleSwitch.checked)
.eql(true);
});```
I want to intercept that call when the user clicks on that toggle button again.
You need to add the target request hook before the click action. Also, before the click action, the actions chain should be broken.
await t.navigateTo(`${url}`);
await t.addRequestHooks(<hook that caught the API calls>);
await t
.click(myPage.toggleSwitch)
.expect(myPage.toggleSwitch.checked).eql(true);

How to communicate PHP with PhantomJS for solving Captchas

The problem I'd like to solve is the following:
I need to manage an external web page through PHP, for example, login and then change the profile info on the external web after sending an ajax request on my own web.
For this, I'm calling PhantomJS from PHP to do those tasks, but before login to the external web I need to fill the captcha input. So, I'd like to send back the Captcha image to my web, write the correct code and send it back to the WebPage module of PhantomJS to login using that code.
In other words, I need a 'syncronous' program like this:
1) PHP -> Send a request to login and obtain the captcha image.
2) PhantomJS -> Open a WebPage instance and render the captcha code to an image.
3) PHP -> Get the captcha image, show it to an user and send a text input to PhantomJS.
4) PhantomJS -> Get the text code from PHP, fill the captcha input using 'page.evaluate' and login. Send to PHP some data ('Login successfull', 'Login failed', etc)
5) PHP -> Get the callback and send another task or data.
callback = 'Login successfull' --> Change profile picture or update user info.
callback = 'Login failed' --> Try to login again (like point 1)
Etc...
There are many things I don't know how to handle. For example:
1) How could I keep the WebPage module open and waiting for the text code of the captcha? If I close it, a new captcha code will appear next time, and I need a way to wait the code and get it. Do I need to start a server for this?
2)Get the captcha image from PHP isn't a problem (because of 'page.render'), but how I could send a text back to the WebPage instance of PhantomJS? I think is better to send data bidirectionally between both systems. Again, do I need a server?
I think I need a socket server in PhantomJS (how can this be done?). This server should have the WebPage instance that I need to keep open, but I'm not completely sure about this.
Thanks.
I recently published a project that gives PHP access to a browser. Get it here: https://github.com/merlinthemagic/MTS, Under the hood is an instance of PhantomJS.
The main issue is keeping a resource alive after initial execution. Here is how i propose you do it.
After downloading and setup you would simply use the following code:
Start of "Setup" session:
if (isset($_POST['sessionUID']) === false) {
//set the execution timeout long enough to cover the entire process (setup and working time), it dictates when phantomJS shuts down automatically.
ini_set('max_execution_time', 300);
//open the login page:
$myUrl = "http://www.example.com";
$browserObj = \MTS\Factories::getDevices()->getLocalHost()->getBrowser('phantomjs');
//allow the page to live after php shuts down.
$browserObj->setKeepalive(true);
$windowObj = $browserObj->getNewWindow($myUrl);
//find the username input box, here it has id=username
$windowObj->mouseEventOnElement("[id=username]", 'leftclick');
//type your username
$windowObj->sendKeyPresses("yourUsername");
//find the password input box, here it has id=passwd
$windowObj->mouseEventOnElement("[id=passwd]", 'leftclick');
//type your password
$windowObj->sendKeyPresses("yourPassword");
//click on the login button, here it has id=login
$windowObj->mouseEventOnElement("[id=login]", 'leftclick');
//i assume this is when you encounter the CAPTCHA image
//find the CAPTCHA image element, here it has id=captchaImage
$element = $windowObj->getElement("[id=captchaImage]");
$loc = $element['location'];
//tell the screenshot to only get the CAPTCHA image
$windowObj->setRasterSize($loc['top'], $loc['left'], ($loc['right'] - $loc['left']), ($loc['bottom'] - $loc['top']));
$imageData = $windowObj->screenshot("png");
$sessionUID = uniqid();
$saveWindowObj = serialize($windowObj);
//save the window object so we can pick it up again
file_put_contents("/tmp/" . $sessionUID, $saveWindowObj);
}
//now render the CAPTCHA image to the user as part of a form they can resubmit and make sure to keep the $sessionUId as a hidden variable in the form on the page
End of the "Setup" session, php shuts down here.
Start of "Working" session:
We assume the user submits the form and it is a post containing the $sessionUID and the text string for CAPTCHA.
if (isset($_POST['sessionUID']) === true && isset($_POST['captchaTxt']) === true) {
$savedWindow = file_get_contents("/tmp/" . $sessionUID);
//delete the saved object
unlink("/tmp/" . $sessionUID);
//bring back the object to life
$windowObj = unserialize($savedWindow);
//make sure the browser is now shutdown on exit
$windowObj->getBrowser()->setKeepalive(false);
//find the CAPTCHA input box, here it has id=captchaInput
$windowObj->mouseEventOnElement("[id=captchaInput]", 'leftclick');
//type the CAPTCHA string
$windowObj->sendKeyPresses($_POST['captchaTxt']);
//click on the button to accept CAPTCHA, here it has id=captchaOK
$windowObj->mouseEventOnElement("[id=captchaOK]", 'leftclick');
//now use the clickElement() etc functions on $windowObj to do what you need to do.
}
End of the "Working" session, php shuts down here.

Is there any way to prompt for permissions in a lightbox using the JavaScript SDK?

In FBML applications, you could prompt for extended permissions like so:
Facebook.showPermissionDialog('publish_stream', callback);
This rendered a lightbox (much like FB.ui({method: 'foo', display: 'iframe'}); does).
From what I'm seeing in the docs, the only ways to prompt for more extended permissions now are to either cause a window to pop up with FB.login(), or to redirect the user to the oauth dialog full screen. We don't want to rely on the former because popup windows are unreliable, and the latter makes no sense in our user interaction flow. A lightbox is the only way that makes sense.
If the oauth dialog could be displayed as an iframe, this code would theoretically work:
FB.ui({method: 'oauth',
display: 'iframe',
access_token: 'foo',
scope: 'publish_stream'
}, callback);
But the oauth dialog only supports being displayed as "page" and "mobile".
Is there any way I have overlooked?
Think about it: It's of course not possible to use the auth dialog in an iframe, because it's a security matter.
Displaying it in a popup or redirecting to it gives the user the ability to check the sites address is actually facebook.com.
If you where to use the auth dialog in a lightbox as an iframe or similar, there would be no way for me as the user to see if the data it put into the login form (which would get displayed if I'm not logged in to Facebook at that moment) is actually sent to Facebook, or if you had just set up your own form that'll send the data to your server, because you are trying to phish for my Facebook login data …

Facebook Connect: User has logged in and given permissions, now what?

So i've been trying to get FB Connect working on my site, simply for login and authentication, using the Javascript SDK and following the code at:
https://developers.facebook.com/docs/guides/web/
So the button appears, i click it, a dialog pops up, i click that, presumably my site now has permission to know who i am...
Then what? The guide goes on to saying all the stuff I can access through the Facebook API, all the cool things about permissions, but presumably i need the user's ID or access token or something to get at this stuff. How is that given to me? left as a attribute on one of the elements? Left in a Javascript variable somewhere? Given as an argument to some callback? Thrown high into the heavens for me to receive via satellite downlink?
This is probably incredibly simple, but for the life of me i have not been able to figure it out. Facebook's tutorials have failed me, and so has Google. I want to get this in the Javascript, so I can immediately fill in form-data using the user's Facebook name, put a picture, etc. etc., and presumably send this all back to the server so the server can validate with Facebook that the data is real.
I'm assuming you're using the Login button? https://developers.facebook.com/docs/reference/plugins/login/
If you simply want form info, check out the registration plugin - https://developers.facebook.com/docs/plugins/registration/
However, to answer your question, make an API call to /me. For example:
FB.api('/me', function(user) {
if(user != null) {
// The user object now contains info about the logged in user
}
});
You should subscribe to the auth.login event and wrap the above API call in the successful response, i.e.:
FB.Event.subscribe('auth.login', function() {
// JS to run if when the user logs in, for example, the code snippet above
});

Can I "add friend" with Facebook's API?

Does their API allow my Facebook-connected user to add a friend?
No. Adding friends is not possible through the API.
However you can direct users to http://www.facebook.com/addfriend.php?id=[USER UID]
Where [USER UID] is a valid facebook user id.
Good luck!
I spent a great deal of time looking, and finally came accross a very simple solution.
Using the Facebook Javascript API you can do a friend request with:
<script>
FB.ui(
{
method: 'friends.add',
id: fbid // assuming you set this variable previously...
},
function(param){
console.log(param);
// If they cancel params will show:
// {action:false, ...}
// and if they send the friend request it'll have:
// {action:true, ...}
// and if they closed the pop-up window then:
// param is undefined
}
);
</script>
The callback script can then simply performs an ajax call to your server where
you save info about the action, if needed.
You can test this by using the javascript console app on Facebook:
http://developers.facebook.com/tools/console
Paste in the script above, including the tags, or click the "Examples"
button on the bottom of the text area and find the "fb.ui — friends.add" example.
https://developers.facebook.com/docs/reference/dialogs/friends/
Here is a Wiki list of the API methods available to you http://wiki.developers.facebook.com/index.php/API#Administrative_Methods
Doesn't look like you can add friends via the API. Note the iPhone facebook app also doesn't have an add friends function, it was written via the API, so that lends more weight to the idea that you can't