feat: add enterprise mode

README.md

@@ -50,8 +50,9 @@ using top level options
   recaptcha: {
     hideBadge: Boolean, // Hide badge element (v3 & v2 via size=invisible)
     language: String,   // Recaptcha language (v2)
+    mode: String,       // Mode: 'base', 'enterprise'
     siteKey: String,    // Site key for requests
-    version: Number,     // Version
+    version: Number,    // Version
     size: String        // Size: 'compact', 'normal', 'invisible' (v2)
   },
   // ...
@@ -160,7 +161,7 @@ You're allowed to hide the badge (i.e. for v3 and v2 invisible), as long as you
 For example:
 
 ```html
-<small>This site is protected by reCAPTCHA and the Google 
+<small>This site is protected by reCAPTCHA and the Google
     <a href="https://policies.google.com/privacy">Privacy Policy</a> and
     <a href="https://policies.google.com/terms">Terms of Service</a> apply.
 </small>

example/both/nuxt.config.js → example/base/both/nuxt.config.js

@@ -4,11 +4,11 @@ module.exports = {
   buildDir: resolve(__dirname, '.nuxt'),
 
   modules: [
-    ['../../lib/module', {
+    ['../../../lib/module', {
       hideBadge: true,
       siteKey: '6LeE3ZAUAAAAANVaDO60w4ZBK44khqO7OpsitZNY',
 
-      version: 3,
+      version: 3
     }]
   ],
 

example/v2/nuxt.config.js → example/base/v2/nuxt.config.js

@@ -4,7 +4,7 @@ module.exports = {
   buildDir: resolve(__dirname, '.nuxt'),
 
   modules: [
-    ['../../lib/module', {
+    ['../../../lib/module', {
       siteKey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
       size: 'invisible',
       hideBadge: false,

example/v3/nuxt.config.js → example/base/v3/nuxt.config.js

@@ -4,11 +4,11 @@ module.exports = {
   buildDir: resolve(__dirname, '.nuxt'),
 
   modules: [
-    ['../../lib/module', {
+    ['../../../lib/module', {
       hideBadge: true,
       siteKey: '6LeE3ZAUAAAAANVaDO60w4ZBK44khqO7OpsitZNY',
 
-      version: 3,
+      version: 3
     }]
   ],
 

example/enterprise/both/nuxt.config.js

@@ -0,0 +1,21 @@
+const { resolve } = require('path')
+
+module.exports = {
+  buildDir: resolve(__dirname, '.nuxt'),
+
+  modules: [
+    ['../../../lib/module', {
+      mode: 'enterprise',
+
+      hideBadge: true,
+      siteKey: process.env.RECATPCHA_KEY,
+
+      version: 3
+    }]
+  ],
+
+  srcDir: __dirname,
+
+  render: { resourceHints: false },
+  rootDir: resolve(__dirname, '..')
+}

example/enterprise/both/pages/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <section class="index-page">
+    <h2>Sign In</h2>
+
+    <form @submit.prevent="onSubmit">
+      <input
+        v-model="email"
+        autocomplete="true"
+        placeholder="Email"
+        type="email"
+      >
+
+      <input
+        v-model="password"
+        autocomplete="current-password"
+        placeholder="Password"
+        type="password"
+      >
+      <recaptcha
+        id="v2-normal"
+        site-key="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
+      />
+      <button type="submit">
+        Sign In
+      </button>
+    </form>
+  </section>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    email: '[email protected]',
+    password: '123',
+    widgetId: 0
+  }),
+
+  async mounted() {
+    await this.$recaptcha.init()
+
+    this.widgetId = this.$recaptcha.render('v2-normal', {
+      sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
+    })
+  },
+
+  methods: {
+    async onSubmit() {
+      try {
+        const tokenV2 = await this.$recaptcha.getResponse(this.widgetId)
+        console.log('V2 ReCaptcha token:', tokenV2)
+
+        const token = await this.$recaptcha.execute('login')
+        console.log('V3 ReCaptcha token:', token)
+
+        this.$recaptcha.reset(this.widgetId)
+      } catch (error) {
+        console.log('Login error:', error)
+      }
+    }
+  }
+}
+</script>

example/enterprise/v2/api/recaptcha.js

@@ -0,0 +1,49 @@
+import { useBody } from 'h3'
+import { $fetch } from 'ohmyfetch/node'
+
+/**
+ * It is highly recommended to use enviroment variables instead of hardcoded secrets.
+ */
+const SECRET_KEY = '6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe'
+
+/**
+ * This is an example that demonstrates how verifying reCAPTCHA on the server side works.
+ * Do not use this middleware in your production.
+ */
+export default async (req, res) => {
+  res.setHeader('Content-Type', 'application/json')
+  try {
+    const { token } = await useBody(req)
+
+    if (!token) {
+      res.end(JSON.stringify({
+        success: false,
+        message: 'Invalid token'
+      }))
+      return
+    }
+    const response = await $fetch(
+      `https://www.google.com/recaptcha/api/siteverify?secret=${SECRET_KEY}&response=${token}`
+    )
+
+    if (response.success) {
+      res.end(JSON.stringify({
+        success: true,
+        message: 'Token verifyed',
+        response: response
+      }))
+    } else {
+      res.end(JSON.stringify({
+        success: false,
+        message: 'Invalid token',
+        response: response
+      }))
+    }
+  } catch (e) {
+    console.log('ReCaptcha error:', e)
+    res.end(JSON.stringify({
+      success: false,
+      message: 'Internal error'
+    }))
+  }
+}

