CN111209587B - 一种基于js浏览器插件的一键登录方法 - Google Patents

Abstract

本发明涉及PC端网页一键登录技术领域，具体公开了一种基于js浏览器插件的一键登录方法，安装浏览器插件并设置私钥；在登录时，浏览器插件检测用户在当前页面是否保存过密码；如果保存过，则浏览器插件分析当前页面，锁定用户名、密码输入框以及登录按钮，然后修改当前网页区块的局部样式，列出用户之前保存的账号，模拟用户输入和点击登录，从而实现一键登录。本发明能够有效地实现针对每一个网站，可以保存多个账号，并且可以实现无用户名和密码的一键登录；本发明通过对私钥加密，有效的保证了使用的安全性；本发明能够实现将相关数据信息同步云端和存储在本地浏览器数据库，能够有效的避免由于PC端清理缓存而造成无法实现一键登录情况的出现。

Description

一种基于js浏览器插件的一键登录方法

技术领域

本发明涉及PC端一键登录技术领域，具体的说，是一种基于js浏览器插件的一键登录方法。

背景技术

随着企业定制化项目的普及，以及一些网站的安全性越来越高，当我们主动去监测用户模式和用户行为，将会使我们的产品更加的贴近用户行为模式和使用习惯，并且能帮助用户更高效率和快捷的解决一些需要问题。

现有的技术，浏览器会自动记住密码，但是只能记住一个，而且有时效性，过一段时间就会没有；在清空浏览器缓存的话，用户和密码就会全部消失。

发明内容

本发明的目的在于提供一种基于js浏览器插件的一键登录方法，使得用户能够无需记录密码，点击选择账号，一键自动登录；不会因为缓存清空而不能实现一键自动登录。

本发明通过下述技术方案实现：

一种基于js浏览器插件的一键登录方法，安装浏览器插件并设置私钥；在登录时，浏览器插件检测用户在当前页面是否保存过密码；如果保存过，则浏览器插件分析当前页面，锁定用户名、密码输入框以及登录按钮，然后修改当前网页区块的局部样式，列出用户之前保存的账号，模拟用户输入和点击登录，从而实现一键登录。

进一步地，为了更好的实现本发明，具体包括以下步骤：

步骤S1：安装浏览器插件并设置私钥；

在首次使用时，首先在插件页安装浏览器插件并且在插件页通过设置私钥，通过加密将私钥存储到本地浏览器数据库和/或云端中；

步骤S2：检测私钥是否存在；

在登录时，打开登录页，浏览器插件在本地浏览器数据库中寻找是否存在私钥；

若存在，插件功能激活；进入登录页面；

若不存在，插件功能无法激活，返回步骤S1；

步骤S3：浏览器插件通过节点分析，扫描整个页面，通过筛选，锁定用户名、密码输入框以及登录按钮；

步骤S4：判断是否存储过用户名和密码，登录；

步骤S41：若存储过，列出存储过的账号，显示账号信息，点击登录，实现一键登录；

步骤S42：若未存储过，点击登录，输入账号密码，实现登录；判断是否存储账号密码到本地和/或云端中；

若存储，在下次用户登录的时候，则列出本次保存的用户名，当用户点击的时候，再进行私钥解密，然后模拟用户点击登录，进行登录；

若不存储，则浏览器插件不执行，用户可以进行正常登录。

进一步地，为了更好的实现本发明，所述步骤S3具体包括以下步骤：

步骤S31：浏览器插件通过节点分析和特征属性，扫描整个页面，当扫描到输入框为type是password，初步确定为密码框，获取密码框集合，筛选本身和父级带有隐藏域的节点，经过筛选得到准确的密码框；

步骤S32：用户名输入框筛选，锁定用户名、密码输入框和登录按钮。

进一步地，为了更好的实现本发明，所述步骤S41具体包括：

步骤S411：浏览器插件获取当前网站和本地浏览器数据库的对比并提取数据；修改登录网页的局部样式，并将用户登录区块修改成账号信息；

步骤S412：用户点击账号信息，通过new Event创建事件，浏览器插件模拟用户输入账号，并模拟用户点击操作，实现一键登录。

进一步地，为了更好的实现本发明，所述步骤S42具体是指：当用户点击登录后，使用confirm拦截用户点击登录的进程，并提示用户是否存储当前用户名和密码；

若存储，将用户名和密码通过md5加密后存储到浏览器数据库中，并存储网站域名、网站title、网站图标、登录用户名和密码；

若不存储，正常登录。

进一步地，为了更好的实现本发明，所述步骤S1中设置私钥具体是指：

