forked from mCaptcha/website
321 lines
29 KiB
HTML
321 lines
29 KiB
HTML
|
<!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+ImL0dKU/MZXqcthuu0Ux97m+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">
|
||
|
|
<meta property="article:modified_time" content="2023-02-13T16:50:36+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://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 →
|
||
|
|
</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>
|