Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design
Webdesign

તમારી વેબસાઇટમાં કેવી રીતે “No CAPTCHA reCAPTCHA” સંકલન કરવું

by
Difficulty:BeginnerLength:LongLanguages:

Gujarati (ગુજરાતી) translation by Dee.P.Tree (you can also view the original English article)

કેપ્ચા ઇનપુટ્સ કદાચ વેબ પરના બધા નિરાશાજનક અનુભવોમાં સૌથી સામાન્ય છે. તેઓ મોટાભાગના વપરાશકર્તાઓ માટે પીડાદાયક છે, એકદમ દૃષ્ટિથી વિકલાંગ અથવા કોઈપણ જે વેબ પર ઍક્સેસ કરવા માટે સ્ક્રીન-વાચકો જેવી સહાયક તકનીકો પર આધાર રાખે છે. જો કે, દુર્ભાગ્યે, સ્પામ સામેની લડતમાં કેપ્ચાઝ ખૂબ જ મહત્વપૂર્ણ છે.

A necessary evil thanks spammers
આવશ્યક અનિષ્ટ (આભાર સ્પામર્સ)

વ્યંગાત્મક રીતે, માનવીય વપરાશકર્તાઓ વાંચવા માટે પરંપરાગત "વિકૃત ટેક્સ્ટ" કૅપ્ચા અજાણ હોવા છતાં, આધુનિક કૃત્રિમ બુદ્ધિ તકનીકને હલ કરવામાં મુશ્કેલી ઓછી છે. ગુગલ ગલી દૃશ્ય સ્થળોની પુષ્ટિ કરવા માટે ગૃહ ક્રમાંક અને રસ્તાના રસ્તાઓ વાંચવા માટે ગૂગલ પણ સમાન તકનીકનો ઉપયોગ કરે છે!

ગૂગલ રોબોટ્સ આને બરાબર વાંચી શકે છે

તે માત્ર લોજિકલ છે તેથી Google ના પોતાના વિકાસકર્તાઓ અત્યાર સુધીમાં 2014 ના અંત સુધીમાં શ્રેષ્ઠ કેપ્ચા સોલ્યુશન સાથે આવ્યા છે. No CAPTCHA reCAPTCHA માટે કોઈ આંગળી ટેપ, માઉસ ક્લિક કરતાં અથવા તમારા કીબોર્ડ સાથે ઇનપુટ પર ધ્યાન કેન્દ્રિત કરવા અને હિટિંગ કરતાં વધુ કંઈ જરૂરી નથી. સ્પેસબાર. 

મોટાભાગના કિસ્સાઓમાં તે સરળ છે, પરંતુ જો Google નું જોખમ વિશ્લેષણ હજી પણ ખાતરી કરી શકતું નથી કે તમે માનવ છો, તો બીજા પ્રોમ્પ્ટ દેખાશે.

તમે તેને પહેલેથી જ સમગ્ર વેબ પર ક્રિયામાં જોઈ શકો છો, ઉદાહરણ તરીકે @ materialup ના સબમિશન પૃષ્ઠ પર.

No CAPTCHA reCAPTCHA મેળવો

ચાલો પીછો કરીએ અને કોઈ કેપ્ચા સાથે સેટઅપ કરીએ.

પગલું ૧

પ્રથમ, અમને API કીની જરૂર છે, તેથી https://www.google.com/recaptcha/admin પર જાઓ . આ પૃષ્ઠની ઍક્સેસ મેળવવા માટે તમારે Google એકાઉન્ટમાં લૉગ ઇન કરવાની જરૂર પડશે. તમને તમારી વેબસાઇટ નોંધાવવા માટે કહેવામાં આવશે, તેથી તેને યોગ્ય નામ આપો, પછી ડોમેન્સ સૂચિબદ્ધ કરો (ઉદાહરણ તરીકે tutsplus.com) જ્યાં આ વિશિષ્ટ રીકેપાચાનો ઉપયોગ કરવામાં આવશે. સબડોમેન્સ (જેમ કે webdesign.tutsplus.com અને code.tutsplus.com) આપમેળે ધ્યાનમાં લેવામાં આવે છે.

પગલું ૨

તે કરવાથી તમને એક સાઇટ કી અને તેની ભાગીદાર ગુપ્ત કી આપવામાં આવશે:

પગલું ૩

તમારી વેબસાઇટ પર reCAPTCHA શામેલ કરવા માટે કેટલીક કીટની નીચે તમને કેટલીક સ્નિપેટ્સ દેખાશે. પ્રથમ જાવાસ્ક્રિપ્ટ છે:

