web-dev-qa-db-ja.com

FirebaseでRecaptchaを使用する

驚いたことに、両方がGoogle製品の場合はさらにnoがあり、RecaptchaをFirebaseと統合する方法についての情報があります。可能ですか？そうでない場合、認証のないFirebaseアプリで人間を検証するために何を使用できますか？

firebaserecaptcha
19
Sergi Mansilla

これはかなり古い投稿ですが、ここに私のような仲間のGoogle検索者のための答えがあります。これは組み込みで、セットアップが非常に簡単です。

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha', {
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
})
window.recaptchaVerifier.render()

Tuananhが言及しているように、必ず<div id="recaptcha"></div>。

10
Alan Grainger

Firebase Hostingを使用してWebサイトにreCAPTCHAを統合し、コンテンツを提供する方法とCloud Functions for Firebaseを使用してreCAPTCHAから受け取った応答を検証する方法について チュートリアルブログ を公開しました。関数自体は、応答トークンがクエリ文字列を介して受信されると想定して、次のようになります。

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.")
    })
})
5
Doug Stevenson