管理中心
我的
您当前正在浏览新版开发者文档中心,目录分类和层级有所调整。点击左侧当前文档分类名称前的“☰”图标,可切换文档分类。 了解新版目录
指南与API参考指南系统安全密码自动填充服务网页接入密码保险箱

网页接入密码保险箱

网页中的登录表单,登录成功后,用户可将用户名和密码保存到系统密码保险箱中。再次打开该网页时,密码保险箱可以提供用户名、密码的自动填充。

手机使用场景

以下以https://developer.huawei.com/网站为例:

  1. 在网站中输入用户名、密码,登录成功后,ArkWeb会提示将用户名和密码保存到密码保险箱中。

  2. 再次打开相同的网站,点击用户名或者密码框中时,会弹出密码保险箱的填充提示。

  3. 可以选择提示框中的用户名,通过认证,就能直接在网页中填入之前保存的用户名、密码。

  4. 点击“使用其他账号”,选择密码保险箱中保存的其他账号。认证后在网页中填入选择的用户名、密码。

  5. 点击“手动输入”或者提示框之外的地方,会弹出小艺输入法,会提示可用于密码填充的用户名和钥匙图标。

    点击用户名可触发在网页中填入用户名、密码;点击钥匙图标,进入选择账号的界面。

2in1使用场景

以下以https://developer.huawei.com/网站为例:

  1. 在网站中输入用户名、密码,登录成功后,ArkWeb会提示将用户名和密码保存到密码保险箱中。

  2. 再次打开相同的网站,点击用户名或者密码框中时,会弹出密码保险箱的下拉框。

  3. 选择下拉框中的用户名,通过认证,就能直接在网页中填入之前保存的用户名、密码。

  4. 也可以点击下拉框中的“使用其他账号”,选择密码保险箱中保存的其他账号。认证后在网页中填入选择的用户名、密码。

网页密码保存规格

1、ArkWeb依赖密码表单提交成功后,触发页面跳转到其他页面,才能触发密码保存。

2、Native应用通过ArkWeb实现H5登录,登录成功后请勿立即销毁ArkWeb实例,否则将无法提示密码保存。

网页密码表单规格

ArkWeb使用Chromium智能算法,自动识别网页中的用户名、密码元素。算法对用户名、密码表单的设计,有一定的约束。

