Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Kun verkko- ja mobiilisovellukset ovat yleistyneet, myös roskapostin ja muun haitallisen toiminnan riski on kasvanut. CAPTCHA: t voivat olla kätevä turvatoimi, joka kannattaa integroida tämän tyyppisten tietoturvauhkien estämiseksi.

CAPTCHA on minimaalinen suojausominaisuus, joka on yleensä integroitu verkkolomakkeisiin estämään roskapostien automaattiset hyökkäykset. Se varmistaa, että sovellusta käyttävä käyttäjä on todellakin ihminen, ei haitallista koodia suorittava robotti.

Mikä on CAPTCHA?

Lyhenne CAPTCHA tarkoittaa Completely Automated Public Turing -testiä, joka erottaa tietokoneet ja ihmiset toisistaan. Se viittaa tietokoneella luotuun testiin, joka tarkistaa, onko tietty käyttäjä, joka on vuorovaikutuksessa sovelluksesi kanssa, ihminen eikä robotti.

Voit integroida sovellukseesi erilaisia ​​CAPTCHA-testejä, kuten teksti- ja äänipohjaisia ​​CAPTCHA-testejä. Suosituin ja tehokkain tyyppi on kuitenkin Google reCAPTCHA. Se tarkistaa todellisten käyttäjien ja robottien eron käyttämällä kehittyneitä riskianalyysialgoritmeja.

instagram viewer

Google reCAPTCHA: sta on kaksi versiota:

  • reCAPTCHA V3: Tämä versio toimii taustalla ja määrittää kokonaispistemäärän käyttäjän käyttäytymisen perusteella.
  • reCAPTCHA V2: Tämä versio lisää "En ole robotti" -valintaruudun todennuslomakkeeseen.

Tämä opas tutkii Google reCAPTCHA V2:ta. Lue, kuinka se integroidaan React-sovellukseen.

Rekisteröi React-sovellus reCAPTCHA-hallintakonsolissa

Aloita rekisteröimällä sovelluksesi reCAPTCHA: n kehittäjäkonsoliin. Suuntaa kohti Googlen reCAPTCHA-hallintakonsoli, kirjaudu sisään Google-tililläsi ja täytä vaaditut lomakkeen tiedot.

Anna tarran nimi, valitse reCAPTCHA V2ja valitse avattavasta valikosta vahvistuspyynnöt käyttämällä "En ole robotti" -valintaruutua. Anna lopuksi sovelluksesi verkkotunnus. Kirjoita paikallista kehitystä varten paikallinen isäntä verkkotunnuksen nimenä.

Kun sovelluksesi on rekisteröity, sivusto ohjaa sinut uudelle sivulle, jolla on luotu salaisuus ja sivustoavaimet.

Luo React-asiakas

Tämä projekti on kaksiosainen: luot React-asiakkaan, joka tekee yksinkertaisen kirjautumislomakkeen Googlen reCAPTCHA: n ja Express-taustajärjestelmä, joka tekee POST-pyyntöjä reCAPTCHA: n API: lle varmistaakseen tunnuksen, joka on luotu sen jälkeen, kun käyttäjä on suorittanut reCAPTCHA: n haaste.

Luo paikallisesti projektikansio projektitiedostojen säilyttämistä varten. Seuraava, luo React-sovellus ja muuta nykyinen hakemisto asiakkaan hakemistoksi. Luo asiakaskansiosi juurihakemistoon .env-tiedosto sovellusliittymän salaisen avaimen ja sivustoavaimen tallentamiseksi.

REACT_APP_reCAPTCHA_SITE_KEY = "sivuston avain"
REACT_APP_reCAPTCHA_SECRET_KEY = 'salainen avain'

Löydät tämän projektin koodin siitä GitHub-arkisto.

Asenna tarvittavat paketit

Asenna Axios. Tämän kirjaston avulla voit tehdä HTTP-pyyntöjä selaimesta ja React-Google-reCAPTCHA: sta. Tämä paketti tarjoaa React-kohtaisen toteutuksen reCAPTCHA API: lle.

npm asenna react-recaptcha-google axios --save

