Sestavit vlastní WordPress uživatelské toku – část 2: Registrace nového uživatele

() translation by (you can also view the original English article)

V prvním kurzu této řady na přizpůsobení WordPress přihlášení jsme vytvořili zásuvný modul, který umožňuje nahradit WordPress přihlašovací obrazovka s vlastní stránky. Dnes budeme jít ještě o krok dále a nahradit nový tok registrace uživatele stejným způsobem.

Důvody pro přizpůsobení na přihlašovací stránce jsme si nastínili v části 1 (odpovídající registrační stránku s tématem vaší stránky skrýt WordPress a aby se uživateli bezproblémové) se vztahují i na registrace nového uživatele, ale jsou zde i některé konkrétní důvody, proč můžete chtít vytvořit vlastní registrační stránce:

Za prvé při registraci, můžete chtít změnit pole, co žádáte od nových členů, přidáte další pole nebo možná některé klesá. Jako příklad, v tomto kurzu budeme odstranit pole uživatelské jméno a jako přihlášení použijte e-mailovou adresu nového uživatele.
Za druhé je registrace spam. Když jsem poprvé otevřel registrace pro všechny na mých stránkách, netrvalo déle než pár hodin pro první registraci spam vystoupit, další následující těsně po válce. Přidání reCAPTCHA pole na stránce vlastní registrace je dobrý způsob, jak zvládnout při zachování konzistentní uživatelské zkušenosti.
Konečně můžete chtít provést některé vlastní akce na registraci, například přidání nového uživatele do seznamu adresátů. Poté, co postavil vlastní registrace toku, to bude snazší než kdy předtím.

Takže vybavené touto sadou důvodů, můžeme začít.

V tomto kurzu se dozvíte jak nahradit vlastní stránky WordPress registrační obrazovky a k provedení registrace s kódem, aniž by porušil principy návrhu WordPress.

Funkce bude postaveno zásuvný modul jsme vytvořili v části 1 tutoriál série, takže pokud jste jej ještě nečetli, to je dobrý nápad začít kontrolou tohoto kurzu. Můžete napsat kód, zatímco po kurzu nebo stáhnout příklad kódu z Github projektu kurz.

Přidat stránku vlastní registrace nového uživatele

Výchozí WordPress nové registrační stránce uživatele na wp-login.php? action = registr vypadá takto:

Není to špatné, ale pokud máte spuštěnou WordPress.org, je s největší pravděpodobností není konzistentní s designem blogu nebo webové stránky.

Poznámka: Pokud nemůžete získat přístup na registrační stránku na vašem webu WordPress, proto ve výchozím nastavení nepovoluje WordPress novým uživatelům zaregistrovat se. Chcete-li toto nastavení změnit, přejděte na stránku Obecné nastavení ve vašem admin Dashboard a zaškrtněte políčko před "Může zaregistrovat každý uživatel". Poté nastavení uložte a vraťte na stránku registrace.

Check this checkbox to enable new user registration in WordPress

V první části série vytvořili jsme vlastní stránky pro zobrazování přihlašovací formulář a krátký, který byl použit k umístit přihlašovací formulář na této stránce. A teď uděláme totéž pro registraci: za prvé, vytvoříme krátký pro zobrazení registračního formuláře a stránky, na které bude umístěna tento zkrácený.

Je také možné umístit krátký na jinou stránku nebo mít přihlašovací a registrační formuláře na jedné stránce.

Krok 1: Vytvořit krátký

Stavění na plugin vytvořené v části 1 série, začněme přidáním zkrácený na stránce registrace.

Na konci třídy modulu (Personalize_Login_Plugin) konstruktoru, přidejte následující definici krátký:

1	add_shortcode( 'custom-register-form', array( $this, 'render_register_form' ) );

Vytvořte funkci zodpovědný za vykreslování formuláři Registrace nového uživatele:

/**
 * A shortcode for rendering the new user registration form.
 *
 * @param  array   $attributes  Shortcode attributes.
 * @param  string  $content     The text content for shortcode. Not used.
 *
 * @return string  The shortcode output
 */
