Permalink
Browse files

Merge pull request #79 from danmatthews/master

Add partial/split render methods to allow usage with restrictive javascript frameworks.
  • Loading branch information...
albertcht committed Jan 26, 2019
2 parents 5273a8e + f7dcfc5 commit 37d45f0e229ff28f6ac8e09ec3b27d10bdf77261
Showing with 84 additions and 7 deletions.
  1. +36 −3 README.md
  2. +39 −4 src/InvisibleReCaptcha.php
  3. +9 −0 src/InvisibleReCaptchaServiceProvider.php
@@ -62,14 +62,14 @@ INVISIBLE_RECAPTCHA_DEBUG=false

Before you render the captcha, please keep those notices in mind:

* `render()` function needs to be called within a form element.
* `render()` or `renderHTML()` function needs to be called within a form element.
* You have to ensure the `type` attribute of your submit button has to be `submit`.
* There can only be one submit button in your form.

##### Display reCAPTCHA in Your View

```php
{!! app('captcha')->render(); !!}
{!! app('captcha')->render() !!}
// or you can use this in blade
@captcha
@@ -78,12 +78,45 @@ Before you render the captcha, please keep those notices in mind:
With custom language support:

```php
{!! app('captcha')->render('en'); !!}
{!! app('captcha')->render('en') !!}
// or you can use this in blade
@captcha('en')
```

##### Usage with Javascript frameworks like VueJS:

The `render()` process includes three distinct sections that can be rendered separately incase you're using the package with a framework like VueJS which throws console errors when `<script>` tags are included in templates.

You can render the polyfill (do this somewhere like the head of your HTML:)

```php
{!! app('captcha')->renderPolyfill() !!}
// Or with blade directive:
@captchaPolyfill
```

You can render the HTML using this following, this needs to be INSIDE your `<form>` tag:

```php
{!! app('captcha')->renderCaptchaHTML() !!}
// Or with blade directive:
@captchaHTML
```

And you can render the neccessary `<script>` tags including the optional language support by using:

```php
// The argument is optional.
{!! app('captcha')->renderFooterJS('en') !!}
// Or with blade directive:
@captchaScripts
// blade directive, with language support:
@captchaScripts('en')
```

##### Validation

Add `'g-recaptcha-response' => 'required|captcha'` to rules array.
@@ -90,11 +90,47 @@ public function getPolyfillJs()
*/
public function render($lang = null)
{
$html = '<script src="' . $this->getPolyfillJs() . '"></script>' . PHP_EOL;
$html .= '<div id="_g-recaptcha"></div>' . PHP_EOL;
$html = $this->renderPolyfill();
$html .= $this->renderCaptchaHTML();
$html .= $this->renderFooterJS($lang);
return $html;
}
/**
* Render the polyfill JS components only.
*
* @return string
*/
public function renderPolyfill()
{
return '<script src="' . $this->getPolyfillJs() . '"></script>' . PHP_EOL;
}
/**
* Render the captcha HTML.
*
* @return string
*/
public function renderCaptchaHTML()
{
$html = '<div id="_g-recaptcha"></div>' . PHP_EOL;
if ($this->getOption('hideBadge', false)) {
$html .= '<style>.grecaptcha-badge{display:none;!important}</style>' . PHP_EOL;
}
$html .= '<div class="g-recaptcha" data-sitekey="' . $this->siteKey .'" ';
$html .= 'data-size="invisible" data-callback="_submitForm" data-badge="' . $this->getOption('dataBadge', 'bottomright') . '"></div>';
$html .= '<script src="' . $this->getCaptchaJs($lang) . '" async defer></script>' . PHP_EOL;
return $html;
}
/**
* Render the footer JS neccessary for the recaptcha integration.
*
* @return string
*/
public function renderFooterJS($lang = null)
{
$html = '<script src="' . $this->getCaptchaJs($lang) . '" async defer></script>' . PHP_EOL;
$html .= '<script>var _submitForm,_captchaForm,_captchaSubmit,_execute=true;</script>';
$html .= "<script>window.addEventListener('load', _loadCaptcha);" . PHP_EOL;
$html .= "function _loadCaptcha(){";
@@ -112,7 +148,6 @@ public function render($lang = null)
$html .= $this->renderDebug();
}
$html .= "}</script>" . PHP_EOL;
return $html;
}
@@ -75,5 +75,14 @@ public function addBladeDirective(BladeCompiler $blade)
$blade->directive('captcha', function ($lang) {
return "<?php echo app('captcha')->render({$lang}); ?>";
});
$blade->directive('captchaPolyfill', function () {
return "<?php echo app('captcha')->renderPolyfill({$lang}); ?>";
});
$blade->directive('captchaHTML', function () {
return "<?php echo app('captcha')->renderCaptchaHTML(); ?>";
});
$blade->directive('captchaScripts', function ($lang) {
return "<?php echo app('captcha')->renderFooterJS({$lang}); ?>";
});
}
}

0 comments on commit 37d45f0

Please sign in to comment.