Google Developers Japan: reCaptcha

reCAPTCHA ã¨ Firebase ã§ã¦ã§ã ã³ã³ãã³ããä¸æ£ä½¿ç¨ããå®ã

2017å¹´9æ7æ¥æ¨ææ¥

1. ã³ã³ã½ã¼ã«ã§ Firebase ããã¸ã§ã¯ããä½æãã

2. ããã¸ã§ã¯ãã®ã³ã¼ããæ ¼ç´ãããã£ã¬ã¯ããªãè¨å®ãã

Firebase CLI ãã、ããã¸ã§ã¯ããä½æããã¨ãã«å©ç¨ãã Google ã¢ã«ã¦ã³ãã«ãã°ã¤ã³ãã¾ã。

$ firebase login

æ¬¡ã«、ããã¸ã§ã¯ãã®ã«ã¼ã ãã£ã¬ã¯ããªãä½æã、åæåãã¾ã。

$ mkdir my_project
$ cd my_project
$ firebase init

$ cd functions
$ npm install request request-promise

package.json ãã¡ã¤ã«ã«ã¯、firebase-functions ã¨ firebase-admin ã«å ãã¦、ä¸è¨ã® 2 ã¤ã®ã¢ã¸ã¥ã¼ã«ãæ°ããè¿½å ããã¾ã。

3. ã¦ã§ã ãããã¤ã¡ã³ãããã¹ããã

$ firebase deploy --only hosting

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-project/overview
Hosting URL: https://your-project.firebaseapp.com

your-project ã¯、ã³ã³ã½ã¼ã«ããããã¸ã§ã¯ããä½æããã¨ãã«å²ãå½ã¦ãããåºæã® ID ã§ã。Hosting ã® URL ããã©ã¦ã¶ã«è²¼ãä»ããã¨、「Firebase Hosting Setup Complete」ã¨ãããã¼ã¸ãè¡¨ç¤ºãããã¯ãã§ã。

4. reCAPTCHA API ãã¼ãåå¾ãã

reCAPTCHA ãåä½ãããã«ã¯、2 ã¤ã® API ãã¼ãå¿è¦ã«ãªãã¾ã。1 ã¤ã¯ã¦ã§ã ã¯ã©ã¤ã¢ã³ãç¨、ãã 1 ã¤ã¯ãµã¼ãã¼ API ç¨ã§ã。ãããã¯、reCAPTCHA ç®¡çããã«ããåå¾ã§ãããã、ãã®ãã¼ã¸ã«ç§»åãã¾ã。æ°ãããµã¤ããä½ã£ã¦ååãä»ã、[reCAPTCHA V2] ãé¸æãã¾ã。ãã¡ã¤ã³æ¬ã«ã¯、Firebase Hosting ã®å®å¨ãªãµã¤ãå（ä¾: 「your-project.firebaseapp.com」）ãå¥åãã¾ã。

ç»é²ãå®äºããã、Site ãã¼ ã¨ Secret ãã¼ãå¥æã§ãã¾ã。Site ãã¼ã¯ããã³ãã¨ã³ã HTML ã«ä½¿ç¨ã、Secret ãã¼ã¯ Cloud Functions ã«ãã¹ãããããã¯ã¨ã³ãã§ä½¿ç¨ãã¾ã。

5. reCAPTCHA ãã¼ã¸ãè¿½å ãã

æ¬¡ã«、reCAPTCHA ãè¡¨ç¤ºããæ°ãã HTML ãã¼ã¸ãè¿½å ãã¾ã。ããã¸ã§ã¯ãã® public ãã£ã¬ã¯ããªã«、recaptcha.html ã¨ããååã§ reCAPTCHA ãè¡¨ç¤ºããæ°ãã HTML ãã¡ã¤ã«ãè¿½å ãã¾ã。æ°ãããã¡ã¤ã«ã«ã¯、æ¬¡ã®åå®¹ãç´æ¥ã³ãã¼ãã¦è²¼ãä»ãã¦ãã ãã。

<html>
  <head>
    <title>Firebase + reCAPTCHA</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script type="text/javascript">
    function dataCallback(response) {
        console.log("dataCallback", response)
        window.location.href = "/checkRecaptcha?response=" + encodeURIComponent(response)
    }
    function dataExpiredCallback() {
        console.log("dataExpiredCallback")
    }
    </script>
  </head>
  <body>
    <div class="g-recaptcha"
      data-sitekey="PASTE_YOUR_SITE_KEY_HERE"
      data-callback="dataCallback"
      data-expired-callback="dataExpiredCallback"/>
  </body>