તમે સ્ટ્રિંગમાં પેરામીટર ઉમેરીને તમે ઉપયોગમાં લેવાતી 40 સમર્થિત ભાષાઓમાંથી કઈ પણ વ્યાખ્યાયિત કરી શકો છો. અહીં આપણે es ઉમેરી રહ્યા છીએ જે આપણને સ્પેનિશ ભાષા reCAPTCHA આપશે:

તમારા પૃષ્ઠના પગ પર આ સ્ક્રિપ્ટ ટૅગ મૂકો (અથવા તમારા સંપત્તિ લોડિંગને પ્રાથમિક રૂપે કેવી રીતે પ્રાથમિકતા આપો છો તેના આધારે, જ્યાં પુનઃકાપ્ચા દેખાશે ત્યાં ફોર્મની નીચે જ).

પગલું ૪

આગળનું પ્લેસહોલ્ડર છે જ્યાં તમે તમારા ફોર્મ માર્કઅપમાં ઉમેરવા માટે જરૂર પડશે જ્યાં તમે ફરીથીકાપ્ચા દેખાવા માંગો છો:

નોંધ : data-sitekey એટ્રિબ્યુટ તમારી કીનું મૂલ્ય ધરાવે છે, નહીં કે આ બનાવટી ઉદાહરણ.

અન્ય ગુણો છે જે તમે તમારા બિંદુએ તમારા reCAPTCHA ની દેખાવ અને કાર્યક્ષમતાને કસ્ટમાઇઝ કરવા માટે ઉમેરી શકો છો. ઉદાહરણ તરીકે, આ વિભાગમાં data-theme="dark" ઉમેરવાથી તમને કાળી સંસ્કરણ મળશે, જે તમારા UI ને વધુ સારી રીતે અનુકૂળ થઈ શકે છે:

તમારા reCAPTCHA ને રૂપરેખાંકિત કરવા વિશે વધુ વિગતો માટે developers.google.com પર એક નજર નાખો.

સાથે મળીને

હવે અમારી પાસે પ્રારંભિક ઘટકો છે જે તેમને કામના વાતાવરણમાં મૂકવાનો સમય છે.

પગલું ૧

ચાલો આપણી સ્ક્રિપ્ટ ટૅગ અને પ્લેસહોલ્ડરને સરળ સ્વરૂપમાં મુકીએ:

અહીં અમે name ઇનપુટ, એક email ઇનપુટ અને સબમિટ બટન ધરાવતી ફોર્મ સાથે બેરબોન્સ પૃષ્ઠ માળખું નો ઉપયોગ કર્યો છે. અહીં કોઈ સ્ટાઇલ નથી કારણ કે આ ટ્યુટોરીયલ માટે ખરેખર જરૂરી નથી.

our captcha form
તમારી પાસે એવું કંઈક હોવું જોઈએ જે આના જેવું દેખાય

દર્શાવવા માટે કે reCAPTCHA પરીક્ષણ પસાર થયું છે, અમને કેટલાક સર્વર-બાજુ તપાસો ચલાવવાની જરૂર પડશે. આ કિસ્સામાં આપણે PHP સાથે કરીશું, તેથી આ ફાઇલને નવી પ્રોજેક્ટમાં index.php તરીકે સાચવો.

પગલું ૨

ફોર્મની પદ્ધતિ post તે તમે જોશો, તેથી જ્યારે અમે ફોર્મ ડેટા સબમિટ કરીએ છીએ ત્યારે તે આ પૃષ્ઠ પર વેરીએબલ્સના એરેમાં પરત આવશે. અમે તે ચલોને તેમના પર લૂપ કરીને આઉટપુટ કરી શકીએ છીએ, તેથી તમારા પૃષ્ઠ પર નીચેના ક્યાંક ઉમેરો:

આ દરેક કી / મૂલ્ય જોડીને અમારા $_POST એરેમાં પ્રસ્તુત કરે છે અને તેમને ફોર્મેટિંગની થોડીક આઉટપુટ આપે છે. હવે જ્યારે તમે ફોર્મ સબમિટ કરો છો ત્યારે તમારે નીચે મુજબ કંઈક જોવું જોઈએ:

