Na tej stronie objaśniono, jak wyświetlać i dostosowywać widżet reCAPTCHA w wersji 2 na swojej stronie internetowej.
Aby wyświetlić widżet, możesz:
Aby dowiedzieć się, jak dostosować widżet, zobacz Konfiguracje. Możesz na przykład określić język lub motyw widżetu.
Zobacz Weryfikowanie odpowiedzi użytkownika, aby sprawdzić, czy użytkownik rozwiązał zadanie CAPTCHA.
Automatycznie renderuj widżet reCAPTCHA
Najprostszą metodą renderowania widżetu reCAPTCHA na stronie jest dodanie niezbędnych zasobów JavaScript i tagu g-recaptcha
. Tag g-recaptcha
to element DIV o nazwie g-recaptcha
i 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 zostać wczytany za pomocą protokołu HTTPS. Można go umieścić w dowolnym miejscu na stronie bez ograniczeń.
Wyraźnie wyrenderuj widżet reCAPTCHA
Aby opóźnić renderowanie, określ funkcję wywołania zwrotnego obciążenia i dodaj parametry do zasobu JavaScript.
Określ funkcję wywołania zwrotnego
onload
. Ta funkcja zostanie wywołana po załadowaniu wszystkich zależności.<script type="text/javascript"> var onloadCallback = function() { alert("grecaptcha is ready!"); }; </script>
Wstaw zasób JavaScript, ustawiając parametr
onload
jako nazwę funkcji wywołania zwrotnego, a parametrrender
na wartośćexplicit
.<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script>
Po wykonaniu wywołania zwrotnego możesz wywołać metodę
grecaptcha.render
za pomocą interfejsu API JavaScript.
Konfiguracja
Parametry zasobu JavaScript (api.js)
Parametr | Wartość | Opis |
---|---|---|
Onload | Opcjonalnie. Nazwa funkcji wywołania zwrotnego, która zostanie wykonana po wczytaniu wszystkich zależności. | |
renderowanie | jednoznacznie wczytane |
Opcjonalnie. Określa, czy widżet ma być renderowany bezpośrednio. Domyślnie jest 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. Automatycznie wykrywa język użytkownika, jeśli nie zostanie określony. |
Atrybuty tagu g-recaptcha i parametry grecaptcha.render
Atrybut tagu g-recaptcha | Parametr grecaptcha.render | Wartość | Domyślna | Opis |
---|---|---|---|---|
klucz-witryny-danych | klucz witryny | Twój klucz witryny. | ||
motyw graficzny | motyw | ciemność | żarówka | Opcjonalnie. Motyw kolorystyczny widżetu. |
data-size | rozmiar | kompaktowa normalna | kontrolny | Opcjonalnie. Rozmiar widżetu. |
indeks-danych | indeks tabulacji | 0 | Opcjonalnie. Indeks tabulacji widżetu i wyzwania. Jeśli inne elementy strony korzystają z tablicy, ustaw ją, aby ułatwić użytkownikom nawigację. | |
wywołanie zwrotne danych | wywołanie zwrotne | Opcjonalnie. Nazwa funkcji wywołania zwrotnego wykonywanej, gdy użytkownik prześle odpowiedź. Token g-recaptcha-response jest przekazywany do wywołania zwrotnego. |
||
wywołanie wygasło | oddzwonienie wygasło | Opcjonalnie. Nazwa funkcji wywołania zwrotnego wykonywanej po wygaśnięciu odpowiedzi reCAPTCHA i użytkownik musi ponownie przeprowadzić weryfikację. | ||
wywołanie błędu błędu danych | wywołanie zwrotne błędu | Opcjonalnie. Nazwa funkcji wywołania zwrotnego wykonywanej, gdy reCAPTCHA napotka błąd (zwykle połączenie sieciowe), i nie może kontynuować, dopóki połączenie nie zostanie przywrócone. Jeśli określisz tu funkcję, Twoim obowiązkiem jest poinformowanie użytkownika, że powinien ponownie spróbować. |
JavaScript API
Metoda | Opis |
---|---|
grecaptcha.render( kontener,
Parametry
|
Renderuje kontener jako widżet reCAPTCHA i zwraca identyfikator nowo utworzonego widżetu. container Element HTML służący do renderowania widżetu reCAPTCHA. Podaj identyfikator kontenera (ciąg znaków) lub sam element DOM. parametry Obiekt zawierający parametry jako pary klucz=wartość, np. {"sitekey": "your_site_key", "theme": "light"}. Zobacz parametry grecaptcha.render. |
grecaptcha.reset( ) identyfikator_widżetu_widżetu
)
|
Resetuje widżet reCAPTCHA. opt_Widget_id Opcjonalny identyfikator widżetu. W przypadku niesprecyzowania wartość jest ustawiana na pierwszy utworzony widżet. |
grecaptcha.getResponse( identyfikator_widżetu_widżetu
)
|
Pobiera odpowiedź dla widżetu reCAPTCHA. opt_Widget_id Opcjonalny identyfikator widżetu. W przypadku niesprecyzowania wartość jest ustawiana na pierwszy utworzony widżet. |
Przykłady
Jawne renderowanie po wywołaniu obciążenia
<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>
Jawne 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>