吾爱破解培训第一课作业密码

You may have heard that there are 360 Million Reasons to Destroy All Passwords and that Passwords are Obsolete. But that doesn’t really help you actually make a passwordless authentication system, does it?

您可能已经听说有3.6亿个原因销毁所有密码 ，并且密码已过时 。 但这实际上并不能真正帮助您构建无密码的身份验证系统，对吗？

Doing authentication well can be hard and fraught with potential security traps. The good news is that there are some lovely little JavaScript libraries that can do some of that heavy lifting for us. And they provide lots of code snippets to help us get started.

做好身份验证可能很困难，并且充满了潜在的安全陷阱。 好消息是，有一些可爱的小JavaScript库可以为我们完成一些繁重的工作。 他们提供了许多代码段来帮助我们入门。

So, here’s the skinny on how I implemented a passwordless authentication system in my recent Free Code Camp Voting App project.

因此，这是我最近实施的Free Code Camp Voting App项目中如何实施无密码身份验证系统的紧肤方法 。

Before we get started, note that you’ll need a working knowledge of Node.js and npm.

在开始之前，请注意，您需要对Node.js和npm有一定的了解。

您需要什么： (What you’ll need:)

• A passwordless authentication library: Passwordless

  无密码认证库：无密码

• An email library: EmailJS

  电子邮件库： EmailJS

• A new, single purpose email address: Microsoft Outlook (don’t worry — I’ll explain later)

  一个新的，单一用途的电子邮件地址： Microsoft Outlook (不用担心，我稍后会解释)

• A ‘Can-Do’ attitude and nimble copy-pasta fingers“能做”的态度和灵活的复制面食手指

让我们开始吧！ (Let’s get started!)

注册您的单一用途电子邮件地址 (Register your single purpose email address)

Pick the most professional and meaningful name for the account you can think of. For example, since my app was called “Pollz,” I registered the email address pollz.tokendelivery@outlook.com. This way I communicate to the recipient that it’s a single purpose email address related to the app they just tried to sign into.

为您可以想到的帐户选择最专业，最有意义的名称。 例如，由于我的应用程序名为“ Pollz”，因此我注册了电子邮件地址pollz.tokendelivery@outlook.com 。 通过这种方式，我向收件人传达了这是与他们刚刚尝试登录的应用程序相关的单一目的电子邮件地址。

Note that it’s better to send from a ‘proper’ domain if you own one, but this tutorial assumes you want something quick and dirty up and running to test the concept.

请注意，如果您拥有一个“适当的”域，则最好从该域发送邮件，但是本教程假定您想要快速，肮脏的内容并运行以测试该概念。

You may need to take a few extra steps like verifying your account before it will let you send emails automatically via your app. So if things don’t work later on, check the inbox for any messages from Outlook and follow their advice.

您可能需要采取一些额外的步骤，例如验证您的帐户，才可以通过您的应用程序自动发送电子邮件。 因此，如果以后无法正常工作，请检查收件箱中是否有来自Outlook的邮件，然后按照他们的建议进行操作。

安装并要求节点模块 (Install and Require the Node Modules)

From the terminal install the following npm packages:

从终端安装以下npm软件包：

// Add 'sudo' at the beginning if you need it!npm install --save passwordless
npm install --save passwordless-mongostore
npm install --save emailjs

That installs the base requirements. You’ll also be using other crucial Node libraries, which you may already have installed for your project. If not, install these, too:

这样就安装了基本要求。 您还将使用其他可能已经为项目安装的重要Node库。 如果没有，也安装这些：

npm install --save express-sessions
npm install --save body-parser
npm install --save cookie-parser

Now, assuming you have a separate server.js and routes.js file, include the following in the top of the appropriate files. If you don’t have separate files, you can mush them all together and smother them in delicious spaghetti sauce:

现在，假设您有一个单独的server.js和routes.js文件，请在相应文件的顶部添加以下内容。 如果没有单独的文件，则可以将它们全部糊在一起，然后在美味的意大利面条酱中涂抹：

Note: Don't forget all the other modules you usually include! (Express, Mongo etc...)

注意：不要忘记通常包含的所有其他模块！ (Express，Mongo等...)

// server.js
var cookieParser = require( 'cookie-parser' );
var expressSession = require( 'express-session' );
var passwordless = require( 'passwordless' );
var MongoStore = require( 'passwordless-mongostore' );
var email = require( 'emailjs' );

// routes.js
var bodyParser = require( 'body-parser' );
var urlencodedParser = bodyParser.urlencoded( { extended: false });
var passwordless = require( 'passwordless' );

