{"id":225,"date":"2020-08-01T10:42:38","date_gmt":"2020-08-01T01:42:38","guid":{"rendered":"http:\/\/localhost:8000\/?p=225"},"modified":"2021-01-16T10:44:34","modified_gmt":"2021-01-16T01:44:34","slug":"typescript-recaptcha-v2-v3","status":"publish","type":"post","link":"http:\/\/localhost:8000\/2020\/08\/typescript-recaptcha-v2-v3.html","title":{"rendered":"typescript\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306breCAPTCHA v2 &#038; v3\u3092\u5c0e\u5165"},"content":{"rendered":"<p><a href=\"https:\/\/developers.google.com\/recaptcha\">reCAPTCHA<\/a>\u306f\u30b9\u30d1\u30e0\u3084BOT\u306a\u3069\u304b\u3089\u30b5\u30a4\u30c8\u3092\u4fdd\u8b77\u3059\u308b\u305f\u3081\u306e\u3082\u306e\u3067\u3001v2\u3068v3\u304c\u3042\u308a\u307e\u3059\u3002\u4eca\u56de\u306f\u81ea\u5206\u304ctypescript\u3067\u4f5c\u3063\u3066\u3044\u308b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30d7\u30ea\uff08Chrome\u62e1\u5f35\uff09\u3092BOT\u30a2\u30af\u30bb\u30b9\u304b\u3089\u4fdd\u8b77\u3059\u308b\u76ee\u7684\u3067reCAPTCHA\u306ev2\u3068v3\u306e\u4e21\u65b9\u3092\u540c\u3058\u753b\u9762\u306b\u5c0e\u5165\u3057\u307e\u3057\u305f\u3002<br \/>\n<img src=\"http:\/\/localhost:8000\/wp-content\/uploads\/2021\/01\/20200801143807-400x96.png\" alt=\"\" \/><\/p>\n<h2>v2\u3068v3<\/h2>\n<ul>\n<li>\n<p><a href=\"https:\/\/developers.google.com\/recaptcha\/docs\/display\">v2<\/a>\u306fWEB\u30b5\u30a4\u30c8\u3067\u307f\u304b\u3051\u308b\u3084\u3064\u3067\u300c\u3053\u306e\u4e2d\u304b\u3089\u8eca\u304c\u5199\u3063\u3066\u3044\u308b\u753b\u50cf\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u300d\u307f\u305f\u3044\u306a\u611f\u3058\u3067\u3001\u30e6\u30fc\u30b6\u64cd\u4f5c\u306e\u7d50\u679c\u3067BOT\u30a2\u30af\u30bb\u30b9\u306a\u306e\u304b\u3069\u3046\u304b\uff08True\/False\uff09\u3092\u8fd4\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/developers.google.com\/recaptcha\/docs\/v3\">v3<\/a>\u306f\u3001\u30e6\u30fc\u30b6\u30d5\u30ea\u30af\u30b7\u30e7\u30f3\uff08\u672c\u6765\u306e\u76ee\u7684\u3092\u59a8\u3052\u308b\u3088\u3046\u306a\u4e8b\u8c61\u3002\uff09\u306f\u4e00\u5207\u306a\u304f\u3001\u30b9\u30b3\u30a2\uff081\u304c\u6b63\u5e38\u3067\u30010.0\u306b\u8fd1\u3065\u304f\u307b\u3069BOT\u306e\u53ef\u80fd\u6027\u304c\u9ad8\u3044\uff09\u3092\u8fd4\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<h2>\u51e6\u7406\u306e\u6d41\u308c<\/h2>\n<ol>\n<li>DB\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b3\u3064\u306e\u30a2\u30af\u30b7\u30e7\u30f3\uff08Chrome\u62e1\u5f35\u8d77\u52d5\u3001\u4fdd\u5b58\u30dc\u30bf\u30f3\u3001\u524a\u9664\u30dc\u30bf\u30f3\uff09\u306e\u969b\u306bv3\u3092\u4f7f\u3063\u3066\u30b9\u30b3\u30a2\u3092\u8a08\u7b97\u3059\u308b\n<ul>\n<li>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\uff08Chrome\u62e1\u5f35\u306e\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u30da\u30fc\u30b8\u306a\u3044\u306eJS\uff09\u3067token\u3092\u53d6\u5f97<\/li>\n<li>\u30b5\u30fc\u30d0\u30b5\u30a4\u30c9\uff08Cloud Function\uff09\u3067token\u3092\u53d7\u3051\u53d6\u308a\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u3092\u4f7f\u3063\u3066reCAPCHA API\u3092\u547c\u3073\u51fa\u3057\u3066\u30b9\u30b3\u30a2\u3092\u53d6\u5f97<\/li>\n<\/ul>\n<\/li>\n<li>v3\u30b9\u30b3\u30a2\u304c\u95be\u5024\u3088\u308a\u3082\u5c0f\u3055\u3044\u5834\u5408\u306fBOT\u306e\u53ef\u80fd\u6027\u304c\u9ad8\u3044\u3068\u5224\u65ad\u3057\u3001v2\u3092\u4f7f\u3063\u3066\u753b\u50cf\u9078\u629e\u753b\u9762\u3092\u8868\u793a\u3057\u3066\u30e6\u30fc\u30b6\u306b\u753b\u50cf\u3092\u9078\u629e\u3057\u3066\u3082\u3089\u3046<\/li>\n<li>v2\u3067BOT\u3068\u5224\u65ad\u3055\u308c\u305f\u3089\u51e6\u7406\u3092\u4e2d\u65ad\u3059\u308b<\/li>\n<\/ol>\n<h2>reCAPTCHA v3\u306e\u5c0e\u5165<\/h2>\n<h3>\u30ad\u30fc\u306e\u4f5c\u6210<\/h3>\n<p>\u307e\u305a\u306f<a href=\"https:\/\/www.google.com\/recaptcha\/admin\/create\">\u3053\u3061\u3089<\/a>\u304b\u3089\u30ad\u30fc\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u30b5\u30a4\u30c8\u30ad\u30fc\u3068\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u306e\u4e8c\u3064\u304c\u4f5c\u3089\u308c\u307e\u3059\u3002<br \/>\n\u30b5\u30a4\u30c8\u30ad\u30fc\u306f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u3001\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u306f\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3067\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<h3>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u5b9f\u88c5<\/h3>\n<p>\u307e\u305a\u306f\u3001\u30b5\u30fc\u30d0\u30b5\u30a4\u30c9\uff08Cloud Function\uff09\u3067token\u3092\u53d7\u3051\u53d6\u308a\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u3092\u4f7f\u3063\u3066reCAPCHA API\u3092\u547c\u3073\u51fa\u3057\u3066\u30b9\u30b3\u30a2\u3092\u53d6\u5f97\u3059\u308b\u51e6\u7406\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002\u3053\u306e\u51e6\u7406\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u3082\u5b9f\u88c5\u53ef\u80fd\u306a\u306e\u3067\u3059\u304c\u3001\u3069\u3046\u3057\u3066\u3082\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u304c\u9732\u51fa\u3057\u3066\u3057\u307e\u3046\u3081\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3067\u5b9f\u88c5\u305b\u3056\u308b\u3092\u3048\u307e\u305b\u3093\u3002<\/p>\n<p>\u81ea\u5206\u304c\u4f5c\u3063\u3066\u3044\u308b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30d7\u30ea\u306b\u306f\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u30b5\u30fc\u30d0\u306f\u5b58\u5728\u3057\u306a\u3044\u306e\u3067\u3001<a href=\"https:\/\/firebase.google.com\/docs\/functions\/?authuser=0#how_does_it_work\">Cloud Functions for Firebase<\/a>\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<a href=\"https:\/\/firebase.google.com\/docs\/functions\/get-started?authuser=0\">\u3053\u3061\u3089<\/a>\u3092\u30d9\u30fc\u30b9\u306b\u4f5c\u696d\u3092\u9032\u3081\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<h4>Cloud Functions for Firebase\u3092\u4f7f\u3048\u308b\u72b6\u614b\u306b\u3059\u308b<\/h4>\n<h5>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210<\/h5>\n<p><a href=\"https:\/\/console.firebase.google.com\/\">\u3053\u3061\u3089<\/a>\u304b\u3089Firebase\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059<\/p>\n<h5>Firebase\u306e\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30c4\u30fc\u30eb\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h5>\n<pre><code class=\"language-sh\">npm install -g firebase-tools\nfirebase login # \u30d6\u30e9\u30a6\u30b6\u304c\u8d77\u52d5\u3059\u308b\u306e\u3067\u3001\u5bfe\u8c61google\u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u9078\u629e\u3057\u3001\u30d1\u30fc\u30df\u30c3\u30b7\u30e7\u30f3\u3092\u4e0e\u3048\u308b<\/code><\/pre>\n<h5>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306eCloud Functions\u95a2\u4fc2\u306e\u30bd\u30fc\u30b9\u4e00\u5f0f\u3092\u521d\u671f\u5316<\/h5>\n<p>\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u3001firebase.json\u3084functions\u30d5\u30a9\u30eb\u30c0\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-sh\">cd {path_to_project_dir}\nfirebase init functions<\/code><\/pre>\n<p>firebase.json\u3092\u5b9f\u969b\u306e\u30d5\u30a9\u30eb\u30c0\u30d1\u30b9\uff08default\u3060\u3068functions\uff09\u306b\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-json\">{\n  &quot;functions&quot;: {\n    &quot;predeploy&quot;: &quot;npm --prefix functions run build&quot;\n  }\n}<\/code><\/pre>\n<p>\u5fc5\u8981\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u958b\u767a\u7528\u3068\u3057\u3066install\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-sh\">npm install firebase-functions --save-dev\nnpm install firebase-admin --save-dev\nnpm install axios --save-dev  # HTTP\u30a2\u30af\u30bb\u30b9\u306b\u5229\u7528<\/code><\/pre>\n<h5>\u8a66\u3057\u306bhelloWorld\u95a2\u6570\u3092\u30c7\u30d7\u30ed\u30a4<\/h5>\n<p>\u8a66\u3057\u306bhelloWorld\u95a2\u6570\u3092\u30c7\u30d7\u30ed\u30a4\u3057\u3066\u307f\u307e\u3059\u3002<br \/>\n<code>index.ts<\/code>\u306bhelloWorld\u95a2\u6570\u304c\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3055\u308c\u305f\u72b6\u614b\u3067\u51fa\u529b\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3092\u5916\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-typescript\">import * as functions from &#039;firebase-functions&#039;\n\nexport const helloWorld = functions.https.onRequest((request, response) =&gt; {\n  functions.logger.info(&#039;Hello logs!&#039;, { structuredData: true })\n  response.send(&#039;Hello from Firebase!&#039;)\n})<\/code><\/pre>\n<p>\u30c7\u30d7\u30ed\u30a4\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-sh\">firebase deploy --only functions<\/code><\/pre>\n<p>typescript\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u306a\u3044\u5834\u5408\u3001<code>sh: tsc: command not found<\/code>\u3068\u3044\u3046\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3059\u304c\u3001\u4ee5\u4e0b\u3067\u89e3\u6c7a\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-sh\">npm install -g typescript\nvi ~\/.bash_profile\n> + export PATH=`npm bin -g`:$PATH\nsource ~\/.bash_profile<\/code><\/pre>\n<p>\u3055\u3089\u306b\u3001\u7121\u8ab2\u91d1\u306eSpark\u30d7\u30e9\u30f3\u3058\u3083Cloud Functions\u306f\u4f7f\u3048\u306a\u3044\u304b\u3089\u3001\u5f93\u91cf\u8ab2\u91d1\u5236\u306eBlaze\u30d7\u30e9\u30f3\u306b\u5909\u66f4\u3057\u3066\u306d\u3001\u3068\u3044\u3046\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u51fa\u3066\u30c7\u30d7\u30ed\u30a4\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\uff08\u6d99\uff09<\/p>\n<pre><code class=\"language-sh\">Error: Cloud Functions deployment requires the pay-as-you-go (Blaze) billing plan. To upgrade your project, visit the following URL:<\/code><\/pre>\n<p>\u3057\u3087\u3046\u304c\u306a\u3044\u306e\u3067\u3001<a href=\"https:\/\/console.firebase.google.com\/\">\u3053\u3053<\/a>\u304b\u3089\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u6982\u8981\u30da\u30fc\u30b8\u3092\u958b\u304d\u3001\u4f7f\u7528\u91cf\u3068\u8acb\u6c42\u984d\u30da\u30fc\u30b8\u3067\u30d7\u30e9\u30f3\u3092Spark=&gt;Blaze\u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u3053\u3053\u307e\u3067\u3084\u3063\u3066\u3001\u3082\u3046\u4e00\u5ea6<code>firebase deploy --only functions<\/code>\u3092\u5b9f\u884c\u3059\u308b\u3068\u7121\u4e8b\u306b<code>helloWorld<\/code>\u95a2\u6570\u304cFirebaes\u30b3\u30f3\u30bd\u30fc\u30eb\u753b\u9762\u306b\u95a2\u6570\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n<h4>reCAPTCHA\u306esiteverify API\u3092\u547c\u3073\u51fa\u3059\u51e6\u7406\u3092\u66f8\u304f<\/h4>\n<p>\u30b5\u30f3\u30d7\u30eb\u306ehelloWorld\u306f\u7121\u4e8b\u306b\u30c7\u30d7\u30ed\u30a4\u3067\u304d\u305f\u306e\u3067\u3001\u6b21\u306freCAPTCHA\u306e<a href=\"https:\/\/developers.google.com\/recaptcha\/docs\/verify\">siteverify API<\/a>\u3092\u547c\u3073\u51fa\u3059\u51e6\u7406\u3092\u8a18\u8f09\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u307e\u305a\u306f\u3001\u30b3\u30fc\u30c9\u306b\u9732\u51fa\u3055\u305b\u305f\u304f\u306a\u3044\u306e\u3067\u74b0\u5883\u69cb\u6210\u5909\u6570\u3068\u3057\u3066\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-sh\"># \u8a2d\u5b9a\nfirebase functions:config:set recaptcha.v3.secret=&quot;xxxxxxxxxxxxxxxx&quot;\n\n# \u78ba\u8a8d\nfirebase functions:config:get<\/code><\/pre>\n<p><code>index.ts<\/code>\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u66f8\u304d\u63db\u3048\u307e\u3059\u3002\u666e\u901a\u306bpost\u30d1\u30e9\u30e1\u30fc\u30bf\u3092<code>{ secret = secret }<\/code>\u306e\u3088\u3046\u306b\u8a18\u8f09\u3059\u308b\u3068\u3001<code>&#039;error-codes&#039;: [ &#039;missing-input-response&#039;, &#039;missing-input-secret&#039; ]<\/code>\u3068\u3044\u3046\u30a8\u30e9\u30fc\u304c\u51fa\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002\u30d1\u30e9\u30e1\u30fc\u30bf\u306f\u30af\u30a8\u30ea\u30b9\u30c8\u30ea\u30f3\u30b0\u3067\u6e21\u3059\u5fc5\u8981\u304c\u3042\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-typescript\">\/* eslint-disable @typescript-eslint\/no-explicit-any *\/\nimport * as functions from &#039;firebase-functions&#039;\nimport axios, { AxiosResponse } from &#039;axios&#039;\n\nexport const callSiteVerify3 = functions.https.onCall(async (data: any) =&gt; {\n  const secret: string = functions.config().recaptcha.v3.secret \/\/ \u74b0\u5883\u69cb\u6210\u5909\u6570\u304b\u3089\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u3092\u53d6\u5f97\n  const response: AxiosResponse&lt;any&gt; = await axios.post(\n    `https:\/\/www.google.com\/recaptcha\/api\/siteverify?secret=${secret}&amp;response=${data.token}`,\n    {}\n  )\n  return response.data\n})<\/code><\/pre>\n<p>\u3042\u3068\u306f\u3001\u30c7\u30d7\u30ed\u30a4\u3092\u5b9f\u884c\u3059\u308b\u3060\u3051\u3067\u3059\u3002Firebase\u306e\u30b3\u30f3\u30bd\u30fc\u30eb\u753b\u9762\u3067\u95a2\u6570\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308c\u3070\u6210\u529f\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-sh\">firebase deploy --only functions<\/code><\/pre>\n<h3>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u5b9f\u88c5<\/h3>\n<p>\u6b21\u306b\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\uff08Chrome\u62e1\u5f35\u306e\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u30da\u30fc\u30b8\u306a\u3044\u306eJS\uff09\u3067token\u3092\u53d6\u5f97\u3057\u3066\u3001\u5148\u307b\u3069Cloud Functions\u3067\u4f5c\u3063\u305f\u95a2\u6570\uff08API\uff09\u3092\u547c\u3073\u51fa\u3059\u51e6\u7406\u3092\u66f8\u304d\u307e\u3059\u3002<\/p>\n<h4>\u30e9\u30a4\u30d6\u30e9\u30ea\u8ffd\u52a0<\/h4>\n<p>\u307e\u305a\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-sh\">npm install recaptcha-v3\nnpm install firebase<\/code><\/pre>\n<h4>firebase\u306e\u521d\u671f\u5316<\/h4>\n<p>\u6b21\u306b<code>firebase.ts<\/code>\u3092\u4f5c\u3063\u3066Firebase\u3092\u521d\u671f\u5316\u3057\u307e\u3059\u3002 \u3053\u306e\u30b3\u30fc\u30c9\u306f\u3001Firebase\u306e\u30b3\u30f3\u30bd\u30fc\u30eb\u753b\u9762\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u8a2d\u5b9a\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u304b\u3089\u305d\u306e\u307e\u307e\u30b3\u30d4\u30da\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-typescript\">import * as firebase from &#039;firebase&#039;\n\nconst firebaseConfig: { [key: string]: string } = {\n  apiKey: &#039;xxxxx&#039;,\n  authDomain: &#039;xxxxx&#039;,\n  databaseURL: &#039;xxxxx&#039;,\n  projectId: &#039;xxxxx&#039;,\n  storageBucket: &#039;xxxxx&#039;,\n  messagingSenderId: &#039;xxxxx&#039;,\n  appId: &#039;xxxxx&#039;,\n}\n\nfirebase.initializeApp(firebaseConfig)\n\nexport default firebase<\/code><\/pre>\n<h4>Cloud Functions\u306e\u95a2\u6570\u547c\u3073\u51fa\u3057<\/h4>\n<p>\u3042\u3068\u306f\u3001token\u3092\u53d6\u5f97\u3057\u3066\u3001Cloud Functions\u3067\u4f5c\u3063\u305fAPI\u3092\u547c\u3073\u51fa\u3059\u3060\u3051\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-typescript\">import { load } from &#039;recaptcha-v3&#039;\nimport firebase from &#039;.\/firebase&#039;\n\n\/\/ reCAPTCHA \u306esiteverify API\u306e\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u683c\u7d0d\u3059\u308b\u305f\u3081\u306e\u5165\u308c\u7269\ninterface CallSiteVerifyResponse {\n  success: boolean\n  challenge_ts: string\n  hostname: string\n  score: number\n  action: string\n  &#039;error-codes&#039;: []\n}\n\nconst recaptcha = await load(&#039;xxxxxxxxxx&#039;) \/\/ \u4e8b\u524d\u306b\u4f5c\u3063\u305freCAPTCHA v3\u306e\u30b5\u30a4\u30c8\u30ad\u30fc\nconst token = await recaptcha.execute(&#039;xxxxx&#039;) \/\/ \u4efb\u610f\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u540d\nconst func = firebase\n  .app()\n  .functions(&#039;asia-northeast1&#039;) \/\/ Functions\u3092\u5b9f\u884c\u3059\u308b\u30ed\u30b1\u30fc\u30b7\u30e7\u30f3\u3002\u30c7\u30d5\u30a9\u30eb\u30c8\u306fus-central1\n  .httpsCallable(&#039;callSiteVerifyV3&#039;)\nconst response: CallSiteVerifyResponse = await func({ token: token }).then(\n  async (response): Promise&lt;CallSiteVerifyResponse&gt; =&gt; {\n    return response.data as CallSiteVerifyResponse\n  }\n)\n\nif (response.success === false) {\n  throw new Error(`Recaptcha error: ${response[&#039;error-codes&#039;]}`)\n}\nconsole.log(`reCAPCHA v3 score: ${response.score}`)\n\/\/ -&gt; reCAPCHA v3 score: 0.9<\/code><\/pre>\n<p>\u7121\u4e8b\u30b9\u30b3\u30a2\u3092\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n<p>\u5f53\u521d\u306f\u53d6\u5f97\u3057\u305f\u30b9\u30b3\u30a2\u304c\u95be\u5024\uff08\u3068\u308a\u3042\u3048\u305a0.5\u3068\u3057\u307e\u3057\u305f\uff09\u4ee5\u4e0b\u306e\u5834\u5408\u3001BOT\u30a2\u30af\u30bb\u30b9\u3068\u5224\u65ad\u3057\u3066<code>Service is not avairable.<\/code>\u3068\u3057\u3088\u3046\u304b\u3068\u8003\u3048\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u30b0\u30b0\u3063\u3066\u307f\u308b\u3068\u30b9\u30b3\u30a2\u304c\u539f\u56e0\u4e0d\u660e\u306b\u4f4e\u4e0b\u3059\u308b\u3053\u3068\u304c\u3042\u308b\u3088\u3046\u306a\u306e\u3067\u3001\u306a\u3093\u306e\u6551\u6e08\u63aa\u7f6e\u3082\u306a\u304fBOT\u30a2\u30af\u30bb\u30b9\u3068\u5224\u65ad\u3059\u308b\u3068BOT\u3067\u306f\u306a\u3044\u30b5\u30fc\u30d3\u30b9\u5229\u7528\u8005\u3092\u7de0\u3081\u51fa\u3057\u3066\u3057\u307e\u3046\u53ef\u80fd\u6027\u304c\u3042\u308a\u305d\u3046\u3067\u3059\u3002<\/p>\n<p>\u305d\u308c\u3082\u6016\u3044\u306e\u3067\u3001\u307e\u305a\u306freCAPTCHA v3\u3067\u4e00\u5b9a\u306e\u30b9\u30b3\u30a2\u3092\u4e0b\u56de\u3063\u305f\u3089\u3001reCAPTCHA v2\u3067\u753b\u50cf\u3092\u9078\u629e\u3057\u3066\u3082\u3089\u3044\u3001\u305d\u308c\u3067BOT\u30a2\u30af\u30bb\u30b9\u304b\u3069\u3046\u304b\u3092\u6700\u7d42\u7684\u306b\u5224\u65ad\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<h2>reCAPTCHA v2\u306e\u5c0e\u5165<\/h2>\n<p>reCAPTCHA v2\u306f\u3066\u3063\u304d\u308a\u30b5\u30fc\u30d0\u30b5\u30a4\u30c9\u306e\u5b9f\u88c5\u306f\u4e0d\u8981\u306a\u306e\u304b\u3068\u601d\u3063\u3066\u305f\u306e\u3067\u3059\u304c\u3001v3\u3068\u540c\u69d8\u306b\u5fc5\u8981\u3067\u3057\u305f\u3002\u3002\u57fa\u672c\u7684\u306b\u306fv3\u3068\u540c\u3058\u3088\u3046\u306a\u5b9f\u88c5\u3092\u3057\u3066\u3042\u3052\u308c\u3070OK\u3067\u3059\u3002<\/p>\n<h3>\u30ad\u30fc\u306e\u4f5c\u6210<\/h3>\n<p>v3\u3068\u540c\u69d8\u306b<a href=\"https:\/\/www.google.com\/recaptcha\/admin\/create\">\u3053\u3061\u3089<\/a>\u304b\u3089\u30ad\u30fc\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<br \/>\nreCAPTCHA v2 \u306f3\u7a2e\u985e\u306e\u30d1\u30bf\u30fc\u30f3\u304c\u3042\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n<ol>\n<li><a href=\"https:\/\/developers.google.com\/recaptcha\/docs\/display\">\u300c\u79c1\u306f\u30ed\u30dc\u30c3\u30c8\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u300d\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9<\/a>\n<ul>\n<li>=&gt; \u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u30af\u30ea\u30c3\u30af\u3055\u305b\u3066\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u691c\u8a3c\u3057\u3001\u30ed\u30dc\u30c3\u30c8\u306e\u53ef\u80fd\u6027\u304c\u3042\u308b\u5834\u5408\u3068\u5224\u65ad\u3055\u308c\u305f\u3089\u30c1\u30e3\u30ec\u30f3\u30b8\u304c\u5b9f\u884c\u3055\u308c\u308b\uff08\uff1d\u753b\u50cf\u9078\u629e\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u308b\uff09<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/developers.google.com\/recaptcha\/docs\/invisible\">\u975e\u8868\u793a reCAPTCHA \u30d0\u30c3\u30b8<\/a>\n<ul>\n<li>=&gt; \u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u691c\u8a3c\u3057\u3001\u30ed\u30dc\u30c3\u30c8\u306e\u53ef\u80fd\u6027\u304c\u3042\u308b\u3068\u5224\u65ad\u3055\u308c\u305f\u3089\u30c1\u30e3\u30ec\u30f3\u30b8\u304c\u5b9f\u884c\u3055\u308c\u308b\uff08\uff1d\u753b\u50cf\u9078\u629e\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u308b\uff09<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/developer.android.com\/training\/safetynet\/recaptcha.html\">reCAPTCHA Android<\/a>\n<ul>\n<li>=&gt; Android\u30a2\u30d7\u30ea\u5c02\u7528<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>\u4eca\u56de\u306f\u3001v3\u3067BOT\u306e\u53ef\u80fd\u6027\u304c\u9ad8\u3044\u5834\u5408\u306b\u753b\u50cf\u9078\u629e\u3055\u305b\u308b\u306e\u304c\u76ee\u7684\u306a\u306e\u3067\u3059\u304c\u3001\u308f\u3056\u308f\u3056\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u8868\u793a\u3055\u305b\u308b\u3088\u308a\u306f\u76f4\u63a5\u753b\u50cf\u9078\u629e\u3055\u305b\u305f\u65b9\u304c\u30b7\u30f3\u30d7\u30eb\u3060\u3068\u601d\u3044\u3001\u300c2. \u975e\u8868\u793a reCAPTCHA \u30d0\u30c3\u30b8\u300d\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u8a2d\u5b9a\u3092\u9032\u3081\u308b\u3068\u30b5\u30a4\u30c8\u30ad\u30fc\u3068\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u307e\u305f\u3001v3\u3067\u65e2\u306bBOT\u306e\u53ef\u80fd\u6027\u304c\u9ad8\u3044\u3068\u5224\u65ad\u3055\u308c\u305f\u5f8c\u306a\u306e\u3067\u3001<code>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306e\u8a2d\u5b9a<\/code>\u3067\u306f<code>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u91cd\u8996<\/code>\u3092\u9078\u629e\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<h3>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u5b9f\u88c5<\/h3>\n<p>\u3053\u3053\u306f\u4f7f\u3046\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u304c\u9055\u3046\u3060\u3051\u3067\u3001v3\u3068\u5168\u304f\u540c\u3058\u3067\u3059\u3002<\/p>\n<p>\u74b0\u5883\u69cb\u6210\u5909\u6570\u3092\u8a2d\u5b9a\u3057\u3066<\/p>\n<pre><code class=\"language-sh\">firebase functions:config:set recaptcha.v3.secret=&quot;xxxxxxxxxxxxxxxx&quot;<\/code><\/pre>\n<p><code>index.ts<\/code>\u306bv2\u7528\u306e\u95a2\u6570\u3092\u8ffd\u52a0\u3057\u3066<\/p>\n<pre><code class=\"language-typescript\">export const callSiteVerifyV2 = functions.https.onCall(async (data: any) =&gt; {\n  const secret: string = functions.config().recaptcha.v2.secret \/\/ \u74b0\u5883\u69cb\u6210\u5909\u6570\u304b\u3089\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u3092\u53d6\u5f97\n  const response: AxiosResponse&lt;any&gt; = await axios.post(\n    `https:\/\/www.google.com\/recaptcha\/api\/siteverify?secret=${secret}&amp;response=${data.token}`,\n    {}\n  )\n  return response.data\n})<\/code><\/pre>\n<p>\u30c7\u30d7\u30ed\u30a4\u3092\u5b9f\u884c\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-sh\">firebase deploy --only functions<\/code><\/pre>\n<h3>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u5b9f\u88c5<\/h3>\n<p>\u3053\u3053\u306fWeb\u4e0a\u306b\u6b32\u3057\u3044\u60c5\u5831\u304c\u307b\u3068\u3093\u3069\u898b\u3064\u304b\u3089\u305a\u3001\u3060\u3044\u3076\u82e6\u52b4\u3057\u307e\u3057\u305f\u3002<\/p>\n<h4>\u5019\u88dc1: recaptcha-v2 =&gt; \u30dc\u30c4<\/h4>\n<p>\u307e\u305a\u3001\u666e\u901a\u306bv3\u3068\u540c\u3058\u3088\u3046\u306b <a href=\"https:\/\/www.npmjs.com\/package\/recaptcha-v2\">recaptcha-v2<\/a> \u3092\u5229\u7528\u3059\u308c\u3070\u826f\u3044\u304b\u3068\u601d\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u3053\u306e\u30e9\u30a4\u30d6\u30e9\u30ea5\u5e74\u524d\u304b\u3089\u66f4\u65b0\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002<br \/>\n\u5229\u7528\u65b9\u6cd5\u3092\u898b\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u3001\u666e\u901a\u306b\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u3092\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u3001\u30ad\u30fc\u304c\u9732\u51fa\u3057\u3066\u3057\u307e\u3044\u307e\u3059\u3002\u6016\u3044\u306e\u3067\u5229\u7528\u3092\u3084\u3081\u307e\u3057\u305f\u3002<\/p>\n<pre><code class=\"language-javascript\">var recaptcha = new Recaptcha(PUBLIC_KEY, PRIVATE_KEY);<\/code><\/pre>\n<h4>\u5019\u88dc2: grecaptcha =&gt; \u30dc\u30c4<\/h4>\n<p>\u6b21\u306b\u3001<a href=\"https:\/\/www.npmjs.com\/package\/grecaptcha\">grecaptcha<\/a>\u3068\u3044\u3046\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u767a\u898b\u3057\u305f\u306e\u3067\u3059\u304c\u3001\u3053\u3061\u3089\u3082\u5229\u7528\u65b9\u6cd5\u3092\u898b\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u304c\u9732\u51fa\u3059\u308b\u306e\u3067\u3001\u5229\u7528\u3092\u3084\u3081\u307e\u3057\u305f\u3002<\/p>\n<pre><code class=\"language-javascript\">const client = new Grecaptcha(&#039;secret&#039;)<\/code><\/pre>\n<h4>\u5019\u88dc3: CDN\u5229\u7528 =&gt; \u63a1\u7528<\/h4>\n<p>\u7d50\u5c40\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u5229\u7528\u3092\u3084\u3081\u3066\u3001CDN\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u4eca\u56de\u306fv3\u3067\u30c0\u30e1\u3060\u3063\u305f\u3089v2\u3092\u30c1\u30e3\u30ec\u30f3\u30b8\u3059\u308b\u3068\u3044\u3046\u5f62\u306a\u306e\u3067\u3001\u660e\u793a\u7684\u306breCAPTHCA\u30a6\u30a3\u30b8\u30a7\u30c3\u30c8\u3092\u8868\u793a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u306e\u3067\u3001\u516c\u5f0f\u30b5\u30a4\u30c8\u3067\u306f<a href=\"https:\/\/developers.google.com\/recaptcha\/docs\/display#explicit_render\">\u3053\u3061\u3089<\/a>\u306e\u624b\u9806\u304c\u30d9\u30fc\u30b9\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h5>CDN\u304b\u3089\u30b9\u30af\u30ea\u30d7\u30c8\u8aad\u307f\u8fbc\u307f<\/h5>\n<p>\u307e\u305a\u306f\u3001html\u30d5\u30a1\u30a4\u30eb\u3067CDN\u304b\u3089\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n<p>\u516c\u5f0f\u30b5\u30a4\u30c8\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b<code>api.js<\/code>\u3092\u8aad\u307f\u8fbc\u307f\u3001recaptcha\u306e\u6e96\u5099\u304c\u5b8c\u4e86\u3059\u308b\uff08\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306e<code>grecaptcha<\/code>\u304c\u751f\u6210\u3055\u308c\u308b\uff09\u306e\u3092\u5f85\u3063\u3066\u304b\u3089onloadCallback\u3067\u672c\u6765\u3084\u308a\u305f\u3044\u51e6\u7406\u3092\u66f8\u304f\u3088\u3046\u306a\u3053\u3068\u3092\u671f\u5f85\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u3053\u3053\u306bvue\u3084react\u306e\u521d\u671f\u5316\u51e6\u7406\u3092\u66f8\u304f\u306e\u306f\u3060\u3044\u3076\u5acc\u306a\u611f\u3058\u3067\u3059\u3002\u3002<\/p>\n<pre><code class=\"language-html\">&lt;div id=&quot;recaptcha-v2-container&quot;&gt;&lt;\/div&gt;\n&lt;script type=&quot;text\/javascript&quot;&gt;\n  var onloadCallback = function() {\n    alert(&quot;grecaptcha is ready!&quot;); \/\/ \u3053\u3053\u3067\u672c\u6765\u3084\u308a\u305f\u3044\u51e6\u7406\u3092\u66f8\u304f\n  };\n&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/www.google.com\/recaptcha\/api.js?onload=onloadCallback&amp;render=explicit&quot; async defer&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>\u306a\u306e\u3067\u3001<code>onload<\/code>\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u5229\u7528\u3059\u308b\u306e\u306f\u3084\u3081\u3066\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002\u3061\u306a\u307f\u306b\u3001div\u30bf\u30b0\u306f\u30a6\u30a3\u30b8\u30a7\u30c3\u30c8\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u5148\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-html\">&lt;div id=&quot;recaptcha-v2-container&quot;&gt;&lt;\/div&gt;\n&lt;script src=&quot;https:\/\/www.google.com\/recaptcha\/api.js?render=explicit&quot; defer&gt;&lt;\/script&gt;<\/code><\/pre>\n<h5>\u578b\u306e\u89e3\u6c7a<\/h5>\n<p>typescript\u3067\u5b9f\u88c5\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u306e\u307e\u307e\u3060\u3068import \u3059\u308b\u3068<code>Cannot Find Module<\/code>\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u3066\u3057\u307e\u3044\u307e\u3059\u306e\u3067\u3001<code>index.d.ts<\/code>\u3092\u4f5c\u6210\u3057\u3066\u578b\u5b9a\u7fa9\u3092\u3057\u3066\u304a\u304d\u307e\u3059<\/p>\n<pre><code class=\"language-tpyescript\">declare module &#039;grecaptcha&#039;<\/code><\/pre>\n<p>\u3061\u306a\u307f\u306b\u3001<a href=\"https:\/\/www.npmjs.com\/package\/@types\/grecaptcha\">@types\/grecaptcha<\/a>\u3068\u3044\u3046\u3082\u306e\u304c\u3042\u3063\u3066\u3001\u3053\u308c\u3092\u5229\u7528\u3059\u308b\u65b9\u304c\u826f\u3055\u305d\u3046\u306a\u306e\u3067\u3059\u304c\u3001\u5b9a\u7fa9\u5185\u5bb9\u306f\u5b8c\u74a7\u306a\u306e\u306b<code>export<\/code>\u3055\u308c\u3066\u306a\u3044\u306e\u3067\u305d\u306e\u307e\u307e\u3067\u306f\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093\u3002<br \/>\n\u8a66\u3057\u306b\u3001<code>npm install @types\/grecaptcha --save-dev<\/code>\u3057\u3066\u3001<code>node_modules\/@types\/grecaptcha\/index.d.ts<\/code>\u306e\u6700\u5f8c\u306e\u884c\u306b<\/p>\n<pre><code class=\"language-typescript\">export default grecaptcha<\/code><\/pre>\n<p>\u3092\u8ffd\u52a0\u3057\u3066\u3042\u3052\u308b\u3068\u666e\u901a\u306bimport\u3057\u3066\u5229\u7528\u3067\u304d\u307e\u3057\u305f\u3002<br \/>\n\u3068\u306f\u3044\u3048\u3001node_modules\u306b\u624b\u3092\u5165\u308c\u308b\u306e\u3082\u9055\u3046\u3068\u601d\u3046\u3057\u3001export\u3055\u308c\u3066\u306a\u3044\u3082\u306e\u3092import\u3059\u308b\u65b9\u6cd5\u3082\u81ea\u5206\u306b\u306f\u5206\u304b\u3089\u306a\u3044\u306e\u3067\u3001\u3053\u3061\u3089\u306f\u65ad\u5ff5\u3057\u307e\u3057\u305f\u3002<\/p>\n<h5>grecaptcha\u3092\u30d0\u30f3\u30c9\u30eb\u5bfe\u8c61\u5916\u306b<\/h5>\n<p>\u307e\u305f\u3001\u30d0\u30f3\u30c9\u30eb\u6642\u306bCDN\u304b\u3089\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u53d6\u308a\u8fbc\u3080\u3088\u3046<code>webpack.config.js<\/code>\u306b\u9664\u5916\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<br \/>\n\u3053\u308c\u306b\u3088\u308agrecaptcha\u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u95a2\u3057\u3066\u306f\u3001\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306e<code>grecaptcha<\/code>\u3092\u5229\u7528\u3057\u3066\u304f\u308c\u308b\u5f62\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-javascript\">  externals: {\n    grecaptcha: &#039;grecaptcha&#039;,\n  }<\/code><\/pre>\n<h5>firebase\u306e\u521d\u671f\u5316<\/h5>\n<p>\u3053\u308c\u306f <a href=\"#firebase\u306e\u521d\u671f\u5316\">v3\u3068\u540c\u3058<\/a> \u306a\u306e\u3067\u7701\u7565<\/p>\n<h5>Cloud Functions\u306e\u95a2\u6570\u547c\u3073\u51fa\u3057<\/h5>\n<p>\u3042\u3068\u306f\u3001token\u3092\u53d6\u5f97\u3057\u3066\u3001Cloud Functions\u3067\u4f5c\u3063\u305fAPI\u3092\u547c\u3073\u51fa\u3057\u307e\u3059\u3002<br \/>\n\u30dd\u30a4\u30f3\u30c8\u304c\u3044\u304f\u3064\u304b\u3042\u308b\u306e\u3067\u3001\u5217\u6319\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li><code>grecaptcha.ready<\/code>\u3067grecaptcha\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u6e96\u5099\u304c\u5b8c\u4e86\u3059\u308b\uff08\uff1d\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306egrecapthca\u304c\u3067\u304d\u308b\uff09\u306e\u3092\u5f85\u3061\u5408\u308f\u305b\u308b<\/li>\n<li><a href=\"https:\/\/developers.google.com\/recaptcha\/docs\/display#js_api\">grecaptcha.render<\/a>\u3067reRECAPTCHA\u30a6\u30a3\u30b8\u30a7\u30c3\u30c8\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3066\u3001widgetId\u3092\u53d6\u5f97\u3059\u308b\n<ul>\n<li>\u7b2c\u4e00\u5f15\u6570\u306f\u30b3\u30f3\u30c6\u30ca\u3067\u3001\u30a6\u30a3\u30b8\u30a7\u30c3\u30c8\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u5bfe\u8c61\u306eHTML\u30a8\u30ec\u30e1\u30f3\u30c8\u3082\u3057\u304f\u306fID\u3092\u6307\u5b9a\u3059\u308b<\/li>\n<li>\u7b2c\u4e8c\u5f15\u6570\u306b\u306f\u3001<a href=\"https:\/\/developers.google.com\/recaptcha\/docs\/display#render_param\">\u3053\u3061\u3089<\/a>\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u6307\u5b9a\u3059\u308b\u3002\u4eca\u56de\u306f<code>siteKey<\/code>\u30fb<code>size<\/code>\u30fb<code>callback<\/code>\u3092\u3057\u3066\u3044\u308b\u3002<\/li>\n<\/ul>\n<\/li>\n<li><code>grecaptcha.execute()<\/code>\u306b\u53d6\u5f97\u3057\u305fwidgetId\u3092\u6e21\u3057\u3066\u691c\u8a3c\u3092\u884c\u3046\n<ul>\n<li>widgetId\u3092\u6307\u5b9a\u305b\u305a\u306b\u5b9f\u884c\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd\u3002\u305d\u306e\u5834\u5408\u753b\u9762\u306a\u3044\u306e\u6700\u521d\u306e\u30a6\u30a3\u30b8\u30a7\u30c3\u30c8\u304c\u5229\u7528\u3055\u308c\u308b<\/li>\n<li>\u4eca\u56de\u306fv3\u3068v2\u3092\u540c\u4e00\u306e\u753b\u9762\u3067\u540c\u6642\u306b\u5b9f\u884c\u3057\u3066\u3044\u308b\u305f\u3081\u3001widgetId\u3092\u6307\u5b9a\u305b\u305a\u306b\u5b9f\u884c\u3059\u308b\u3068v3\u306ewidget\u304c\u5229\u7528\u3055\u308c\u3066\u3001\u30b5\u30a4\u30c8\u30ad\u30fc\u3068\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u304c\u30de\u30c3\u30c1\u305b\u305a\u30a8\u30e9\u30fc\u3068\u306a\u3063\u305f<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><code class=\"language-typescript\">import grecaptcha from &#039;grecaptcha&#039;\n\n\/\/ reCAPTCHA \u306esiteverify API\u306e\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u683c\u7d0d\u3059\u308b\u305f\u3081\u306e\u5165\u308c\u7269 \u203bv3\u3068\u5171\u901a\ninterface CallSiteVerifyResponse {\n  success: boolean\n  challenge_ts: string\n  hostname: string\n  score: number\n  action: string\n  &#039;error-codes&#039;: []\n}\n\ngrecaptcha.ready((): void =&gt; {\n  const widgetId: number = grecaptcha.render(&#039;recaptcha-v2-container&#039;, {\n    sitekey: &#039;xxxxx&#039;, \/\/ \u3053\u3053\u3067\u30b5\u30a4\u30c8\u30ad\u30fc\u3092\u6307\u5b9a\u3059\u308b\n    size: &#039;invisible&#039;, \/\/ \u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306f\u975e\u8868\u793a\n    callback: async (token: string) =&gt; {\n      const func = firebase\n        .app()\n        .functions(&#039;asia-northeast1&#039;)\n        .httpsCallable(&#039;callSiteVerifyV2&#039;) \/\/ v2\u7528\u306eCloud Functions\u306e\u95a2\u6570\n\n      const response: CallSiteVerifyResponse = await func({\n        token: token,\n      }).then(\n        async (response): Promise&lt;CallSiteVerifyResponse&gt; =&gt; {\n          return response.data as CallSiteVerifyResponse\n        }\n      )\n\n      if (response.success) {\n        console.log(&#039;V2 check succeeded.&#039;)\n        return\n      }\n\n      throw new Error(`BOT access detected. response: ${JSON.stringify(response)}`)\n    },\n  })\n\n  grecaptcha.execute(widgetId)\n  \/\/ -&gt; V2 check succeeded.\n  \/\/ or \n  \/\/ -&gt; Uncaught Error: BOT access detected. \n})<\/code><\/pre>\n<p>\u3053\u308c\u3067\u3001\u7121\u4e8b\u306breCAPTCHA v2\u3067\u306e\u691c\u8a3c\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3057\u305f\u3002  <\/p>\n<h2>\u3055\u3044\u3054\u306b<\/h2>\n<p>\u305d\u308c\u306a\u308a\u306b\u82e6\u52b4\u3057\u307e\u3057\u305f\u304c\u3001typescript\u3067\u4f5c\u3063\u305f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30d7\u30ea\u306breCAPTCHA v2 \u3068 v3\u3092\u4e21\u65b9\u540c\u6642\u306b\u5c0e\u5165\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3057\u305f\u3002<br \/>\n\u7279\u306bv2\u306e\u65b9\u306ftypescript\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u5c0e\u5165\u3059\u308b\u30b1\u30fc\u30b9\u304c\u5168\u304fWEB\u4e0a\u3067\u307e\u3063\u305f\u304f\u898b\u3064\u304b\u3089\u306a\u304b\u3063\u305f\u306e\u3067\u3001\u3053\u306e\u8a18\u4e8b\u304c\u8ab0\u304b\u306e\u52a9\u3051\u306b\u306a\u308c\u3070\u3044\u3044\u306a\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>reCAPTCHA\u306f\u30b9\u30d1\u30e0\u3084BOT\u306a\u3069\u304b\u3089\u30b5\u30a4\u30c8\u3092\u4fdd\u8b77\u3059\u308b\u305f\u3081\u306e\u3082\u306e\u3067\u3001v2\u3068v3\u304c\u3042\u308a\u307e\u3059\u3002\u4eca\u56de\u306f\u81ea\u5206\u304ctypescript\u3067\u4f5c\u3063\u3066\u3044\u308b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30d7\u30ea\uff08Chrome\u62e1\u5f35\uff09\u3092BOT\u30a2\u30af\u30bb\u30b9\u304b\u3089\u4fdd\u8b77\u3059\u308b\u76ee\u7684\u3067reCAPTCHA\u306ev2\u3068v3\u306e\u4e21\u65b9\u3092\u540c\u3058\u753b\u9762\u306b\u5c0e\u5165\u3057\u307e\u3057\u305f\u3002 v2\u3068v3 v2\u306fWEB\u30b5\u30a4\u30c8\u3067\u307f\u304b\u3051\u308b\u3084\u3064\u3067\u300c\u3053\u306e\u4e2d\u304b\u3089\u8eca\u304c\u5199\u3063\u3066\u3044\u308b\u753b\u50cf\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u300d\u307f\u305f\u3044\u306a\u611f\u3058\u3067\u3001\u30e6\u30fc\u30b6\u64cd\u4f5c\u306e\u7d50\u679c\u3067BOT\u30a2\u30af\u30bb\u30b9\u306a\u306e\u304b\u3069\u3046\u304b\uff08True\/False\uff09\u3092\u8fd4\u3057\u3066\u304f\u308c\u307e\u3059\u3002 v3\u306f\u3001\u30e6\u30fc\u30b6\u30d5\u30ea\u30af\u30b7\u30e7\u30f3\uff08\u672c\u6765\u306e\u76ee\u7684\u3092\u59a8\u3052\u308b\u3088\u3046\u306a\u4e8b\u8c61\u3002\uff09\u306f\u4e00\u5207\u306a\u304f\u3001\u30b9\u30b3\u30a2\uff081\u304c\u6b63\u5e38\u3067\u30010.0\u306b\u8fd1\u3065\u304f\u307b\u3069BOT\u306e\u53ef\u80fd\u6027\u304c\u9ad8\u3044\uff09\u3092\u8fd4\u3057\u3066\u304f\u308c\u307e\u3059\u3002 \u51e6\u7406\u306e\u6d41\u308c DB\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b3\u3064\u306e\u30a2\u30af\u30b7\u30e7\u30f3\uff08Chrome\u62e1\u5f35\u8d77\u52d5\u3001\u4fdd\u5b58\u30dc\u30bf\u30f3\u3001\u524a\u9664\u30dc\u30bf\u30f3\uff09\u306e\u969b\u306bv3\u3092\u4f7f\u3063\u3066\u30b9\u30b3\u30a2\u3092\u8a08\u7b97\u3059\u308b \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\uff08Chrome\u62e1\u5f35\u306e\u30dd\u30c3\u30d7\u30a2\u30c3 <a href=\"http:\/\/localhost:8000\/2020\/08\/typescript-recaptcha-v2-v3.html\" class=\"read-more button-fancy -red\"><span class=\"btn-arrow\"><\/span><span class=\"twp-read-more text\">Continue Reading<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12,25],"tags":[],"_links":{"self":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts\/225"}],"collection":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/comments?post=225"}],"version-history":[{"count":1,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts\/225\/revisions"}],"predecessor-version":[{"id":227,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts\/225\/revisions\/227"}],"wp:attachment":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/media?parent=225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/categories?post=225"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/tags?post=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}