如何使用 Vue.js 2、BootstrapVue 和 axios 在 Chrome 中启用内置密码保存提示

Posted 2023-02-22

【中文标题】如何使用 Vue.js 2、BootstrapVue 和 axios 在 Chrome 中启用内置密码保存提示

【英文标题】：How-to enable the built-in password saving prompt in Chrome with Vue.js 2, BootstrapVue, and axios

【发布时间】：2021-01-14 07:58:33

【问题描述】：

我快疯了，因为我无法让 Chrome 密码管理器通过表单请求保存密码。假设 Firefox 可以毫无问题地保存用户名/电子邮件和密码：另一方面，Chrome 会忽略我所做的所有更改。

我已经知道 Google 发布了 the best practices for this achievement，但我无法使用 Fetch API 登录，也无法将建议的代码调整为 axios，我只收到一条错误消息，说我需要将凭据存储在passwordCredentialData 或htmlFormElement 中，尝试使用PasswordCredential 构造函数（无论我如何传递这些凭据）。

无论如何，表单本身应该支持浏览器的内置功能。这是输出代码的示例：

<form>
  <fieldset>
    <input id="email" name="email" type="email" required="required" autocomplete="username email">
    <input id="password" name="password" type="password" required="required" autocomplete="current-password">
  </fieldset>
  <button type="submit"></button>
</form>

这应该已经足够了，但它是由 Vue.js 和 BootstrapVue 生成的表单。我已经知道 AJAX 的已知问题。此外，<form> 元素标签中的I tried adding action="/login" 和method="post" 并没有改变任何东西。然后，我尝试使用new-password——而不是current-password——也……没有任何改变。

当然，由 BootstrapVue 生成，来源有点不同。

<b-form @submit.prevent="handleLogin">
  <b-form-group>
    <b-form-input autocomplete="username email" id="email" name="email" required type="email" v-model="form.email"></b-form-input>
    <b-form-input autocomplete="current-password" id="password" name="password" required type="password" v-model="form.password"></b-form-input>
  </b-form-group>
  <b-button type="submit"></b-button>
</b-form>

为了更好地阅读，我删除了与问题无关的类和其他代码片段，例如占位符和标签。我打电话给an onsubmit event as described here。

我了解到，Google 会在成功重定向（在本例中为 Vue.js 路由重定向）之后激活 Chrome 密码管理器——因此相关逻辑至关重要。我尝试将 withCredentials: true 添加到axios 请求属性中，但正如我所说，由于数据格式的原因，它无法创建新的PasswordCredential 构造函数。最好使用 Vue.js form.email 和 form.password 预定义模型，尽管使用专用的 FormData 对象也会失败。

async handleLogin() 
  await axios
    .post("/auth", 
      email: this.form.email,
      password: this.form.password
    ,
    
      withCredentials: true
    )
      .then(
        ...
      )
      .catch(
        ...
      );

上面，方法的第一行用于处理登录。我认为这可能只是一个起点，因为 Google Developers 展示了如何使用 Fetch API 和 PasswordCredential 构造函数存储凭据。我浏览了几个星期的 SO 档案，但我仍然无法继续前进；如果您介意的话，进行同步调用并不能解决问题。我做错了什么？

编辑 • Google Password Manager 是否有可能仅仅因为我位于不安全的区域（没有或带有未签名 SSL 证书的本地域）而无法工作？

【参考方案1】：

AFAIK（阅读 this thread in Google Help Center）虽然下面的代码应该可以工作，但如果相关域没有有效的 SSL 证书，它实际上就不行。

async handleLogin() 
  await axios
    .post("/auth", 
      email: this.form.email,
      password: this.form.password
    ,
    
      withCredentials: true
    )
      .then(
        ...
      )
      .then(() => 
        if (window.PasswordCredential) 
          const passwordCredential = new PasswordCredential( id: this.form.email, password: this.form.password );
          navigator.credentials.store(passwordCredential);
        
        ...
      )  
      .catch(
        ...
      );

这受到a newer version of the official documentation 的启发，应该只适用于提供有效 SSL 证书的人。目前，截至#142818，尚无解决此问题的方法。

编辑 • 如果您的开发站点或 web 应用程序位于 localhost 下，那么您可能需要启用“允许从 localhost 加载的资源的无效证书”。来自chrome://flags/#allow-insecure-localhost。

编辑 • 不幸的是，为自定义域启用chrome://flags/#unsafely-treat-insecure-origin-as-secure 不会改变任何东西（并使 Chrome 更加不稳定）。