コンテンツにスキップ

認証

認証と認可は、ウェブサイトやアプリへのアクセスを管理する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コマンドを使って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>

次のステップ

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