使用验证码将HTML插入XML视图

Question

我目前正在开发一个用openui5制作的页面，我需要做的是插入验证码，但据我所知，openui5中没有验证码，我试图将HTML内容插入到此中。

问题是，我的观点是XML格式，我确实试图直接使用标签插入并更改内容，但是不可能，它表示不正确的xml解析。

我想要输入我的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>

我想在这里插入：

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

在xml或之前的字段内，因为验证码将出现在登录按钮上方。

我要插入的div的内容来自google captcha：

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

无法取得成功，任何人都可以帮助我吗？也许是关于命名空间的东西，我不知道，这是我的命名空间配置：

  <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">

非常感谢你的时间！

Answer 1

谢谢你的帮助。我从所有评论中得到了一些帮助，我所做的是将命名空间声明为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"
>

只需添加标签，我在这里显示：

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

还要记得声明谷歌js的导入（在我的索引上添加它）：

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

我还在试图弄清楚如何获得这个验证码答案并通过或不通过登录。

这样，验证码就会出现并生成。

谢谢！

Answer 2

要在XML视图中插入HTML，您可以使用sap.ui.core库中的HTML控件。在XML中使用之前，您必须转义HTML文本。

<core:HTML content='&lt;div id=&quot;recaptcha&quot; class=&quot;g-recaptcha&quot; data-sitekey=&quot;your_site_key&quot; data-callback=&quot;onSubmit&quot; data-size=&quot;invisible&quot;&gt;&lt;/div&gt;' />