diff --git a/README.md b/README.md index 2b793bd..482b0f4 100644 --- a/README.md +++ b/README.md @@ -34,10 +34,19 @@ app .use(VueRecaptcha, { siteKey: "your recaptcha sitekey", componentName: "your custom componet name", // default: 'vue-recaptcha' + alterDomain: false, // default: false }) .mount("#app"); ``` +### \*install options + +| Option | Type | Description | +| --------------- | --------- | ------------------------------------------------------------------------------------- | +| `siteKey` | `string` | (required) recaptcha siteKey | +| `componentName` | `string` | If you want to use custom component name, use this option. (default: `vue-recaptcha`) | +| `alterDomain` | `boolean` | `true`: domain replace `www.google.com` with `www.recaptch.net` | + ### Composition API ```html diff --git a/playground/utils/recaptcha.ts b/playground/utils/recaptcha.ts index 5d4120b..7ab65a1 100644 --- a/playground/utils/recaptcha.ts +++ b/playground/utils/recaptcha.ts @@ -7,5 +7,5 @@ import VueRecaptcha from "../../dist/vue3-recaptcha-v2"; import siteKey from "../config"; export default function install(app: App) { - app.use(VueRecaptcha, { siteKey: siteKey }); + app.use(VueRecaptcha, { siteKey: siteKey, alternativeDomain: true }); } diff --git a/src/config/install.ts b/src/config/install.ts index 4e7f27e..7987845 100644 --- a/src/config/install.ts +++ b/src/config/install.ts @@ -6,18 +6,18 @@ import { state } from "./state"; const ERROR_MSG_SITEKEY = "options must be included siteKey"; export function install(app: App, options: options) { - const componentName = options.componentName - ? options.componentName - : "vue-recaptcha"; - if (!options.siteKey) throw new Error(ERROR_MSG_SITEKEY); - _script(); + _script(options); state.siteKey = options.siteKey; - app.component(componentName, VueRecaptcha); + app.component( + options.componentName ? options.componentName : "vue-recaptcha", + VueRecaptcha + ); } -function _script() { +function _script(options: options) { + const domain = options.alterDomain ? "www.recaptcha.net" : "www.google.com"; const isExist = document.getElementById("vue3-recaptcha-v2"); if (isExist) return; @@ -25,7 +25,7 @@ function _script() { script.setAttribute("id", "vue3-recaptcha-v2"); script.setAttribute( "src", - "https://www.google.com/recaptcha/api.js?render=explicit" + `https://${domain}/recaptcha/api.js?render=explicit` ); script.setAttribute("async", ""); script.setAttribute("defer", ""); diff --git a/src/types/index.ts b/src/types/index.ts index 4b39181..1f2a15c 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -4,6 +4,7 @@ export interface options { siteKey: string; componentName?: string; + alterDomain?: boolean; } /**