ctpassmore/mcaptcha-website
1
0
Fork 0
forked from mCaptcha/website
Code Issues Pull requests Projects Releases Packages Wiki Activity
mcaptcha-website/docs/introduction/installing-captcha/index.html

323 lines
29 KiB
HTML
Raw Normal View History

new deploy: 2023-02-13T12:31:53+00:00
2023-02-13 18:01:53 +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.4492eacff4110697cd6162326bce4ee59e92315bf9acc357594066968669326dc80b75b1a39e6cea81c4f8898bd1d294fcc657a9cb61baed14c7dee6f9e2b2d6.css" integrity="sha512-RJLqz/QRBpfNYWIya85O5Z6SMVv5rMNXWUBmloZpMm3IC3Wxo55s6oHE&#43;ImL0dKU/MZXqcthuu0Ux97m&#43;eKy1g==" 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">
new deploy: 2023-03-12T14:54:54+00:00
2023-03-12 20:24:54 +05:30
<meta property="article:modified_time" content="2023-02-13T18:00:02+05:30">
new deploy: 2023-02-13T12:31:53+00:00
2023-02-13 18:01:53 +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&rsquo;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&rsquo;s bedroom(for this same reason, it shouldn&rsquo;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 &ldquo;New Site&rdquo; 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 &#39;new site key&#39; 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 &#39;new site key&#39; 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 &#39;new site key&#39; 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 &#39;new site key&#39; 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. &ldquo;View deployment&rdquo; 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&rsquo;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>&lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;mcaptcha__widget-container&#34;</span>&gt;&lt;/<span style="color:#ff79c6">div</span>&gt;
</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>&lt;<span style="color:#ff79c6">script</span> <span style="color:#50fa7b">src</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;https://unpkg.com/@mcaptcha/vanilla-glue@0.1.0-alpha-2/dist/index.js&#34;</span>&gt;&lt;/<span style="color:#ff79c6">script</span>&gt;
</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>&lt;<span style="color:#ff79c6">script</span> <span style="color:#50fa7b">charset</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;utf-8&#34;</span>&gt;
</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>&lt;/<span style="color:#ff79c6">script</span>&gt;
</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&rsquo;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">&#34;mcaptcha__token&#34;</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">&#34;token&#34;</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">&#34;key&#34;</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">&#34;secret&#34;</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">&#34;https://demo.mcaptha.org/api/v1/pow/siteverify&#34;</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">&#34;valid&#34;</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">&#34;invalid captcha&#34;</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://github.com/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 GitHub</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 &rarr;
</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="/support/">Support</a></li>
<li class="list-inline-item"><a href="/thanks">Thanks</a></li>
<li class="list-inline-item"><a href="/tos">ToS</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&#43;ZiYOr7xf3T3TXEiisj0D4evixW82fDad1yQpBOVw9FT&#43;wBnzHX/ZCxSCzYHNAAUwA==" crossorigin="anonymous" defer></script>
</body>
</html>
Reference in a new issue Copy permalink