可以使用角度材质组件自定义Okta Sign-In Widget吗？

Question

我刚刚将@okta/okta-signin-widget添加到我的Angular SPA中，它呈现如下所示：

<span>
    <input id="okta-signin-username" type="text">
</span>

我使用Angular材质库设置Angular SPA的样式，这需要不同的DOM结构：

<mat-form-field>
    <input id="okta-signin-username" type="text" matInput>
</mat-form-field>

有谁知道如何做到这一点吗？由于Angular的组件工厂，我不能简单地使用javascript重新构造DOM，如下所示：

this.widget.on('ready', (context) => {
    // This WON'T work!
    const username = document.getElementById('okta-signin-username');
    const field = document.createElement('mat-form-field');
    const parent = username.parentElement;
    field.appendChild(username);
    parent.appendChild(field);
});

当然，这会改变DOM，但这绕过了Angular的组件工厂，这些工厂是生成完整结构所必需的：

<mat-form-field>
    <div class="mat-form-field-wrapper ...">
          <div class="mat-form-field-flex ...">
              <div class="mat-form-field-infix ...">
                  <input id="okta-signin-username" type="text" matInput>
              </div>
         </div>
    </div>
</mat-form-field>

有谁知道如何做到这一点吗？我目前正在使用https://angular.io/guide/dynamic-component-loader中提到的Angular的ComponentFactorResolver。我想我会尝试将上面的javascript与组件工厂的使用结合起来--但如果我尝试一下，也许这个小部件会有问题？也许有更简单的方法？

我是否可以创建自己的登录表单，并在呈现后将小部件中的输入移动到其中？

感谢您的任何提示和帮助！

Answer 1

解决方案似乎是:使用@okta/okta-auth-js库。

有关使用@okta/okta-auth-js的其他帮助，请参阅this Okta tutorial。

此解决方案由Okta团队向mraible致敬。