Z tego artykułu dowiesz się, jak wyświetlać i dostosowywać widżet reCAPTCHA w wersji 2 na swojej stronie internetowej.
Widżet można wyświetlić na 2 sposoby:
Informacje o tym, jak dostosować widżet, znajdziesz w sekcji Konfiguracje. Możesz na przykład określić język lub motyw widżetu.
Zapoznaj się z sekcją Weryfikowanie odpowiedzi użytkownika, aby sprawdzić, czy użytkownik rozwiązał test CAPTCHA.
Automatyczne renderowanie widżetu reCAPTCHA
Najłatwiejszym sposobem renderowania widżetu reCAPTCHA na stronie jest uwzględnienie niezbędnego zasobu JavaScript i tagu g-recaptcha
. Tag g-recaptcha
to element DIV o nazwie klasy g-recaptcha
i Twoim kluczu witryny w atrybucie data-sitekey
:
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
Skrypt musi być wczytywany z użyciem protokołu HTTPS i może być uwzględniony w dowolnym miejscu na stronie bez ograniczeń.
Jednoznacznie renderuj widżet reCAPTCHA
Aby opóźnić renderowanie, można określić funkcję wywołania zwrotnego onload i dodać parametry do zasobu JavaScript.
Określ funkcję wywołania zwrotnego
onload
. Ta funkcja zostanie wywołana po wczytaniu wszystkich zależności.<script type="text/javascript"> var onloadCallback = function() { alert("grecaptcha is ready!"); }; </script>
Wstaw zasób JavaScript, ustawiając parametr
onload
na nazwę funkcji wywołania zwrotnego onload, a parametrrender
naexplicit
.<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script>
Gdy wykonywane jest wywołanie zwrotne, możesz wywołać metodę
grecaptcha.render
za pomocą JavaScript API.
Konfiguracja
Parametry zasobu JavaScript (api.js)
Parametr | Wartość | Opis |
---|---|---|
onload | Opcjonalnie. Nazwa funkcji wywołania zwrotnego, która ma zostać wykonana po wczytaniu wszystkich zależności. | |
renderowanie | bezpośrednie przyciążanie |
Opcjonalnie. Określa, czy widżet ma być renderowany jawnie. Wartość domyślna to onload, co powoduje renderowanie widżetu w pierwszym znalezionym tagu g-recaptcha . |
hl | Zobacz kody języków | Opcjonalnie. Wymusza renderowanie widżetu w określonym języku. Jeśli język użytkownika jest nieokreślony, automatycznie wykrywa język. |
Atrybuty tagu g-recaptcha i parametry grecaptcha.render
Atrybut tagu g-recaptcha | Parametr grecaptcha.render | Wartość | Domyślne | Opis |
---|---|---|---|---|
klucz-danych-witryny | klucz witryny | Twój klucz witryny. | ||
motyw danych | motyw | ciemne jasne | żarówka | Opcjonalnie. Motyw kolorystyczny widżetu. |
data-size | rozmiar | kompaktowy normalny | kontrolny | Opcjonalnie. Rozmiar widżetu. |
data-tabindex | indeks tabulacji | 0 | Opcjonalnie. Indeks tabindex widżetu i wyzwania. Jeśli inne elementy strony korzystają z indeksu tabindex, ustaw ten parametr, by ułatwić użytkownikom nawigację. | |
wywołanie zwrotne danych | wywołanie zwrotne | Opcjonalnie. Nazwa funkcji wywołania zwrotnego wykonywanej, gdy użytkownik prześle pomyślną odpowiedź. Token g-recaptcha-response jest przekazywany do wywołania zwrotnego. |
||
wywołanie zwrotne po wygaśnięciu danych | Wygasłe połączenie zwrotne | Opcjonalnie. Nazwa funkcji wywołania zwrotnego wykonywanej, gdy odpowiedź reCAPTCHA wygaśnie i użytkownik będzie musiał ponownie przejść weryfikację. | ||
wywołanie zwrotne o błędzie danych | błąd wywołania zwrotnego | Opcjonalnie. Nazwa funkcji wywołania zwrotnego, która jest wykonywana, gdy reCAPTCHA napotka błąd (zwykle połączenie sieciowe) i nie będzie kontynuować, dopóki połączenie nie zostanie przywrócone. Jeśli określisz tu funkcję, odpowiadasz za poinformowanie użytkownika, że powinien spróbować ponownie. |
JavaScript API
Metoda | Opis |
---|---|
grecaptcha.render( kontener,
Parametry
|
Renderuje kontener jako widżet reCAPTCHA i zwraca identyfikator nowo utworzonego widżetu. container Element HTML do renderowania widżetu reCAPTCHA. Podaj identyfikator kontenera (ciąg znaków) lub samego elementu DOM. parameters Obiekt zawierający parametry w postaci par klucz=wartość, np. {"sitekey": "your_site_key", "theme": "light"}. Zobacz parametry grecaptcha.render. |
grecaptcha.reset( opt_widget_id
)
|
Resetuje widżet reCAPTCHA. opt_widget_id Identyfikator opcjonalnego widżetu. Jeśli nie określono inaczej, domyślnie ustawiany jest pierwszy widżet. |
grecaptcha.getResponse( ) opt_widget_id
)
|
Pobiera odpowiedź dla widżetu reCAPTCHA. opt_widget_id Identyfikator opcjonalnego widżetu. Jeśli nie określono inaczej, domyślnie ustawiany jest pierwszy widżet. |
Przykłady
Bezpośrednie renderowanie po wywołaniu zwrotnym przy załadowaniu
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'your_site_key'
});
};
</script>
</head>
<body>
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
Jednoznaczne renderowanie wielu widżetów
<html>
<head>
<title>reCAPTCHA demo: Explicit render for multiple widgets</title>
<script type="text/javascript">
var verifyCallback = function(response) {
alert(response);
};
var widgetId1;
var widgetId2;
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
widgetId2 = grecaptcha.render(document.getElementById('example2'), {
'sitekey' : 'your_site_key'
});
grecaptcha.render('example3', {
'sitekey' : 'your_site_key',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
</head>
<body>
<!-- The g-recaptcha-response string displays in an alert message upon submit. -->
<form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
<div id="example1"></div>
<br>
<input type="submit" value="getResponse">
</form>
<br>
<!-- Resets reCAPTCHA widgetId2 upon submit. -->
<form action="javascript:grecaptcha.reset(widgetId2);">
<div id="example2"></div>
<br>
<input type="submit" value="reset">
</form>
<br>
<!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
<form action="?" method="POST">
<div id="example3"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>