使用Rails Next.js Firebase身份验证创建经过身份验证的应用


本文是Ateam Finergy Inc. 2020年出现日历的第5天文章。在本文中，我们将使用Rails Next.js Firebase身份验证来创建示例应用程序。

  • 来源在这里：https://github.com/kmgk/rails-next-firebaseauth-sample

  • 演示页面：https://rails-next-firebaseauth-sample-private.vercel.app/

动机

我看到一篇文章说Firebase身份验证很好，并且我认为我应该尝试使用最近开始接触的Next.js和Rails。顺便说一句，当我开发带有flutter的移动应用程序时，我使用了Firebase，但是那时我完全将后端留给了Firebase，所以这是我第一次只使用身份验证部分。

创建一个Firebase项目

创建一个Firebase项目并启用您要使用的提供程序。此外，还有一个地方可以在此下方设置一个经过身份验证的域，因此请对其进行适当的设置。

firebase authenticationのプロバイダを有効にする

另外，从首页创建一个Web应用程序，以便可以引用Firebase SDK片段。它在Rails和Next.js上都使用。

后端(Rails)实施

使用Rails进行

身份验证所需要做的就是验证Next.js发送的jwt。
Firebase Admin SDK可以轻松验证jwt，但不幸的是不支持Ruby。
但是，有一个人在Ruby中实现了验证部分，因此我很感激使用它。

令牌以Bearer ${token}形式在Authorization标头中发送，因此您需要验证该令牌。在需要身份验证的任何操作之前执行此验证，以便如果令牌验证失败，它将返回401 Unauthorized。具体实现可在app/controllers/concerns/api/v1/firebase_auth_concern.rb中找到。

1
2
3
4
5
6
7
def authenticate_token_by_firebase
  # Authorization: Token ${token} or Bearer ${token}がない場合スキップされる
  authenticate_with_http_token do |token, _|
    # tokenを検証する。
  end
  { error: 'token invalid' }
end

前端(Next.js)实现

我想有很多关于如何在Next.js中使用firebase的详细文章，因此请参考该文章，这里我仅将代码发送令牌。我在这里使用axios。

1
2
3
4
5
6
7
8
9
10
const currentUser = auth.currentUser;
// トークンを取得
const token = await currentUser.getIdToken(true);
// Authorization: Bearerヘッダでトークンを送信する
const config = { headers: { authorization: `Bearer ${token}` } };
try {
  await axios.get('/users/new', config);
} catch (error) {
  console.log(error);
}

另外，我不是在这里写，而是使用react-firebase-hooks确定当前是否已登录。它非常易于使用(尽管我只使用auth)，所以请尝试一下。

终于

实际上，我本来想解释更多，但是当我进行调查时，几乎所有的实现都在Next.js端和Rails端实现，所以我最终只是剪切和粘贴它们。由于我付出了很大的努力，所以我写了一篇半纪念仪式的文章。
Firebase身份验证真的很容易，因此我认为在个人开发时将继续使用它。

参考文章

  • 尝试使用Firebase ID令牌在Ruby-Qiita中进行身份验证
  • 使用next.js vercel firebase身份验证Graphql --mizdev验证JWT
  • 如果您不确定安全性，请考虑使用Firebase Authentication-mizdev