【Next.js 12】basic認証を簡単に実装可能に!【検証】
当ページのリンクには広告が含まれています。
![](https://self-methods.com/wp-content/uploads/2023/11/no-image-black-1.png)
社内ツール用や、検索されたくないWebページなどセキュリティをそこまで気にしなくても良い場合にはベーシック認証は便利です。
今回は、Next.js 12で実装されたベーシック認証の方法を備忘として記載します。
CyberSecurityTIMES
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://www.shadan-kun.com/blog/wp3/wp-content/uploads/2017/07/54.jpg)
簡易的な認証方法、『Basic認証』について知ろう! | CyberSecurityTIMES
Basic認証はその名の通り、Webサイトに対して必要最低限の認証設定をかけることを指します。Webサイトを公開する前に、特定の人にだけアクセスができるようにしたい時など…
目次
basic認証の追加方法
Next.jsのプロジェクト作成後、pagesディレクトリに_middleware.ts
として下記を配置します。
import { NextRequest, NextResponse } from 'next/server'
export function middleware(req: NextRequest) {
const basicAuth = req.headers.get('authorization')
if (basicAuth) {
const auth = basicAuth.split(' ')[1]
const [user, pwd] = Buffer.from(auth, 'base64').toString().split(':')
if (user === '4dmin' && pwd === 'testpwd123') {
return NextResponse.next()
}
}
return new Response('Auth required', {
status: 401,
headers: {
'WWW-Authenticate': 'Basic realm="Secure Area"',
},
})
}
これだけです!
適宜username
やpassword
などは環境変数(.env.local)に入れるのも良いかと思います。
確認
ローカルサーバーを立ち上げて確認してみます。
`
![](https://self-methods.com/wp-content/uploads/2021/11/image.png)
いやー面倒な設定も不要で最高ですね!
参考記事
GitHub
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
examples/edge-functions/basic-auth-password at main · vercel/examples
Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications. – vercel/examples
y-ohgi's blog
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
Next.js middleware でBasic 認証を試す - y-ohgi's blog
TL;DR Next.js 12 でリリースされたmiddleware を試す middleware でBasic 認証をかけてみる About Next.js 12でリリースされたmiddleware でBaisc 認証を試した備忘録。 ...
コメント