public function render_register_form( $attributes, $content = null ) {
    // Parse shortcode attributes
    $default_attributes = array( 'show_title' => false );
    $attributes = shortcode_atts( $default_attributes, $attributes );

    if ( is_user_logged_in() ) {
        return __( 'You are already signed in.', 'personalize-login' );
    } elseif ( ! get_option( 'users_can_register' ) ) {
        return __( 'Registering new users is currently not allowed.', 'personalize-login' );
    } else {
        return $this->get_template_html( 'register_form', $attributes );
    }
}

Pokud jste již četli část 1 série, můžete si všimnout mnoho podobností mezi tuto funkci a funkce vykreslení formuláře přihlášení z tohoto kurzu.

Za prvé na tratích 10-12, můžete si všimnout, že krátký má atribut show_title, používaný pro definování, zda název by měl být vyškvařena krátký nebo ne.

Za druhé registrační formulář není zobrazen uživatelům, kteří jsou již přihlášeni (linky 14-15). Zpráva vrácena namísto formuláře je velmi jednoduchá, takže podle potřeby, možná budete chtít nahradit tento kus kódu něco propracovanější – například odkaz zpět na řídicím panelu.

Novým prvkem je vyhledat možnost users_can_register WordPress na lince 16. Tato možnost je řízena pomocí WordPress obecná nastavení pole, které může zaregistrovat každý uživatel výše uvedených. Ujistěte se, že budeme respektovat nastavení, která uživatel definuje v WordPress, jsme neměli zobrazí registrační formulář je-li nastavena na hodnotu false. Místo toho jak vidíte na lince 17, vrátí funkce oznámení o registraci uzavírá.

Skutečné vykreslení registračního formuláře se provádí na lince 19 pomocí PHP šablony, register_form.php, umístěný v adresáři šablon, které jsme vytvořili v předchozím cvičení. Viz část 1 pro delší vysvětlení jak to funguje stejně jako kód pro funkci použít, get_template_html.

A teď Pojďme přidat šablonu formuláře registrace.

Krok 2: Vytvoření registračního formuláře

V adresáři šablony přidejte nový PHP soubor a pojmenujte ji register_form.php. Pokračujte přidáním registračního formuláře s poli, váš nový uživatel vyplnit.

Tady je verze, kterou jsem vytvořil pro tento kurz; poměrně standardní registrační formulář s poli pro uživatele e-mailu, křestní jméno a příjmení. Formulář neobsahuje samostatné pole pro uživatelské jméno, jako e-mailová adresa bude sloužit jako jeden.

Stejně jako výchozí WordPress registrace nového uživatele naše verze bude generovat heslo a e-mail na nového uživatele. To slouží jako jednoduchý e-mail kontrola (uživatel nebude moci přihlásit, aniž byste zadali platnou e-mailovou adresu) a vynucuje jistou úroveň zabezpečení hesla.

Samozřejmě tento přístup má své vlastní bezpečnostní riziko v podobě odesílání hesel, takže je to dobrý nápad požádat (nebo dokonce vyžadují) uživateli změnit heslo po přihlášení.

<div id="register-form" class="widecolumn">
    <?php if ( $attributes['show_title'] ) : ?>
        <h3><?php _e( 'Register', 'personalize-login' ); ?></h3>
    <?php endif; ?>

    <form id="signupform" action="<?php echo wp_registration_url(); ?>" method="post">
        <p class="form-row">
            <label for="email"><?php _e( 'Email', 'personalize-login' ); ?> <strong>*</strong></label>
            <input type="text" name="email" id="email">
        </p>

        <p class="form-row">
            <label for="first_name"><?php _e( 'First name', 'personalize-login' ); ?></label>
            <input type="text" name="first_name" id="first-name">
        </p>

        <p class="form-row">
            <label for="last_name"><?php _e( 'Last name', 'personalize-login' ); ?></label>
            <input type="text" name="last_name" id="last-name">
        </p>

        <p class="form-row">
            <?php _e( 'Note: Your password will be generated automatically and sent to your email address.', 'personalize-login' ); ?>
        </p>

        <p class="signup-submit">
            <input type="submit" name="submit" class="register-button"
                   value="<?php _e( 'Register', 'personalize-login' ); ?>"/>
        </p>
    </form>