Integroi Google reCAPTCHA React-sovellukseen

Avaa src/App.js-tiedosto, poista React-koodi ja lisää alla oleva koodi:

Tämä komponentti luo yksinkertaisen kirjautumislomakkeen, joka sisältää Googlen reCAPTCHA-widgetin.

Tuo ensin React-, Axios- ja react-google-recaptcha-paketit:

tuonti Reagoi, { useState, useRef } alkaen'reagoi';
tuonti Axios alkaen"aksiot";
tuonti ReCAPTCHA alkaen'react-google-recaptcha';

Määritä sitten kolme tilamuuttujaa: successMsg, errorMsg ja validToken. Koodisi päivittää nämä tilat onnistuneen lomakkeen lähetyksen ja reCAPTCHA-vahvistuksen jälkeen. Lisäksi hanki sivusto ja salaiset avaimet ENV-tiedostosta.

toimintoSovellus() {
konst [SuccessMsg, setSuccessMsg] = useState("")
konst [ErrorMsg, setErrorMsg] = useState("")
konst [valid_token, setValidToken] = useState([]);
konst SITE_KEY = process.env. REACT_APP_reCAPTCHA_SITE_KEY;
konst SECRET_KEY = process.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Määrittele reCAPTCHA-komponenttiin viittaava useRef-koukku, joka kaappaa tunnuksen, joka luodaan sen jälkeen, kun käyttäjä on suorittanut reCAPTCHA-haasteet.

konst captchaRef = useRef(tyhjä);

Luo sitten handleSubmit-funktio kutsumaan, kun käyttäjä lähettää kirjautumislomakkeen. Tämä toiminto hankkii tunnuksen reCAPTCHA-komponentista ja kutsuu sitten nollaa ReCAPTCHA: n nollausmenetelmä myöhempien tarkistusten mahdollistamiseksi.

Lisäksi se tarkistaa, onko merkki olemassa, ja kutsuu verifyToken-toimintoa vahvistaakseen tunnuksen. Kun se on vahvistanut tunnuksen, se päivittää validToken-tilan API-vastaustiedoilla.

konst handleSubmit = asynk (e) => {
 e.preventDefault();
antaa token = captchaRef.current.getValue();
 captchaRef.current.reset();
jos (tunnus) {
antaa kelvollinen_tunnus = odottaa verifyToken (tunnus);
 setValidToken (valid_token);
jos (valid_token[0].menestys totta) {
konsoli.Hirsi("vahvistettu");
 setSuccessMsg("Hurraa!! olet lähettänyt lomakkeen")
 } muu {
konsoli.Hirsi("ei vahvistettu");
 setErrorMsg("Anteeksi!! Varmista, että et ole botti")
 }
 }
 }

Määritä lopuksi verifyToken-toiminto, joka lähettää POST-pyynnön Express-palvelimen päätepisteeseen Axiosin avulla välittäen reCAPTCHA-tunnuksen ja salaisen avaimen pyynnön rungossa. Jos pyyntö onnistuu, se työntää vastaustiedot APIResponse-taulukkoon ja palauttaa taulukon tuloksena.

konst verifyToken = asynk (tunnus) => {
antaa APIResponse = [];
yrittää {
antaa vastaus = odottaa Axios.post(` http://localhost: 8000/vahvistustunnus"., {
 reCAPTCHA_TOKEN: tunnus,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (response['data']);
palata APIResponse;
 } ottaa kiinni (virhe) {
konsoli.log (virhe);
 }
 };

Palauta lopuksi lomake, jossa on reCAPTCHA-komponentti. Tämä komponentti käyttää viitekoukkua ja sivustoavainta reCAPTCHA-widgetin määrittämiseen ja näyttämiseen.

Kun käyttäjä lähettää lomakkeen, komponentti näyttää onnistumis- tai virheilmoituksen validToken-tilan arvon perusteella. Jos reCAPTCHA-tunnus on kelvollinen, mikä tarkoittaa, että käyttäjä on suorittanut reCAPTCHA-haasteet onnistuneesti, se näyttää onnistumisviestin, muussa tapauksessa se näyttää virhesanoman.

palata (
"Sovellus">
"Sovelluksen otsikko"> 
"sisäänkirjautumislomake">


 {valid_token.length > 0 && kelvollinen_tunnus[0].menestys totta
? <h3luokan nimi="teksti Menestys">{SuccessMsg}h3>
: <h3luokan nimi="tekstivirhe">{ErrorMsg} h3>}


Käyttäjänimi</p>
"teksti" paikkamerkki="Käyttäjänimi..." />




Salasana</p>
"Salasana" paikkamerkki = "Salasana..." />


 luokannimi="recaptcha"
 sitekey={SITE_KEY}
 ref={captchaRef}
 />








viedäoletuksena Sovellus

Suorita lopuksi kehityspalvelin ja siirry selaimeesi http://localhost: 3000 nähdäksesi tulokset.

Luo Express-taustaohjelma

Aloita koko projektikansion juurihakemistossa luo Express-verkkopalvelin, ja asenna nämä paketit:

npm asenna express cors axios body-parser

Määritä Express-palvelin

Avaa seuraavaksi index.js-tiedosto palvelimen projektikansiossa ja lisää tämä koodi:

konst express = vaatia('ilmaista')
konst aksiot = vaatia("aksiot");
konst cors = vaatia("cors");
konst sovellus = express();
konst bodyParser = vaatia('body-parser');
konst jsonParser = bodyParser.json();
konst PORT = process.env. SATAMA || 8000;


app.use (jsonParser);
app.use (cors());


app.post("/vahvistustunnus", asynk (req, res) => {
konst { reCAPTCHA_TOKEN, Secret_Key} = vaadittu runko;


yrittää {
antaa vastaus = odottaa axios.post(` https://www.google.com/recaptcha/api/siteverify? salaisuus =${Secret_Key}&vastaus=${reCAPTCHA_TOKEN}`);
konsoli.log (response.data);


palata res.status(200).json({
 menestys:totta,
 viesti: "Token onnistuneesti vahvistettu",
 verification_info: vastaus.data
 });
 } ottaa kiinni(virhe) {
konsoli.log (virhe);


palata res.status(500).json({
 menestys:väärä,
 viesti: "Virhe tunnuksen vahvistamisessa"
 })
 }
});
app.listen (PORT, () => konsoli.Hirsi(`Sovellus käynnistyi portista ${PORT}`));

Tämä koodi tekee seuraavaa:

  • Palvelin määrittää lähetysreitin, joka tekee asynkronisen HTTP POST -pyynnön Googlen reCAPTCHA API: lle tarkista reCAPTCHA-tunnus Axiosilla välittämällä salaisen avaimen todennusta varten pyynnön URL-osoitteessa.
  • Jos reCAPTCHA-tunnus vahvistetaan onnistuneesti, palvelin vastaa JSON-objektilla, jonka "success"-ominaisuuden arvoksi on asetettu tosi, "message"-ominaisuuden. ilmaisee, että tunnus on vahvistettu onnistuneesti, ja "verification_info"-ominaisuus, joka sisältää tiedot Googlen vahvistusvastauksesta API.
  • Jos vahvistusprosessin aikana tapahtuu virhe, palvelin vastaa JSON-objektilla, joka sisältää a "success"-ominaisuuden arvoksi on asetettu false ja "message"-ominaisuuden arvoksi, joka osoittaa, että merkki.

Suorita lopuksi solmupalvelin ja testaa reCAPTCHA-ominaisuuden toimivuus.

solmu index.js

Voivatko reCAPTCHAt taata suojan roskapostia vastaan?

Googlen mukaan sen reCAPTCHA-palvelun onnistumisprosentti on yli 99%, mikä tarkoittaa, että vain pieni osa roskapostista voi ohittaa reCAPTCHA-suojausominaisuuden.

reCAPTCHA ei ole idioottivarma, koska päättäväiset huonot näyttelijät voivat silti löytää ratkaisuja. Mutta se on edelleen tärkeä työkalu, joka voi merkittävästi vähentää roskapostien aiheuttamaa riskiä.