CAPTCHA-Feld in Magento-Modul einbauen

Erstellt am 18. Januar 2013

CAPTCHA-Feld in Magento-Modul einbauen

Cartware-Magento-Capture

Seit Version 1.7 bringt die eCommerce-Platform Magento ein eigenes Modul mit, um Shopbetreiber mittels CAPTCHA-Codes vor Spam und Missbrauch aus Formularen zu schützen. Zum derzeitigen Stand, lassen sich in der Standardinstallation allerdings nicht alle Formulare um das Feature erweitern. Dieser Artikel zeigt am Beispiel der "Produkt empfehlen"-Funktion, wie bisher nicht abgedeckte Module, um das neue Feature erweitert werden können.

Vorspann

Die CAPTCHA-Funktion lässt sich gleichermaßen im Backend wie im Frontend verwenden. Hierzu muss jeweils die Option "Enable CAPTCHA ..." aus "Yes" gesetzt werden. Die Klickpfade hierzu lauten:

  • Backend: System > Configuration > Advanced > Admin > CAPTCHA
  • Frontend: System > Configuration > Customers > Customer Configuration > CAPTCHA
Cartware-Capture

Sobald die Option aktiviert wurde, erscheinen weitere Einstellungsmöglichkeiten. An dieser Stelle lassen sich nun Aktionen auswählen, die um ein CAPTCHA-Eingabefeld erweitert werden sollen. Derzeit umfasst diese Auswahlliste im Frontend folgende Punkte:

  • Account Registrierung
  • Login
  • "Passwort vergessen"-Funktion
  • Bestellen als Gast
  • Registrierung während der Bestellung

Die Möglichkeit die Funktion "Produkt empfehlen" durch einen CAPTCHA abzusichern ist momentan also nicht gegeben.

Cartware-Capture-Options

Neue Option hinzufügen

Um den Optionen nun eine weitere Funktion hinzuzufügen, die später über die CAPTCHA-Validierung verfügen soll, muss in der Datei etc/config.xml unseres Moduls ein Abschnitt hinzugefügt werden. Als identifier wird hier "sendtofriend" verwendet. Dieser wird sich an mehreren Stellen der Implementierung wiederfinden und ist damit eine beliebt Fehlerquelle für Tippfehler und dergleichen.

  1. <config>
  2.   <default>
  3.     <captcha>
  4.       <frontend>
  5.         <areas>
  6.           <sendtofriend>
  7.             <label>Product recommendation</label>
  8.           </sendtofriend>
  9.         </areas>
  10.       </frontend>
  11.     </captcha>
  12.   </default>
  13. </config>

Die neue Option erscheint daraufhin in der Auswahl, sollte markiert und die Einstellungen danach gespeichert werden.

Capture-New-Options

Funktionalität hinzufügen

Damit Magento signalisiert wird, dass die Generierung eines CAPTCHA-Codes für unsere neue Option immer passieren soll, muss eine weitere Anpassung an der Datei etc/config.xml vorgenommen werden:

  1. <config>
  2.   <default>
  3.     <customer>
  4.       <captcha>
  5.         <always_for>
  6.           <sendtofriend>1</sendtofriend>
  7.         </always_for>
  8.       </captcha>
  9.     </customer>
  10.   </default>
  11. </config>

Alternativ zu der Anpassung im XML, lässt sich der CAPTCHA auch über eine bestimmte Anzahl fehlgeschlagener Login-Versuche oder ein Flag innerhalb der Session anfordern.

Wer genaueres darüber erfahren will, wann ein CAPTCHA angefordert wird und wann nicht, sollte sich die Implementierung der Methode isRequired innerhalb der Klasse Mage_Captcha_Model_Zend genauer ansehen.

Einbinden im Frontend