设置投放 (Set up delivery)

Next, in the server.js file, we will include the code snippet that handles sending the authentication tokens to our users:

接下来，在server.js文件中，我们将包含处理向用户发送身份验证令牌的代码段：

// server.js
var yourEmail = 'pollz.tokendelivery@outlook.com';
var yourPwd = process.env.OUTLOOK_PASSWORD;
var yourSmtp = 'smtp-mail.outlook.com';
var smtpServer  = email.server.connect({ user: yourEmail,password: yourPwd,timeout: 60000,host: yourSmtp, tls: { ciphers: 'SSLv3' }});// MongoDB setup (given default can be used)
var pathToMongoDb = url;// Path to be send via email
var host = 'https://pollz.herokuapp.com/';

The above code is making some assumptions you need to know about.

上面的代码做出了一些您需要了解的假设。

Firstly, change the value of the yourEmail variable to the new address you set up.

首先，将yourEmail变量的值更改为您设置的新地址。

Secondly, the yourPwd variable you see there doesn’t mean my password is the super-obscure process.env.OUTLOOK_PASSWORD, nor does it mean you should go ahead and just put your password in there.

其次，您在其中看到的yourPwd变量并不意味着我的密码是超级晦涩的process.env.OUTLOOK_PASSWORD ，也不意味着您应该继续将密码放到那里。

process.env.*** is used to access environment variables in Node. Basically, you can hard code those variables in your local system in a dotenv file, or in Heroku via the settings for your app, and then refer to them as above. This means you’re not committing sensitive information to public GitHub repositories for all to see. It’s a little outside the scope of this tutorial, but the fine manual can tell you more: process.env.

process.env.***用于访问Node中的环境变量 。 基本上，您可以在本地系统中的dotenv文件中或在Heroku中通过应用程序设置对这些变量进行硬编码，然后如上所述引用它们。 这意味着您不会将敏感信息提交给公共GitHub存储库，以供所有人查看。 它超出了本教程的范围，但是好的手册可以告诉您更多信息： process.env 。

The pathToMongoDB URL you see there is the same MongoDB path I use to connect to Mongo elsewhere in my app. If you’ve connected to Mongo, you can use the same url again.

您看到的pathToMongoDB URL与我用于在应用程序其他位置连接到Mongo的MongoDB路径相同。 如果您已连接到Mongo，则可以再次使用相同的URL。

Be sure to change the host URL to your own app’s URL.

确保将host URL更改为您自己的应用程序的URL。

配置无密码 (Configure Passwordless)

// server.js
// Setup of Passwordlesspasswordless.init( new MongoStore( pathToMongoDb ));passwordless.addDelivery(function(tokenToSend, uidToSend, recipient, callback) {// Send out tokensmtpServer.send({text: `Hello!\nYou can now access your account here: ${host}?token=${tokenToSend}&uid=${encodeURIComponent(uidToSend)}`,from: yourEmail,to: recipient,subject: `Token for ${host}`,attachment: [{data: "<html>INSERT HTML STRING LINKING TO TOKEN</html>",alternative: true}]}, function( err, message ) {if( err ) { console.log( err );}callback( err );});
});

Scary code-block, right? But not complete gibberish, I hope.

可怕的代码块，对不对？ 我希望这不是胡言乱语。

There’s two things happening here:

这里发生两件事：

1. Initializing Passwordless, and setting a store for the tokens.初始化无密码，并为令牌设置存储。
2. Adding a delivery mechanism and building what the email will contain.添加传递机制并构建电子邮件将包含的内容。

Read it closely and it should make sense. Beware that you include the appropriate number of closing parentheses and curly braces. I burned 45 minutes on that very issue last night on my latest app. Not kidding.

仔细阅读它，这应该是有道理的。 请注意，您应包括适当数量的右括号和大括号。 昨晚我在最新的应用程序上烧了45分钟。 不开玩笑。

放置中间件 (Get your middleware in place)

Middleware is like underwear: forgetting it can lead to discomfort, but putting it on in the wrong order can lead to embarrassment.

中间件就像内衣：忘记它会导致不适，但是错误地穿上它会导致尴尬。

You may already have included this more generic Express middleware, but if not, you need to:

您可能已经包含了这种更通用的Express中间件，但是如果没有，则需要：

// server.js
// Standard express setupapp.use( cookieParser() );
app.use( expressSession({secret: 'quincylarsonisaprinceamongmen',saveUninitialized: false,resave: false,cookie: { maxAge: 60*60*24*365*10 }
}));

