#117 - Allow late configuration: siteKey

README.md

@@ -1,27 +1,32 @@
 # Vue reCAPTCHA-v3
+
 [![npm](https://img.shields.io/npm/v/vue-recaptcha-v3.svg)](https://www.npmjs.com/package/vue-recaptcha-v3)
 [![npm type definitions](https://img.shields.io/npm/types/vue-recaptcha-v3.svg)](https://www.npmjs.com/package/vue-recaptcha-v3)
 
 A simple and easy to use reCAPTCHA (v3 only) library for Vue based on [reCAPTCHA-v3](https://github.com/AurityLab/recaptcha-v3).
 
-**The latest version of this package supports Vue 3!** [See here for Vue 2 usage](https://github.com/AurityLab/vue-recaptcha-v3/tree/vue-v2.x). 
-
 ## Install
+
 With NPM:
+
 ```bash
-$ npm install vue-recaptcha-v3
+npm install vue-recaptcha-v3
 ```
 
 With Yarn:
+
 ```bash
-$ yarn add vue-recaptcha-v3
+yarn add vue-recaptcha-v3
 ```
- 
+
 ## Prerequisites
+
 To use this package you only need a valid site key for your domain, which you can easily get [here](https://www.google.com/recaptcha).
 
 ## Usage
 
+### Load with the sitekey at initialization
+
 ```javascript
 import Vue from 'vue'
 import { VueReCaptcha } from 'vue-recaptcha-v3'
@@ -45,63 +50,59 @@ new Vue({
 })
 ```
 
-### Vue 3 Composition
+### Load ReCaptcha after the plugin has been initialized
 
-```js
-import { createApp } from 'vue'
-import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3'
+```javascript
+import Vue from 'vue'
+import { VueReCaptcha } from 'vue-recaptcha-v3'
+const axios = require('axios')
+
+// Primes the plugin with other values besides the site key
+Vue.use(VueReCaptcha, {
+  loaderOptions: {
+    useRecaptchaNet: true
+  }
+})
+new Vue({
+  methods: {
+    async recaptcha() {
 
-const component = {
-  setup() {
-    const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()
+    // example of a web call to get the siteKey from an api, this is not a real web call
+    axios.get('/SiteKey')
+      .then(function (response) {
+        let siteKey = response.data.siteKey
+        //Loads the recaptcha with the key from the api
+        this.$loadRecaptchaAfterSetup('<site key>')
+      });
 
-    const recaptcha = async () => {
-      // (optional) Wait until recaptcha has been loaded.
-      await recaptchaLoaded()
+      // Waits until this.$loadRecaptchaAfterSetup is called and sets up the captcha with the site key from the api
+      await this.$recaptchaLoaded()
 
       // Execute reCAPTCHA with action "login".
-      const token = await executeRecaptcha('login')
+      const token = await this.$recaptcha('login')
 
       // Do stuff with the received token.
     }
-
-    return {
-      recaptcha
-    }
   },
   template: '<button @click="recaptcha">Execute recaptcha</button>'
-}
-
-createApp(component)
-  .use(VueReCaptcha, { siteKey: '<site key>' })
-```
-
-### TypeScript + Vue 3
-To get type suggestions for instance variables (this is not needed for composition API), create a new file called `shims-vue-recaptcha-v3.d.ts` and put the following inside it:
-```ts
-import { ReCaptchaInstance } from 'recaptcha-v3'
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $recaptcha: (action: string) => Promise<string>
-    $recaptchaLoaded: () => Promise<boolean>
-    $recaptchaInstance: ReCaptchaInstance
-  }
-}
+})
 ```
 
 ## Options
+
 This plugin offers optional options to configure the behavior of some parts.
 
 Available options:
 
-|Name|Description|Type|Default value
-|----|-----------|----|-------------
-|siteKey|The site key for your domain from Google.|*string*|*none*
-|loaderOptions|Optional options for the [recaptcha-v3](https://github.com/AurityLab/recaptcha-v3) loader. The available options are described [here](https://github.com/AurityLab/recaptcha-v3/#load-options-usage).|*object*|`null`
+| Name          | Description                                                                                                                                                                                           | Type     | Default value |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
+| siteKey       | The site key for your domain from Google.                                                                                                                                                             | *string* | *none*        |
+| loaderOptions | Optional options for the [recaptcha-v3](https://github.com/AurityLab/recaptcha-v3) loader. The available options are described [here](https://github.com/AurityLab/recaptcha-v3/#load-options-usage). | *object* | `null`        |
 
 ### Usage
+
 To use the options just pass an object to the `Vue.use(...)` method. For example:
+
 ```javascript
 import Vue from 'vue'
 import { VueReCaptcha } from 'vue-recaptcha-v3'
@@ -115,10 +116,13 @@ Vue.use(VueReCaptcha, {
 ```
 
 ## Advanced usage
+
 Some topics which are not commonly used, but required in some cases.
 
 ### Access [reCAPTCHA-v3](https://github.com/AurityLab/recaptcha-v3/#load-options-usage) instance
-In some cases it's necessary to interact with the reCAPTCHA-v3 instance, which provides more control over reCAPTCHA. 
+
+In some cases it's necessary to interact with the reCAPTCHA-v3 instance, which provides more control over reCAPTCHA.
+
 ```javascript
 const recaptcha = this.$recaptchaInstance
 
@@ -127,4 +131,4 @@ recaptcha.hideBadge()
 
 // Show reCAPTCHA badge:
 recaptcha.showBadge()
-```
+```  

demo/src/delaydemo.ts

@@ -0,0 +1,27 @@
+import { createApp } from 'vue'
+import { VueReCaptcha } from '../../src/ReCaptchaVuePlugin'
+
+const component = {
+  methods: {
+    async recaptcha () {
+      console.log('recaptcha clicked')
+
+      this.$recaptchaLoaded().then(() => {
+        console.log('recaptcha loaded')
+        this.$recaptcha('login').then((token: string) => {
+          console.log(token) // Will print the token
+        })
+      })
+      await this.delay(1000)
+      this.$loadRecaptchaAfterSetup('6LfC6HgUAAAAAEtG92bYRzwYkczElxq7WkCoG4Ob')
+    },
+    async delay (ms: number) {
+      return await new Promise(resolve => setTimeout(resolve, ms))
+    }
+  },
+  template: '<button @click="recaptcha">Execute with delay recaptcha</button>'
+}
+
+createApp(component)
+  .use(VueReCaptcha)
+  .mount('#delaydemo')

demo/src/index.html

@@ -7,5 +7,8 @@
 </head>
 <body>
 <div id="inject"></div>
+<br>
+<br>
+<div id="delaydemo"></div>
 </body>
 </html>

demo/src/index.ts

@@ -13,7 +13,7 @@ const component = {
       })
     }
   },
-  template: '<button @click="recaptcha">Execute recaptcha</button>'
+  template: '<button @click="recaptcha">Execute without delay recaptcha</button>'
 }
 
 createApp(component)

demo/webpack.config.js

@@ -1,9 +1,11 @@
 const path = require('path')
-const webpack = require('webpack')
 const WebpackHtmlPlugin = require('html-webpack-plugin')
 
 module.exports = {
-  entry: path.resolve(__dirname, './src/index.ts'),
+  entry: {
+    index: path.resolve(__dirname, './src/index.ts'),
+    delaydemo: path.resolve(__dirname, './src/delaydemo.ts')
+  },
 
   output: {
     path: path.resolve(__dirname, './dist'),
@@ -24,22 +26,22 @@ module.exports = {
   resolve: {
     extensions: [
       '.js',
-      '.ts',
+      '.ts'
     ],
     alias: {
-      'vue$': 'vue/dist/vue.esm-bundler.js'
+      vue$: 'vue/dist/vue.esm-bundler.js'
     }
   },
-  mode: "development",
+  mode: 'development',
   devServer: {
     compress: true,
-    disableHostCheck: true,
+    // disableHostCheck: true,
     historyApiFallback: true
   },
   plugins: [
     new WebpackHtmlPlugin({
       template: path.resolve(__dirname, './src/index.html'),
-      inject: true,
+      inject: true
     })
-  ],
-};
+  ]
+}