若从未登录过，则手动输入私钥，进入浏览器插件的登录页面并生成私钥二维码，通过APP扫描二维码，获取私钥进行登录，并将私钥通过md5加密存储至本地浏览器数据库和/或云端中；

若在移动端登录过，采用APP扫描pc端插件页生成的二维码，通过服务器中转传输私钥，浏览器插件获取私钥记录并登录；并将私钥通过md5加密存储至本地浏览器数据库和/或云端中。

本发明与现有技术相比，具有以下优点及有益效果：

（1）本发明能够有效地实现针对每一个网站，可以保存多个账号，并且可以实现无用户名和密码的一键登录。

（2）本发明通过对私钥加密，有效的保证了使用的安全性；

（3）本发明能够实现将相关数据信息同步云端和存储在本地浏览器数据库，能够有效的避免由于PC端清理缓存而造成无法实现一键登录情况的出现。

具体实施方式

下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。

实施例1：

本发明通过下述技术方案实现，一种基于js浏览器插件的一键登录方法，安装浏览器插件并设置私钥；在登录时，浏览器插件检测用户在当前页面是否保存过密码；如果保存过，则浏览器插件分析当前页面，锁定用户名、密码输入框以及登录按钮，然后修改当前网页区块的局部样式，列出用户之前保存的账号，模拟用户输入和点击登录，从而实现一键登录。

需要说明的是，通过上述改进，本发明能够有效地实现针对每一个网站，可以保存多个账号，并且可以实现无用户名和密码的一键登录。通过对私钥加密，有效的保证了使用的安全性；能够实现将相关数据信息同步云端和存储在本地浏览器数据库，能够有效的避免由于PC端清理缓存而造成无法实现一键登录情况的出现。

实施例2：

本实施例在上述实施例的基础上做进一步优化，进一步地，为了更好的实现本发明，具体包括以下步骤：

步骤S1：安装浏览器插件并设置私钥；

在首次使用时，首先在插件页安装浏览器插件并且在插件页通过设置私钥，通过加密将私钥存储到本地浏览器数据库和/或云端中；

步骤S2：检测私钥是否存在；

在登录时，打开登录页，浏览器插件在本地浏览器数据库中寻找是否存在私钥；

若存在，插件功能激活；进入登录页面；

若不存在，插件功能无法激活，返回步骤S1；

步骤S3：浏览器插件通过节点分析，扫描整个页面，通过筛选，锁定用户名、密码输入框以及登录按钮；

步骤S4：判断是否存储过用户名和密码，登录；

步骤S41：若存储过，列出存储过的账号，显示账号信息，点击登录，实现一键登录；

步骤S42：若未存储过，点击登录，输入账号密码，实现登录；判断是否存储账号密码到本地和/或云端中，若存储，下次登录即可实现一键登录。

若未存储过，点击登录，输入账号密码，实现登录；判断是否存储账号密码到本地和/或云端中；

若存储，在下次用户登录的时候，则列出本次保存的用户名，当用户点击的时候，再进行私钥解密，然后模拟用户点击登录，进行登录；

若不存储，则浏览器插件不执行，用户可以进行正常登录。

本实施例的其他部分与上述实施例相同，故不再赘述。

实施例3：

本实施例在上述实施例的基础上做进一步优化，进一步地，为了更好的实现本发明，所述步骤S3具体包括以下步骤：

步骤S31：浏览器插件通过节点分析和特征属性，扫描整个页面，当扫描到输入框为type是password，确定为密码框，获取密码框集合，通过parentsUntil('html body')和window.getComputedStyle(node, null)方法去筛选本身和父级带有隐藏域的节点，经过筛选得到准确的密码框；用户名输入框筛选，锁定用户名、密码输入框和登录按钮。

需要说明的是，通过上述改进，节点分析具体是指：浏览器插件相当于嵌入页面的js代码，可以获取到别人网站的html的各种标签，这里主要用于根据标签的特征去定位密码框。

隐藏域分析具体是指：一个登录页面可能不光只有一个密码输入框，有些是隐藏的，页面无法看到，这时候我们就需要过滤掉一些放在隐藏域中的密码框，来准确定位密码框，其实现采用的是现有技术，可以使用window.getComputedStyle(node, null)获取标签的输入框属性，以及parentsUntil('html body')遍历父节点，一旦父节点有隐藏属性，我们就可以把一些带有隐藏域的密码输入框给排除掉。