Then the particular middleware you need for passwordless can be included like this:

然后，可以包含您需要无密码的特定中间件，如下所示：

// server.js
// Passwordless middlewareapp.use( passwordless.sessionSupport() );
app.use( passwordless.acceptToken( { successRedirect: '/' }));

I put all this immediately after the Passwordless initialization snippets, and include the ‘standard’ middleware before the ‘passwordless’ middleware. sessionSupport depends on expressSession, so the order matters. Anything else leads to chafing.

我将所有这些内容立即放在无密码初始化代码段之后，并在“无密码”中间件之前添加“标准”中间件。 sessionSupport取决于expressSession ，因此顺序很重要。 其他任何事情都会导致擦伤。

设置一些测试路线 (Set up some test routes)

There are only a few essential routes. We need to let users log in and log out, and there needs to be a way to differentiate restricted pages from public pages for non-authenticated users.

只有一些基本路线。 我们需要让用户登录和注销，并且需要一种方法将未认证用户的受限页面与公共页面区分开。

Note: This portion assumes you have set up the Express Router for your app.

注意：此部分假设您已为您的应用设置了Express Router。

Login:

登录：

// routes.js
// GET /login
router.get( '/login', function( req, res ) {    res.render( 'login' ); });// POST /sendtoken
router.post( '/sendtoken',  urlencodedParser,   passwordless.requestToken(// Simply accept every user*function( user, delivery, callback ) { callback( null, user );  }),function( req, res ) { res.render( 'pages/sent', { user: req.user });}
);

In the POST request above, we’re using the simplest and fastest mechanism for logging someone in. You are more likely to want to use the email address that is passed from the login form (we’ll see that in a minute) to look for the user in your database, or create a new one. You can see the more detailed method for that in the Passwordless documentation.

在上面的POST请求中，我们使用了最简单，最快的机制来登录某人。您更可能希望使用从登录表单传递的电子邮件地址(我们将在稍后看到)。为您数据库中的用户，或创建一个新用户。 您可以在无密码文档中看到更详细的方法。

The POST request includes the urlencodedParser variable we set earlier. We do this so that we can read the form data, but we only apply it to this specific route. You can read more about this security consideration here: Dangerous Use Of Body Parser. A special thanks to Jeremy for this tip!

POST请求包含我们之前设置的urlencodedParser变量。 我们这样做是为了读取表单数据，但是我们仅将其应用于该特定路线。 您可以在此处阅读有关此安全注意事项的更多信息： 危险使用人体分析器 。 特别感谢Jeremy的提示！

Notice also in that POST request, the ‘sent’ page renders with a ‘user’ email address being passed in. This is accessible in the views templates and can be used and passed around as necessary. We’ll be using an EJS nav bar to demonstrate that soon.

还要注意的是，在POST请求中，“已发送”页面的呈现方式是传入了“用户”电子邮件地址。这在视图模板中可以访问，并且可以在需要时使用和传递。 我们将很快使用EJS导航栏进行演示。

Logout:

登出：

// routes.js
// GET logout
router.get( '/logout', passwordless.logout(), function( req, res ) {res.redirect( '/' );
});

You hopefully noticed that this simple GET request takes an extra argument nestled snugly between the URL endpoint and the callback function that processes the request. This ‘passwordless.logout()’ method does all the behind the scenes work necessary to promptly forget the user.

您希望已经注意到，这个简单的GET请求在URL端点和处理该请求的回调函数之间紧密地嵌套了一个额外的参数。 这个“ passwordless.logout()”方法完成了所有幕后工作，以Swift忘记用户。

Restricted pages:

限制页面：

// routes.js
// GET restricted site
router.get( '/restricted',   passwordless.restricted({failureRedirect: '/login'
}),  function( req, res ) {res.render( 'pages/restricted' , { user: req.user });
});

The format for restricted pages is pretty easy to parse, too. Similar to the logout pattern, we have the route, /restricted, followed by the passwordless.restricted() method, followed by the callback function that processes the HTTP request. The difference here is that passwordless.restricted() takes an object as an argument that specifies the endpoint we redirect to if the user is not authenticated.

受限页面的格式也很容易解析。 与注销模式类似，我们有/restricted路由，其后是passwordless.restricted()方法，然后是处理HTTP请求的回调函数。 此处的区别在于passwordless.restricted()将对象作为参数，该参数指定如果用户未通过身份验证则重定向到的端点。

观看次数 (Views)

One of the most important views in this tutorial is the humble login page. Set it up how you like, but include this form to request the email address of your user:

不起眼的登录页面是本教程中最重要的视图之一。 设置您喜欢的方式，但包括以下表格以请求用户的电子邮件地址：

<!-- views/pages/login.ejs -->
<form action='/sendtoken' method='POST'><div class='input-field'><label for='user'>Email</label><input name='user' type='email' aria-required='true'></div><br><input type='submit' value='Login / Register'>
</form>

We’re running out of time. Style it on your own dime.

我们没时间了。 按自己的角钱样式。

It is important that you have included the body-parser middleware mentioned earlier in order for you to be able to handle the data POSTed from this form.

重要的是，您必须包括前面提到的body-parser中间件，以使您能够处理从此表单发布的数据。

A final view worth looking at would be one that incorporates the authenticated user value we saw up in the routes section.

值得一看的最后一个视图将是包含我们在“路线”部分中看到的经过身份验证的用户价值的视图。

Here’s an example of a really simple nav bar that changes according to whether the user is authenticated or not:

这是一个非常简单的导航栏示例，该导航栏会根据用户是否通过身份验证而发生变化：

<!-- views/partials/navbar.ejs -->
<nav><ul><% if(user) { %><li>Hi, <%= user %>! </li><li><a href='/logout'>(logout)</a></li><% } else { %><li><a href='/login'>Login</a></li><% } %></ul>
</nav>

If you’re unfamiliar with EJS syntax, it’s the reason for the weird ‘<% %>’ tags in the markup.

如果您不熟悉EJS语法，这就是在标记中使用奇怪的'<％％>'标签的原因。

The markup above can be parsed in English as ‘If there is a user, print a list item that says “Hi, <username>!” and another list item that lets them log out; otherwise only show a list item with a login link’.

上面的标记可以用英语解析为“如果有用户，则打印一个列表项，上面写着“嗨，<用户名>！”。 另一个列表项，使他们可以注销； 否则，仅显示带有登录链接的列表项”。

Here’s what the more complete version looks like in the voting app:

以下是投票应用程序中更完整的版本：

就是这样。 但是还有更多…… (And that’s it. But there’s more…)

That’s all you need to know to get up and running with Passwordless authentication.

这就是使用无密码身份验证启动并运行所需的全部知识。

There are some caveats to be aware of:

有一些注意事项：

Outlook is a little slow.I haven’t narrowed the cause down precisely, but I believe it is due to the TLS ‘SSLv3’ cipher Outlook requires. I’m no expert, but that’s my best guess. That’s also why I recommend setting an absurdly long ‘timeout’ in the email config section (I picked 60 seconds).

Outlook有点慢。 我尚未精确地缩小原因范围，但我相信这是由于Outlook要求使用TLS“ SSLv3”密码。 我不是专家，但这是我最好的猜测。 这也是为什么我建议在电子邮件配置部分中设置一个过长的“超时”(我选择了60秒)的原因。

Why not use Gmail, then? A good question, and it was the first thing I tried. My emailjs script kept failing once I pushed the app to Heroku, but the Heroku logs weren’t providing much detail. It simply said I was making a ‘bad request.’ A little poking around on the internet suggested that maybe Google might be waiting for me to register my app with them and pay for the privilege. I did not do that. I just jumped ship to Outlook instead.

那为什么不使用Gmail呢？ 一个好问题，这是我尝试的第一件事。 将应用程序推送到Heroku后，我的emailjs脚本一直失败，但是Heroku日志没有提供太多详细信息。 它只是说我在提出“不好的要求”。 在互联网上闲逛一会表明，也许Google可能正在等我向他们注册我的应用并支付特权。 我没有那样做。 我只是跳到Outlook。

Is there a better service than Outlook, then? If you have you own domain and the ability to configure the DNS records for it, you should try SparkPost and the SparkPost node client library. It’s a little more grunt work, but it’s nice and fast, and they send you a laptop sticker if you can successfully send an email through them. I’m using it in my latest app. It’s aces.

那么，有没有比Outlook更好的服务？ 如果您拥有自己的域并能够为其配置DNS记录，则应尝试使用SparkPost和SparkPost节点客户端库。 这项工作比较麻烦，但是又好又快，如果您可以通过他们成功发送电子邮件，他们会向您发送笔记本电脑贴纸。 我在最新的应用程序中使用它。 是王牌

So there you have it, there is no excuse for you to ever ask your users for their passwords ever again!

因此，有了它，您再也找不到借口再次要求用户输入密码了！

翻译自: https://www.freecodecamp.org/news/how-to-implement-your-first-password-less-login-system-8141b6f9ddf2/

吾爱破解培训第一课作业密码