</html>

body ã®ä¸ã«「g-recaptcha」ã¯ã©ã¹ã® div ãããã¾ã。ããã§æåã«è¡ãå¿è¦ãããã®ã¯、reCAPTCHA ã® Site ãã¼ã div ã® data-sitekey å±æ§ã®å¤ã«ã³ãã¼ãããã¨ã§ã。ä¸é¨ã«ããæåã®ã¹ã¯ãªãããèªã¿è¾¼ã¾ããã¨、ãã® div ã¯èªåçã« reCAPTCHA ã® UI ã«å¤æããã¾ã。è©³ããã¯、ãã¡ãã®ããã¥ã¡ã³ãããè¦§ãã ãã。

ãã 1 åº¦ firebase deploy ãå®è¡ãã¦ãã、Hosting ã® URL ã®「/recaptcha.html」ã«ç§»åããã¨、ããã«ç¢ºèªã§ãã¾ã。ããã、ã¾ã reCAPTCHA ãä½¿ã£ã¦ã¯ããã¾ãã。æ¤è¨¼ã§ããããã«ããã«ã¯、ããã¯ã¨ã³ãã®ã³ã¼ããå¿è¦ã§ã。

ãã®ãã¼ã¸ã® JavaScript ã³ã¼ãã§ã¯、dataCallback ã¨ dataExpiredCallback ã¨ãã 2 ã¤ã®é¢æ°ãå®ç¾©ããã¦ãã¾ã。ãã® 2 ã¤ã®é¢æ°ã¯、reCAPTCHA ãæåããå ´åã¨、ã¦ã¼ã¶ã¼ãä¸å®æéåã«æåããããã¨ãã§ããªãã£ãå ´åã®ã³ã¼ã«ããã¯ã«ãªã£ã¦ãã、div ããåç§ããã¦ãã¾ã。

éè¦ãªã®ã¯、dataCallback ã§ãã©ã¦ã¶ã /checkRecaptcha ã¨ãããã¹ã®å¥ã® URL ã«ãªãã¤ã¬ã¯ãã、response ã¨ããååã§ãã©ã¡ã¼ã¿ãæ¸¡ãã¦ããç¹ã§ã。ãã®æååã¯ reCAPTCHA ãçæãããã®ã§、ã©ã³ãã ãªæååã®ããã«è¦ãã¾ã。

ã¦ã§ããµã¤ãã«ã¯ /checkRecaptcha ã¨ãããã¹ã¯ã¾ã åå¨ãã¾ãã。ããã§、reCAPTCHA ããã®ã¬ã¹ãã³ã¹æååã Cloud Function ãä½¿ã£ã¦æ¤è¨¼ããããã«ãã¾ã。

6. reCAPTCHA ã®ã¬ã¹ãã³ã¹ãæ¤è¨¼ãã Cloud Function ãä½ã

const functions = require('firebase-functions')
const rp = require('request-promise')

exports.checkRecaptcha = functions.https.onRequest((req, res) => {
    const response = req.query.response
    console.log("recaptcha response", response)
    rp({
        uri: 'https://recaptcha.google.com/recaptcha/api/siteverify',
        method: 'POST',
        formData: {
            secret: 'PASTE_YOUR_SECRET_CODE_HERE',
            response: response
        },
        json: true
    }).then(result => {
        console.log("recaptcha result", result)
        if (result.success) {
            res.send("You're good to go, human.")
        }
        else {
            res.send("Recaptcha verification failed. Are you a robot?")
        }
    }).catch(reason => {
        console.log("Recaptcha request failure", reason)
        res.send("Recaptcha request failed.")
    })
})

ããã§æåã«è¡ãå¿è¦ãããã®ã¯、ç»é²ãµã¤ãã§åå¾ãã reCAPTCHA ã® Secret ãã¼ã「PASTE_YOUR_SECRET_CODE_HERE」ã¨æ¸ãããå ´æã«è²¼ãä»ãããã¨ã§ã。

（éãèªèã®çããã¯、ããã¥ã¡ã³ãã«ã¯ reCAPTCHA API ã¨ã³ããã¤ã³ãã®ãã¹ãã、「www.google.com」ã¨æ¸ããã¦ããã«ãããããã、ããã§ã¯「recaptcha.google.com」ã«ãªã£ã¦ãããã¨ã«æ°ã¥ãããããã¾ãã。ããã¯åé¡ããã¾ãã。Spark ãã©ã³ã§ãã®å¼ã³åºããè¡ãããã«ã¯、ããã«è¨è¼ããããã«、recaptcha.google.com ãä½¿ãå¿è¦ãããã¾ã。ãã®ãã¹ãã¯、Cloud Functions ããã®å¤é¨ãã©ãã£ãã¯ã®å®åã¨ãã¦ãã¯ã¤ããªã¹ãã«ç»é²ããã¦ãã¾ã）

