4、使用 Bootstrap 和 Devise 创建美观的登录界面

使用 Bootstrap 和 Devise 创建美观的登录界面

在完成 Shine 应用的创建与配置，通过 NPM 下载 Bootstrap 并设置好 Webpack 之后，我们可以开始为 Shine 添加新功能了。本文将使用 Devise 搭建一个简单的认证系统，并借助 Bootstrap 让登录界面更加美观。

1. 使用 Devise 添加认证功能

作为全栈开发者，构建认证系统是一个很好的起点。我们既希望用户体验良好，又要确保后端安全，直至数据层。我们将使用 Devise 这个 gem 来处理认证的中间件部分。从头创建认证系统并非明智之举，因为很难确保每个部分都正确无误，安全控制可能会以意想不到的方式被破坏。Devise 经过了充分的测试，能够为我们处理所有这些问题，并且非常灵活，完全符合我们的需求。

我们的认证系统有以下规则：
- 员工需自行注册使用应用。
- 员工注册时必须使用公司邮箱。
- 员工密码至少 10 个字符。

为了简化操作，我们的应用不要求用户验证邮箱地址，但在实际应用中，你应该考虑这一点，并且 Devise 在你配置好邮件发送器后可以轻松实现这一功能。

以下是具体的操作步骤：
1. 添加 Devise 到 Gemfile ：

# login/install-devise/shine/Gemfile
gem 'jquery-rails'
gem 'jbuilder', '~> 2.5'
gem 'devise'