</div>

Na řádcích 2-4 šablona vykresluje titul pro formuláře, pokud je nastaven atribut show_title.

Pak, na lince 6, podívejte se na parametru akce: formulář je odeslán na výchozí WordPress registrace URL, které můžeme získat pomocí funkce wp_registration_url. Brzy budeme mluvit o toho víc, ale zmíním už teď, že to neznamená, že dáme WordPress zpracování registrace...

Zbytek šablony je spíše standardní HTML formuláře s poli pro e-mailu, křestní jméno a příjmení.

Než se dostaneme k vidět nedostatek v akci, stále potřebujeme vytvořit registrační stránku a umístěte krátký na něm.

Krok 3: Vytvoření nové stránky registrace uživatele

Chcete-li zobrazit formulář registrace, budete muset přidat následující kód na stránce WordPress:

1	[custom-register-form]

To by mohlo být jakékoli stránky, ale teď, pojďme vytvořit novou stránku pro registrační formulář.

V předchozí části jsme vytvořili funkci, plugin_activated, pro tvorbu stránek plugin na aktivaci pluginu. Uvnitř funkce jsme přidali pole pro ukládání všech stránek, které by měly vytvořit plugin.

A teď Pojďme přidat informace o nové stránce do pole. Po přidání, definice pole by měl vypadat takto, s novou stránku (s popisu člen registr) definováno naposledy:

// Information needed for creating the plugin's pages
$page_definitions = array(
    'member-login' => array(
        'title' => __( 'Sign In', 'personalize-login' ),
        'content' => '[custom-login-form]'
    ),
    'member-account' => array(
        'title' => __( 'Your Account', 'personalize-login' ),
        'content' => '[account-info]'
    ),
    'member-register' => array(
        'title' => __( 'Register', 'personalize-login' ),
        'content' => '[custom-register-form]'
    ),
);

Aktivace hák lze spustit pouze když je aktivován plugin, tak do toho a deaktivovat a aktivovat plugin na stránce pluginy. Teď, když přejdete na adresu URL https://<YOUR site="">/member-register, měli byste vidět něco podobného (pomocí aktuální výchozí téma WordPress, dvacet patnáct):</YOUR>

Krok 4: Přesměrujte uživatele na naši novou stránku registrace

Ještě než se vrhneme do provádění registrace akce, tak zkontrolujte, zda uživatel je vždy přesměrován na této nové registrační stránku namísto výchozí stránky pro nové uživatele na wp-login.php? action = registr.

K tomu použijeme háček login_form_ akce {akce}, která, jak si možná pamatujete z části 1, je aktivována před každou akcí v wp-login.php. Jak můžete vidět z výše uvedeného odkazu, akce je v tomto případě registr a tak, budeme připojit naši funkci login_form_register.

V pluginu konstruktoru přidejte následující řádek:

1	add_action( 'login_form_register', array( $this, 'redirect_to_custom_register' ) );

Vytvořte funkci zpětného volání:

/**
 * Redirects the user to the custom registration page instead
 * of wp-login.php?action=register.
 */
public function redirect_to_custom_register() {
    if ( 'GET' == $_SERVER['REQUEST_METHOD'] ) {
        if ( is_user_logged_in() ) {
            $this->redirect_logged_in_user();
        } else {
            wp_redirect( home_url( 'member-register' ) );
        }
        exit;
    }
}

Jak jsme to dali funkci na akci login_form_register, víme, že se uživatel pokouší buď přístup nového registračního formuláře uživatelem nebo zaúčtovat.

Proto první věc, které děláme v této funkci (na lince 6) je ke kontrole metoda požadavku, který byl použit pro přístup ke stránce: přesměrování je provedeno pouze na požadavky GET, jako požadavek POST bude vyhrazena pro provádění registrace akce. Více informací o tomto brzy.

Funkce potom pokračuje kontrolou, pokud uživatel je již přihlášen (linka 7).