ãã®ã³ã¼ãã¯、HTTPS é¢æ°ãå®ç¾©ãã¦ãã¾ã。ãããããªã¬ã¼ãããã¨、ã¯ã¨ãªæååã¨ãã¦åä¿¡ããã¬ã¹ãã³ã¹ãæ¤è¨¼ããããã«、reCAPTCHA API ã¸ã®å¥ã® HTTPS ãªã¯ã¨ã¹ã（request-promise ã¢ã¸ã¥ã¼ã«ãä½¿ç¨ãã¦ãã¾ã）ãä½æããã¾ã。3 éãã®ã±ã¼ã¹ããã、ããã«å¿ãã¦ã¯ã©ã¤ã¢ã³ãã« 3 éãã®ã¬ã¹ãã³ã¹ãè¿ããããã¨ã«æ³¨æãã¦ãã ãã。å·ä½çã«ã¯、ä»¥ä¸ã®ããããã«ãªãã¾ã。

reCAPTCHA ã®æ¤è¨¼ãæåãã（ã¦ã¼ã¶ã¼ã¯äººéã§ãã）
reCAPTCHA ãå¤±æãã（ããããã®å¯è½æ§ããã）
API ã®å¼ã³åºããå¤±æãã

$ firebase deploy

åºåãã、é¢æ°ã URL ã«å²ãå½ã¦ããããã¨ããããã¾ã。ããã¯、æ¬¡ã®ãããª URL ã«ãªãã¾ã。

https://us-central1-your-project.cloudfunctions.net/checkRecaptcha

https://your-project.firebaseapp.com/checkRecaptcha

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "/checkRecaptcha",
        "function": "checkRecaptcha"
      }
    ]
  }
}

è©³ããã¯ããã¥ã¡ã³ãããè¦§ããã ãã¨ãã¦、ããã§ã¯、ãªã©ã¤ãç¨ã®ã»ã¯ã·ã§ã³ãæ°ããè¿½å ãã¦ãã¾ã。å·ä½çã«ã¯、URL ãã¹ /checkRecaptcha ã«ã¢ã¯ã»ã¹ããéã«、åã»ã© functions/index.js ãã¡ã¤ã«ã«è²¼ãä»ãã checkRecaptcha é¢æ°ãå¼ã³åºãããããã«ãã¦ãã¾ã。

recaptcha.html ã® JavaScript ã³ã¼ãã§、ã¦ã¼ã¶ã¼ã reCAPTCHA ãééããéã¯、ãã®ãã¹ã«ãªãã¤ã¬ã¯ãããããã«ãããã¨ãæãåºãã¦ãã ãã。ãã®ãã、reCAPTCHA ã®å¦çãçµããã¦ã¼ã¶ã¼ã¯、å®è³ªçã«ãã®é¢æ°ã«éããããã¨ã«ãªãã¾ã。

æå¾ã«ãã 1 åº¦ãããã¤ãè¡ã、ãã¹ã¦ã®ãã¡ã¤ã«ã Firebase ã«éä¿¡ãã¾ã。

$ firebase deploy

8. reCAPTCHA ããã¹ããã

Hosting ã® URL ã® /recaptcha.html ã«ç§»åã、reCAPTCHA ãééãã¦ã¿ã¾ããã。ãã¨ãã°、ä½æãã®åçãè¡¨ç¤ºãã、è»ãéãå¤å¥ãããã¨ãæ±ãããã¾ã。äººéã¨ãã¦ãµããããæä½ãè¡ã£ã¦ reCAPTCHA ãééããã¨、HTML åã® JavaScript ã«ãã£ã¦é¢æ°ã«ãªãã¤ã¬ã¯ãããã¾ã。ãã®é¢æ°ã¯、ãµã¼ãã¼ãä½¿ã£ã¦æ¬å½ã«äººéã«ããæä½ã§ããããæ¤è¨¼ã、ãã®çµæ、「You're good to go, human.」ã¨ããã¡ãã»ã¼ã¸ãè¡¨ç¤ºããã¾ã。

