将自定义登录表单添加到hapi-auth-basic

Question

I use hapi-auth-basic to authenticate users. My question is how to add custom login form instead of using the basic form of the browser.

Answer 1

You can bind the functionality of hapi-auth-basic to any custom login form. You need to make sure that the properties get evaluated correctly on server side.

Here's a dedicated tutorial on basic authentication in hapi with hapi-auth-basic .

Let's say you've a form like this: (it's very simple for illustration purposes)

<form action="/login" method="post">
  <input type="text" name="username">
  <input type="text" name="password">

  <input type="submit" value="Log in">
</form>

On server side, you need to have multiple things in place:

• an authentication strategy with a validateFunc that takes the input and evaluates it against your data set (like database)
• a route handler for method POST on path /login , because the form sends the data to this endpoint
• the auth config set with your strategy at the route handler

What I mean is a setup like this: (again, simplified)

server.auth.strategy('simple', 'basic', { validateFunc: (request, username, password, callback) => {} })

server.route({
  method: 'GET',
  path: '/private-route',
  config: {
    auth: 'simple',
    handler: function (request, reply) {
      reply('Yeah! This message is only available for authenticated users!')
    }
  }
})

Hope that helps!