2021-12-15 15:21:59 +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.60c01f8e4587d713b944a8a0acde263887dd938acaa06c1d283db35e4ce18008340510c4a66b77a38e97377e97a7a3c8fb6ebfead61e11e97ee3a8a5539f6d10.css integrity = "sha512-YMAfjkWH1xO5RKigrN4mOIfdk4rKoGwdKD2zXkzhgAg0BRDEpmt3o46XN36Xp6PI+26/6tYeEel+46ilU59tEA==" 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 = "2021-12-15T15:20:01+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 >
2021-03-11 10:38:07 +05:30
< 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" >
2021-12-15 15:21:59 +05:30
< 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 1111.21 3 7 7 0 0021 12.79z" / > < / 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" / > < line x1 = "12" y1 = "1" x2 = "12" y2 = "3" / > < line x1 = "12" y1 = "21" x2 = "12" y2 = "23" / > < line x1 = "4.22" y1 = "4.22" x2 = "5.64" y2 = "5.64" / > < line x1 = "18.36" y1 = "18.36" x2 = "19.78" y2 = "19.78" / > < line x1 = "1" y1 = "12" x2 = "3" y2 = "12" / > < line x1 = "21" y1 = "12" x2 = "23" y2 = "12" / > < line x1 = "4.22" y1 = "19.78" x2 = "5.64" y2 = "18.36" / > < line x1 = "18.36" y1 = "5.64" x2 = "19.78" y2 = "4.22" / > < / 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 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22" / > < / 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 = /about/ > About< / a > < / li > < 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 active" > < a class = nav-link href = /docs/prologue/introduction/ > 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 > Prologue< / h3 > < ul class = list-unstyled > < li > < a class = docs-link href = /docs/prologue/introduction/ > Introduction< / a > < / li > < / ul > < h3 > API< / h3 > < ul class = list-unstyled > < li > < a class = docs-link href = /docs/api/mcaptcha-system/ > mCaptcha System Library< / a > < / li > < li > < a class = "docs-link active" href = /docs/api/browser/ > Browser libraries< / 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 > < 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/docker/ > Docker< / 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/dependencies/ > Databse and cache< / 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 >
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 114 4L7.5 20.5 2 22l1.5-5.5L17 3z" / > < / svg > Edit this page on GitHub< / a > < / p > < div class = "docs-navigation d-flex justify-content-between" > < a href = /docs/prologue/introduction/ > < div class = "card my-1" > < div class = "card-body py-2" > ← Introduction< / div > < / div > < / a > < a class = ms-auto href = /docs/self-hosted/docker/ > < div class = "card my-1" > < div class = "card-body py-2" > Docker → < / 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.db67f0caa6a5788b691b9509981d6e5943f4b8d829170a674f468d4b23671ce4017c47a0a22116a8fc2f2de556c8b48f1afecd86707066f2f022c5dd83e8ea3c.js integrity = "sha512-22fwyqaleItpG5UJmB1uWUP0uNgpFwpnT0aNSyNnHOQBfEegoiEWqPwvLeVWyLSPGv7NhnBwZvLwIsXdg+jqPA==" crossorigin = anonymous defer > < / script > < script src = /index.min.14d90a1bf5eef7d2b17902afe7b9ef7f8050a0619390568503a8254f864e31029e63bec047cd6efd6d23a2470d3458899332e923065cef88508028b49ab0b873.js integrity = "sha512-FNkKG/Xu99KxeQKv57nvf4BQoGGTkFaFA6glT4ZOMQKeY77AR81u/W0jokcNNFiJkzLpIwZc74hQgCi0mrC4cw==" crossorigin = anonymous defer > < / script > < / body > < / html >
