forked from mCaptcha/website
250 lines
13 KiB
HTML
250 lines
13 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>Browser libraries - mCaptcha</title>
|
|
<meta name="description" content="API documenttion for mCaptcha WASM library">
|
|
<link rel="canonical" href="/docs/api/browser/">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="/icon.png">
|
|
<meta name="twitter:title" content="Browser libraries">
|
|
<meta name="twitter:description" content="API documenttion for mCaptcha WASM library">
|
|
|
|
<meta name="twitter:site" content="@">
|
|
<meta name="twitter:creator" content="@">
|
|
|
|
<meta property="og:title" content="Browser libraries">
|
|
<meta property="og:description" content="API documenttion for mCaptcha WASM library">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:url" content="/docs/api/browser/">
|
|
|
|
<meta property="og:image" content="/icon.png"/>
|
|
<meta property="article:published_time" content="2021-03-11T00: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": "Docsapibrowser",
|
|
"item": "\/docsapibrowser\/"
|
|
}]
|
|
}
|
|
</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" 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 active" 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="#glue-code">Glue code</a></li>
|
|
<li><a href="#widget-program">Widget Program</a></li>
|
|
<li><a href="#proof-of-workpow-library">Proof-of-Work(PoW) library</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
</nav>
|
|
<main class="docs-content col-lg-11 col-xl-9">
|
|
|
|
<h1>Browser libraries</h1>
|
|
<p class="lead"></p>
|
|
<p>The browser part of mCaptcha is divided into three components.</p>
|
|
<ul>
|
|
<li>Glue code</li>
|
|
<li>Widget program</li>
|
|
<li>Proof-of-Work libraries(WebAssembly and JavaScript polyfill)</li>
|
|
</ul>
|
|
<h2 id="glue-code">Glue code<a href="#glue-code" class="anchor" aria-hidden="true">#</a> </h2>
|
|
<p>This is the code that links mCaptcha with your website’s frontend code.
|
|
It creates an <code>iframe</code> containing the mCaptcha widget and injects the
|
|
received verification proof token into a hidden input field.</p>
|
|
<p>Support is available for various frameworks, see
|
|
<a href="https://github.com/mCaptcha/glue"><code>mCaptcha/glue</code></a> for the full list.</p>
|
|
<p>For frameworks without official support, a low-level library,
|
|
<a href="https://www.npmjs.com/package/@mcaptcha/core-glue"><code>@mcaptcha/core-glue</code></a>,
|
|
can be used to implement support.</p>
|
|
<h2 id="widget-program">Widget Program<a href="#widget-program" class="anchor" aria-hidden="true">#</a> </h2>
|
|
<p>This part is served by the mCaptcha backend. It fetches PoW config from
|
|
the backend, generates proof and submits it for verification. If
|
|
verification is successful, it sends a message containing the
|
|
verification proof token to the parent window, assuming it’s loaded as
|
|
an <code>iframe</code>.</p>
|
|
<ul>
|
|
<li>Source code:
|
|
<a href="https://github.com/mCaptcha/mCaptcha/tree/master/templates/widget"><code>mCaptcha/mCaptcha/templates/widget</code></a></li>
|
|
</ul>
|
|
<p>WebAssembly library which generates Proofs of Work for mCaptcha systems.</p>
|
|
<h2 id="proof-of-workpow-library">Proof-of-Work(PoW) library<a href="#proof-of-workpow-library" class="anchor" aria-hidden="true">#</a> </h2>
|
|
<p>WebAssembly bindings(<a href="https://github.com/mCaptcha/pow_wasm"><code>mCaptcha/pow_wasm</code></a>) are available for the main rust library(<a href="https://github.com/mCaptcha/pow_sha256"><code>mCaptcha/pow_sha256</code></a>).</p>
|
|
<p>For browsers without support WebAssembly, a
|
|
polyfill(<a href="https://github.com/mCaptcha/pow_sha256-polyfill"><code>pow_sha256-polyfill</code></a>)
|
|
is available.</p>
|
|
|
|
<p class="edit-page"><a href="https://github.com/mCaptcha/website/blob/master/content/docs/API/browser.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 href="/docs/help/troubleshooting/">
|
|
<div class="card my-1">
|
|
<div class="card-body py-2">
|
|
← Troubleshooting
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="ms-auto" href="/docs/api/mcaptcha-system/">
|
|
<div class="card my-1">
|
|
<div class="card-body py-2">
|
|
mCaptcha System Library →
|
|
</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>
|