Tag Archives: google

Google Recaptcha – Defeating spam got a lot easier

Earlier version of the recaptcha was just a pain in the ass. For developers to implement and also for users who had to squint and type distorted text. Remember this?

2015-04-10 09_07_07-Customizing the Look and Feel of reCAPTCHA - reCAPTCHA — Google Developers

 

Well Google changed that with this new version where the user only had to Tick a check box and some magic happened and it checked if the user is authentic. (Its not clear on their website how exactly they do it, but i think they check for data that has been captured by their analytics tools or cookies or something to make sure that your human)

2015-04-10 09_10_56-reCAPTCHA_ Easy on Humans, Hard on Bots

Here also it falls back to a captcha text if it cant determine if your human so there is a fail safe built in.

Anyway the good news for developers is we can quickly add captcha to our pages without going through a tedious process. So I’m going to give the steps down here that I used to implement recaptcha on my free invoicing tool. (Invoicer)

Step 1.

Go to https://www.google.com/recaptcha/intro/index.html and click the get Recaptcha buton.

2015-04-10 09_14_19-reCAPTCHA_ Easy on Humans, Hard on Bots

Step 2.

Enter the Label and domains that this recaptcha needs to be active on, and click register.

2015-04-10 09_15_43-reCAPTCHA_ Easy on Humans, Hard on Bots

Step 3.

On the next screen you will get the instructions on how to add the recaptcha into your page. But Ill list down the steps here as well.

On client side,

add the script file in the head tag.

 <script src='https://www.google.com/recaptcha/api.js'></script>

Add the following code at the end of the form where you want the captcha widget to appear,

 <div class="g-recaptcha" data-sitekey="6LddIgUTAAAAAEky5noUKqsnA3QPysdXQ05WFsnB"></div> 

On server side,

You need to capture the value generated by client side code and post it to google for verification. This bit can be a bit tricky.

How I did it on Google App Engine is to do a url fetch. Think you will be able to do the same by using curl. Or also ajax.

 <?php

/* recaptcha validation */
<pre>$data = ['secret' => 'YOUR OWN SECRET KEY', 'response' => $_REQUEST['g-recaptcha-response']];
$data = http_build_query($data);
$context = [
    'http' => [
        'method' => 'POST',
        'header' => "custom-header: custom-value\r\n" .
            "custom-header-two: custom-value-2\r\n",
        'content' => $data
    ]
];
$context = stream_context_create($context);
$result = file_get_contents('https://www.google.com/recaptcha/api/siteverify', false, $context);

You will get a json response and if the success attribute it true you can proceed with processing the form values.

<pre>$success_status = json_decode($result)->success;

if($success_status) {

}</pre>

 

More information can be found here regarding verification.

The trickiest part is handling it on server side. If you have any problems with that please post on the comments section and I will try and help. 🙂

Advertisements

How to host your website on Google App Engine for free.

Ok Guys and Girls. Today I am going to teach you how to host your website on Google App Engine for free. This is quite easy, but please note that this method is for a website that doesnt use a Database. So if your website is using a CMS like WordPress this will not work. You can do that as well by using the method given on this link but you have to pay for Google Cloud SQL then.

Ok lets get started.

Step 1

First go to the following link,

https://console.developers.google.com

You will get a screen like following,

Google Developers Console - Google Chrome_2014-06-08_15-42-42Step 2

Click the big red button that says “Create Project”

You will get the following screen,

Google Developers Console - Google Chrome_2014-06-08_15-46-27

On that enter a project name and a project id, for this you can use Your website name as the project name and create a unique project id (you can combine yourname-yourwebsite to get a unique name)

Then click the Create button to create the project. This will take a few moments.

Step 3

Ok now your project is created. Now you just need to upload your website content to the App Engine project you just created.

To do that first you need to download Google App Engine Launcher which is a simple tool available for all platforms. It comes free when you download the Google App Engine SDK which you can do by going to this link.

https://developers.google.com/appengine/downloads#Google_App_Engine_SDK_for_PHP

Download the setup file for your platform and install it. (You need to have python installed on your computer for the Google App Engine Launcher to work, Get Python from here. Make sure you get Python 2.7.6 newer version is sometimes not supported.)

Then you will get an icon like this on your desktop or start menu.

_2014-06-08_15-52-06

Click on that to launch The Google App Engine Launcher.

Greenshot image editor - _2014-06-08_15-52-06

Step 4

Ok on the Google App Engine Launcher.

Go to file->Create New Application

on the window that you get,

Google Developers Console - Google Chrome_2014-06-08_15-59-14

Enter the project id you gave on the Google Cloud Console when you created the new project.

Browse and select the Parent Directory of the website files on your computer. This creates a folder under that parent directory in the project id you gave. So you will have to move the website files into that folder.

Select PHP as the runtime.

Click Create button.

Step 5

This will create App Engine files in the website files folder.

In that you need to edit the App.yaml file. This is where you tell the app engine app where all your files are and how you want them to be launched.

So go to your website project folder on your local computer and open app.yaml file on notepad. Or on the Google App Engine Launcher click the newly created project and Click the Edit Icon.

Greenshot image editor - Google Developers Console - Google Chrome_2014-06-08_15_2014-06-08_16-04-50

I am adding my app.yaml file here to show you how you need to add code sections to load Javascript, Css, images and main url files.

Like I have given you will have to give all the static file folders in your website. Here in my website all traffic is directed to my index.php file. If you have other files you will have to modify that part like following.

For each of your links you have to give like above.

Ok now your ready to upload the files.

Step 6

Go to your Google App Engine Launcher, Select your project and click the Deploy button at the top.

app

It will start uploading the files. Once completed you can go to the following link to see if you website is working properly.

projectid.appspot.com (project id is the unique project id you gave when you created the project on Google Cloud Console.)

Ok If your website is working fine, the Next step is to point your domain to the Google App Engine hosted website.

Step 7

Go to Google Cloud Console (https://console.developers.google.com)

Click your project Name

Google Developers Console - Google Chrome_2014-06-08_16-15-53

You will get your project view. This has lots of functionality, explore at your own risk 😉

For our purpose click the App Engine link on the side bar, under that you get a link called Settings Click on that. After that click the custom domains tab on the top.

_2014-06-08_16-18-46

 

Ok on that its pretty self evident what you need to do, But let me explain each step.

1. Verify you domain

Enter your domain and click verify, it will open a new tab and show you verification options. Easiest way is to select your domain provider and click verify. If your domain registrar is not in the list, click Other and you will get a TXT record which you need to add to your DNS settings. (If you dont know how to edit your DNS better to check with your domain provider. It can mess up your website if you get it wrong.)

2. Select your domain in the second step and it will show you DNS records as the Step 3, which you need to add to your DNS Settings.

Google Developers Console - Google Chrome_2014-06-08_16-26-18

That’s all. It looks like a long process, but its quite simple. Try and let me know how you did. 🙂