Inserting HTML into XML view with captcha

Question

I'm currently working on a page that is made with openui5, what I need to do is to insert a captcha, but as far as I know there is no captcha in openui5, what I was trying is to insert HTML content into this.

The problem is, my views are in XML and I did try to insert directly using tags and changing the content, but wasn't possible, it says incorrect xml parsing.

Part of my code of where I want to input my html div:

<Page id="page1" class="marginBoxContent" showHeader="false" showFooter="false" enableScrolling="true">
<content>
  <Image src="../../image/logo.svg" />
  <l:Grid
    defaultSpan="L12 M12 S12"
    width="100%">
    <l:content>
      <f:Form id="FormChange354"
        minWidth="1024"
        maxContainerCols="2"
        editable="true">
        <f:layout>
          <f:ResponsiveGridLayout
            labelSpanL="3"
            labelSpanM="3"
            emptySpanL="4"
            emptySpanM="4"
            columnsL="1"
            columnsM="1" />
        </f:layout>
        <f:formContainers>
          <f:FormContainer>
            <f:formElements>
              <f:FormElement label="{i18n>Language}">
                <f:fields>
                  <Select id="animationSelect" selectedKey="en" change="languageChange">
                      <core:Item text="English" key="en" />
                    <core:Item text="Português" key="pt" />
                      <core:Item text="Español" key="es" />
                      <layoutData>
                        <FlexItemData growFactor="1" />
                      </layoutData>
                    </Select>
                </f:fields>
              </f:FormElement>
            </f:formElements>
            <f:formElements>
              <f:FormElement label="{i18n>User}">
                <f:fields>
                  <Input id="username" value="" type="Email" />
                </f:fields>
              </f:FormElement>
            </f:formElements>
            <f:formElements>
              <f:FormElement label="{i18n>Password}">
                <f:fields>
                  <Input id="password" type="Password" placeholder="" value="" />
                </f:fields>
              </f:FormElement>
            </f:formElements>
            <f:formElements>
              <f:FormElement label="">
                <f:fields>
                  <Button id="btnLogin" text="{i18n>Sigin}" type="Emphasized" press="login" />
                </f:fields>
              </f:FormElement>
            </f:formElements>
          </f:FormContainer>
        </f:formContainers>
      </f:Form>
      <l:VerticalLayout>
          <Link text="{i18n>CreateUser}" press="navCreateUser" />
          <Link text="{i18n>RecoverPass}" press="navRecoverPass" />
          <Link text="{i18n>ChangePass}" press="navChangePass" />
      </l:VerticalLayout>
    </l:content>
  </l:Grid>
</content>

I want to insert exaclty here:

<f:formElements>
          <f:FormElement label="">
            <f:fields>
              <Button id="btnLogin" text="{i18n>Sigin}" type="Emphasized" press="login" />
            </f:fields>
          </f:FormElement>
        </f:formElements>

Inside the fields xml or before, because the captcha will appear above the login button.

The content of the div I want to insert is from google captcha:

<div id='recaptcha' class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
      data-size="invisible"></div>

Couldn't have success yet, anybody can help me with that? Maybe is something about the namespace, I don't know, here is my namespace config:

  <mvc:View
  height="100%"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:l="sap.ui.layout"
  xmlns:f="sap.ui.layout.form"
  xmlns:core="sap.ui.core"
  controllerName="hiddenName.app.login.view.Login">

Thanks a lot for your time!

Answer 1

thank you for every help. I got some help from all comments, what I did was declare the namespace to html:

<mvc:View
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:l="sap.ui.layout"
  xmlns:f="sap.ui.layout.form"
  xmlns:core="sap.ui.core"
  xmlns:html="http://www.w3.org/1999/xhtml"
  height="100%"
  controllerName="hiddenName.app.login.view.Login"
>

And simply added the tag as I show down here:

<html:div id="recaptchaGoogle" class="g-recaptcha" data-sitekey="yourKey"></html:div>      

Also remember to declare the import of the google js(added it on my index):

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

I'm still trying to figure out how to get this captcha answer and pass or not to the login.

With that, the captcha appears and is generated.

Thank you!