Přihlášení uživatelé přesměrováni na stránku account (nebo správce řídicího panelu, pokud jsou správci) pomocí funkce redirect_logged_in_user, které jsme vytvořili v části 1. Návštěvníci přesměrováni na naši novou stránku-Zaregistrujte se.

A teď se stránkou a formuláři v místě, jdeme do co se stane, když uživatel formulář odešle.

Registrovat nového uživatele

Když uživatel odešle nový registrační formulář uživatele, jeho obsah jsou zaúčtovány do wp-login.php? action = registr, stejnou adresu URL, použili jsme při přesměrování uživatele na registrační stránce výše.

K vlastnímu nastavení, jsme se již zmínili (a co je nejdůležitější, pomocí e-mailovou adresu jako uživatelské jméno) budeme muset nahradit tuto funkci s naším vlastním kódem. Chcete-li to, budeme nejprve vytvořit funkci pro registraci nového uživatele programově a potom volat tuto funkci v popisovač akce.

Krok 1: Vytvoření uživatele

Začněme tím, že vytvoří funkci, která slouží k registraci nového uživatele pomocí dat shromážděných z výše uvedeného formuláře: e-mailovou adresu, jméno a příjmení. E-mailová adresa bude pouze jedinečný identifikátor, a zbytek je jen něco pěkného mít.

Modul třídy přidejte následující soukromé funkce:

/**
 * Validates and then completes the new user signup process if all went well.
 *
 * @param string $email         The new user's email address
 * @param string $first_name    The new user's first name
 * @param string $last_name     The new user's last name
 *
 * @return int|WP_Error         The id of the user that was created, or error if failed.
 */
private function register_user( $email, $first_name, $last_name ) {
    $errors = new WP_Error();

    // Email address is used as both username and email. It is also the only
    // parameter we need to validate
    if ( ! is_email( $email ) ) {
        $errors->add( 'email', $this->get_error_message( 'email' ) );
        return $errors;
    }

    if ( username_exists( $email ) || email_exists( $email ) ) {
        $errors->add( 'email_exists', $this->get_error_message( 'email_exists') );
        return $errors;
    }

    // Generate the password so that the subscriber will have to check email...
    $password = wp_generate_password( 12, false );

    $user_data = array(
        'user_login'    => $email,
        'user_email'    => $email,
        'user_pass'     => $password,
        'first_name'    => $first_name,
        'last_name'     => $last_name,
        'nickname'      => $first_name,
    );

    $user_id = wp_insert_user( $user_data );
    wp_new_user_notification( $user_id, $password );

    return $user_id;
}

Jak jsem již zmínil výše, e-mailová adresa je pouze jedinečný identifikátor, a také jediný požadovaný parametr. Proto se začneme funkci tím, že ověří jeho hodnotu. Nejprve na lince 15 musíme ověřit e-mailovou adresu a potom na řádku 20 jsme ověřit e-mailovou adresu již není v provozu. Je-li některý z ověření nezdaří, je vrácen objekt Wp_Error. Vrátíme se k zobrazení těchto chyb brzy.

Pokud vše půjde dobře a jsou nalezeny žádné chyby, funkce pokračuje tím, že generování hesla na lince 26.

Na řádcích 28-37 najdete jádro této funkce, vytvoření nového uživatele. Uživatel je přidán pomocí wp_insert_user funkce WordPress. (řádek 37). Jako její jediný parametr funkce přijímá asociativní pole s informacemi o uživateli vytvářený. Jak můžete vidět na tratích 28-35, používáme $email pro uživatelské jméno (user_login) a pole e-mailu (e-mail). Úplný seznam polí, které mohou být zahrnuty v poli atribut Podívejte se na WordPress codex.

Po vytvoření uživatele, na lince 38, volání funkce wp_new_user_notification k odeslání vygenerované heslo k novému uživateli a upozornit správce webu nového uživatele.

Krok 2: Volání registrační kód, když uživatel odešle formulář

Teď, když jsme napsali kód pro registraci uživatele, říkáme tomu při odeslání registračního formuláře.

Dříve když jsme přidali přesměrovat na vlastní registrační stránku pomocí akce login_form_register, jsem se zmínil že použijeme stejnou akci také pro zpracování požadavků POST.

