コンテンツにスキップ

認証

認証と認可は2つのセキュリティプロセスで、ウェブサイトやアプリのさまざまな部分に誰がアクセスできるかを制御するのに役立ちます。認証は訪問者のアイデンティティを検証するプロセスであり、認可は訪問者が保護されたルートやリソースにアクセスすることを許可するプロセスです。

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

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

Lucia

セクションタイトル： Lucia

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

インストール

セクションタイトル： インストール

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

Terminal window
npm install lucia

設定

セクションタイトル： 設定

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

使い方

セクションタイトル： 使い方

次のステップ

セクションタイトル： 次のステップ

Auth.js

セクションタイトル： Auth.js

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

インストール

セクションタイトル： インストール

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

Terminal window
npx astro add auth-astro

手動インストール

セクションタイトル： 手動インストール

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

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>

次のステップ

セクションタイトル： 次のステップ