2024-01-08 00:33:38 +05:30
<!doctype html>
< html lang = "en-US" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "x-ua-compatible" content = "ie=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< link rel = "preload" as = "font" href = "/fonts/vendor/jost/jost-v4-latin-regular.woff2" type = "font/woff2" crossorigin >
< link rel = "preload" as = "font" href = "/fonts/vendor/jost/jost-v4-latin-700.woff2" type = "font/woff2" crossorigin >
< link rel = "stylesheet" href = "/main.daf9ee98168127ebe801fa49abea19e9b93a1e6615b5fb8613d39531c652f02d2d15c7680cf20e2047c2887b04f2192dc9a7847c62393718246d9f3e634a4e4d.css" integrity = "sha512-2vnumBaBJ+voAfpJq+oZ6bk6HmYVtfuGE9OVMcZS8C0tFcdoDPIOIEfCiHsE8hktyaeEfGI5NxgkbZ8+Y0pOTQ==" crossorigin = "anonymous" >
< noscript > < style > img . lazyload { display : none ; } < / style > < / noscript >
< meta name = "robots" content = "index, follow" >
< meta name = "googlebot" content = "index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" >
< meta name = "bingbot" content = "index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" >
< title > Installing mCaptcha on your website - mCaptcha< / title >
< meta name = "description" content = "Interested in deploying mCpatcha? From deploying a self-hosted instance to installing the CAPTCHA on your website, this guide will have you covered!" >
< link rel = "canonical" href = "/docs/webmasters/installing-captcha/" >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:image" content = "/icon.png" >
< meta name = "twitter:title" content = "Installing mCaptcha on your website" >
< meta name = "twitter:description" content = "Interested in deploying mCpatcha? From deploying a self-hosted instance to installing the CAPTCHA on your website, this guide will have you covered!" >
< meta name = "twitter:site" content = "@" >
< meta name = "twitter:creator" content = "@" >
< meta property = "og:title" content = "Installing mCaptcha on your website" >
< meta property = "og:description" content = "Interested in deploying mCpatcha? From deploying a self-hosted instance to installing the CAPTCHA on your website, this guide will have you covered!" >
< meta property = "og:type" content = "article" >
< meta property = "og:url" content = "/docs/webmasters/installing-captcha/" >
< meta property = "og:image" content = "/icon.png" / >
< meta property = "article:published_time" content = "2022-06-22T00:00:00+00:00" >
< meta property = "article:modified_time" content = "2023-11-05T02:15:26+05:30" >
< meta property = "og:site_name" content = "mCaptcha" >
< meta property = "article:publisher" content = "https://www.facebook.com/" >
< meta property = "article:author" content = "https://www.facebook.com/" >
< meta property = "og:locale" content = "en_US" >
< script type = "application/ld+json" >
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1 ,
"name": "Home",
"item": "\/"
},{
"@type": "ListItem",
"position": 2 ,
"name": "Docswebmastersinstalling Captcha",
"item": "\/docswebmastersinstalling-captcha\/"
}]
}
< / script >
< meta name = "theme-color" content = "#fff" >
< link rel = "apple-touch-icon" sizes = "180x180" href = "/apple-touch-icon.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "/favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "/favicon-16x16.png" >
< link rel = "manifest" href = "/site.webmanifest" >
< / head >
< body class = "docs single" >
< div class = "header-bar fixed-top" > < / div >
< header class = "navbar fixed-top navbar-expand-md navbar-light" >
< div class = "container" >
< input class = "menu-btn order-0" type = "checkbox" id = "menu-btn" >
< label class = "menu-icon d-md-none" for = "menu-btn" > < span class = "navicon" > < / span > < / label >
< a class = "navbar-brand order-1 order-md-0 me-auto" href = "/" > mCaptcha< / a >
< button id = "mode" class = "btn btn-link order-2 order-md-4" type = "button" aria-label = "Toggle mode" >
< span class = "toggle-dark" > < svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" class = "feather feather-moon" > < path d = "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" > < / path > < / svg > < / span >
< span class = "toggle-light" > < svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" class = "feather feather-sun" > < circle cx = "12" cy = "12" r = "5" > < / circle > < line x1 = "12" y1 = "1" x2 = "12" y2 = "3" > < / line > < line x1 = "12" y1 = "21" x2 = "12" y2 = "23" > < / line > < line x1 = "4.22" y1 = "4.22" x2 = "5.64" y2 = "5.64" > < / line > < line x1 = "18.36" y1 = "18.36" x2 = "19.78" y2 = "19.78" > < / line > < line x1 = "1" y1 = "12" x2 = "3" y2 = "12" > < / line > < line x1 = "21" y1 = "12" x2 = "23" y2 = "12" > < / line > < line x1 = "4.22" y1 = "19.78" x2 = "5.64" y2 = "18.36" > < / line > < line x1 = "18.36" y1 = "5.64" x2 = "19.78" y2 = "4.22" > < / line > < / svg > < / span >
< / button >
< ul class = "navbar-nav social-nav order-3 order-md-5" >
< li class = "nav-item" >
< a class = "nav-link" href = "https://github.com/mCaptcha" > < svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" class = "feather feather-github" > < path d = "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" > < / path > < / svg > < span class = "ms-2 visually-hidden" > GitHub< / span > < / a >
< / li >
< / ul >
< div class = "collapse navbar-collapse order-4 order-md-1" >
< ul class = "navbar-nav main-nav me-auto order-5 order-md-2" > < li class = "nav-item" >
< a class = "nav-link" href = "/blog/" > Blog< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/community/" > Community< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/contact/" > Contact< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/about/" > About< / a >
< / li >
< li class = "nav-item active" >
< a class = "nav-link" href = "/docs/webmasters/installing-captcha/" > Docs< / a >
< / li >
< / ul >
< div class = "break order-6 d-md-none" > < / div >
< form class = "navbar-form flex-grow-1 order-7 order-md-3" >
< input id = "userinput" class = "form-control is-search" type = "search" placeholder = "Search docs..." aria-label = "Search docs..." autocomplete = "off" >
< div id = "suggestions" class = "shadow bg-white rounded" > < / div >
< / form >
< / div >
< / div >
< / header >
< div class = "wrap container" role = "document" >
< div class = "content" >
< div class = "row flex-xl-nowrap" >
< div class = "col-lg-5 col-xl-4 docs-sidebar" >
< nav class = "docs-links" aria-label = "Main navigation" >
< h3 > Webmasters< / h3 >
< ul class = "list-unstyled" >
< li > < a class = "docs-link active" href = "/docs/webmasters/installing-captcha/" > Installing mCaptcha on your website< / a > < / li >
< li > < a class = "docs-link" href = "/docs/webmasters/configuring-difficulty-factor/" > Configuring Difficulty Factor< / a > < / li >
< li > < a class = "docs-link" href = "/docs/webmasters/terminology/" > Terminology< / a > < / li >
< li > < a class = "docs-link" href = "/docs/webmasters/faq/" > Webmasters FAQ< / a > < / li >
< / ul >
< h3 > User Manual< / h3 >
< ul class = "list-unstyled" >
< li > < a class = "docs-link" href = "/docs/user-manual/cli/" > CLI tool< / a > < / li >
< li > < a class = "docs-link" href = "/docs/user-manual/how-to-mcaptcha-without-js/" > Use mCaptcha without JavaScript< / a > < / li >
< / ul >
< h3 > Self-Hosting< / h3 >
< ul class = "list-unstyled" >
< li > < a class = "docs-link" href = "/docs/self-hosting/getting-started/" > Getting started< / a > < / li >
< li > < a class = "docs-link" href = "/docs/self-hosting/bare-metal/" > Deploy bare metal< / a > < / li >
< li > < a class = "docs-link" href = "/docs/self-hosting/ansible/" > Using Ansible< / a > < / li >
< li > < a class = "docs-link" href = "/docs/self-hosting/docker/" > Using Docker< / a > < / li >
< / ul >
< h3 > API< / h3 >
< ul class = "list-unstyled" >
< li > < a class = "docs-link" href = "/docs/api/browser/" > Browser libraries< / a > < / li >
< li > < a class = "docs-link" href = "/docs/api/mcaptcha-system/" > mCaptcha System Library< / a > < / li >
< li > < a class = "docs-link" href = "/docs/api/pow-sha256/" > pow_sha256< / a > < / li >
< / ul >
< h3 > Help< / h3 >
< ul class = "list-unstyled" >
< li > < a class = "docs-link" href = "/docs/help/troubleshooting/" > Troubleshooting< / a > < / li >
< li > < a class = "docs-link" href = "/docs/help/faq/" > FAQ< / a > < / li >
< / ul >
< / nav >
< / div >
< nav class = "docs-toc d-none d-xl-block col-xl-3" aria-label = "Secondary navigation" >
< div class = "page-links" >
< h3 > On this page< / h3 >
< nav id = "TableOfContents" >
< ul >
< li > < a href = "#1-create-an-account-and-sign-into-the-mcaptcha-dashboard" > 1. Create an account and sign into the mCaptcha dashboard< / a > < / li >
< li > < a href = "#2-create-new-site-key" > 2. Create new site key< / a > < / li >
< li > < a href = "#3-copy-widget-link" > 3. Copy widget link< / a > < / li >
< li > < a href = "#4-install-mcaptcha-on-your-website" > 4. Install mCaptcha on your website< / a > < / li >
< li > < a href = "#5-configure-backend-to-authenticate-captcha-tokens" > 5. Configure backend to authenticate CAPTCHA tokens< / a > < / li >
< / ul >
< / nav >
< / div >
< / nav >
< main class = "docs-content col-lg-11 col-xl-9" >
< h1 > Installing mCaptcha on your website< / h1 >
< p class = "lead" > < / p >
< p > mCaptcha can protect your website from DDoS attacks. In this guide we’ ll
2023-02-13 16:52:49 +05:30
explore how to install mCaptcha on your website. The end result will be
2024-01-08 00:33:38 +05:30
something like this, on your website:< / p >
< figure >
< img class = "img-fluid lazyload blur-up" data-sizes = "auto" src = "/docs/webmasters/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_20x0_resize_box_3.png" data-srcset = "/docs/webmasters/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_800x0_resize_box_3.png 800w,/docs/webmasters/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_700x0_resize_box_3.png 700w,/docs/webmasters/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_600x0_resize_box_3.png 600w,/docs/webmasters/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_500x0_resize_box_3.png 500w" width = "618" height = "669" alt = "A registration form with mCaptcha widget installed" >
< noscript > < img class = "img-fluid" sizes = "100vw" srcset = "/docs/webmasters/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_800x0_resize_box_3.png 800w,/docs/webmasters/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_700x0_resize_box_3.png 700w,/docs/webmasters/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_600x0_resize_box_3.png 600w,/docs/webmasters/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_500x0_resize_box_3.png 500w" src = "/docs/webmasters/installing-captcha/mcaptcha-widget-installation-result.png" width = "618" height = "669" alt = "A registration form with mCaptcha widget installed" > < / noscript >
< / figure >
< p > For the purpose of this demo, we will be using
< a href = "https://demo.mcaptcha.org" > demo.mcaptcha.org< / a > , a demo instance running
2023-02-13 16:52:49 +05:30
in @realaravinth’ s bedroom(for this same reason, it shouldn’ t be used
2024-01-08 00:33:38 +05:30
for anything serious)< / p >
< h2 id = "1-create-an-account-and-sign-into-the-mcaptcha-dashboard" > 1. Create an account and sign into the mCaptcha dashboard< a href = "#1-create-an-account-and-sign-into-the-mcaptcha-dashboard" class = "anchor" aria-hidden = "true" > #< / a > < / h2 >
< p > Head over to < a href = "https://demo.mcaptcha.org/join" > demo.mcaptcha.org< / a > and
create an account. When ready, sign in.< / p >
< h2 id = "2-create-new-site-key" > 2. Create new site key< a href = "#2-create-new-site-key" class = "anchor" aria-hidden = "true" > #< / a > < / h2 >
< p > A < a href = "/docs/terminology/sitekey/" > site key< / a > is how a new CAPTCHA is configured within mCaptcha. To create
a new site key, click on “ New Site” button in the dashboard.< / p >
< figure >
< img class = "img-fluid lazyload blur-up" data-sizes = "auto" src = "/docs/webmasters/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_20x0_resize_box_3.png" data-srcset = "/docs/webmasters/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_900x0_resize_box_3.png 900w,/docs/webmasters/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_800x0_resize_box_3.png 800w,/docs/webmasters/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_700x0_resize_box_3.png 700w,/docs/webmasters/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_600x0_resize_box_3.png 600w,/docs/webmasters/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_500x0_resize_box_3.png 500w" width = "1825" height = "857" alt = "mCaptcha dashboard with the 'new site key' button highlighted" >
< noscript > < img class = "img-fluid" sizes = "100vw" srcset = "/docs/webmasters/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_900x0_resize_box_3.png 900w,/docs/webmasters/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_800x0_resize_box_3.png 800w,/docs/webmasters/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_700x0_resize_box_3.png 700w,/docs/webmasters/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_600x0_resize_box_3.png 600w,/docs/webmasters/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_500x0_resize_box_3.png 500w" src = "/docs/webmasters/installing-captcha/new-sitekey-btn.png" width = "1825" height = "857" alt = "mCaptcha dashboard with the 'new site key' button highlighted" > < / noscript >
< / figure >
< p > There are two options to create a new site key, easy and advanced. < strong > We
are going to use the < a href = "/docs/webmasters/configuring-difficulty-factor#easy-option" > easy mode< / a > in this tutorial.< / strong > If you are interested
in learning more about the advance mode, please see < a href = "/docs/introduction/configuring-difficulty-factor/#advance-option" > here< / a > .< / p >
< p > Fill the form and submit it.< / p >
< figure >
< img class = "img-fluid lazyload blur-up" data-sizes = "auto" src = "/docs/webmasters/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_20x0_resize_box_3.png" data-srcset = "/docs/webmasters/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_900x0_resize_box_3.png 900w,/docs/webmasters/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_800x0_resize_box_3.png 800w,/docs/webmasters/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_700x0_resize_box_3.png 700w,/docs/webmasters/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_600x0_resize_box_3.png 600w,/docs/webmasters/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_500x0_resize_box_3.png 500w" width = "720" height = "452" alt = "mCaptcha dashboard with the 'new site key' form in easy mode, with details filled in" >
< noscript > < img class = "img-fluid" sizes = "100vw" srcset = "/docs/webmasters/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_900x0_resize_box_3.png 900w,/docs/webmasters/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_800x0_resize_box_3.png 800w,/docs/webmasters/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_700x0_resize_box_3.png 700w,/docs/webmasters/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_600x0_resize_box_3.png 600w,/docs/webmasters/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_500x0_resize_box_3.png 500w" src = "/docs/webmasters/installing-captcha/new-sitekey-easy-mode-filled.png" width = "720" height = "452" alt = "mCaptcha dashboard with the 'new site key' form in easy mode, with details filled in" > < / noscript >
< / figure >
< h2 id = "3-copy-widget-link" > 3. Copy widget link< a href = "#3-copy-widget-link" class = "anchor" aria-hidden = "true" > #< / a > < / h2 >
< p > Submitting the form will take you to a page where site key configuration
2023-02-13 16:52:49 +05:30
can be viewed. “ View deployment” link will display CAPTCHA widget with
2024-01-08 00:33:38 +05:30
the supplied configuration. Click on it and grab the widget link.< / p >
< h2 id = "4-install-mcaptcha-on-your-website" > 4. Install mCaptcha on your website< a href = "#4-install-mcaptcha-on-your-website" class = "anchor" aria-hidden = "true" > #< / a > < / h2 >
< p > Integration support is available for some frontend JavaScript
2023-02-13 16:52:49 +05:30
frameworks. To see full list of supported frameworks, please see
2024-01-08 00:33:38 +05:30
< a href = "https://github.com/mCaptcha/glue#framework-support" > here< / a > .< / p >
< p > There are two options to use the integration library to integrate
mCaptcha on your website:< / p >
< ol >
< li > Serve the integration library yourself< / li >
< li > Use a CDN like unpkg.com< / li >
< / ol >
< p > In this tutorial, we’ ll be using the CDN.< / p >
< p > < strong > Pasting the following snippet on the page, within the form< / strong > that requires to be protected
2023-02-13 16:52:49 +05:30
will load the mCaptcha widget with the configuration supplied. Be sure
to replace < code > Your {{paste your widget link}}< / code > with the link obtained from
2024-01-08 00:33:38 +05:30
the previous step.< / p >
< div class = "highlight" > < pre tabindex = "0" style = "color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;" > < code class = "language-html" data-lang = "html" > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 1< / span > < span > < < span style = "color:#ff79c6" > label< / span >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 2< / span > < span > < span style = "color:#50fa7b" > data-mcaptcha_url< / span > < span style = "color:#ff79c6" > =< / span > < span style = "color:#f1fa8c" > " {{paste your widget link here}}" < / span >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 3< / span > < span > < span style = "color:#50fa7b" > for< / span > < span style = "color:#ff79c6" > =< / span > < span style = "color:#f1fa8c" > " mcaptcha__token" < / span >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 4< / span > < span > < span style = "color:#50fa7b" > id< / span > < span style = "color:#ff79c6" > =< / span > < span style = "color:#f1fa8c" > " mcaptcha__token-label" < / span >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 5< / span > < span > >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 6< / span > < span > mCaptcha authorization token.
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 7< / span > < span > < < span style = "color:#ff79c6" > a< / span >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 8< / span > < span > < span style = "color:#50fa7b" > href< / span > < span style = "color:#ff79c6" > =< / span > < span style = "color:#f1fa8c" > " https://mcaptcha.org/docs/user-manual/how-to-mcaptcha-without-js/" < / span >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 9< / span > < span > > Instructions< /< span style = "color:#ff79c6" > a< / span >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 10< / span > < span > > .
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 11< / span > < span > < < span style = "color:#ff79c6" > input< / span > < span style = "color:#50fa7b" > type< / span > < span style = "color:#ff79c6" > =< / span > < span style = "color:#f1fa8c" > " text" < / span > < span style = "color:#50fa7b" > name< / span > < span style = "color:#ff79c6" > =< / span > < span style = "color:#f1fa8c" > " mcaptcha__token" < / span > < span style = "color:#50fa7b" > id< / span > < span style = "color:#ff79c6" > =< / span > < span style = "color:#f1fa8c" > " mcaptcha__token" < / span > />
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 12< / span > < span > < /< span style = "color:#ff79c6" > label< / span > >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 13< / span > < span > < < span style = "color:#ff79c6" > div< / span > < span style = "color:#50fa7b" > id< / span > < span style = "color:#ff79c6" > =< / span > < span style = "color:#f1fa8c" > " mcaptcha__widget-container" < / span > > < /< span style = "color:#ff79c6" > div< / span > >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 14< / span > < span > < < span style = "color:#ff79c6" > script< / span > < span style = "color:#50fa7b" > src< / span > < span style = "color:#ff79c6" > =< / span > < span style = "color:#f1fa8c" > " https://unpkg.com/@mcaptcha/vanilla-glue@0.1.0-rc2/dist/index.js" < / span > > < /< span style = "color:#ff79c6" > script< / span > >
< / span > < / span > < / code > < / pre > < / div > < p > A full example is available
< a href = "https://github.com/mCaptcha/glue/blob/ea576d875457de54d82bed3edfc4ee68302fa4d8/packages/vanilla/static/embeded.html" > here< / a > .< / p >
< h2 id = "5-configure-backend-to-authenticate-captcha-tokens" > 5. Configure backend to authenticate CAPTCHA tokens< a href = "#5-configure-backend-to-authenticate-captcha-tokens" class = "anchor" aria-hidden = "true" > #< / a > < / h2 >
< ol >
< li >
< p > Get < a href = "/docs/terminology/access-token" > access token< / a > from the user’ s
2023-02-13 16:52:49 +05:30
form submission payload. The access token will be associated with a
2024-01-08 00:33:38 +05:30
parameter called < code > mcaptcha__token< / code > .< / p >
< div class = "highlight" > < pre tabindex = "0" style = "color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;" > < code class = "language-python" data-lang = "python" > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 1< / span > < span > mcaptcha_token < span style = "color:#ff79c6" > =< / span > request< span style = "color:#ff79c6" > .< / span > form[< span style = "color:#f1fa8c" > " mcaptcha__token" < / span > ]
< / span > < / span > < / code > < / pre > < / div > < / li >
< li >
< p > Validate access token with mCaptcha instance< / p >
< / li >
< / ol >
< div class = "highlight" > < pre tabindex = "0" style = "color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;" > < code class = "language-python" data-lang = "python" > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 1< / span > < span > payload < span style = "color:#ff79c6" > =< / span > {
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 2< / span > < span > < span style = "color:#f1fa8c" > " token" < / span > : mcaptcha_token,
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 3< / span > < span > < span style = "color:#f1fa8c" > " key" < / span > : mcaptcha_sitekey, < span style = "color:#6272a4" > # captcha site key< / span >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 4< / span > < span > < span style = "color:#6272a4" > # mCaptcha account secret; available in settings< / span >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 5< / span > < span > < span style = "color:#f1fa8c" > " secret" < / span > : mcaptcha_account_secret,
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 6< / span > < span > }
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 7< / span > < span > resp < span style = "color:#ff79c6" > =< / span > requests< span style = "color:#ff79c6" > .< / span > post(
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 8< / span > < span > < span style = "color:#f1fa8c" > " https://demo.mcaptha.org/api/v1/pow/siteverify" < / span > , json< span style = "color:#ff79c6" > =< / span > payload
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 9< / span > < span > )
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 10< / span > < span > resp < span style = "color:#ff79c6" > =< / span > resp< span style = "color:#ff79c6" > .< / span > json()
< / span > < / span > < / code > < / pre > < / div > < ol start = "3" >
< li > If access token is valid, allow access to protected resource or deny
access.< / li >
< / ol >
< div class = "highlight" > < pre tabindex = "0" style = "color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;" > < code class = "language-python" data-lang = "python" > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 1< / span > < span > < span style = "color:#ff79c6" > if< / span > resp[< span style = "color:#f1fa8c" > " valid" < / span > ] < span style = "color:#ff79c6" > ==< / span > < span style = "color:#ff79c6" > False< / span > :
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 2< / span > < span > < span style = "color:#ff79c6" > return< / span > < span style = "color:#f1fa8c" > " invalid captcha" < / span > , < span style = "color:#bd93f9" > 400< / span >
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 3< / span > < span > < span style = "color:#ff79c6" > else< / span > :
< / span > < / span > < span style = "display:flex;" > < span style = "white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" > 4< / span > < span > < span style = "color:#ff79c6" > return< / span > allow_access_to_protected_resource(request< span style = "color:#ff79c6" > .< / span > form)
< / span > < / span > < / code > < / pre > < / div > < p > Please see here for a complete < a href = "https://github.com/mCaptcha/dos/tree/8f2b53ab46d64fa78a8300dc8ce9d78578ffce12/server" > Flask example< / a > and here for an < a href = "https://github.com/mCaptcha/dos/tree/8f2b53ab46d64fa78a8300dc8ce9d78578ffce12/rust-server/demo-server" > Actix
Web example< / a > .< / p >
< p > Congratulations, mCaptcha is now integrated with your website!< / p >
< p class = "edit-page" > < a href = "https://git.batsense.net/mCaptcha/website/blob/master/content/docs/webmasters/installing-captcha/index.md" > < svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" class = "feather feather-edit-2" > < path d = "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" > < / path > < / svg > Edit this page on git.batsense.net< / a > < / p >
< div class = "docs-navigation d-flex justify-content-between" >
< a class = "ms-auto" href = "/docs/webmasters/configuring-difficulty-factor/" >
< div class = "card my-1" >
< div class = "card-body py-2" >
Configuring Difficulty Factor →
< / div >
< / div >
< / a >
< / div >
< / main >
< / div >
< / div >
< / div >
< footer class = "footer text-muted" >
< div class = "container" >
< div class = "row" >
< div class = "col-lg-8 order-last order-lg-first" >
< ul class = "list-inline" >
< li class = "list-inline-item" > Powered by < a href = "https://gohugo.io/" > Hugo< / a > , and < a href = "https://getdoks.org/" > Doks< / a > < / li >
< / ul >
< / div >
< div class = "col-lg-8 order-first order-lg-last text-lg-end" >
< ul class = "list-inline" >
< li class = "list-inline-item" > < a href = "/about/" > About< / a > < / li >
< li class = "list-inline-item" > < a href = "/donate" > Donate< / a > < / li >
< li class = "list-inline-item" > < a href = "/privacy-policy/" > Privacy< / a > < / li >
< li class = "list-inline-item" > < a href = "/security" > Security< / a > < / li >
< li class = "list-inline-item" > < a href = "https://stats.uptimerobot.com/GK7VLFJnBl" > Status< / a > < / li >
< li class = "list-inline-item" > < a href = "/thanks" > Thanks< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
< / footer >
< script src = "/main.min.3ee0ac4f86a3696df8d8100a6b908e1d916e5ba581515d6ca65d6849444faf247f83e42d5c7e31046edd28842ddb5369bc072c42486b426dc54057495ba99e97.js" integrity = "sha512-PuCsT4ajaW342BAKa5COHZFuW6WBUV1spl1oSURPryR/g+QtXH4xBG7dKIQt21NpvAcsQkhrQm3FQFdJW6melw==" crossorigin = "anonymous" defer > < / script >
< script src = "/index.min.93b8a8c2342494612b6248052a9ee91028f73ecaca031e57b8e7bdbf1b6bea8ac3cc0db982f0bd4450facb3921041ff2c4f8c2ea5b8372142777b552db3f5167.js" integrity = "sha512-k7iowjQklGErYkgFKp7pECj3PsrKAx5XuOe9vxtr6orDzA25gvC9RFD6yzkhBB/yxPjC6luDchQnd7VS2z9RZw==" crossorigin = "anonymous" defer > < / script >
< / body >
< / html >