推荐的密码登录表单

  1. 使用静态的登录页面或登录表单元素,而不是通过js脚本在页面中动态插入<form>、<input>等表单元素。

  2. 用户名密码输入框均使用<input>元素实现,并集成在同一个<form>内,默认可编辑,登录场景有且最多有一个type="password"类型的<input>元素。

  3. 点击按钮触发登录,登录成功后,应当触发跳转到新的页面。

  4. 用户名框携带autocomplete=“username”,携带id或name属性,并采用如下建议的值,便于算法推断用户名元素:

    收起
    自动换行
    深色代码主题
    复制
    1. const char* const kUsernameLatin[] = {
    2. "gatti", "uzantonomo", "solonanarana", "nombredeusuario",
    3. "olumulo", "nomenusoris", "enwdefnyddiwr", "nomdutilisateur",
    4. "lolowera", "notandanafn", "nomedeusuario", "vartotojovardas",
    5. "username", "ahanjirimara", "gebruikersnaam", "numedeutilizator",
    6. "brugernavn", "benotzernumm", "jinalamtumiaji", "erabiltzaileizena",
    7. "brukernavn", "benutzername", "sunanmaiamfani", "foydalanuvchinomi",
    8. "mosebedisi", "kasutajanimi", "ainmcleachdaidh", "igamalomsebenzisi",
    9. "nomdusuari", "lomsebenzisi", "jenengpanganggo", "ingoakaiwhakamahi",
    10. "nomeutente", "namapengguna"};
    11. const char* const kUserLatin[] = {
    12. "user", "wosuta", "gebruiker", "utilizator",
    13. "usor", "notandi", "gumagamit", "vartotojas",
    14. "fammi", "olumulo", "maiamfani", "cleachdaidh",
    15. "utent", "pemakai", "mpampiasa", "umsebenzisi",
    16. "bruger", "usuario", "panganggo", "utilisateur",
    17. "bruker", "benotzer", "uporabnik", "doutilizador",
    18. "numake", "benutzer", "covneegsiv", "erabiltzaile",
    19. "usuari", "kasutaja", "defnyddiwr", "kaiwhakamahi",
    20. "utente", "korisnik", "mosebedisi", "foydalanuvchi",
    21. "uzanto", "pengguna", "mushandisi"};
    22. const char* const kUsernameNonLatin[] = {
    23. "用户名", "کاتيجونالو", "用戶名", "የተጠቃሚስም",
    24. "логин", "اسمالمستخدم", "נאמען", "کاصارفکانام",
    25. "ユーザ名", "όνομα χρήστη", "brûkersnamme", "корисничкоиме",
    26. "nonitilizatè", "корисничкоиме", "ngaranpamaké", "ຊື່ຜູ້ໃຊ້",
    27. "användarnamn", "యూజర్పేరు", "korisničkoime", "пайдаланушыаты",
    28. "שםמשתמש", "ім'якористувача", "کارننوم", "хэрэглэгчийннэр",
    29. "nomedeusuário", "имяпользователя", "têntruynhập", "பயனர்பெயர்",
    30. "ainmúsáideora", "ชื่อผู้ใช้", "사용자이름", "імякарыстальніка", "lietotājvārds",
    31. "потребителскоиме", "uporabniškoime", "колдонуучунунаты", "kullanıcıadı",
    32. "පරිශීලකනාමය", "istifadəçiadı", "օգտագործողիանունը", "navêbikarhêner", "ಬಳಕೆದಾರಹೆಸರು",
    33. "emriipërdoruesit", "वापरकर्तानाव", "käyttäjätunnus", "વપરાશકર્તાનામ", "felhasználónév",
    34. "उपयोगकर्तानाम", "nazwaużytkownika", "ഉപയോക്തൃനാമം", "სახელი", "အသုံးပြုသူအမည်",
    35. "نامکاربری", "प्रयोगकर्तानाम", "uživatelskéjméno", "ব্যবহারকারীরনাম",
    36. "užívateľskémeno", "ឈ្មោះអ្នកប្រើប្រាស់"};
    37. const char* const kUserNonLatin[] = {
    38. "用户", "użytkownik", "tagatafaʻaaogā", "دکارونکيعکس",
    39. "用戶", "užívateľ", "корисник", "карыстальнік",
    40. "brûker", "kullanıcı", "истифода", "អ្នកប្រើ",
    41. "ọrụ", "ተጠቃሚ", "באַניצער", "хэрэглэгчийн",
    42. "يوزر", "istifadəçi", "ຜູ້ໃຊ້", "пользователь",
    43. "صارف", "meahoʻohana", "потребител", "वापरकर्ता",
    44. "uživatel", "ユーザー", "מִשׁתַמֵשׁ", "ผู้ใช้งาน",
    45. "사용자", "bikaranîvan", "колдонуучу", "વપરાશકર્તા",
    46. "përdorues", "ngườidùng", "корисникот", "उपयोगकर्ता",
    47. "itilizatè", "χρήστης", "користувач", "օգտվողիանձնագիրը",
    48. "használó", "faoiúsáideoir", "შესახებ", "ব্যবহারকারী",
    49. "lietotājs", "பயனர்", "ಬಳಕೆದಾರ", "ഉപയോക്താവ്",
    50. "کاربر", "యూజర్", "පරිශීලක", "प्रयोगकर्ता", "användare",
    51. "المستعمل", "пайдаланушы", "အသုံးပြုသူကို", "käyttäjä"};
    52. const char* const kTechnicalWords[] = {
    53. "uid", "newtel", "uaccount", "regaccount", "ureg",
    54. "loginid", "laddress", "accountreg", "regid", "regname",
    55. "loginname", "membername", "uname", "ucreate", "loginmail",
    56. "accountname", "umail", "loginreg", "accountid", "loginaccount",
    57. "ulogin", "regemail", "newmobile", "accountlogin"};
    58. const char* const kWeakWords[] = {"id", "login", "mail"};
  5. 登录场景,密码框携带autocomplete=“current-password”。

  6. 用户名框下面紧挨密码框,中间不要插入其他<input>元素(包括不可见的<input>)。

  7. 静态页面中的用户名密码框不可见,则需要确保在静态页面中就存在,而不是跳转页面时插入密码表单。

【案例1】:

【案例2】:

不支持自动填充的密码登录表单类型

