ใช้งาน reCaptcha

เนื่องจาก jCaptcha เมื่อส่งไปยังโฮสตอนแรกก็ไม่มีปัญหา แต่พอใกล้จะหมดระยะเช่าซื้อโฮสดันใช้ไม่ได้ซะงั้น และโฮสก็ล่มบ่อยมาก ทำให้ผมต้องมานั่งหาวิธีทำ captcha ใหม่ที่ไม่น่าจะมีปัญหาต่อไปในอนาคต ตัวเก่ามีปัญหาดังนี้

ปัญหานี้น่าจะเกิดจากโฮสเองเพราะในเครื่องผมก็ไม่มีปัญหาอะไร แต่ก็ไม่ทราบว่าทางโฮสมีปัญหาอะไรเหมือนกัน แต่ก็นั่นแหละไม่มีเวลารอแล้ว จึงตัดสินใจไม่ใช้ jCaptcha จึงไปลองใช้ reCaptcha ของ google แทนซึ่งง่ายกว่า jCaptcha ที่ผมใช้อยู่เยอะเลย(ดีแล้วที่เปลี่ยน) โดยมีขั้นตอนดังต่อไปนี้

1. ต้องสมัครก่อน ที่ https://www.google.com/recaptcha/intro/index.html ดังรูป

• คลิกที่ ปุ่ม Get reCAPTCHA แล้วไปสมัครใช้งานซะดังรูปแรก
• รูปที่สองจะเห็นว่าเราสามารถที่จะเพิ่ม web เขาไปได้อีกนะครับ กี่เว็บก็ได้ และโดย default แล้วเราสามารถที่จะใช้ reCaptcha บน localhost ได้เลยนะ สำหรับของผมสมัครไว้เว็บเดียวเท่านั้น และก็สามารถใช้บน localhost ได้เลยไม่จำเป็นต้องเพิ่ม localhost ใน reCaptcha แต่อย่างใด
  แต่ต่อมาก็มีปัญหาครับ คือว่าทาง reCaptcha จะให้ใช้แบบ localhost ได้ระยะเวลาหนึ่งเท่านั้น ฉนั้นให้ทำการลงทะเบียน localhost ไปด้วยครับเพื่อต่อไปจะได้ไม่มีปัญหาครับผม แต่ก็จะแยก key กันนะ ระหว่าง localhost กับ site จริงๆที่เราใช้งาน
• จากนั้นก็คลิกที่ชื่อ web ที่เราสมัครไว้นะครับเพื่อที่จะนำ key มาใช้ reCaptcha ต่อไป
• รูปที่สาม เป็นการนำ key ที่ reCaptcha ให้มาใช้งานนะ คลิกที่ปุ่ม Keys ในรูปที่สามได้เลย จะให้มา 2 key ด้วยกันคือ Site key และ Secret key โดยผมจะใช้แค่ Site key เท่านั้นครับ

2. จากนั้นก็มาเริ่มเขียน Code ต่อไป สำหรับการสอนการใช้งานแบบละเอียดสามารถดูได้จาก เว็บ https://developers.google.com/recaptcha/intro ได้เลยครับ ซึ่งที่ผมเขียนอยู่นี้เป็นเวอร์ชั่น 2.0 นะ ส่วน code ที่ผมเขียนจะเป็นดังนี้

• จั่วหัวกันก่อน เพื่อระบุไปที่เว็บ google ส่วน onload=onloadCallback หมายถึงจะมีการเรียน function onloadCallback เมื่อตอนเริ่มต้นของ reCaptcha ส่วน render=explicit เป็นการจัดการการแสดงผล reCapcha เอง จริงๆแล้วการ render มีสองแบบนะ 1. auto 2. explicit

• render function เป็นฟังก์ชั่นในการ render captcha ขึ้นมา โดยจะต้องระบุ id ของ tag div และ site key และ ฟังก์ชั่น callback (เมื่อผ่าน captcha แล้ว) และสามารถปรับ theme ได้ในที่นี้คือสีดำ dark

var onloadCallback = function() {
        //render captcha
        grecaptcha.render('recaptcha', {
          'sitekey' : '334sToVybVqmBUwsRTXg3jP',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };

• callback function เป็นฟังก์ชั่นที่จะทำงานก็ต่อเมื่อผ่าน captcha แล้ว ต้องให้ตรงกับที่กำหนดไว้ที่ render function นะ

      var verify = null;//เอาไว้ตรวจสอบว่ามีการเลือก captcha ถูกต้องแล้วหรือไม่
      var verifyCallback = function(response) {
        verify = response;
        if(response !== null){
            document.getElementById("btnBooking").src = "images2/booking-now.png";
        }
      };

     ์Note ทั้งสาม code ด้านบนจะอยู่ในส่วนของ javascript นะครับ

• สุดท้ายก็เพิ่มในส่วนแสดงภาพ render captcha ว่าจะให้อยู่ที่ไหนก็ได้ใน tag body โดยวาง tag div ไว้ในที่ๆต้องการได้เลย สังเกตว่าชื่อ id="recaptcha" จะต้องเหมือนกับชื่อที่ใช้ในการ render ของ render function นะ

เป็นอันเสร็จครับผม ง่ายจริงๆ ส่วน jCaptcha ผมยังไม่ได้เอาออกทั้งหมด(ขี้เกียจเอาออกหมด) เพียงแต่แก้ไขในส่วนที่จะเปลี่ยนแค่นั้น(หน้าที่ต้องใช้ captcha) ไปดูได้ที่เว็บ http://www.budsatravel.com/webBudsa/booking/index.jsp