# Google-recaptcha

## 簡介:給人類方便給bot困難

(類似於csrf token的功能)

## #1.  安裝

<https://www.google.com/recaptcha>

如果用react.js可以使用[https://github.com/appleboy/react-recaptcha](https://github.com/appleboy/react-recaptcha模組)克服dom沒出現但recaptcha執行造成無法顯示的情況

## #2.使用

文件:<https://developers.google.com/recaptcha/docs/verify>

使用react-recaptcha套件的範例

```
<Recaptcha
  verifyCallback={(r) => console.log(r)}
  theme="light"
  sitekey="6LejmSQUAAAAACsss6nydz-73jHrJBqlH5xa2WR0"
  onloadCallback={() => { }}
/>
```

> 將recapcha置中
>
> ```
>   .g-recaptcha > div { 
>       margin: auto !important;
>   }
> ```

### #3.在server端接收到後傳給google驗證

把verifyCallback拿到的值傳

```
URL: https://www.google.com/recaptcha/api/siteverify

METHOD: POST

POST Parameter    Description
secret       (你的API secret)     Required. The shared key between your site and reCAPTCHA.
response   (點選後接到的verifycallback值)     Required. The user response token provided by reCAPTCHA, verifying the user on your site.
remoteip    (可選)Optional. The user's IP address.   ()
```

Node.js example

(記得要用POST querystring方式傳)

```
  app.post('/checkHuman', (req, res) => {
    axios.post('https://www.google.com/recaptcha/api/siteverify',querystring.stringify({
      secret: '6LejmSQUAAAAAEccpZkMXhZjCwD8Z6kroMPijxmM',
      response: req.body.code 
    })).then(d => {
      console.log(d.data)
    })
  })
```

成功會回傳如下

```
{ success: true,
  challenge_ts: '2017-06-08T08:56:12Z',
  hostname: 'localhost' }
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://easonwang.gitbook.io/web_advance/google_speech_api/google-recaptcha.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.