浏览器插件通过节点分析和特征属性，扫描整个页面，获取当前页面所有的input输入框，初步筛选出type为password的密码框，把筛选出的密码框进行遍历，获取所有筛选的节点以及父节点的属性，如果带有display：none或者visible:hidden，则排除该节点为显示在页面上的密码框，最终过滤出登录页唯一的一个显示的密码框，并且过滤出距离密码框最近的type为text或者email的输入框；过滤条件为：用户名输入框和密码框共有一个form节点或者有距离最近的共有父节点，距离密码框最近，定位等过滤条件。

本实施例的其他部分与上述实施例相同，故不再赘述。

实施例4：

本实施例在上述实施例的基础上做进一步优化，进一步地，为了更好的实现本发明，所述步骤S42具体是指：当用户点击登录后，使用confirm拦截用户点击登录的进程，并提示用户是否存储当前用户名和密码；

用户保存时，进入页面，开始扫描页面，点击事件也会触发扫描页面；比如有些页面需要点击按钮切换才会出来登录界面；

在用户名和密码都不为空的情况下，当用户点击登录按钮，获取当前点击的事件对象，并且监测页面是否发起请求，判断是否为登录操作，是登录操作，利用confirm拦截，提示用户是否保存用户名和密码。用户名和密码有为空的情况，点击登录则不提示。

保存：记录下网页的标题，图标，用户名和密码，以及最顶层的url；因为一个网页可能存在多个iframe，而我们只需要取到最顶层的window对象；将所有数据存储到浏览器数据库中。

若存储，将用户名和密码通过md5加密后存储到浏览器数据库中，并存储网站域名、网站title、网站图标、登录用户名和密码；格式如下：

{“url”:xxx,

“title”:xxx

“icon”:xxx,

“user”:[

{

“username”:xxx

“password”:xxx

}

]

}

若不存储，正常登录。

用户保存过后进入登录页：

用户进入页面，开始扫描页面，点击事件也会触发扫描页面；比如有些页面需要点击按钮切换才会出来登录界面；

从本地数据库中遍历数据，拿数据库中保存的url和登录页的ur做对比，假如能匹配上，则获取用户名和密码输入框的宽度和高度。以普通输入上面用户名和下面密码框为例：覆盖面积为输入框最宽的宽度，高度则为密码框底部距离浏览器顶部的高度-用户名框底部距离浏览器顶部的高度+用户名的高度，然后遍历数据，以列表的形式展示出账号，将覆盖区域插入到用户名和密码框共有父节点的内部并且设置样式为最优先；设置此为最优先是因为可能跟原界面冲突，所以需要设置优先级；并且给父节点添加postion:relative属性，根据定位来覆盖区域的起始位置和结束位置，查找所有节点，根据共有父节点，定位，关键字匹配过滤出登录按钮，并且隐藏登录按钮。定义全局变量，记录下捕获到的用户名，密码框和登录按钮。

用户点击账号：获取当前点击对象的用户名，再到浏览器数据库中去匹配当前登录页的账号信息，获取账号密码，模拟用户输入，将账号填入用户名和密码框。并且模拟用户点击登录。

用户点击关闭：将一键登录覆盖区域隐藏，登录按钮显示，可以正常登录。

本实施例的其他部分与上述实施例相同，故不再赘述。

实施例5：

本实施例在上述实施例的基础上做进一步优化，进一步地，为了更好的实现本发明，所述步骤S1中设置私钥具体是指：

若从未登录过，则手动输入私钥，进入浏览器插件的登录页面并生成私钥二维码，通过APP扫描二维码，获取私钥进行登录，并将私钥通过md5加密存储至本地浏览器数据库和/或云端中；

若在移动端登录过，采用APP扫描pc端插件页生成的二维码，通过服务器中转传输私钥，浏览器插件获取私钥记录并登录；并将私钥通过md5加密存储至本地浏览器数据库和/或云端中。

需要说明的是，通过上述改进，当在PC端首次使用时，浏览器插件将提示用户是否在其他终端使用过，如移动端；若使用过，将生成带有session+UUID+时间戳的二维码，移动端的APP扫描二维码，得到session+UUID+时间戳，session对密码和时间戳进行加密得到私钥，并将私钥和UUID推送给服务器，PC端请求私钥采用session解密得到秘钥和时间戳，即可登录；

若没有使用过将提示用户设置密码。

当在移动端APP首次使用时，浏览器插件将提示用户是否在其他终端使用过，如PC端；若使用过，PC端生成带有密码+时间戳的二维码，移动端的APP扫描二维码得到密码+时间戳；

若未使用过，提示用户设置密码。

本实施例的其他部分与上述实施例相同，故不再赘述。

实施例6：

本实施例在上述实施例的基础上做进一步优化，进一步地，为了更好的实现本发明，所述步骤S41具体包括：

