我快要瘋了,因為我無法讓Chrome 密碼管理器要求使用表單保存密碼。假設 Firefox 毫無問題地保存了用戶名/電子郵件和密碼:另一方面,Chrome忽略了我所做的每一個更改。我已經知道谷歌發布了這項成就的最佳實踐,但我無法使用 Fetch API 登錄,也無法調整建議的代碼axios,我只收到一條錯誤消息,說我需要存儲apasswordCredentialData或中的憑據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 的已知問題。另外,我嘗試action="/login"method="post"在元素標簽中添加<form>和它沒有改變任何東西。然后,我嘗試用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>我刪除了與該問題無關的類和其他代碼片段,例如占位符和標簽,以便更好地閱讀。我按照此處所述調用了一個onsubmit事件。我了解到 Google在成功重定向(在本例中為 Vue.js 路由重定向)后會激活 Chrome 密碼管理器——因此相關邏輯至關重要。我嘗試添加{ withCredentials: true }到請求屬性,但正如我所說,由于數據格式,axios它無法創建新的構造函數。使用 Vue.js和預定義模型PasswordCredential是理想的選擇,盡管使用專用對象也會失敗。form.emailform.passwordFormDataasync handleLogin() { await axios .post("/auth", { email: this.form.email, password: this.form.password }, { withCredentials: true }) .then({ ... }) .catch({ ... });}上面,方法的第一行用于處理登錄。我認為這可能只是一個起點,因為 Google Developers 展示了如何使用 Fetch API 和構造函數存儲憑據PasswordCredential。我瀏覽了 SO 存檔幾個星期,但我仍然無法繼續;如果您介意的話,進行同步調用并不能解決問題。我究竟做錯了什么?編輯 ?谷歌密碼管理器是否有可能僅僅因為我在一個不安全的區域(沒有或沒有未簽名的 SSL 證書的本地域)而無法工作?
如何使用 Vue.js 2、BootstrapVue 和 axios 在 Chrome
揚帆大魚
2023-04-01 16:30:39