example/enterprise/v2/nuxt.config.js

@@ -0,0 +1,24 @@
+const { resolve } = require('path')
+
+module.exports = {
+  buildDir: resolve(__dirname, '.nuxt'),
+
+  modules: [
+    ['../../../lib/module', {
+      mode: 'enterprise',
+      siteKey: process.env.RECATPCHA_KEY,
+      size: 'invisible',
+      hideBadge: false,
+      version: 2
+    }]
+  ],
+
+  serverMiddleware: [
+    { path: '/api/check-token', handler: '~/api/recaptcha' }
+  ],
+
+  srcDir: __dirname,
+
+  render: { resourceHints: false },
+  rootDir: resolve(__dirname, '..')
+}

example/enterprise/v2/pages/about.vue

@@ -0,0 +1,8 @@
+<template>
+  <section class="about-page">
+    <h2>About page</h2>
+    <p>Text</p>
+
+    <nuxt-link :to="{ name: 'index' }">Go to Index</nuxt-link>
+  </section>
+</template>

example/enterprise/v2/pages/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <section class="index-page">
+    <h2>Sign In</h2>
+
+    <form @submit.prevent="onSubmit">
+      <input
+        autocomplete="true"
+        placeholder="Email"
+        type="email"
+        v-model="email"
+      >
+
+      <input
+        autocomplete="current-password"
+        placeholder="Password"
+        type="password"
+        v-model="password"
+      >
+
+      <recaptcha
+        @error="onError"
+        @success="onSuccess"
+        @expired="onExpired"
+      />
+
+      <button type="submit">Sign In</button>
+      <nuxt-link :to="{ name: 'about' }">About</nuxt-link>
+    </form>
+  </section>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    email: '[email protected]',
+    password: '123',
+  }),
+
+  methods: {
+    onError (error) {
+      console.log('Error happened:', error)
+    },
+
+    async onSubmit() {
+      try {
+        const token = await this.$recaptcha.getResponse()
+
+        const response = await fetch('/api/check-token', {
+          method: 'POST',
+          body: JSON.stringify({
+            token,
+            email: this.email,
+            password: this.password
+          })
+        }).then(res => res.json())
+
+        console.log('Server Response: ', response)
+
+        await this.$recaptcha.reset()
+      } catch (error) {
+        console.log('Login error:', error)
+      }
+    },
+
+    onSuccess (token) {
+      console.log('Succeeded:', token)
+    },
+
+    onExpired () {
+      console.log('Expired')
+    }
+  },
+}
+</script>

example/enterprise/v3/nuxt.config.js

@@ -0,0 +1,21 @@
+const { resolve } = require('path')
+
+module.exports = {
+  buildDir: resolve(__dirname, '.nuxt'),
+
+  modules: [
+    ['../../../lib/module', {
+      mode: 'enterprise',
+
+      hideBadge: true,
+      siteKey: process.env.RECATPCHA_KEY,
+
+      version: 3
+    }]
+  ],
+
+  srcDir: __dirname,
+
+  render: { resourceHints: false },
+  rootDir: resolve(__dirname, '..')
+}

example/enterprise/v3/pages/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <section class="index-page">
+    <h2>Sign In</h2>
+
+    <form @submit.prevent="onSubmit">
+      <input
+        autocomplete="true"
+        placeholder="Email"
+        type="email"
+        v-model="email"
+      >
+
+      <input
+        autocomplete="current-password"
+        placeholder="Password"
+        type="password"
+        v-model="password"
+      >
+
+      <button type="submit">Sign In</button>
+    </form>
+  </section>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    email: '[email protected]',
+    password: '123',
+  }),
+
+  async mounted() {
+    try {
+      await this.$recaptcha.init()
+    } catch (e) {
+      console.log(e);
+    }
+  },
+
+  methods: {
+    async onSubmit() {
+      try {
+        const token = await this.$recaptcha.execute('login')
+        console.log('ReCaptcha token:', token)
+      } catch (error) {
+        console.log('Login error:', error)
+      }
+    },
+  },
+}
+</script>