Jak je často případ v programování, to není jediný způsob, jak bychom mohli zvládnout registrace nového uživatele, ale má poměrně významné výhody: tímto způsobem zajistíme, aby náhodou nikdo nemůže přistupovat registrační kód výchozí WordPress.

Pro přehlednost, Pojďme přidat funkci a uvažte ji na stejnou akci (technicky, neexistuje žádný důvod, proč nelze stejně jako přidat tento kód přesměrování funkce jsme vytvořili výše).

V konstruktoru modul třídy přidejte definici nové akce:

1	add_action( 'login_form_register', array( $this, 'do_register_user' ) );

Vytvořte funkci:

/**
 * Handles the registration of a new user.
 *
 * Used through the action hook "login_form_register" activated on wp-login.php
 * when accessed through the registration action.
 */
public function do_register_user() {
    if ( 'POST' == $_SERVER['REQUEST_METHOD'] ) {
        $redirect_url = home_url( 'member-register' );

        if ( ! get_option( 'users_can_register' ) ) {
            // Registration closed, display error
            $redirect_url = add_query_arg( 'register-errors', 'closed', $redirect_url );
        } else {
            $email = $_POST['email'];
            $first_name = sanitize_text_field( $_POST['first_name'] );
            $last_name = sanitize_text_field( $_POST['last_name'] );

            $result = $this->register_user( $email, $first_name, $last_name );

            if ( is_wp_error( $result ) ) {
                // Parse errors into a string and append as parameter to redirect
                $errors = join( ',', $result->get_error_codes() );
                $redirect_url = add_query_arg( 'register-errors', $errors, $redirect_url );
            } else {
                // Success, redirect to login page.
                $redirect_url = home_url( 'member-login' );
                $redirect_url = add_query_arg( 'registered', $email, $redirect_url );
            }
        }

        wp_redirect( $redirect_url );
        exit;
    }
}

Funkce začíná kontrola metoda požadavku na lince 8: funkce je spojena login_form_register akce WordPress, používá stejný že jsme použili pro přesměrování uživatele, a metoda požadavku je to, co odlišuje dva od sebe navzájem.

Na lince 11 můžeme ověřit, že registrace nových uživatelů je povolen. Pokud tomu tak není, uživatel je přesměrován zpět na stránku registrace s kódem chyby (uzavřené) jako parametr dotazu (registr chyby).

Na druhé straně Pokud registrace je otevřena, funkce shromažďuje požadované parametry (linky 15-17) od data požadavku a je používá pro volání funkce jsme vytvořili výše (linka 19) vytvoření nového uživatele.

Po volání register_user funkce přesměruje uživatele na správné místo, podle toho, zda byla úspěšná registrace nového uživatele:

Po úspěšné přesměrování je uživatel přesměrován na přihlašovací stránku, s parametr $registered označující, že byl právě vytvořen nový uživatel.
V případě chybu body přesměrování zpět do registračního formuláře s kódy chyb z funkce registrace nového uživatele jsou sloučeny do čárkami oddělený seznam a součástí žádosti (linky 23-24).

Krok 3: Zobrazení chybové zprávy a zprávy úspěch

Jak jsme viděli výše, registrace funkce přesměruje uživatele na přihlašovací stránku, pokud registrace byla úspěšná a pak zpět na registrační stránku, pokud došlo k chybám, se stavem předaný jako parametr požadavku.

A teď Pojďme přidat kód, chcete-li zobrazit tyto zprávy uživateli, počínaje chybové zprávy na stránce registrace nového uživatele.

V render_register_form přidejte následující kus kódu těsně před vykreslování šablony:

// Retrieve possible errors from request parameters
$attributes['errors'] = array();
if ( isset( $_REQUEST['register-errors'] ) ) {
    $error_codes = explode( ',', $_REQUEST['register-errors'] );

    foreach ( $error_codes as $error_code ) {
        $attributes['errors'] []= $this->get_error_message( $error_code );
    }
}

