"use strict";(self.webpackChunkbaf=self.webpackChunkbaf||[]).push([[5559],{2684:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>s,default:()=>d,frontMatter:()=>r,metadata:()=>l,toc:()=>p});var i=n(7896),a=(n(2784),n(876)),o=n(3002);const r={id:"sys_elem_integration_web_component",title:"Web component integration",sidebar_label:"Web component integration"},s=void 0,l={unversionedId:"user_guide/core_system_elements/sys_elem_integration_web_component",id:"user_guide/core_system_elements/sys_elem_integration_web_component",title:"Web component integration",description:"A web component is a tool that enables flawless integration of  with a web interface.",source:"@site/docs/user_guide/core_system_elements/web_components.mdx",sourceDirName:"user_guide/core_system_elements",slug:"/user_guide/core_system_elements/sys_elem_integration_web_component",permalink:"/user_guide/core_system_elements/sys_elem_integration_web_component",draft:!1,tags:[],version:"current",frontMatter:{id:"sys_elem_integration_web_component",title:"Web component integration",sidebar_label:"Web component integration"},sidebar:"docs",previous:{title:"Risk",permalink:"/user_guide/core_system_elements/sys_elem_risk"},next:{title:"Shared errors",permalink:"/user_guide/api_baf_shared_errors"}},m={},p=[{value:"How It Works",id:"how-it-works",level:4},{value:"Integration Structure",id:"integration-structure",level:4},{value:"Key Rules",id:"key-rules",level:4},{value:"Domain Verification",id:"domain-verification",level:4}],u={toc:p},c="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(c,(0,i.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"A web component is a tool that enables flawless integration of ",(0,a.kt)(o.$Y,{mdxType:"ShortProductName"})," with a web interface."),(0,a.kt)("h4",{id:"how-it-works"},"How It Works"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"The web component operates through an integration created on the server side.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"The integration acts as the entry point, defining the settings and data the component will use.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"Without an integration, the component cannot function."))),(0,a.kt)("h4",{id:"integration-structure"},"Integration Structure"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"Integrations are linked to accounts.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"Each account can have multiple integrations.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"However, one integration can only belong to one account.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"Integrations function independently, allowing different settings for different integrations within the same account."))),(0,a.kt)("p",null,"Example: One integration may collect biometric data with recorded videos, while another does not."),(0,a.kt)("h4",{id:"key-rules"},"Key Rules"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"A web component can only work with one integration at a time.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"Switching integrations requires restarting the component with new parameters.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"Updating settings: Simply update the integration parameters\u2014no need to modify the component itself."))),(0,a.kt)("p",null,"However, users who have already loaded the component must refresh their page to apply new settings."),(0,a.kt)("h4",{id:"domain-verification"},"Domain Verification"),(0,a.kt)("p",null,"A web component retrieves settings only if the request originates from a domain specified in the integration settings. The system verifies the request headers in this order:"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"Origin \u2013 Must fully match the domain in the integration, including schema (e.g., ",(0,a.kt)("a",{parentName:"p",href:"https://example.com"},"https://example.com"),").")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"Referrer \u2013 Checked like Origin, but the last slash (/) is ignored.")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("p",{parentName:"li"},"Host \u2013 Matches only the domain and port."))),(0,a.kt)("p",null,"If both Origin and Referrer headers exist, only Origin is checked."),(0,a.kt)("p",null,"Multiple integrations can be created for the same domain."),(0,a.kt)("admonition",{type:"note"},(0,a.kt)("p",{parentName:"admonition"},"Integration management is available only in the dashboard.")))}d.isMDXComponent=!0}}]);