Skip to content
pakainfo

Pakainfo

Web Development & Good Online education

  • Home
  • Blog
  • Categories
  • Tools
  • Full Form
  • Guest Post
    • Guest Posting Service
  • Advertise
  • About
  • Contact Us

How to Integrate Google No CAPTCHA reCAPTCHA using VueJS

June 12, 2018 Pakainfo Technology, Mysql, Mysqli, php, Programming, VueJs Leave a comment

How to Integrate Google No CAPTCHA reCAPTCHA using VueJS

Contents

  • How to Integrate Google No CAPTCHA reCAPTCHA using VueJS
    • Step 1vuejs javascript Google API Script
    • Recaptcha.vue
    • Step 3
    • page.vue
  • reCAPTCHA with Vue.js example
    • Related posts

In this Post We Will Explain About is How to Integrate Google No CAPTCHA reCAPTCHA using VueJS With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Implementing Google’s New No CAPTCHA reCAPTCHA in vuejs Example

In this post we will show you Best way to implement Google New reCaptcha using vuejs, hear for How to Integrate “No CAPTCHA reCAPTCHA” in Your Website using vue with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Step 1:vuejs javascript Google API Script

put the Google recaptcha simple javascript google api to your simple file Like as index.html

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Recaptcha.vue

//Your simple template
<template>
  <div 
  id="g-recaptcha"
  class="g-recaptcha"
  :data-sitekey="sitekey">
  </div>
</template>

<script>
export default {
  data () {
    return {
	//your google sitekey
      sitekey: '5jsuj58LLkjsd55SKSJDddLive24u*********',
      vueWidgtId: 0
    }
  },
  methods: {
	//some vuejs methods
    execute () {
      window.grecaptcha.execute(this.vueWidgtId)
    },
    reset () {
		//reset using vuejs
      window.grecaptcha.reset(this.vueWidgtId)
    },
    render () {
		//render Functions using vuejs
      if (window.grecaptcha) {
        this.vueWidgtId = window.grecaptcha.render('g-recaptcha', {
          sitekey: this.sitekey, //get your sitekey
          size: 'invisible',
          callback: (results) => {
            this.$emit('verify', results)
            this.reset() 
          }
        })
      }
    }
  },
  mounted () {
    this.render()
  }
}
</script>

Step 3:

Import the Google recaptcha component data as well as Put it to your web-page Live website(parent component).

page.vue

<template>
  <div>
    <h1>Vuejs Parent component Pakainfo.com</h1>
    <button @click="executeRecaptcha">Run recaptcha</button>
    <recaptcha ref="recaptcha" @verify="submit"></recaptcha>
  </div>
</template>

<script>
import Recaptcha from 'recaptcha'
export default {
  components: {
    Recaptcha
  },
  methods: {
    submit (results) {
      console.log(results)
    },
    executeRecaptcha () {
      this.$refs.recaptcha.execute()
    }
  }
}
</script>

reCAPTCHA with Vue.js example

<div class="g-recaptcha" :data-sitekey="live_api_key_rcapt"></div>

After that define live_api_key_rcapt in Vuejs data:

export default {
    data() {
      return {
        live_api_key_rcapt: "GOOGLE_API_KEY_FOR_YOUR_WEBSITE",
        liveid_recaptcha: 0 // will be used later
      }
    }
}

And also we some api script need to load js in google global HTML section:

<script src='https://www.google.com/recaptcha/api.js'></script>

Also Read This 👉   PHP - Save base64 Encoded string - Convert base64 to Image

And then , To solve this we can HTML render google captcha on vue mounted hook:

mounted() {
  if (window.grecaptcha) {
    this.liveid_recaptcha = grecaptcha.render( $('.g-recaptcha')[0], { sitekey : this.live_api_key_rcapt });
  }
},

check that your Google captcha challenged by some user (for designer UX):

recapcha_google_res = grecaptcha.getResponse(this.liveid_recaptcha);
if (recapcha_google_res.length == 0) {
   this.error = "Some Compleate captcha more challenge. Sorry!";
   return
}

After that send recapcha_google_res to your server side backend to verify validation captcha.

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is vuejs – How to implement Google new reCAPTCHA Code And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.

Related posts:

  1. Angularjs recaptcha v2 (google Invisible reCAPTCHA v2)
  2. Codeigniter Form Validation with Google reCAPTCHA
  3. Laravel 5.7 Google reCAPTCHA Tutorial with Example
google invisible recaptcha logingoogle recaptchagoogle recaptcha certificategoogle recaptcha localizationgoogle recaptcha vue jsvue recaptcha examplevue-recaptcha npmvuejs invisible recaptcha

Post navigation

Previous Post:AngularJS Search Auto Suggestion box with PHP MySQLi
Next Post:Increase Website Speed with Compressor,Reduce,Optimization

Advertise With Us

Increase visibility and sales with advertising. Let us promote you online.
Click Here

Write For Us

We’re accepting well-written informative guest posts and this is a great opportunity to collaborate.
Submit a guest post to [email protected]
Contact Us

Freelance web developer

Do you want to build a modern, lightweight, responsive website quickly?
Need a Website Or Web Application Contact : [email protected]
Note: Paid Service
Contact Me

Categories

3movierulz (64) Ajax (464) AngularJS (377) ASP.NET (61) Bio (109) Bollywood (108) Codeigniter (175) CSS (98) Earn Money (94) Education (65) Entertainment (131) fullform (87) Google Adsense (64) Highcharts (77) History (40) Hollywood (109) JavaScript (1359) Jobs (43) jQuery (1423) Laravel (1088) LifeStyle (53) movierulz4 (63) Mysql (1035) Mysqli (894) php (2133) Programming (2346) Python (99) Software (198) Software (94) Stories (98) tamilrockers (104) Tamilrockers kannada (64) Tamilrockers telugu (61) Tech (149) Technology (2427) Tips and Tricks (130) Tools (215) Top10 (514) Trading (98) Trending (79) VueJs (250) Web Technology (116) webtools (201) wordpress (166) World (351)

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here
  • Home
  • About Us
  • Terms And Conditions
  • Write For Us
  • Advertise
  • Contact Us
  • Youtube Tag Extractor
  • Info Grepper
  • Guest Posting Sites
  • Increase Domain Authority
  • Social Media Marketing
  • Freelance web developer
  • Tools
Pakainfo 9-OLD, Ganesh Sco, Kothariya Ring Road, Chokadi, Rajkot - 360002 India
E-mail : [email protected]
Pakainfo

© 2023 Pakainfo. All rights reserved.

Top
Subscribe On YouTube : Download Source Code
We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype Guest Posting Sites