ããã§ç´¹ä»ãã Cloud Functions for Firebase ã§ reCAPTCHA ãä½¿ããµã³ãã«ã¯、ããããå®éã®ã¦ã§ããµã¤ãã§å©ç¨ãããã®ãã、ããªãã·ã³ãã«ã«ãªã£ã¦ãã¾ã。reCAPTCHA ã®ã¬ã¹ãã³ã¹ãé¢æ°ã«éãæ¹æ³ã¯ããã¤ããã、å½ç¶ãªãã、çããã¯ã¦ã¼ã¶ã¼ã«ã¡ãã»ã¼ã¸ãè¡¨ç¤ºããããããã£ã¨å½¹ç«ã¤ãã¨ããããã¨æãã§ããã。ããããã®ä¾ã¯、ã¦ã§ã ã³ã³ãã³ãããããã«ããä¸æ£ä½¿ç¨ããä¿è·ããæåã®ä¸æ©ã«ãªãã¯ãã§ã。

Reviewed by Eiji Kitamura - Developer Relations Team

ãã®è¨äºã¯ãããããã¼ ã¢ããã±ã¼ã、Doug Stevenson ã«ãã The Firebase Blog ã®è¨äº "Guard Your Web Content from Abuse with reCAPTCHA and Firebase" ãåã«ç¿»è¨³・å çãããã®ã§ã。è©³ããã¯åè¨äºããè¦§ãã ãã。reCAPTCHA

Firebase HostingCloud Functions for FirebaseFirebase ConsoleFirebase CLI 1. ã³ã³ã½ã¼ã«ã§ Firebase ããã¸ã§ã¯ããä½æãã 2. ããã¸ã§ã¯ãã®ã³ã¼ããæ ¼ç´ãããã£ã¬ã¯ããªãè¨å®ãã$ firebase login $ mkdir my_project $ cd my_project $ firebase init firebase inithosting ã¨ functions ã®ä¸¡æ¹publicfunctions$ cd functions $ npm install request request-promise package.json 3. ã¦ã§ã ãããã¤ã¡ã³ãããã¹ããã$ firebase deploy --only hosting ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/your-project/overview Hosting URL: https://your-project.firebaseapp.com your-project 4. reCAPTCHA API ãã¼ãåå¾ããreCAPTCHA ç®¡çããã«

Site ãã¼Secret ãã¼ 5. reCAPTCHA ãã¼ã¸ãè¿½å ããpublicrecaptcha.html<html> <head> <title>Firebase + reCAPTCHA</title> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <script type="text/javascript"> function dataCallback(response) { console.log("dataCallback", response) window.location.href = "/checkRecaptcha?response=" + encodeURIComponent(response) } function dataExpiredCallback() { console.log("dataExpiredCallback") } </script> </head> <body> <div class="g-recaptcha" data-sitekey="PASTE_YOUR_SITE_KEY_HERE" data-callback="dataCallback" data-expired-callback="dataExpiredCallback"/> </body> </html> ããã§æåã«è¡ãå¿è¦ãããã®ã¯ãã¡ãã®ããã¥ã¡ã³ãfirebase deploydataCallbackdataExpiredCallbackdataCallback/checkRecaptcharesponse/checkRecaptcha 6. reCAPTCHA ã®ã¬ã¹ãã³ã¹ãæ¤è¨¼ãã Cloud Function ãä½ãconst functions = require('firebase-functions') const rp = require('request-promise') exports.checkRecaptcha = functions.https.onRequest((req, res) => { const response = req.query.response console.log("recaptcha response", response) rp({ uri: 'https://recaptcha.google.com/recaptcha/api/siteverify', method: 'POST', formData: { secret: 'PASTE_YOUR_SECRET_CODE_HERE', response: response }, json: true }).then(result => { console.log("recaptcha result", result) if (result.success) { res.send("You're good to go, human.") } else { res.send("Recaptcha verification failed. Are you a robot?") } }).catch(reason => { console.log("Recaptcha request failure", reason) res.send("Recaptcha request failed.") }) }) ããã§æåã«è¡ãå¿è¦ãããã®ã¯（éãèªèã®çããã¯、ããã¥ã¡ã³ãã«ã¯ reCAPTCHA API ã¨ã³ããã¤ã³ãã®ãã¹ãã、「www.google.com」ã¨æ¸ããã¦ããã«ãããããã、ããã§ã¯「recaptcha.google.com」ã«ãªã£ã¦ãããã¨ã«æ°ã¥ãããããã¾ãã。ããã¯åé¡ããã¾ãã。Spark ãã©ã³ã§ãã®å¼ã³åºããè¡ãããã«ã¯、ããã«è¨è¼ããããã«、recaptcha.google.com ãä½¿ãå¿è¦ãããã¾ã。ãã®ãã¹ãã¯、Cloud Functions ããã®å¤é¨ãã©ãã£ãã¯ã®å®åã¨ãã¦ãã¯ã¤ããªã¹ãã«ç»é²ããã¦ãã¾ã）ã¬ã¹ãã³ã¹ãæ¤è¨¼ãã

