Recaptcha

recaptcha no HTML

Script

O Storefront SSR disponibiliza um script para utilização do recaptcha. Para utilizá-lo, é necessário referenciá-lo na página que será utilizado através da tag script:

HTML

<script src="https://recaptcha.fbits.net/script?loja=lojaxemplo&formulario=[id$='newsletter-form']&pagina=Site&Producao=True"></script>

O src é composto por:
https://recaptcha.fbits.net/script?loja= + nome da loja + &formulario= + query selector do formulário da página + &pagina=Site&Producao=True

Em um exemplo real de utilização com o formulário newsletter-form, é possível utilizar a variável injetada store para obter o nome da loja, ficando da seguinte forma:

HTML

<script src="https://recaptcha.fbits.net/script?loja={{ store.store_name }}&formulario=[id$='newsletter-form']&pagina=Site&Producao=True"></script>

HTML

É necessário inserir uma div específica logo após a inicialização do formulário. A div é a seguinte:

HTML

<div id="recaptcha-checkbox-container" class="recaptcha-checkbox-container"></div>

Segue um exemplo de formulário de newsletter, que ficaria da seguinte forma:

HTML

<script src="https://recaptcha.fbits.net/script?loja={{store.store_name}}&formulario=[id$='newsletter-form']&pagina=Site&Producao=True"></script>
<br>
<h3>Cadastre-se na nossa newsletter!</h3>
<div class="row">
    <form class="newsletter-form" id="newsletter-form">
        <div id="recaptcha-checkbox-container" class="recaptcha-checkbox-container"></div>
        <div class="form-group">
            <label for="newsletter-form-email">E-mail</label>
            <input type="email" class="form-control" id="newsletter-form-email" placeholder="Insira seu e-mail" required>
        </div>
        <div class="form-group">
            <label for="newsletter-form-name">Nome</label>
            <input type="text" class="form-control" id="newsletter-form-name" placeholder="Insira seu nome" required>
        </div>
        <br>
        <button type="submit" class="btn btn-primary">Enviar</button>
    </form>
</div>

Referenciando formulário para o recaptcha

Quando a página é carregada, é necessário chamar o método defineRecaptchaCallback() referenciando dois itens:

• O ID do form da página para que o script do recaptcha o reconheça
• Qual será a função de callback a ser utilizada ao realizar o submit do formulário

Segue um exemplo de utilização no formulário com ID newsletter-form e da função de callback newsletterSubmit():

JavaScript

window.addEventListener("load", windowLoad, false);

async function windowLoad(){
    defineRecaptchaCallback("newsletter-form", await newsletterSubmit);
}

async function newsletterSubmit(){
    ...
}

Obtendo recaptcha token via Javascript

Para obter o recaptcha token através do Javascript, é necessário utilizar o método getRecaptchaToken() enviando como argumento o query selector do formulário informado na seção anterior. Exemplo:

JavaScript

async function newsletterSubmit(){
    const recaptchaToken = getRecaptchaToken("[id$='newsletter-form']");
}