Zur Darstellung des CAPTCHA-Codes muss zuerst das Layout-XML erweitert werden. Der entsprechende Handle ist in diesem Fall sendfriend_product_send:

  1. <layout>
  2.   <sendfriend_product_send>
  3.     <reference name="sendfriend.send">
  4.             <block type="core/text_list" name="form.additional.info">
  5.                 <block type="captcha/captcha" name="captcha">
  6.                     <reference name="head">
  7.                         <action method="addJs"><file>mage/captcha.js</file></action>
  8.                     </reference>
  9.                     <action method="setFormId"><formId>sendtofriend</formId></action>
  10.                     <action method="setImgWidth"><width>230</width></action>
  11.                     <action method="setImgHeight"><width>50</width></action>
  12.                 </block>
  13.             </block>
  14.         </reference>
  15.   </sendfriend_product_send>
  16. </layout>

Im zweiten Schritt muss das Template des "Produkt empfehlen"-Formulars erweitert werden, um weitere Child-Blöcke auszugeben. Hierzu kopiert man am besten die Template-Datei app/design/frontend/base/default/template/sendfriend/send.phtml in das eigene Theme und fügt nun an passender Stelle den folgenden Part ein:

  1. <div class="fieldset">
  2.   <?php echo $this->getChildHtml(); ?>
  3. </div>

Das Eingabefeld des CAPTCHA's sollte ab sofort dargestellt werden:

Cartware-Capture-Form

Validierung hinzufügen

Zu guter Letzt wird nun noch ein Observer registriert, der sich vor das Dispatchen des eigentlichen Controllers setzt und die CAPTCHA-Eingabe validiert. Hierbei ist die Action anzupeilen, an die das Formular geposted wird. In unserem Fall ist dies die sendmailAction. Daraus folgt das generische Event controller_action_predispatch_sendfriend_product_sendmail:

  1. <config>
  2.   <global>
  3.     <events>
  4.       <controller_action_predispatch_sendfriend_product_sendmail>
  5.         <observers>
  6.           <captcha>
  7.             <class>cartware_theme/observer_captcha</class>
  8.             <method>checkSendRecommendation</method>
  9.           </captcha>
  10.         </observers>
  11.       </controller_action_predispatch_sendfriend_product_sendmail>
  12.     </events>
  13.   </global>
  14. </config>

Die Implementierung des Observers ist größtenteils aus dem Captcha-Modul des Cores entnommen. Lediglich der Wert der Variable $formId sowie die URL des Redirects im Fehlerfall wurden verändert. Die formId entspricht hier wieder dem o.g. Identifier für unseren CAPTCHA:

  1. class Cartware_Theme_Model_Observer_Captcha extends Mage_Captcha_Model_Observer
  2. {
  3.     /**
  4.      * @param Varien_Event_Observer $observer
  5.      * @return Cartware_Theme_Model_Observer_Captcha
  6.      */
  7.     public function checkSendRecommendation($observer)
  8.     {
  9.         $formId = 'sendtofriend';
  10.         $captchaModel = Mage::helper('captcha')->getCaptcha($formId);
  11.         if ($captchaModel->isRequired()) {
  12.             $controller = $observer->getControllerAction();
  13.             if (!$captchaModel->isCorrect($this->_getCaptchaString($controller->getRequest(), $formId))) {
  14.                 Mage::getSingleton('core/session')->addError(Mage::helper('captcha')->__('Incorrect CAPTCHA.'));
  15.                 $controller->setFlag('', Mage_Core_Controller_Varien_Action::FLAG_NO_DISPATCH, true);
  16.                 $controller->getResponse()->setRedirect(Mage::getUrl('*/*/send', array('_current' => TRUE)));
  17.             }
  18.         }
  19.         return $this;
  20.     }
  21.  
  22. }


Kommentare

Keine Kommentare

Kommentar schreiben

* - Pflichtangabe

Zertifizierungen

  • TYPO3 Certified Integrator
  • Magento Certified Developer
  • Magento Certified Frontend Developer
Kontakt