{ "componentChunkName": "component---src-templates-post-js", "path": "/laravel5-8-vue-js-huan-jing-nigoogle-recaptcha-v2woshi-zhuang-suru/", "result": {"data":{"ghostPost":{"id":"Ghost__Post__60fa77ac3986b000013a3971","title":"Laravel5.8 Vue.js 環境にGoogle reCAPTCHA v2を実装する","slug":"laravel5-8-vue-js-huan-jing-nigoogle-recaptcha-v2woshi-zhuang-suru","featured":false,"feature_image":"https://ghost.tech.anti-pattern.co.jp/content/images/2022/04/1_qH5wPVMTKyBw7tA0A-2urg.png","excerpt":"Laravel5.8 Vue.js 環境にGoogle reCAPTCHA v2を実装する\n下準備\nreCAPTCHAreCAPTCHA is a security service that protects your websites from fraud\nand abuse.reCAPTCHA [https://www.google.com/recaptcha/about/]\n\nから登録をする。（ローカル環境で実行したければ、ローカルで動かす用のドメインを登録する）\n\nhostsに\n\n127.0.0.1 koooohe.development\n\nと書いてkooooohe.developmentを登録するなど。\n\n.env\n.envに取得した、SITE_KEYとSECRET_KEYを書いていく。\n\nMIX_RECAPTCHA_KEY=XXXXXX\nRECAPTCHA_SECRET=XXXXXX\n\n\nMIXというprefixをつけておくと、Vue.jsからも読み込めるようになる。\n\nCompiling Assets (Mix) - Laravel - The PHP Framework","custom_excerpt":null,"visibility":"public","created_at_pretty":"23 July, 2021","published_at_pretty":"09 July, 2019","updated_at_pretty":"21 April, 2022","created_at":"2021-07-23T17:02:52.000+09:00","published_at":"2019-07-10T00:00:00.000+09:00","updated_at":"2022-04-21T17:06:17.000+09:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"Kohei Kondo","slug":"kooooohe","bio":null,"profile_image":"https://ghost.tech.anti-pattern.co.jp/content/images/2022/04/MVIMG_20180910_102813.png","twitter":"@kooooohe_","facebook":null,"website":null}],"primary_author":{"name":"Kohei Kondo","slug":"kooooohe","bio":null,"profile_image":"https://ghost.tech.anti-pattern.co.jp/content/images/2022/04/MVIMG_20180910_102813.png","twitter":"@kooooohe_","facebook":null,"website":null},"primary_tag":{"name":"PHP","slug":"php","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},"tags":[{"name":"PHP","slug":"php","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"Laravel","slug":"laravel","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"reCAPCHA","slug":"recapcha","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"}],"plaintext":"Laravel5.8 Vue.js 環境にGoogle reCAPTCHA v2を実装する\n下準備\nreCAPTCHAreCAPTCHA is a security service that protects your websites from fraud\nand abuse.reCAPTCHA [https://www.google.com/recaptcha/about/]\n\nから登録をする。（ローカル環境で実行したければ、ローカルで動かす用のドメインを登録する）\n\nhostsに\n\n127.0.0.1 koooohe.development\n\nと書いてkooooohe.developmentを登録するなど。\n\n.env\n.envに取得した、SITE_KEYとSECRET_KEYを書いていく。\n\nMIX_RECAPTCHA_KEY=XXXXXX\nRECAPTCHA_SECRET=XXXXXX\n\n\nMIXというprefixをつけておくと、Vue.jsからも読み込めるようになる。\n\nCompiling Assets (Mix) - Laravel - The PHP Framework For Web ArtisansLaravel\n[https://laravel.com/docs/5.7/mix#environment-variables]\n\nVue.js\nreCAPTCHAの情報を取得する\nrecaptcha_site_key() {\n return process.env.MIX_RECAPTCHA_KEY;\n}\n\n\n\nといった感じで、.envの内容を取得する。\n\nそして、recaptchaをVue.jsで使うためのpluginをinstall\n\nyarn add vue-recaptcha\n\ncreated methodで最初に、reCAPRCHA必要な情報を読み込むscriptタグを作成\n\ncomponents: { VueRecaptcha },\ncreated() { \n let recaptchaScript = document.createElement('script'); \n recaptchaScript.setAttribute('src','https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit');\n document.head.appendChild(recaptchaScript); \n},\n\n\nそして、HTMLを記述\n\n\n\n\nそして、ライブラリで用意されているmethodを準備する。\n\nこのrecaptcha_tokenをサーバに投げるのである。\n\ndata() {\n return { recaptcha_token: '', }\n },\n methods: {\n onVerify(response) {\n this.recaptcha_token = response;\n },\n onExpired() {\n this.recaptcha_token = ''; //レスポンスのトークンを空に戻す\n },\n resetRecaptcha() {\n this.$refs.recaptcha.reset();\n }}\n\n\nPOSTはこんな感じで適当に各自の実装に合わせてください。\n\nこのtokenとは別に本来ならpasswordとemailなども送ると思います。\n\naxios\n.post('/api/login', {token:this.recaptcha_token})\n.then(response => {})axios\n.post('/api/login', {token:this.recaptcha_token})\n.then(response => {})\n\n\n\nLaravel\nGuzzleをinstall\ncomposer require guzzlehttp/guzzle\n\n\n\napp/Validation/ReCaptcha.phpを作成\nこれで、validtionをしていく。\n\npost(\n 'https://www.google.com/recaptcha/api/siteverify',\n [\n 'form_params' =>\n [\n 'secret' => env('RECAPTCHA_SECRET'),\n 'response' => $value\n ]\n ]\n );\n $body = json_decode((string) $response->getBody());\n return $body->success;\n }\n}\n\n\napp/Providers/AppServiceProvider.phpに追加\n [\n 'recaptcha'\n ]\n ];\n}\n\n\nもしうまく動かなければ\n\ncompser dumpautoload\n\nを実行する。\n\n参考\n\n> https://laravel.com/docs/5.7/mix#environment-variables\nhttps://medium.com/@patrickcurl/using-laravel-env-variables-inside-vue-js-components-29faa9a344c5\nhttps://codeday.me/jp/qa/20190301/341325.html\nhttps://blog.capilano-fw.com/?p=3545\nhttps://medium.com/@dennissmink/laravel-google-recaptcha-a0e2d8b2d03b","html":"

Laravel5.8 Vue.js 環境にGoogle reCAPTCHA v2を実装する

下準備

reCAPTCHA
reCAPTCHA is a security service that protects your websites from fraud and abuse.
reCAPTCHA

から登録をする。（ローカル環境で実行したければ、ローカルで動かす用のドメインを登録する）

hostsに

127.0.0.1 koooohe.development

と書いてkooooohe.developmentを登録するなど。

.env

.envに取得した、SITE_KEYとSECRET_KEYを書いていく。

MIX_RECAPTCHA_KEY=XXXXXX\nRECAPTCHA_SECRET=XXXXXX\n
\n

MIXというprefixをつけておくと、Vue.jsからも読み込めるようになる。

Compiling Assets (Mix) - Laravel - The PHP Framework For Web Artisans
Laravel

Vue.js

reCAPTCHAの情報を取得する

recaptcha_site_key() {\n  return process.env.MIX_RECAPTCHA_KEY;\n}\n\n
\n

といった感じで、.envの内容を取得する。

そして、recaptchaをVue.jsで使うためのpluginをinstall

yarn add vue-recaptcha

\n

created methodで最初に、reCAPRCHA必要な情報を読み込むscriptタグを作成

components: { VueRecaptcha },\ncreated() {        \n  let recaptchaScript = document.createElement('script');  \n  recaptchaScript.setAttribute('src','https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit');\n  document.head.appendChild(recaptchaScript); \n},\n
\n

そして、HTMLを記述

<template>    \n  <vue-recaptcha class="g-recaptcha"\n                 ref="recaptcha"     \n                 :sitekey="recaptcha_site_key"\n                 @verify="onVerify"\n                 @expired="onExpired"/>\n</template>\n
\n

そして、ライブラリで用意されているmethodを準備する。

このrecaptcha_tokenをサーバに投げるのである。

data() {\n  return {    recaptcha_token: '',  }\n  },\n  methods: {\n  onVerify(response) {\n  this.recaptcha_token = response;\n  },\n  onExpired() {\n    this.recaptcha_token = ''; //レスポンスのトークンを空に戻す\n  },\n  resetRecaptcha() {\n  this.$refs.recaptcha.reset();\n  }}\n
\n

POSTはこんな感じで適当に各自の実装に合わせてください。

このtokenとは別に本来ならpasswordとemailなども送ると思います。

axios\n.post('/api/login', {token:this.recaptcha_token})\n.then(response => {})axios\n.post('/api/login', {token:this.recaptcha_token})\n.then(response => {})\n\n
\n

Laravel

Guzzleをinstall

composer require guzzlehttp/guzzle

\n

app/Validation/ReCaptcha.phpを作成

これで、validtionをしていく。

<?phpnamespace App\\Validators;use GuzzleHttp\\Client;\n  class ReCaptcha{\n    public function validate($attribute, $value, $parameters, $validator)\n    {\n        $client = new Client;\n        $response = $client->post(\n            'https://www.google.com/recaptcha/api/siteverify',\n            [\n                'form_params' =>\n                [\n                    'secret' => env('RECAPTCHA_SECRET'),\n                    'response' => $value\n                ]\n            ]\n        );\n        $body = json_decode((string) $response->getBody());\n        return $body->success;\n    }\n}\n
\n

app/Providers/AppServiceProvider.phpに追加

<?phpnamespace App\\Providers;use Illuminate\\Support\\ServiceProvider;\nuseApp\\Validation\\CustomValidator;\nclass AppServiceProvider\nextends ServiceProvider{\n  /**\n  * Bootstrap any application services.\n  *\n  * @return void\n  */\n  public function boot()\n  {\n    Validator::extendImplicit('recaptcha','App\\\\Validators\\\\ReCaptcha@validate');\n  }_/**\n  * Register any application services.\n  *\n  * @return void\n  */\n  public function register()\n  {\n    //\n  }}\n
\n

extendではなく、extedImplictを使うことによって、暗黙のrequiredになる。(valueが空でもこの関数が呼ばれる）

Ruleを追加

/**\n*\nGet the validation rules that apply to the request.\n*\n* @return array\n*/\npublic function rules()\n{\n  return [\n    'token' => [\n      'recaptcha'\n    ]\n  ];\n}\n
\n

もしうまく動かなければ

compser dumpautoload

\n

を実行する。

参考

https://laravel.com/docs/5.7/mix#environment-variables
https://medium.com/@patrickcurl/using-laravel-env-variables-inside-vue-js-components-29faa9a344c5
https://codeday.me/jp/qa/20190301/341325.html
https://blog.capilano-fw.com/?p=3545
https://medium.com/@dennissmink/laravel-google-recaptcha-a0e2d8b2d03b
","url":"https://ghost.tech.anti-pattern.co.jp/laravel5-8-vue-js-huan-jing-nigoogle-recaptcha-v2woshi-zhuang-suru/","canonical_url":null,"uuid":"317d8a91-98bb-4c22-b2a6-10450ef0bf82","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"60fa77ac3986b000013a3971","reading_time":3}},"pageContext":{"slug":"laravel5-8-vue-js-huan-jing-nigoogle-recaptcha-v2woshi-zhuang-suru"}}, "staticQueryHashes": ["176528973","2358152166","2561578252","2731221146","4145280475"]}