Tento úryvek nejprve zkontroluje, pokud chyby byly předány v požadavku parametru registru chyby (linka 2). Pokud ano, jde to přes všechny z nich, Vyhledávám odpovídající chybové zprávy pomocí funkce get_error_message jsme vytvořili v části 1 výukový program seriálu.

Chybové zprávy jsou shromažďovány do pole v poli $attributes pro tisk v šabloně.

Chcete-li být schopen ukázat správné chybové zprávy, budeme také potřebovat přidat nové chybové zprávy do funkce get_error_message. Ve struktuře přepínače přidat tyto (nebo vlastní) chybové zprávy:

// Registration errors

case 'email':
    return __( 'The email address you entered is not valid.', 'personalize-login' );

case 'email_exists':
    return __( 'An account exists with this email address.', 'personalize-login' );

case 'closed':
    return __( 'Registering new users is currently not allowed.', 'personalize-login' );

Chcete-li zobrazit chyby na stránce registrace, přidejte následující kód v šabloně register_form.php mezi titul a formuláři:

<?php if ( count( $attributes['errors'] ) > 0 ) : ?>
    <?php foreach ( $attributes['errors'] as $error ) : ?>
        <p>
            <?php echo $error; ?>
        </p>
    <?php endforeach; ?>
<?php endif; ?>

Dále přidáte zprávu o úspěchu.

Po úspěšném zaregistrování nového uživatele je uživatel přesměrován na přihlašovací stránku, s parametrem, registrované = {e-mail} k adrese URL.

Ve funkci render_login_form přidejte následující dva řádky zkontrolujte, zda existuje parametr:

1	// Check if the user just registered
2	$attributes['registered'] = isset( $_REQUEST['registered'] );

V šablony login_form.php, přidejte zprávu, která se zobrazí, pokud je nastaven příznak pro registrované:

<?php if ( $attributes['registered'] ) : ?>
    <p class="login-info">
        <?php
            printf(
                __( 'You have successfully registered to <strong>%s</strong>. We have emailed your password to the email address you entered.', 'personalize-login' ),
                get_bloginfo( 'name' )
            );
        ?>
    </p>
<?php endif; ?>

To je ono. Nyní jste vytvořili kompletní nové registrace uživatele tok ověření parametrů a hlášení chyb.

Do toho vytvořit nový uživatelský účet otestovat toku.

Pokud testujete plugin na místním serveru, pokud jste nakonfigurovali nastavení emailer, nebudete moci přijímat e-mail obsahující heslo – to je normální.

Ochrana před nevyžádanými registrace společnosti Google reCAPTCHA

Registrační formulář je nyní kompletní, jsme budete držet přizpůsobení to trochu víc zavedením reCAPTCHA kontroly (to je "Nejsem robot" checkbox najdete na mnoha větších lokalit online) aby se zabránilo spammery registrace vytvářet účty na vašem webu.

Krok 1: Získejte klíč Captcha

Za prvé navštivte stránky reCAPTCHA. Klepněte na tlačítko "Get" reCAPTCHA "" v pravém horním rohu pro přístup k admin stránce reCAPTCHA.

Pokud nejste přihlášeni k účtu Google, budete vyzváni k přihlášení. Pokud jej nemáte, bude nutné ji vytvořit pomocí tohoto nástroje.

Na stránce účet služby reCAPTCHA najdete následující formulář. Používejte k vložení informací o vašem webu.

Jakmile odešlete formulář klepnutím na registr, uvidíte stránku s pokyny týkající se povolení reCAPTCHA na webu, stejně jako dva klíče používané pro používání rozhraní API: stránky a tajný klíč.

Chcete-li uložit klíče v našich WordPress plugin, budeme potřebovat vytvořit dvě nastavení pole. Udržet věci jednoduché, budeme je přidat do obecné nastavení a není ještě vytvořit stránku vlastní nastavení.

Chcete-li přidat nastavení pole, nejprve připojte novou akci. V pluginu konstruktoru přidejte následující nový řádek:

1	add_filter( 'admin_init' , array( $this, 'register_settings_fields' ) );

Pak vytvořte funkce pro definování nastavení pole a dvě funkce zpětného volání pro vykreslování polí nastavení:

