youpage

Monday, September 26, 2011

How to trigger jQuery click with PHP

I have a hidden html button with id="submit" and a jQuery onclick event function.
Long story short... here it is:

<?php
echo
"<script type='text/javascript'>
$(document).ready(function() {
$('#submit').trigger('click');
});
</script>";
?>

Sunday, September 25, 2011

Facebook OAuth2 with PHP or JavaScript SDK

I was about to write about my experience setting up Facebook OAuth2 with PHP SDK using the Graph API when i just came across this post that does just that. It is a very good example, fully explained, well documented and it provides a working sample - better than I will be able to explain it.
Same thing for JavaScript lovers - I must give credit to this post which has an working example as well.

Now, all you have to do is to register you application at Facebook and get your application key.
Have fun!

Saturday, September 24, 2011

Google+ API OAuth2 with PHP

When I created Memory, for the online version I have chose Facebook authentication for the sign in process, in order to have some unique Ids for the score system and to promote the application. I have used GraphApi_Web for that task, which it did a pretty good job, until now.
I will change the approach and I am going to use OAuth2 with PHP for both Facebook and Google+ authentication, but for now let's focus on using OAuth 2.0 to Access Google APIs.
After following the registration process of the application, I ended having the oauth2_client_id, oauth2_client_secret, and a place to receive the access_token at oauth2_redirect_uri.
Like I mentioned before I am using the PHP Library - the information and sample are pretty good. I have chosen my redirect_uri to coincide with the initial uri and check if the user it is logged in and if it has already granted access to my application or not. Here is the resulted index.php, just add your oauth2 information.

<?php
require_once 'google-api-php-client/src/apiClient.php';
require_once 'google-api-php-client/src/contrib/apiPlusService.php';
//start session
session_start();
$client = new apiClient();
$client->setApplicationName("Memory");
//Visit https://code.google.com/apis/console to generate your
//oauth2_client_id, oauth2_client_secret, and to register your oauth2_redirect_uri.
$client->setClientId('yourClientID');
$client->setClientSecret('yourClientSecret');
$client->setRedirectUri('youRedirectUri');
$client->setDeveloperKey('...');
$client->setScopes(array('https://www.googleapis.com/auth/plus.me'));
//init the required service Books, Buzz, Customsearch, Tasks, etc. - I am using Plus
$plus = new apiPlusService($client);
//if the user is not logged in, propmpt him to do so
if (isset($_GET['code'])) {
$client->authenticate();
$_SESSION['access_token'] = $client->getAccessToken();
header('Location: http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF']);
}
//acquire the access token
if (isset($_SESSION['access_token'])) {
$client->setAccessToken($_SESSION['access_token']);
}
//if the user has granted access before, get the access token
//else pop-up the auth dialog
if ($client->getAccessToken()) {
$me = $plus->people->get('me');

//The access token may have been updated lazily.
$_SESSION['access_token'] = $client->getAccessToken();
} else {
$authUrl = $client->createAuthUrl();
}
//provide a way to revoke the token since there is no authorization manager on Google+ yet
if (isset($_REQUEST['logout'])) {
unset($_SESSION['access_token']);
}
?>
<!doctype html>
<html>
<head></head>
<body>
<header><h1>Google+ Test</h1></header>
<div>
<?php if(isset($me)): ?>
<div>
<href="<?php echo $me['url'] ?>">
<?php print $me['displayName'] ?></a>
<div><img src="<?php echo $me['image']['url'];?>" /></div>
</div>
<?php endif ?>
<?php
if(isset($authUrl)) {
print "<a href='$authUrl'>Login!</a>";
} else {
print "<a href='?logout'>Logout</a>";
}
?>
</div>
</body>
</html>

Hack around with var_dump to get more information from the access token and use it as required.

Friday, September 23, 2011

Generating keys using OpenSSL

I was trying to generate a self-signing private key and public certificate for use with secure AuthSub. I got the right link from Google and followed the steps to do so, until I bumped into the first error:
Subject does not start with '/'. problems making Certificate Request.
So, is not that easy as I thought.
I was using:
openssl req -x509 -nodes -days 365 -newkey rsa:1024 -sha1 -subj '/C=RO/ST=youState/L=youCity/CN=www.youpage.ro' -keyout myrsakey.pem -out /tmp/myrsacert.pem
in Win7 cmd which is similar with the approach suggested by the Google link.
Where the problem are:
- the subject must be enclosed with double quotes.
- the path to the temp must be like: D:/temp/myrsacert.pem not something relative.
Alright I said, "the key is successfully generated, let's upload it" - another problem here: The Key was not accepted.
How I successfully generated my key and certificate.
I did just this: openssl req -x509 -nodes -days 365 -newkey rsa:1024 -sha1 -in D:/temp/myrsacert.pem and then follow the dialog and correctly fill what i thought are the important requests:
Organization Name (eg, company) [Internet Widgits Pty Ltd]:www.youpage.ro
Email Address []:cgarbacea@gmail.com


Job done, the key is accepted and now I am able to use secure tokens when communicating with a Google service.


Thursday, September 22, 2011

1st lesson - customizing Blogger

I have finally decided to start a blog, but I want it to have the same feeling as my web page.
I said: "Lets change the background and stretch it to the full width and height". I couldn't do it from the provided tools, so I edited the Html and I have inserted my own <div>div<img/></div>
and the css for them, after I commented the background css of the body: /*background: $(body.background);*/

<div id="background-wrap">
  <img alt="youpage" src="http://fullpathtoimage.jpg" />
</div>
#background-wrap img {
  min-width: 950px;
  position: absolute;
  width: 100%;
  z-index: -1;
  opacity: 1;
}

Conclusion: I have achieved the desired result and thanks to this post I have also find out how to insert code into a post.

Lesson learned!