Alan Reed

Laravel Spark is a great for setting up user management, subscriptions, and an API quickly. Without Spark, these steps would take weeks. With spark it takes only a few hours.

But Spark does have some issues: mainly the documentation. For such and large system—particularly one that is paid ($99 per site)—there should be better documentation.

Context

Adding custom fields to the registration form is supposed to be easy. This customization is explicitly documented. However the steps do not work for added a Recaptcha to the registration form.

Normally, you would not need a captcha on the registration form because users have to pay to sign up. However, our app has a free tier. Another solution to this problem is requiring email verification. But email verification has its own problems.

Regardless, this is a problems others have had as well.

What is the issue

There are three problems with using Recaptcha on the registration page:

1. 1. Spark registration page does not support custom fields with dashes in the name. This is not documented. The Recaptcha custom field is called “g-recaptcha-response”.
   2. The Recaptcha field is created dynamically which does not work with the Vue powered form that ships with Spark.
   3. Spark registration calls the validator twice which causes Recaptcha validation to fail the second time.

The solution

1. Remove dashes from the field name. Call it “grecaptcharesponse” instead of “g-recaptcha-response”.
2. Manually put the recaptcha verification token into the “grecatpcharesponse” field before submitting the form
3. Only call the validator once

Step by Step

1. Create recaptcha validator

   php artisan make:rule Recaptcha

2. Install Guzzle

   composer require guzzlehttp/guzzle

3. Paste this into app/Rules/Recaptcha.php

<?php

namespace App\Rules;
use Illuminate\Contracts\Validation\Rule;
use GuzzleHttp\Client;

class Recaptcha implements Rule
{
    public function passes($attribute, $value)
    {
        // this hack prevents the validator from failing the second time it is called.
        if (isset($GLOBALS['G_RECAPTCHA_RESULT']))
        {
            return $GLOBALS['G_RECAPTCHA_RESULT'];
        }

        $client = new Client();

        $response = $client->post(
            'https://www.google.com/recaptcha/api/siteverify',
            ['form_params'=>
                [
                    'secret' => env('RECAPTCHA_PRIVATE_KEY'),
                    'response' => $value
                ]
            ]
        );

        $body = json_decode((string)$response->getBody());
        $GLOBALS['G_RECAPTCHA_RESULT'] = $body->success;
        return $body->success;
    }

    public function message()
    {
        return 'Check the box "I\'m not a robot"';
    }
}

4. Include the validator we just created at the top of your SparkServiceProvider.

   use App\Rules\Recaptcha;

5. Add this to the booted method of your SparkServiceProvider:

Spark::validateUsersWith(function () {
    return [
        'name' => 'required|max:255',
        'grecaptcharesponse' => ['required', new Recaptcha],
        'email' => 'required|email|max:255|unique:users',
        'password' => 'required|confirmed|min:6',
        'terms' => 'required|accepted',
    ];
});

6. Add this code to resources/js/app.js

Spark.forms.register = {
    grecaptcharesponse: 'abc'
};

7. Add this to resources/views/vendor/spark/auth/register-common-form.blade.php where you want the recaptcha form to appear

<div class="form-group row">
    @push('scripts-header')
        <script src='https://www.google.com/recaptcha/api.js'></script>
    @endpush
    <label class="col-md-4 col-form-label text-md-right">Are you human?</label>

    <div class="col-md-6">
        <div class="g-recaptcha" data-sitekey="{{env('RECAPTCHA_PUBLIC_KEY')}}"></div>

        <span class="invalid-feedback" style="display: block;">
            @{{ registerForm.errors.get('grecaptcharesponse') }}
        </span>
    </div>
</div>

8. Add this just before the closing head tag in your layout file:

   @stack['scripts-header']

9. Update “sendRegistration” method in resources/js/spark/auth/register-stripe.js

sendRegistration() {
    if ($('#g-recaptcha-response').val())
    {
        this.registerForm.grecaptcharesponse = $('#g-recaptcha-response').val();
        grecaptcha.reset();
    }
    else
    {
        // put something here instead of an empty string so you get the 
        // Recaptcha error message instead of the "required" error message.
        this.registerForm.grecaptcharesponse = "abc";
    }

    Spark.post('/register', this.registerForm)
        .then(response => {
            window.location = response.redirect;
        });
}

Conclusion

That ended up being a little longer than I intended. Other gotchas you may encounter:

• Laravel has recently moved the location of the assets files so your file structure may be different
• You will need to publish the Spark vendor files in order to edit them

You can see this in action at BitcoinAbuse.com.

Ubuntu works very well on XPS laptops, but it is not so easy getting the laptop to boot from a USB.

Step 1: Change POST Behavior from “Fastboot” to “Thorough”

1. At boot, Press the F2 key (or alternately press the F12 key then select the option to enter the BIOS setup).
2. In POST Behavior, Select – Fastboot the select the Thorough option.

Step 2: Put USB in the right USB Type-C port

This is the main trick I have been unable to find documented anywhere else. The BIOS only recognizes bootable media in the right USB port.

1. Create bootable Ubuntu USB (Or any other linux distro)
2. Put USB in the right USB Type-C port. Only the right USB port will be detected in the boot options.
3. Reboot the system, press F12.
4. Select your USB in the boot options.

I had this problem on a my new phone. Found the solution on a T-Mobile forum but it was difficult to find. This post is to link back to the correct solution so it’s easier to find and to save the correct solution:

https://support.t-mobile.com/thread/146169

The problem has to do with the phone’s APN settings – which need to be tweaked.

1. Access your Android phone’s settings (gray settings icon that looks like a gear).

2. On the settings menu – select “Network & Internet”

3. On the “Network and Internet” menu – select “mobile network” (which should say “t-mobile” beneath the words “mobile network”)

4. On the “mobile network” menu – select “Access Point Names” (often abbreviated APN).

5. On the “APNs” menu – you should see two options: “T-mobile US” and “Tmobile MMS”. There should be a green dot next to “T-Mobile US”. Select that “T-Mobile US” option (NOT the Tmobile MMS).

6. This will open an “edit access point” menu, and you will need to make the following edits:

First – click on the MMSC option and add the following text: mms.msg.eng.t-mobile.com/mms/wapenc

Second – click on the “APN type” option. It will probably say something like: “default,supl,hipri,fota” (without the quotation marks). You will need to tweak the end of it so the whole thing instead reads “default,supl,hipri,fota,mms” (without the quotation marks). As indicated here – there are no spaces between these commas.

Third – after making these two adjustments to your APN – make sure you click on the menu dots (three vertical dots) at the top right hand part of the “edit access point” menu. This will open up a drop down menu – and then you should select “Save”. If you don’t do this – the settings will not take effect.

—

Thanks to cflaniken3.