/**
 * Registers the settings fields needed by the plugin.
 */
public function register_settings_fields() {
    // Create settings fields for the two keys used by reCAPTCHA
    register_setting( 'general', 'personalize-login-recaptcha-site-key' );
    register_setting( 'general', 'personalize-login-recaptcha-secret-key' );

    add_settings_field(
        'personalize-login-recaptcha-site-key',
        '<label for="personalize-login-recaptcha-site-key">' . __( 'reCAPTCHA site key' , 'personalize-login' ) . '</label>',
        array( $this, 'render_recaptcha_site_key_field' ),
        'general'
    );

    add_settings_field(
        'personalize-login-recaptcha-secret-key',
        '<label for="personalize-login-recaptcha-secret-key">' . __( 'reCAPTCHA secret key' , 'personalize-login' ) . '</label>',
        array( $this, 'render_recaptcha_secret_key_field' ),
        'general'
    );
}

public function render_recaptcha_site_key_field() {
    $value = get_option( 'personalize-login-recaptcha-site-key', '' );
    echo '<input type="text" id="personalize-login-recaptcha-site-key" name="personalize-login-recaptcha-site-key" value="' . esc_attr( $value ) . '" />';
}

public function render_recaptcha_secret_key_field() {
    $value = get_option( 'personalize-login-recaptcha-secret-key', '' );
    echo '<input type="text" id="personalize-login-recaptcha-secret-key" name="personalize-login-recaptcha-secret-key" value="' . esc_attr( $value ) . '" />';
}

Tento kurz není o WordPress nastavení rozhraní API, nepůjdeme přes deklarace pole nastavení. Pokud nejste obeznámeni s jak Přidání nastavení WordPress funguje, podívejte se na tuto kompletní výukový program série Toma McFarlin.

Nyní přejděte na stránku Obecné nastavení a kopírování klíčů reCAPTCHA do dvou polí, které jste právě vytvořili a uložte nastavení.

Krok 2: Zobrazit CAPTCHA

S přípravami, hotovo můžeme nyní přidat pole reCAPTCHA a použít k ověření, že naši uživatelé jsou lidské.

V render_registration_form nejprve načíst klíč lokality reCAPTCHA z WordPress nastavení a uložte ji v poli $attributes aby bylo k dispozici v šabloně:

1	// Retrieve recaptcha key
2	$attributes['recaptcha_site_key'] = get_option( 'personalize-login-recaptcha-site-key', null );

Pomocí parametru, potom přidejte zástupný symbol pro pole reCAPTCHA v registračním formuláři, přímo nad tlačítko Odeslat:

<?php if ( $attributes['recaptcha_site_key'] ) : ?>
    <div class="recaptcha-container">
        <div class="g-recaptcha" data-sitekey="<?php echo $attributes['recaptcha_site_key']; ?>"></div>
    </div>
<?php endif; ?>

Pole skutečné reCAPTCHA bude umístěna uvnitř div nad pomocí jazyka JavaScript. Takže chcete-li zobrazit pole, bude stále musíme zahrnout JavaScript v zápatí stránky.

WordPress má konkrétní akce právě pro toto použití. Přidejte následující řádek v pluginu konstruktoru:

1	add_action( 'wp_print_footer_scripts', array( $this, 'add_captcha_js_to_footer' ) );

Vytvořte funkci, add_captcha_js_to_footer, který vytiskne JavaScript zahrnout značku, která načte reCAPTCHA API od společnosti Google:

/**
 * An action function used to include the reCAPTCHA JavaScript file
 * at the end of the page.
 */
public function add_captcha_js_to_footer() {
    echo "<script src='https://www.google.com/recaptcha/api.js'></script>";
}

Teď když jdete na registrační stránce, měli byste vidět pole reCAPTCHA na místě:

Krok 3: Zkontrolujte CAPTCHA

Pokud JavaScript založené "není robot" kontrola je úspěšný, reCAPTCHA widget přidá nový parametr k formuláři, g-recaptcha odpověď. Pak v ověření straně serveru ve funkci do_register_user, můžeme použít parametr zjistit, že uživatel prošlo testem.

