<!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.976507041017ac4a08ed252c5399a7c72b3b5aeae14bc23dd624cbddb3d2cb6065f6cf8ed6cd96bf5cd21c1157dee4bfdb85b488cb791a49a33af016aa3fcffd.css" integrity="sha512-l2UHBBAXrEoI7SUsU5mnxys7WurhS8I91iTL3bPSy2Bl9s+O1s2Wv1zSHBFX3uS/24W0iMt5GkmjOvAWqj/P/Q==" 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/introduction/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/introduction/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="2022-08-01T23:03:44+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": "Docsintroductioninstalling Captcha",
"item": "\/docsintroductioninstalling-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/introduction/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>Introduction</h3>
<ul class="list-unstyled">
<li><a class="docs-link active" href="/docs/introduction/installing-captcha/">Installing mCaptcha on your website</a></li>
<li><a class="docs-link" href="/docs/introduction/configuring-difficulty-factor/">Configuring Difficulty Factor</a></li>
</ul>
<h3>Terminology</h3>
<ul class="list-unstyled">
<li><a class="docs-link" href="/docs/terminology/access-token/">Access token</a></li>
<li><a class="docs-link" href="/docs/terminology/cooldown-period/">Cooldown Period</a></li>
<li><a class="docs-link" href="/docs/terminology/difficulty-factor/">Difficulty Factor</a></li>
<li><a class="docs-link" href="/docs/terminology/sitekey/">Site key</a></li>
<li><a class="docs-link" href="/docs/terminology/visitor-threshold/">Visitor Threshold</a></li>
</ul>
<h3>Self-Hosted</h3>
<ul class="list-unstyled">
<li><a class="docs-link" href="/docs/self-hosted/getting-started/">Getting started</a></li>
<li><a class="docs-link" href="/docs/self-hosted/bare-metal/">Deploy bare metal</a></li>
<li><a class="docs-link" href="/docs/self-hosted/docker/">Using Docker</a></li>
<li><a class="docs-link" href="/docs/self-hosted/dependencies/">Database and cache</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>
<ul>
<li><a href="#easy-modedocsintroductionconfiguring-difficulty-factoreasy-option"><a href="/docs/introduction/configuring-difficulty-factor/#easy-option">Easy Mode</a></a></li>
</ul>
</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
explore how to install mCaptcha on your website. The end result will be
something like this, on your website:</p>
<figure>
<img class="img-fluid lazyload blur-up" data-sizes="auto" src="/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_20x0_resize_box_3.png" data-srcset="/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_800x0_resize_box_3.png 800w,/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_700x0_resize_box_3.png 700w,/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_600x0_resize_box_3.png 600w,/docs/introduction/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/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_800x0_resize_box_3.png 800w,/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_700x0_resize_box_3.png 700w,/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_600x0_resize_box_3.png 600w,/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_500x0_resize_box_3.png 500w" src="/docs/introduction/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
in @realaravinth’s bedroom(for this same reason, it shouldn’t be used
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/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_20x0_resize_box_3.png" data-srcset="/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_900x0_resize_box_3.png 900w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_800x0_resize_box_3.png 800w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_700x0_resize_box_3.png 700w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_600x0_resize_box_3.png 600w,/docs/introduction/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/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_900x0_resize_box_3.png 900w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_800x0_resize_box_3.png 800w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_700x0_resize_box_3.png 700w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_600x0_resize_box_3.png 600w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_500x0_resize_box_3.png 500w" src="/docs/introduction/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 easy mode 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>
<blockquote>
<h3 id="easy-modedocsintroductionconfiguring-difficulty-factoreasy-option"><a href="/docs/introduction/configuring-difficulty-factor/#easy-option">Easy Mode</a><a href="#easy-modedocsintroductionconfiguring-difficulty-factoreasy-option" class="anchor" aria-hidden="true">#</a> </h3>
<p>Easy mode asks a few basic statistics about your website and generates a
configuration that should work for your website. Currently, easy mode is
guided by assumptions on suitable difficulty factors to protect a
website but it will be fine-tuned as mCaptcha sees more deployment.</p>
<p>Configuration generated by easy mode can be tweaked later using the
advance mode, as you become more familiar with how mCaptcha works.</p>
</blockquote>
<p>Fill the form and submit it.</p>
<figure>
<img class="img-fluid lazyload blur-up" data-sizes="auto" src="/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_20x0_resize_box_3.png" data-srcset="/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_900x0_resize_box_3.png 900w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_800x0_resize_box_3.png 800w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_700x0_resize_box_3.png 700w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_600x0_resize_box_3.png 600w,/docs/introduction/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/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_900x0_resize_box_3.png 900w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_800x0_resize_box_3.png 800w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_700x0_resize_box_3.png 700w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_600x0_resize_box_3.png 600w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_500x0_resize_box_3.png 500w" src="/docs/introduction/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
can be viewed. “View deployment” link will display CAPTCHA widget with
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
frameworks. To see full list of supported frameworks, please see
<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
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
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;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1</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;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2</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-alpha-2/dist/index.js"</span>></<span style="color:#ff79c6">script</span>>
</span></span><span style="display:flex;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3</span><span><<span style="color:#ff79c6">script</span> <span style="color:#50fa7b">charset</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">"utf-8"</span>>
</span></span><span style="display:flex;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4</span><span> <span style="color:#8be9fd;font-style:italic">let</span> config <span style="color:#ff79c6">=</span> {
</span></span><span style="display:flex;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5</span><span> widgetLink<span style="color:#ff79c6">:</span> <span style="color:#ff79c6">new</span> URL(
</span></span><span style="display:flex;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6</span><span> {{paste yout widget link}}
</span></span><span style="display:flex;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7</span><span> ),
</span></span><span style="display:flex;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8</span><span> };
</span></span><span style="display:flex;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9</span><span> <span style="color:#ff79c6">new</span> mcaptchaGlue.<span style="color:#ff79c6">default</span>(config);
</span></span><span style="display:flex;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10</span><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
form submission payload. The access token will be associated with a
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;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;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;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;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;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;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;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;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;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;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;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;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;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;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;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/introduction/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/introduction/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.fc14a6a9dceb7093b6984e33583a45c79e3c960959d75df6b62753b4d1c63a97d25af2b0ca924ed12675f1de34f3fce9ec81668f2d3bee114b9b6357dd2e92cd.js" integrity="sha512-/BSmqdzrcJO2mE4zWDpFx548lglZ1132tidTtNHGOpfSWvKwypJO0SZ18d408/zp7IFmjy077hFLm2NX3S6SzQ==" crossorigin="anonymous" defer></script>
<script src="/index.min.f24b6e33dac74771476dda67fe905af998983abef17f74f74d71228ac8f40f87af8b15bcd9f0da775c90a41395c3d153fb0067cc75ff642c520b3607340014c0.js" integrity="sha512-8ktuM9rHR3FHbdpn/pBa+ZiYOr7xf3T3TXEiisj0D4evixW82fDad1yQpBOVw9FT+wBnzHX/ZCxSCzYHNAAUwA==" crossorigin="anonymous" defer></script>
</body>
</html>