コンテンツにスキップ

認証

認証と認可は、ウェブサイトやアプリへのアクセスを管理する2つのセキュリティプロセスです。認証は訪問者のアイデンティティを検証し、認可は保護された領域やリソースへのアクセスを許可します。

認証を利用することで、ログインした個人に合わせてサイトの領域をカスタマイズしたり、個人情報やプライベートな情報を最大限に保護できるようになります。認証ライブラリ(例: Lucia AuthAuth.js)は、電子メールサインインやOAuthプロバイダーなどの複数の認証方法のためのユーティリティを提供します。

Supabaseを利用して認証を追加する方法や、Firebaseを利用して認証を追加する方法については、これらのバックエンドサービス向けの専用ガイドを参照してください。

Luciaは、フレームワークに依存しないセッションベースの認証ライブラリで、Astroをよくサポートしています。

好きなパッケージマネージャでLuciaをインストールします。

Terminal window
npm install lucia

Luciaの”Getting started in Astro”ガイドを使用し、Luciaをアダプタとともに初期化して、ユーザーとセッションを保存するデータベースをセットアップします。

Auth.jsは、フレームワークに依存しない認証ソリューションです。Astro用のコミュニティによるフレームワークアダプタauth-astroが利用できます。

好きなパッケージマネージャで、astro addコマンドを使ってauth-astroを追加します。

Terminal window
npx astro add auth-astro

auth-astroを手動でインストールするには、パッケージマネージャで必要なパッケージをインストールします。

Terminal window
npm install auth-astro @auth/core@^0.18.6

その後、astro.config.*ファイルのintegrationsプロパティを用いてインテグレーションを反映させます。

astro.config.mjs
import { defineConfig } from 'astro/config';
import auth from 'auth-astro';
export default defineConfig({
// ...
integrations: [auth()],
});

プロジェクトのルートディレクトリにauth.config.mjsファイルを作成します。サポートしたい任意の認証プロバイダまたは認証メソッドを、必要な環境変数とともに追加します。

auth.config.mjs
import GitHub from '@auth/core/providers/github';
import { defineConfig } from 'auth-astro';
export default defineConfig({
providers: [
GitHub({
clientId: import.meta.env.GITHUB_CLIENT_ID,
clientSecret: import.meta.env.GITHUB_CLIENT_SECRET,
}),
],
});

まだ存在しなければ、プロジェクトのルートに.envファイルを作成します。以下の2つの環境変数を追加します。AUTH_SECRETは最低32文字以上の秘密の文字列です。

.env
AUTH_TRUST_HOST=true
AUTH_SECRET=<my-auth-secret>

サインインとサインアウトボタンは、scriptタグまたはクライアントサイドフレームワークのコンポーネント内でauth-astro/clientモジュールを使用することで追加できます。

src/pages/index.astro
---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
<button id="login">ログイン</button>
<button id="logout">ログアウト</button>
<script>
const { signIn, signOut } = await import("auth-astro/client")
document.querySelector("#login").onclick = () => signIn("github")
document.querySelector("#logout").onclick = () => signOut()
</script>
</Layout>

ユーザーのセッションは、getSessionメソッドを使って取得できます。

src/pages/index.astro
---
import Layout from 'src/layouts/Base.astro';
import { getSession } from 'auth-astro/server';
const session = await getSession(Astro.request);
---
<Layout>
{
session ? (
<p>{session.user?.name}さん、ようこそ</p>
) : (
<p>未ログイン</p>
)
}
</Layout>