Za prvé pojďme vytvořit funkci pro kontrolu parametru reCAPTCHA:

/**
 * Checks that the reCAPTCHA parameter sent with the registration
 * request is valid.
 *
 * @return bool True if the CAPTCHA is OK, otherwise false.
 */
private function verify_recaptcha() {
    // This field is set by the recaptcha widget if check is successful
    if ( isset ( $_POST['g-recaptcha-response'] ) ) {
        $captcha_response = $_POST['g-recaptcha-response'];
    } else {
        return false;
    }

    // Verify the captcha response from Google
    $response = wp_remote_post(
        'https://www.google.com/recaptcha/api/siteverify',
        array(
            'body' => array(
                'secret' => get_option( 'personalize-login-recaptcha-secret-key' ),
                'response' => $captcha_response
            )
        )
    );

    $success = false;
    if ( $response && is_array( $response ) ) {
        $decoded_response = json_decode( $response['body'] );
        $success = $decoded_response->success;
    }

    return $success;
}

Na tratích 9-13 funkce načte odpověď reCAPTCHA. Pokud není nalezen, uživatel nebyl ani se pokusil dokončit test před odesláním formuláře.

Potom na tratích 16-24, využívá funkce wp_remote_post k odesílání požadavku POST na server "reCAPTCHA" ověření přijaté odpovědi. Žádost trvá dva parametry, vložené do pole s id subjektu: reCAPTCHA tajný klíč a reakci jsme se ověřování, číst z požadavku parametru g-recaptcha odpovědi.

Server vrátí jeho odpověď jako objekt JSON kódování. Jakmile je dekódovat odpověď, lze použít ke kontrole odpověď, jak to děláme na řádku 29.

Dále použijeme funkci v handle_register_request aby reCAPTCHA zkontrolujte součást ověření parametru. Pro upřesnění, zde je celý... jinak konstrukce s novým kódem připojena ve středu (linky 4-6):

if ( ! get_option( 'users_can_register' ) ) {
    // Registration closed, display error
    $redirect_url = add_query_arg( 'register-errors', 'closed', $redirect_url );
} elseif ( ! $this->verify_recaptcha() ) {
    // Recaptcha check failed, display error
    $redirect_url = add_query_arg( 'register-errors', 'captcha', $redirect_url );
} else {
    $email = $_POST['email'];
    $first_name = sanitize_text_field( $_POST['first_name'] );
    $last_name = sanitize_text_field( $_POST['last_name'] );

    $result = $this->register_user( $email, $first_name, $last_name );

    if ( is_wp_error( $result ) ) {
        // Parse errors into a string and append as parameter to redirect
        $errors = join( ',', $result->get_error_codes() );
        $redirect_url = add_query_arg( 'register-errors', $errors, $redirect_url );
    } else {
        // Success, redirect to login page.
        $redirect_url = home_url( 'member-login' );
        $redirect_url = add_query_arg( 'registered', $email, $redirect_url );
    }
}

Je-li "reCAPTCHA" Kontrola selže, bude uživatel přesměrován zpět na stránku registrace s captcha kód chyby zahrnout do adresy URL.

Chcete-li zobrazit chybu uživateli, přidejte odpovídající chybovou zprávu ve funkci get_error_message. Něco jako je tento, možná:

1	case 'captcha':
2	return __( 'The Google reCAPTCHA check failed. Are you a robot?', 'personalize-login' );

A to je vše. Jste přidali "reCAPTCHA" šek do vašeho nového toku registrace uživatele.

Co bude dál?

Jste nyní úspěšně upravili webu WordPress-založené nové uživatele registrace toku. Pokud máte další nápady, co byste chtěli jinak v tomto kroku, to je dobrý čas k rozšíření změny, které jsme dělali v tomto kurzu. Přidat nová pole, proveďte další ověřování, přidejte uživatele do seznamu adresátů. Si jen vzpomenete.

V další a poslední, kurz v tomto seriálu budeme kompletní přizpůsobení tím, že nahradí funkci "Zapomenuté heslo" s naší vlastní vlastní stránky.

Do té doby šťastný kódování.