<!doctype html><htmllang=en-us><head><metacharset=utf-8><metahttp-equiv=x-ua-compatiblecontent="ie=edge"><metaname=viewportcontent="width=device-width,initial-scale=1,shrink-to-fit=no"><linkrel=preloadas=fonthref=/fonts/vendor/jost/jost-v4-latin-regular.woff2type=font/woff2crossorigin><linkrel=preloadas=fonthref=/fonts/vendor/jost/jost-v4-latin-700.woff2type=font/woff2crossorigin><linkrel=stylesheethref=/main.f4e82f75f039986a07346a99687f11e3218d588abe9b9daa7d0673b1a7aaee5b689ec69619c26a2962d5a124bed33807d58bd84180c249bbb8eddc33c5ef5baa.cssintegrity="sha512-9OgvdfA5mGoHNGqZaH8R4yGNWIq+m52qfQZzsaeq7ltonsaWGcJqKWLVoSS+0zgH1YvYQYDCSbu47dwzxe9bqg=="crossorigin=anonymous><noscript><style>img.lazyload{display:none}</style></noscript><metaname=robotscontent="index, follow"><metaname=googlebotcontent="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1"><metaname=bingbotcontent="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1"><title>Installing mCaptcha on your website - mCaptcha</title><metaname=descriptioncontent="Interested in deploying mCpatcha? From deploying a self-hosted instance to installing the CAPTCHA on your website, this guide will have you covered!"><linkrel=canonicalhref=/docs/introduction/installing-captcha/><metaname=twitter:cardcontent="summary_large_image"><metaname=twitter:imagecontent="/icon.png"><metaname=twitter:titlecontent="Installing mCaptcha on your website"><metaname=twitter:descriptioncontent="Interested in deploying mCpatcha? From deploying a self-hosted instance to installing the CAPTCHA on your website, this guide will have you covered!"><metaname=twitter:sitecontent="@"><metaname=twitter:creatorcontent="@"><metaproperty="og:title"content="Installing mCaptcha on your website"><metaproperty="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!"><metaproperty="og:type"content="article"><metaproperty="og:url"content="/docs/introduction/installing-captcha/"><metaproperty="og:image"content="/icon.png"><metaproperty="article:published_time"content="2022-06-22T00:00:00+00:00"><metaproperty="article:modified_time"content="2022-08-01T22:25:15+05:30"><metaproperty="og:site_name"content="mCaptcha"><metaproperty="article:publisher"content="https://www.facebook.com/"><metaproperty="article:author"content="https://www.facebook.com/"><metaproperty="og:locale"content="en_US"><scripttype=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><metaname=theme-colorcontent="#fff"><linkrel=apple-touch-iconsizes=180x180href=/apple-touch-icon.png><linkrel=icontype=image/pngsizes=32x32href=/favicon-32x32.png><linkrel=icontype=image/pngsizes=16x16href=/favicon-16x16.png><linkrel=manifesthref=/site.webmanifest></head><bodyclass="docs single"><divclass="header-bar fixed-top"></div><headerclass="navbar fixed-top navbar-expand-md navbar-light"><divclass=container><inputclass="menu-btn order-0"type=checkboxid=menu-btn>
explore how to install mCaptcha on your website. The end result will be
something like this, on your website:</p><figure><imgclass="img-fluid lazyload blur-up"data-sizes=autosrc=/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_20x0_resize_box_2.pngdata-srcset="/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_800x0_resize_box_2.png 800w,/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_700x0_resize_box_2.png 700w,/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_600x0_resize_box_2.png 600w,/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_500x0_resize_box_2.png 500w"width=618height=669alt="A registration form with mCaptcha widget installed"><noscript><imgclass=img-fluidsizes=100vwsrcset="/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_800x0_resize_box_2.png 800w,/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_700x0_resize_box_2.png 700w,/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_600x0_resize_box_2.png 600w,/docs/introduction/installing-captcha/mcaptcha-widget-installation-result_hub39801b2a229b4882fd00c2c83dd77fb_28299_500x0_resize_box_2.png 500w"src=/docs/introduction/installing-captcha/mcaptcha-widget-installation-result.pngwidth=618height=669alt="A registration form with mCaptcha widget installed"></noscript></figure><p>For the purpose of this demo, we will be using
<ahref=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><h2id=1-create-an-account-and-sign-into-the-mcaptcha-dashboard>1. Create an account and sign into the mCaptcha dashboard<ahref=#1-create-an-account-and-sign-into-the-mcaptcha-dashboardclass=anchoraria-hidden=true>#</a></h2><p>Head over to <ahref=https://demo.mcaptcha.org/join>demo.mcaptcha.org</a> and
create an account. When ready, sign in.</p><h2id=2-create-new-site-key>2. Create new site key<ahref=#2-create-new-site-keyclass=anchoraria-hidden=true>#</a></h2><p>A <ahref=../configuring-difficulty-factor/>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><imgclass="img-fluid lazyload blur-up"data-sizes=autosrc=/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_20x0_resize_box_2.pngdata-srcset="/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_900x0_resize_box_2.png 900w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_800x0_resize_box_2.png 800w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_700x0_resize_box_2.png 700w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_600x0_resize_box_2.png 600w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_500x0_resize_box_2.png 500w"width=1825height=857alt="mCaptcha dashboard with the 'new site key' button highlighted"><noscript><imgclass=img-fluidsizes=100vwsrcset="/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_900x0_resize_box_2.png 900w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_800x0_resize_box_2.png 800w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_700x0_resize_box_2.png 700w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_600x0_resize_box_2.png 600w,/docs/introduction/installing-captcha/new-sitekey-btn_hu4dc550a2e568d01f004e26fb8eb1b427_65746_500x0_resize_box_2.png 500w"src=/docs/introduction/installing-captcha/new-sitekey-btn.pngwidth=1825height=857alt="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 <ahref=../configuring-difficulty-factor#advance-option>here</a>.</p><blockquote><h3id=easy-modeconfiguring-difficulty-factoreasy-option><ahref=../configuring-difficulty-factor#easy-option>Easy Mode</a><ahref=#easy-modeconfiguring-difficulty-factoreasy-optionclass=anchoraria-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><imgclass="img-fluid lazyload blur-up"data-sizes=autosrc=/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_20x0_resize_box_2.pngdata-srcset="/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_900x0_resize_box_2.png 900w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_800x0_resize_box_2.png 800w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_700x0_resize_box_2.png 700w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_600x0_resize_box_2.png 600w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_500x0_resize_box_2.png 500w"width=720height=452alt="mCaptcha dashboard with the 'new site key' form in easy mode, with details filled in"><noscript><imgclass=img-fluidsizes=100vwsrcset="/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_900x0_resize_box_2.png 900w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_800x0_resize_box_2.png 800w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_700x0_resize_box_2.png 700w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_600x0_resize_box_2.png 600w,/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled_hu0c237370199481610ab31adaa9c5a5e6_30108_500x0_resize_box_2.png 500w"src=/docs/introduction/installing-captcha/new-sitekey-easy-mode-filled.pngwidth=720height=452alt="mCaptcha dashboard with the 'new site key' form in easy mode, with details filled in"></noscript></figure><h2id=3-copy-widget-link>3. Copy widget link<ahref=#3-copy-widget-linkclass=anchoraria-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><h2id=4-install-mcaptcha-on-your-website>4. Install mCaptcha on your website<ahref=#4-install-mcaptcha-on-your-websiteclass=anchoraria-hidden=true>#</a></h2><p>Integration support is available for some frontend JavaScript
frameworks. To see full list of supported frameworks, please see
<ahref=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><divclass=highlight><prestyle=color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-htmldata-lang=html><spanstyle="margin-right:.4em;padding:0 .4em;color:#7f7f7f"> 1</span><<spanstyle=color:#ff79c6>div</span><spanstyle=color:#50fa7b>id</span><spanstyle=color:#ff79c6>=</span><spanstyle=color:#f1fa8c>"mcaptcha__widget-container"</span>></<spanstyle=color:#ff79c6>div</span>>
<ahref=https://github.com/mCaptcha/glue/blob/ea576d875457de54d82bed3edfc4ee68302fa4d8/packages/vanilla/static/embeded.html>here</a>.</p><h2id=5-configure-backend-to-authenticate-captcha-tokens>5. Configure backend to authenticate CAPTCHA tokens<ahref=#5-configure-backend-to-authenticate-captcha-tokensclass=anchoraria-hidden=true>#</a></h2><ol><li><p>Get <ahref=../../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><divclass=highlight><prestyle=color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-pythondata-lang=python><spanstyle="margin-right:.4em;padding:0 .4em;color:#7f7f7f">1</span> mcaptcha_token <spanstyle=color:#ff79c6>=</span> request<spanstyle=color:#ff79c6>.</span>form[<spanstyle=color:#f1fa8c>"mcaptcha__token"</span>]
</code></pre></div></li><li><p>Validate access token with mCaptcha instance</p></li></ol><divclass=highlight><prestyle=color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-pythondata-lang=python><spanstyle="margin-right:.4em;padding:0 .4em;color:#7f7f7f"> 1</span>payload <spanstyle=color:#ff79c6>=</span> {
</code></pre></div><p>Please see here for a complete <ahref=https://github.com/mCaptcha/dos/tree/8f2b53ab46d64fa78a8300dc8ce9d78578ffce12/server>Flask example</a> and here for an <ahref=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><pclass=edit-page><ahref=https://github.com/mCaptcha/website/blob/master/content/docs/introduction/installing-captcha/index.md><svgxmlns="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"><pathd="M17 3a2.828 2.828.0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>Edit this page on GitHub</a></p><divclass="docs-navigation d-flex justify-content-between"><aclass=ms-autohref=/docs/introduction/configuring-difficulty-factor/><divclass="card my-1"><divclass="card-body py-2">Configuring Difficulty Factor →</div></div></a></div></main></div></div></div><footerclass="footer text-muted"><divclass=container><divclass=row><divclass="col-lg-8 order-last order-lg-first"><ulclass=list-inline><liclass=list-inline-item>Powered by <ahref=https://gohugo.io/>Hugo</a>, and <ahref=https://getdoks.org/>Doks</a></li></ul></div><divclass="col-lg-8 order-first order-lg-last text-lg-end"><ulclass=list-inline><liclass=list-inline-item><ahref=/about/>About</a></li><liclass=list-inline-item><ahref=/donate>Donate</a></li><liclass=list-inline-item><ahref=/privacy-policy/>Privacy</a></li><liclass=list-inline-item><ahref=/security>Security</a></li><liclass=list-inline-item><ahref=https://stats.uptimerobot.com/GK7VLFJnBl>Status</a></li><liclass=list-inline-item><ahref=/thanks>Thanks</a></li></ul></div></div></div></footer><scriptsrc=/main.min.993b2b4c58b07e7a4bb3423cf18ccd78a85d0063680c0fc9bf6d9cc02be98e08793034d984dd8f7c60ad5b70f3186cc8bc280b1077b7e37c2d64f36f118099bb.jsintegrity="sha512-mTsrTFiwfnpLs0I88YzNeKhdAGNoDA/Jv22cwCvpjgh5MDTZhN2PfGCtW3DzGGzIvCgLEHe343wtZPNvEYCZuw=="crossorigin=anonymousdefer></script><scriptsrc=/index.min.38e8d81faf5bd7aeed68f8a9506ae1d5317542b288dc7cdeacc4dfdd56fbd19ab699e397afb82fda6457ae5e52649730b6d0a86f8f70d0eafce336484454a88b.jsintegrity="sha512-OOjYH69b167taPipUGrh1TF1QrKI3HzerMTf3Vb70Zq2meOXr7gv2mRXrl5SZJcwttCob49w0Or84zZIRFSoiw=="crossorigin=anonymousdefer></script></body></html>
