Komponenta Google ReCAPTCHA za Vue.js

Blog

Komponenta Google ReCAPTCHA za Vue.js

vue-recaptcha

Opis

Opaziti: Dokument o githubu se vedno sklicuje na glavno vejo. Za stabilno različico preberite dokument na naslovu NPM .



Komponenta Google ReCAPTCHA za vue. Če vam je ta paket všeč, pustite zvezdico na githubu.

Ta različica je za Vue 2.0. Če potrebujete podporo za Vue 1.x, se obrnite na vue-v1.x .



drsnik čistega css vrtiljaka

reCAPTCHA V3

Opaziti : Ta projekt trenutno ne podpira reCAPTCHA v3.

Namesti

NPM

$ npm install --save vue-recaptcha

CDN

Uporaba

Začeti

To naložite v glavo, da naložite reCAPTCHA:



bi morali kupiti apno
With `onload` callback, it will notify us when the api is ready for use.

Nato vključite | _+_ | v vaši aplikaciji.

vue-recaptcha

Poveži izziv z gumbom

import VueRecaptcha from 'vue-recaptcha'; export default { ... components: { VueRecaptcha } };

Opaziti: Kot | _+_ | lahko postavite samo en element otrok.

Za več informacij se obrnite na primer

Samodejno nalaganje Click me import VueRecaptcha from 'vue-recaptcha'; export default { ... components: { VueRecaptcha } };

Če | _+_ | rekviziti nastavljeni na | _+_ |, vue-recaptcha bo vbrizgal zahtevano | _+_ | oznaka. To pomeni, da ročno vstavite | _+_ | oznaka je nepotrebna.

vue-recaptcha

POŽAR

Rekviziti

  • sitekey (obvezno) ReCAPTCHA ključ spletnega mesta
  • tema (neobvezno) Barvna tema za reCAPTCHA
  • vrsta (neobvezno) Vrsta reCAPTCHA
  • velikost (neobvezno) Velikost reCAPTCHA
  • tabindex (neobvezno) Tabindex reCAPTCHA
  • značka (izbirno) (samo nevidno ReCAPTCHA) Položaj značke reCAPTCHA
  • loadRecaptchaScript (izbirno) Če | _+_ | je nastavljeno na | _+_ |, bo vue-recaptcha vnesel zahtevano | _+_ | oznaka Privzeto: | _+_ |

Naslednji rekviziti bodo delovali le, ko | _+_ | je nastavljeno kot | _+_ |

  • recaptchaHost (neobvezno) To nastavite, če želite po potrebi spremeniti domeno reCAPTCHA, kot je opisano v Podpora za ReCAPTCHA Privzeto: | _+_ |
  • recaptchaScriptId (neobvezno) To nastavite za spremembo vbrizganega | _+_ | id. To je treba spremeniti le, če je v nasprotju z obstoječim ID -jem Privzeto: | _+_ |
  • jezik (izbirno) To nastavite, če želite po potrebi spremeniti jezik reCAPTCHA, kot je opisano v Podpora za ReCAPTCHA Privzeto: ‘’ | _+_ |
    Opaziti : Ko dinamično spreminjate ta rekvizit, ne bo delovalo, kot ste pričakovali. Ker brez popolnega nalaganja strani ni mogoče spremeniti jezika

Za več informacij se obrnite na Dokument ReCAPTCHA in Nevidni dokument ReCAPTCHA .

Metode

  • ponastavi Ponastavi primerek reCAPTCHA
  • izvedite Invoke reCAPTCHA izziv

Dogodki

  • verify (response) Emit on reCAPTCHA verified | _+_ | je uspešen odziv reCAPTCHA
  • expired () Emit na reCAPTCHA potekel
  • render (id) Emit na reCAPTCHA, nameščenem na DOM | _+_ | je id pripomočka komponente
  • error () Izpusti, ko reCAPTCHA naleti na napako

Pogosta vprašanja

Kaj je ReCAPTCHA, ni bilo mogoče najti uporabniške funkcije: vueRecaptchaApiLoaded?

To je zato, ker je bila Googlova recaptcha naložena pred vašo aplikacijo. Lahko ga preprosto prezrete, ker lahko vue-recaptcha še vedno zazna in upodobi recaptcha. Če vas to zanima, poskusite oznako skripta recatpcha za premakniti v aplikacijo.

android video klepet sdk

Kako preizkusiti vue-recaptcha?

Lahko se posmehujete | _+_ | zaobiti Googlov recaptcha. Tukaj je primer s katerimi delajo je .

python zamenjaj na seznamu

Kaj pa testiranje e2e (ali integracijsko testiranje)?

Prosimo, da se sklicujete na recaptcha's faq .

Podrobnosti o prenosu:

Avtor: DanSnow

Izvorna koda: https://github.com/DanSnow/vue-recaptcha

#vuejs #vue #javascript