步骤S411：浏览器插件获取当前网站和本地浏览器数据库的对比并提取数据；修改登录网页的局部样式，并将用户登录区块修改成账号信息；

步骤S412：用户点击账号信息，通过new Event创建事件，浏览器插件模拟用户输入账号，并模拟用户点击操作，实现一键登录。

用户点击账号信息后，浏览器插件模拟用户输入账号var ev = new Event("input", {"bubbles": true, "cancelable": false});dom.dispatchEvent(ev)，并且使用$(loginButton)[0].click()方法模拟用户点击操作。实现一键登录。

$(loginButton)[0].click()这个方法是现有的方法，实现用户模拟点击的操作。因为有些网站是不允许直接赋值填充进行登录的，所以要以模拟用户登录为前提的这么一个行为去实现。

需要说明的是，通过上述改进，修改登录网页的局部样式具体是指：获取网站的html代码之后，通过dom节点修改，并且添加css等样式，进行一个界面的更改。本方案中实现的一键登录的局部样式修改是将用户名和密码框以及登录按钮隐藏，只显示一个一键登录的用户名按钮。

本实施例的其他部分与上述实施例相同，故不再赘述。

以上所述，仅是本发明的较佳实施例，并非对本发明做任何形式上的限制，凡是依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化，均落入本发明的保护范围之内。

Claims (4)

1.一种基于js浏览器插件的一键登录方法，其特征在于：安装浏览器插件并设置私钥；在登录时，浏览器插件检测用户在当前页面是否保存过密码；如果保存过，则浏览器插件分析当前页面，锁定用户名、密码输入框以及登录按钮，然后修改当前网页区块的局部样式，列出用户之前保存的账号，模拟用户输入和点击登录，从而实现一键登录；

步骤S1：安装浏览器插件并设置私钥；

在首次使用时，首先在插件页安装浏览器插件并且在插件页通过设置私钥，通过加密将私钥存储到本地浏览器数据库和/或云端中；

步骤S2：检测私钥是否存在；

在登录时，打开登录页，浏览器插件在本地浏览器数据库中寻找是否存在私钥；

若存在，插件功能激活；进入登录页面；

若不存在，插件功能无法激活，返回步骤S1；

步骤S3：浏览器插件通过节点分析，扫描整个页面，通过筛选，锁定用户名、密码输入框以及登录按钮；

步骤S31：浏览器插件通过节点分析和特征属性，扫描整个页面，获取当前页面所有的input输入框，当扫描到输入框为type是password，初步确定为密码框，获取密码框集合，把筛选出的密码框进行遍历，筛选本身和父级带有隐藏域的节点，经过筛选得到准确的密码框；

步骤S32：用户名输入框筛选，锁定用户名、密码输入框和登录按钮；过滤出输入框的条件包括：用户名输入框和密码框共有一个form节点或者有距离最近的共有父节点，过滤出距离密码框最近的type为text或者email的输入框；

步骤S4：判断是否存储过用户名和密码，登录；

步骤S41：若存储过，列出存储过的账号，显示账号信息，点击登录，实现一键登录；

步骤S42：若未存储过，点击登录，输入账号密码，实现登录；判断是否存储账号密码到本地和/或云端中，若存储，下次登录即可实现一键登录。

2.根据权利要求1所述的一种基于js浏览器插件的一键登录方法，其特征在于：所述步骤S41具体包括：

步骤S411：浏览器插件获取当前网站和本地浏览器数据库的对比并提取数据；修改登录网页的局部样式，并将用户登录区块修改成账号信息；

步骤S412：用户点击账号信息，通过new Event创建事件，浏览器插件模拟用户输入账号，并模拟用户点击操作，实现一键登录。

3.根据权利要求2所述的一种基于js浏览器插件的一键登录方法，其特征在于：所述步骤S42具体是指：当用户点击登录后，使用confirm拦截用户点击登录的进程，并提示用户是否存储当前用户名和密码；

若存储，将用户名和密码通过md5加密后存储到浏览器数据库中，并存储网站域名、网站title、网站图标、登录用户名和密码；

若不存储，正常登录。

4.根据权利要求3所述的一种基于js浏览器插件的一键登录方法，其特征在于：所述步骤S1中设置私钥具体是指：

若从未登录过，则手动输入私钥，进入浏览器插件的登录页面并生成私钥二维码，通过APP扫描二维码，获取私钥进行登录，并将私钥通过md5加密存储至本地浏览器数据库和/或云端中；

若在移动端登录过，采用APP扫描pc端插件页生成的二维码，通过服务器中转传输私钥，浏览器插件获取私钥记录并登录；并将私钥通过md5加密存储至本地浏览器数据库和/或云端中。