તમે name અને email માટે પરત આપેલ મૂલ્ય જોશો, પણ g-recaptcha-response માટે મૂલ્ય પણ જોશો. જો તમે કેપ્ચા પરીક્ષણને પૂર્ણ કરવામાં નિષ્ફળ રહ્યા છો તો આ મૂલ્ય ખાલી રહેશે, પરંતુ જો તમે "હું રોબોટ નથી" બૉક્સને તપાસું છું, તો તમે અક્ષરોની વિશાળ સ્ટ્રિંગ જોશો.

આ તે મૂલ્ય છે જે અમને Google ને મોકલવાની જરૂર છે જેથી તે ચકાસી શકાય, તેથી ચાલો તે પછી કરીએ.

પગલું ૩

ખુશીની વાત છે કે, ગૂગલ ડેવલપર ટીમે અહીં અમારા માટે મહેનત કરી છે, તેથી ગીથબ પર રેકપ્ચા પ્રોજેક્ટ પર આગળ વધો અને recaptchalib.php લાઇબ્રેરીની એક નકલ પડાવી લો. તેને તમારા પ્રોજેક્ટની રુટમાં મૂકો અને પછી તેને તમારા index.php ફાઇલની ટોચ પર સંદર્ભ આપો:

પગલું ૪

આ લાઇબ્રેરીમાં કાર્યોનો સંગ્રહ છે જે HTTP વિનંતી દ્વારા g-recaptcha-response (અમારી ગુપ્ત કી સાથે) ને Google પર મોકલે છે. તેઓ પછી પ્રતિક્રિયા એકત્રિત કરે છે, કેપ્ચા સફળ થાય છે કે કેમ તે તપાસે છે. આનો ઉપયોગ કરવા માટે, આપણે પ્રથમ PHP, ટેગની પહેલા, કેટલાક ચલોને સેટ કરવાની જરૂર છે:

ReCaptcha() અમારી ગુપ્ત કી હાજર છે કે નહીં તે જોવા માટે ચકાસે છે. જો તે પ્રક્રિયાને મારી નાંખે અને અમને જવાની સલાહ આપે. પછી અમે નીચેની વિગતો દ્વારા અમારી વિગતો ચલાવો:

પગલું ૫

અમારા બધા સબમિટ ફોર્મ સાથે સારી રીતે ધારી રહ્યા છીએ, $response વેરિયેબલ "સફળતા" સાથે પાછું જાણ કરશે અને અમે ફોર્મ ડેટા પર પ્રક્રિયા કરવાનું ચાલુ રાખી શકીએ છીએ. અહીં તે કેવી રીતે દેખાઈ શકે છે: અમે જ્યાં ફોર્મ ડેટા પર જોયું ત્યાં બીટ દૂર કરો, પછી ફોર્મ ઉપર નીચે આપેલ ચેક ઉમેરો:

છેલ્લે, ફોર્મ પછી એક બંધ PHP, ટેગ ઉમેરો:

આ ફોર્મ પ્રદર્શિત કરે છે, સિવાય કે તે સફળતાપૂર્વક સબમિટ કરવામાં આવે, તે કિસ્સામાં તે એક નાનો આભાર નોટિસ પ્રદર્શિત કરે છે. છેલ્લો ડેમો આ રહ્યો.

સારાંશ

આ કોઈ No CAPTCHA reCAPTCHA ના ખૂબ રફ અને તૈયાર PHP અમલીકરણ હતું. તે સુધારણા માટે ખુબ ખુબ ખુબ ખુબ ખુબ ખુબ ખુબ ખુબ જ ઉપયોગી છે, પણ આશા રાખું છું કે તમને બેઝિક્સની સમજ મળશે. લાઇબ્રેરી માટેનું ક્રેડિટ ગૂગલ ડેવલપર ટીમમાં જાય છે અને મેટ ઓસાગ્યુએલને મને તે તરફ ધ્યાન દોરવા માટે પણ ઝડપી આભાર આપવો જોઈએ.

ઉપયોગી સ્રોતો

  • ગિથબ પર રેકપ્ચા 1.0.0
  • રિકેપ્ચા દસ્તાવેજીકરણ
  • શું તમે રોબોટ છો? "ના કેપ્ચા રિપેટા" ગૂગલ સિક્યોરિટી બ્લોગ રજૂ કરી રહ્યા છીએ.
  • લૉગિન, સાઇનઅપ, ટિપ્પણી ફોર્મ, નીન્જા ફોર્મ અને સંપર્ક ફોર્મ 7 માટે WordPress ReCaptcha એકત્રિકરણ reCaptcha પ્લગઇન
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.