この記事は、木更津高専 Advent Calendar 2023 22日目の記事です。
←前 AtCoder入緑記事 by @toma09to
→次 祇園祭WebサイトのDBについて by @NXVZBGBFBEN
はじめに
プログラミング研究同好会(プロ研)のnaotikiです
今年度、プロ研は木更津高専の学園祭「祗園祭(ぎおんさい)」のホームページ(+システム)を作りました！
今回は私が主に担当した認証関連について書きたいと思います。
本記事は私個人(naotiki)の意見・見解です。
木更津高専、木更津高専プログラミング研究同好会、木更津高専学園祭実行委員会とは一切関係ありません！
管理画面の認証をつくる
学園祭ホームページには各企画のお知らせを表示する場所があり、各企画の最新の情報を見られるようになっています。
ということはこれを投稿できるようにする画面も必要な訳ですが、誰でもURLさえ知ってれば投稿できるとかだと駄目なので認証しないと投稿できないようにします。
しかし、一から認証を作るのは色々あって死んでしまうので、すばらしいフレームワークを使うことにしました。
今回は NextAuth.js を使いました。1
ログインする方法はEmail(メールリンク)とCredential(メール+パスワード)の2つにしました。
あと、条件として事前に許可された人しかログイン(ユーザー登録)できないようにします。
ORMには企画管理でPrismaを使用していたのでそこに認証系のテーブル情報も書き加えていきます。
ほぼ https://authjs.dev/reference/adapter/prisma#create-the-prisma-schema-from-scratch にあるやつのコピペですが、 User と アクセスを許可された学生のデータが入ってる Memberを紐付けられるようにしました。
model Member {
id String @id @default(uuid()) @db.Uuid
email String @unique @db.VarChar(255)
alias String @db.VarChar(255)
displayName String @db.VarChar(255)
group Group[]
role Role @default(Member)
createdAt DateTime @default(now())
modifiedAt DateTime @updatedAt
user User?
}
あとは、/pages/api/[...nextauth].tsをいい感じに書きます。
主に設定したことは
- メールをとりあえず自分のメールアドレスからMicrosoftのアプリパスワードを使って送信
- サインインするとき、Memberテーブルにメールアドレスがなければサインインを拒否
などです。
ついでにMiddlewareを設定して管理画面は認証必須にします。
export { default } from "next-auth/middleware"
// /dashboard以下 すべてに適用
export const config = { matcher: ["/dashboard/:path*"] }
ログインして認証に成功すると管理画面に飛べます！
これはユーザー情報を見られる画面
パスワードログインが設定されていない人はここからすぐ設定画面へ行けるようにしてあります。
APIを保護する
せっかく管理画面を保護してもAPIを叩けたら意味が無いので管理APIも認証を必須にします。
NextAuth.js のおかげですぐにできます。
await getServerSession(req, res, authOptions);
でSessionまたはnull(未認証)を取得できるのでこれを基にレスポンスすればいいだけです。
簡単！
おわり
NextAuth.js(Auth.js)を使うと、JWTとかセッション管理とかあまり気にせず手軽に認証を追加できて最強になれるのでとても楽でした！
それはそれとしてドキュメントをなんとかしてほしかった・・・