Simple PHP contact form with Firebase hosting

Question 1

I'm trying to test out if PHP works from my Firebase hosting using the following:

(index.html)

<form action="welcome.php" method="post">
   <input type="submit">
</form>

(welcome.php)

<?php

   $to = "my@email.com";
   $subject = "My subject";
   $txt = "Hello world!";
   $headers = "From: dummy@email.com";

   mail($to,$subject,$txt,$headers);

?>

Every time I try this the browser keeps on attempting to open the PHP file rather than processing it. Is simple PHP enabled on the Firebase server hosting to process a simple form like this? If I can get it to work this way, I will be building the form out correctly including validation etc.

Thanks,

Question 2

From the Firebase Hosting site (emphasis mine):

We deliver all of your static content (html, js, images, etc.) over a secure SSL connection and serve it on a CDN.

Firebase Hosting is for hosting static assets. Firebase currently doesn't offer any way to execute your code on Firebase's servers.

Update (2018-08-08): You can now run Node.js/JavaScript code but connecting your Firebase Hosting project to Cloud Functions + Firebase Hosting. But that still won't allow you to run PHP code.

Question 3

You can just add a BCC header in the same parameter as the From header:

"From:" . $_POST['email']

becomes:

"From:" . $_POST['email'] . "rn" . "BCC:mail@test.com"

See Example #4 on the PHP mail() page. (Or Example #2, though #4 specifically has a BCC header.)

Question 4

firebase/php-jwt library uses Composer. Composer is a dependency manager for PHP similar to Maven in Java if you come from Android development background. You would need to know how to import classes in PHP using require/include functions of PHP. You would need some experience with php to use composer.

In order to use firebase/php-jwt library without composer you could use the following sample code: (I downloaded the library inside jwt folder)

require_once 'jwt/src/BeforeValidException.php';
require_once 'jwt/src/ExpiredException.php';
require_once 'jwt/src/SignatureInvalidException.php';
require_once 'jwt/src/JWT.php';


use FirebaseJWTJWT;

$key = "example_key";
$token = array(
   "iss" => "http://example.org",
   "aud" => "http://example.com",
   "iat" => 1356999524,
   "nbf" => 1357000000
);

/**
 * IMPORTANT:
 * You must specify supported algorithms for your application. See
 * https://tools.ietf.org/html/draft-ietf-jose-json-web-algorithms-40
 * for a list of spec-compliant algorithms.
*/
$jwt = JWT::encode($token, $key);
$decoded = JWT::decode($jwt, $key, array('HS256'));

print_r($decoded);

/*
 NOTE: This will now be an object instead of an associative array. To get
 an associative array, you will need to cast it as such:
*/

$decoded_array = (array) $decoded;

/**
* You can add a leeway to account for when there is a clock skew times   between
* the signing and verifying servers. It is recommended that this leeway should
* not be bigger than a few minutes.
*
* Source: http://self-issued.info/docs/draft-ietf-oauth-json-web-token.html#nbfDef
*/
   JWT::$leeway = 60; // $leeway in seconds
   $decoded = JWT::decode($jwt, $key, array('HS256'));

Question 5

By using $_FILES['imageToUpload']['tmp_name'], you are using the temporary name of the uploaded image as the contents, not the actual image file.

The quickes way to solve this is to use:

$bucket->upload(
    file_get_contents($_FILES['imageToUpload']['tmp_name']),
    [
        'name' => $_FILES['imageToUpload']['name']
    ]
);

The upload method accepts an array of options (including the target file name) as described in the method's PHPDoc: https://github.com/GoogleCloudPlatform/google-cloud-php/blob/master/Storage/src/Bucket.php#L216

Please keep in mind though that there are security implications when using the uploaded file name (not the tmp_name) directly, so please make sure to validate and sanitize the uploaded files before moving them to your cloud storage.

http://php.net/manual/en/features.file-upload.post-method.php http://php.net/manual/en/function.move-uploaded-file.php

Question 6

First of all make sure that you've included the necessary JavaScript resource to render reCAPTCHA widget properly, like this:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Here's the reference:

Displaying the widget

Now comes to your user's response. The response from the user's captcha challenge can be fetched in three ways. It can be as,

g-recaptcha-response - a POST parameter in the submitted form
grecaptcha.getResponse(widget_id) - will provide the response after the user completes the captcha.
A string argument to the callback function specified in the config object passed to the render method.

Here's the reference:

Verifying the user's response

For your purpose use g-recaptcha-response to get the user's response. So your code should be like this:

HTML

<form method="POST" action="Form_Activation.php">
   <div class="form-group">
    <label for="name">Name:</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="Full Name" value="" required/>
    </div>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" name="email" value="" placeholder="you@example.com" required/>
    </div>
    <div class="form-group">
        <label for="number">Number:</label>
        <input class="form-control" name="number" id="number" value="" placeholder="Contact Number" required/>
    </div>
    <div class="form-group">
        <label for="message">Message:</label>
        <textarea class="form-control" name="message" id="message" placeholder="Enter Message.." required></textarea>
    </div>
    <div class="form-group">
        <input type="checkbox"/> <b> Subscribe to Newsletter</b>
    </div>
    <div class="g-recaptcha" data-sitekey="6Le2SBQTAAAAADIOrUEPpcEVvR_c0vN9GzQpLg05"></div>
    <button type="submit" name="submit" class="btn btn-default sendbutton">SEND</button>
</form>

Add a name attribute in your submit button.

Form_Activation.php

<?php

    if(isset($_POST['submit'])){

        //your site secret key
        $secret = 'XXXXXXX_Secret-key_XXXXXXX';

        if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
            //get verified response data
            $param = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST['g-recaptcha-response'];
            $verifyResponse = file_get_contents($param);
            $responseData = json_decode($verifyResponse);

            if($responseData->success){
                // success

                $name = $_POST['name'];
                $email = $_POST['email'];
                $number = $_POST['number'];
                $message = $_POST['message'];

                // so on

            }else{
                // failure
            }

        }

    }

?>

Don't forget to add your secret key in $secret variable.

Simple PHP contact form with Firebase hosting

Answers

php,firebase