reCAPTCHA ã®æ¤è¨¼ãæåãã（ã¦ã¼ã¶ã¼ã¯äººéã§ãã）

reCAPTCHA ãå¤±æãã（ããããã®å¯è½æ§ããã）

API ã®å¼ã³åºããå¤±æãã

ãã¹ã¦ã®ã±ã¼ã¹ã§$ firebase deploy https://us-central1-your-project.cloudfunctions.net/checkRecaptcha https://your-project.firebaseapp.com/checkRecaptcha 7. Hosting ã® URL ã Cloud Function ã«ãããã³ã°ããããã®ãªã©ã¤ããè¿½å ããfirebase.json{ "hosting": { "public": "public", "rewrites": [ { "source": "/checkRecaptcha", "function": "checkRecaptcha" } ] } } /checkRecaptchafunctions/index.jscheckRecaptcharecaptcha.html$ firebase deploy 8. reCAPTCHA ããã¹ããã/recaptcha.html .blogimg img { width: 100%; border: 0; margin: 0; padding: 10px 0 10px 0; } Eiji Kitamura - Developer Relations Team

reCAPTCHA ã¨ Firebase ã§ã¦ã§ã ã³ã³ãã³ããä¸æ£ä½¿ç¨ããå®ã

1. ã³ã³ã½ã¼ã«ã§ Firebase ããã¸ã§ã¯ããä½æãã

2. ããã¸ã§ã¯ãã®ã³ã¼ããæ ¼ç´ãããã£ã¬ã¯ããªãè¨å®ãã

3. ã¦ã§ã ãããã¤ã¡ã³ãããã¹ããã

4. reCAPTCHA API ãã¼ãåå¾ãã

5. reCAPTCHA ãã¼ã¸ãè¿½å ãã

6. reCAPTCHA ã®ã¬ã¹ãã³ã¹ãæ¤è¨¼ãã Cloud Function ãä½ã

7. Hosting ã® URL ã Cloud Function ã«ãããã³ã°ããããã®ãªã©ã¤ããè¿½å ãã

8. reCAPTCHA ããã¹ããã

ã©ãã«

ããã° ã¢ã¼ã«ã¤ã

Feed

reCAPTCHA ã¨ Firebase ã§ã¦ã§ã ã³ã³ãã³ããä¸æ­£ä½¿ç¨ããå®ã

1. ã³ã³ã½ã¼ã«ã§ Firebase ãã­ã¸ã§ã¯ããä½æãã

2. ãã­ã¸ã§ã¯ãã®ã³ã¼ããæ ¼ç´ãããã£ã¬ã¯ããªãè¨­å®ãã

3. ã¦ã§ã ããã­ã¤ã¡ã³ãããã¹ããã

4. reCAPTCHA API ã­ã¼ãåå¾ãã

5. reCAPTCHA ãã¼ã¸ãè¿½å ãã

6. reCAPTCHA ã®ã¬ã¹ãã³ã¹ãæ¤è¨¼ãã Cloud Function ãä½ã

7. Hosting ã® URL ã Cloud Function ã«ãããã³ã°ããããã®ãªã©ã¤ããè¿½å ãã

8. reCAPTCHA ããã¹ããã

ã©ãã«

ãã­ã° ã¢ã¼ã«ã¤ã

Feed

reCAPTCHA ã¨ Firebase ã§ã¦ã§ã ã³ã³ãã³ããä¸æ£ä½¿ç¨ããå®ã

1. ã³ã³ã½ã¼ã«ã§ Firebase ããã¸ã§ã¯ããä½æãã

2. ããã¸ã§ã¯ãã®ã³ã¼ããæ ¼ç´ãããã£ã¬ã¯ããªãè¨å®ãã

3. ã¦ã§ã ãããã¤ã¡ã³ãããã¹ããã

4. reCAPTCHA API ãã¼ãåå¾ãã

5. reCAPTCHA ãã¼ã¸ãè¿½å ãã

6. reCAPTCHA ã®ã¬ã¹ãã³ã¹ãæ¤è¨¼ãã Cloud Function ãä½ã

7. Hosting ã® URL ã Cloud Function ã«ãããã³ã°ããããã®ãªã©ã¤ããè¿½å ãã

8. reCAPTCHA ããã¹ããã

ã©ãã«

ããã° ã¢ã¼ã«ã¤ã