以下场景不会自动弹出账号密码保存提示,如果当前页面存在账号密码保存记录,点击用户名或密码<input>元素仍会触发自动填充弹窗。此时需手动删除已保存的凭据,此后将不再出现自动保存或自动填充弹窗。

  1. 初始页面内无用户名密码表单元素,点击登录跳转页面后,新增非<form>类型的用户名密码表单。

  2. 用户名输入框type="number",验证码输入框type="number",无密码输入框。

  3. 页面加载完成,<input>的type属性不是"password",点击登录才变成"password"类型。

  4. 密码<input>元素的autocomplete="one-time-code"或者"cc-*"。

  5. 密码<input>元素在没有autocomplete时,id、name属性上能正则匹配到如下one-time-code或者信用卡标识。

    收起
    自动换行
    深色代码主题
    复制
    1. inline constexpr char16_t kOneTimePwdRe[] =
    2. u"one.?time|sms.?(code|token|password|pwd|pass)";
    3. inline constexpr char16_t kCardCvcRe[] =
    4. u"verification|card.?identification|security.?code|card.?code"
    5. u"|security.?value"
    6. u"|security.?number|card.?pin|c-v-v"
    7. u"|código de segurança" // pt-BR
    8. u"|código de seguridad" // es-MX
    9. u"|karten.?prüfn" // de-DE
    10. u"|(?:cvn|cvv|cvc|csc|cvd|ccv)"
    11. // We used to match "cid", but it is a substring of "cidade" (Portuguese for
    12. // "city") and needs to be handled carefully.
    13. u"|\\bcid\\b|cccid";

不建议使用的密码登录表单类型

针对期望自动弹出账号密码保存提示的场景,不推荐如下方法,可能存在不符合实现预期的问题。推荐写法见推荐的密码登录表单。

  1. 密码输入框携带了autocomplete=“new-password”属性。

  2. 用户名和密码元素中间存在其他<input>元素,算法推断出的用户名元素,不符合用户预期。

  3. 网页通过JavaScript脚本,变更了<input>元素的焦点或者修改<input>元素的value。

  4. 用户名<input>元素上id、name、label内容中匹配到如下密码类型标识:

    收起
    自动换行
    深色代码主题
    复制
    1. const char* const kNegativeLatin[] = {
    2. "pin", "parola", "wagwoord", "wachtwoord",
    3. "fake", "parole", "givenname", "achinsinsi",
    4. "token", "parool", "firstname", "facalfaire",
    5. "fname", "lozinka", "pasahitza", "focalfaire",
    6. "lname", "passord", "pasiwedhi", "iphasiwedi",
    7. "geslo", "huahuna", "passwuert", "katalaluan",
    8. "heslo", "fullname", "phasewete", "adgangskode",
    9. "parol", "optional", "wachtwurd", "contrasenya",
    10. "sandi", "lastname", "cyfrinair", "contrasinal",
    11. "senha", "kupuhipa", "katasandi", "kalmarsirri",
    12. "password", "loluszais", "tenimiafina",
    13. "second", "passwort", "middlename", "paroladordine",
    14. "codice", "pasvorto", "familyname", "inomboloyokuvula",
    15. "modpas", "salasana", "motdepasse", "numeraeleiloaesesi",
    16. "captcha"};
    17. const char* const kNegativeNonLatin[] = {
    18. "fjalëkalim", "የይለፍቃል", "كلمهالسر", "գաղտնաբառ",
    19. "пароль", "পাসওয়ার্ড", "парола", "密码", "密碼",
    20. "დაგავიწყდათ", "κωδικόςπρόσβασης", "પાસવર્ડ", "סיסמה",
    21. "पासवर्ड", "jelszó", "lykilorð", "paswọọdụ",
    22. "パスワード", "ಪಾಸ್ವರ್ಡ್", "пароль", "ការពាក្យសម្ងាត់",
    23. "암호", "şîfre", "купуясөз", "ລະຫັດຜ່ານ",
    24. "slaptažodis", "лозинка", "पासवर्ड", "нууцүг",
    25. "စကားဝှက်ကို", "पासवर्ड", "رمز", "کلمهعبور",
    26. "hasło", "пароль", "лозинка", "پاسورڊ",
    27. "මුරපදය", "contraseña", "lösenord", "гузарвожа",
    28. "கடவுச்சொல்", "పాస్వర్డ్", "รหัสผ่าน", "пароль",
    29. "پاسورڈ", "mậtkhẩu", "פּאַראָל", "ọrọigbaniwọle"};