权限隐私密码忘记怎么改_创建可访问密码的隐私切换

权限隐私密码忘记怎么改

The password field is a lie.

密码字段是谎言。

Millions of people struggle with letters rendered into dots because they believe that it means “security”. The reality is that the password field is merely obfuscated plaintext. It does nothing to enhance security, except for the unlikely proposition of someone looking directly over your shoulder as you type. The password field has nothing to do with encryption, and using it is more likely to cause security and usability issues:

数以百万计的人挣扎着把字母涂成点，因为他们认为这意味着“安全”。 现实情况是，密码字段仅仅是模糊的纯文本。 它无助于提高安全性，除了有人打字时不太可能直视您的肩膀的提议外。 密码字段与加密无关，使用它更可能引起安全性和可用性问题 ：

• Users who struggle with entering letters as dots are more likely to choose simpler, easier to type passwords, making them easier to crack on the backend (which is a far more likely scenario than someone reading the password over their shoulder).
  努力将字母输入为点的用户更有可能选择更简单，更容易键入的密码，从而使他们更容易在后端破解(这比在头上读密码的人更有可能)。
• Obfuscated text conceals repeated typos, leading to user frustration and abandonment.
  模糊的文字掩盖了重复的错别字，导致用户感到沮丧和放弃。
• Obscured text is particularly hard to enter on mobile devices.
  遮蔽的文本尤其难以在移动设备上输入。

Despite all of this, users have been trained over two decades to associate “starred” text with “security”, and will likely feel uncomfortable when presented with a plaintext password, despite the fact that it is actually a more secure option in most situations. How do we habituate users away from this piece of security theatre?

尽管如此，经过二十多年的培训，用户已将“加注星标”文本与“安全性”相关联，尽管在大多数情况下它实际上是一种更安全的选择，但在向其提供纯文本密码时可能会感到不舒服。 我们如何使用户远离这个安全剧院？

In recent conference presentations and articles Jeremy Keith and Luke Wroblewski have been promoting alternative approaches: either do away with passwords altogether, or make the password field plaintext to start, and allow a “privacy” option for users who may feel insecure. The latter is very easy to accomplish with CSS and a little JavaScript.

在最近的会议演讲和文章中， Jeremy Keith和Luke Wroblewski一直在提倡替代方法：要么完全放弃密码，要么使密码字段为纯文本格式，并为可能感到不安全的用户提供“隐私”选项。 后者很容易用CSS和一些JavaScript来完成。

制作HTML (Crafting The HTML)

First: the password field starts off as a plain text input. (If you wanted to place users at ease even more, you could start with a password input, and create the rest of the UI in reverse).

首先：密码字段开始为纯文本输入。 (如果您想让用户更加放心，则可以从输入密码开始，然后反向创建其余的UI)。

<label for=textpass>Password</label>
<input type="text" id="textpass" pattern="[a-zA-Z0-9]{3,12}">

In this case I’m using a very simple HTML5 regular expression pattern to guide the user in ensuring that the password is at least three alphanumeric characters, and no longer than 12.

在这种情况下，我使用一个非常简单HTML5正则表达式模式来指导用户确保密码至少为三个字母数字字符且不超过12个字符。

Next, the slider, which will be a highly customized checkbox:

接下来是滑块，它将是一个高度自定义的复选框：

<label class="switch">
	<input type="checkbox" onclick="switcher()">
	<span>Privacy
	<span>Off</span>
	<span>On</span>
	</span>
	<a></a>
</label>

设置复选框样式 (Styling The Checkbox)

The CSS to create the slider is derived from Ionuț Colceriu’s excellent toggle switch pattern:

创建滑块CSS源自Ionuț Colceriu出色的切换开关模式 ：

label {
	color: #fff;
	display: inline-block;
	width: 90px;
}
input#textpass { 
	font-size: 1rem;
	padding: .5rem;
	border: 0;
	border-radius: 3px;
	background: #ccc;
	color: #000;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3),
		0 1px 0px rgba(255, 255, 255, 0.2);
}
input#textpass:focus { 
	background: #eee; 
}
.switch span span {
	display: none;
}
.switch {
	display: block;
	height: 30px;
	padding: 0;
	position: relative;
	overflow: visible;
	margin-left: 100px;
	width: 100px;
	text-align: center;
	background-color: #2d3035;
	border-radius: 3px;
	text-shadow: 1px 1px 1px #191b1e;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3),
		0 1px 0px rgba(255, 255, 255, 0.2);
}
.switch a { 
	display: block;
	transition: all 0.3s ease-out;
}
.switch label, .switch > span {
	line-height: 30px;
	vertical-align: middle; 
}
.switch > span:hover { 
	cursor: pointer;
}
.switch input:focus ~ a,
	.switch input:focus + label { 
		outline: 1px dotted #888;
}
.switch label {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
}
.switch input {
	position: absolute;
	opacity: 0;
	z-index: 5;
}
.switch input:checked ~ a { 
	right: 0%; 
}
.switch > span { 
	position: absolute;
	left: -100px; 
	width: 100%;
	margin: 0; 
	padding-right: 100px;
	text-align: left; 
	color: #333;
	text-shadow: none; 
}
.switch > span span { 
	position: absolute;
	top: 0; left: 0;
	z-index: 5;
	display: block;
	width: 50%;
	margin-left: 100px;
	text-align: center; 
}
.switch > span span:last-child {
	left: 50%;
}
.switch a { 
	position: absolute;
	right: 50%; 
	top: 0; z-index: 4;
	border-radius: 3px;
	display: block;
	width: 50%; height: 100%;
	padding: 0;
	border: 1px solid #333;
	background-color: #70c66b;
	background-image: linear-gradient(rgba(255, 255, 255, 0.2),
		rgba(0, 0, 0, 0)); 
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
			inset 0 1px 1px rgba(255, 255, 255, 0.45); 
}
.switch input:checked + label { 
	color: #333;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 
}
.switch span {
	color: white;
}
.switch {
	margin-top: .5rem;
}

添加JavaScript (Adding The JavaScript)

Finally, a simple function switches the input type:

最后，一个简单的函数切换输入类型：

function switcher() {
	var textpass = document.getElementById("textpass");
	var type = textpass.type;
	if (type == "text") { 
		textpass.setAttribute("type", "password");
	} else { 
		textpass.setAttribute("type", "text");
	}
}

The result is the interface you see at the top of this article.

结果是您在本文顶部看到的界面。

进一步发展 (Taking Things Further)

The ideal solution would be to remove passwords altogether, relying on some other form of unique identification. In the near future I could see using the HTML5 Camera API to detect the user’s face for biometric identification. Alternatively, we could quickly scan for multiple faces in visual range, defaulting back to an obscured password in public spaces.

理想的解决方案是完全依靠其他形式的唯一标识完全删除密码。 在不久的将来，我可以看到使用HTML5 Camera API来检测用户的面部以进行生物识别。 另外，我们可以在可视范围内快速扫描多个面Kong，默认为在公共场所使用模糊的密码。

翻译自: https://thenewcode.com/795/Create-A-Privacy-Toggle-For-Accessible-Passwords

权限隐私密码忘记怎么改