メインコンテンツにスキップ

Next.js

nextjs-authは、next-jsプロジェクトでcasdoorを統合する方法の例です。 以下の手順をご案内します。

ステップ1: Casdoorのデプロイ​

まず、Casdoorをデプロイする必要があります。

サーバーインストールについては、Casdoor公式ドキュメントを参照してください。 Casdoorインスタンスを本番モードでデプロイしてください。

デプロイが成功したら、以下を確認してください：

  • お気に入りのブラウザを開き、**http://localhost:8000**にアクセスしてください。 Casdoorのログインページが表示されます。
  • ユーザー名にadmin、パスワードに123を入力してログイン機能をテストしてください。

その後、以下の手順を使用して、独自のアプリにCasdoorベースのログインページを迅速に実装できます。

ステップ2: ミドルウェアの追加​

ミドルウェアを使用すると、リクエストが完了する前にコードを実行できます。 次に、受信リクエストに基づいて、リライト、リダイレクト、リクエストまたはレスポンスヘッダーの変更、または直接応答することでレスポンスを変更できます。

プロジェクトのルートにあるmiddleware.ts（または.js）ファイルを使用してミドルウェアを定義してください。 例えば、pagesやappと同じレベルに、または適用される場合はsrc内に配置します。

例​

//define which paths Middleware will run on
const protectedRoutes = ["/profile"];

export default function middleware(req) {
  if (protectedRoutes.includes(req.nextUrl.pathname)) {
    //redirect the incoming request to a different URL
    return NextResponse.redirect(new URL("/login", req.url));
  }
}

詳細については、next.js公式ドキュメントのミドルウェアを参照してください。

ステップ3: Casdoor SDKの使用​

1.SDKのインストール​

まず、NPMまたはYarnを介してcasdoor-js-sdkをインストールします：

npm install casdoor-js-sdk

または：

yarn add casdoor-js-sdk

2.SDKの初期化​

次に、以下の順序で6つの文字列型パラメータを初期化します：

名前必須説明
serverUrlはいCasdoorサーバーURL、例：http://localhost:8000
clientIdはいアプリケーションクライアントID
clientSecretはいアプリケーションクライアントシークレット
organizationNameはいアプリケーション組織
appNameはいアプリケーション名
redirectPathはいリダイレクトされたURL

例​

const sdkConfig = {
  serverUrl: "https://door.casdoor.com",
  clientId: "294b09fbc17f95daf2fe",
  clientSecret: "dd8982f7046ccba1bbd7851d5c1ece4e52bf039d",
  organizationName: "casbin",
  appName: "app-vue-python-example",
  redirectPath: "/callback",
};
注意

特にclientId、clientSecret、serverUrlについては、自分のCasdoorインスタンスの設定値に置き換えてください。

3.ログインページへのリダイレクト​

アプリにアクセスするユーザーを認証する必要がある場合、ターゲットURLを送信し、Casdoorが提供するログインページにリダイレクトします。

事前にアプリケーション設定にコールバックURL（例：http://localhost:8080/callback）を追加していることを確認してください。

const CasdoorSDK = new Sdk(sdkConfig);
CasdoorSDK.signin_redirect();

4.トークンの取得とストレージ​

Casdoorの検証が通過すると、トークンを持ってアプリケーションにリダイレクトされます。

トークンをストレージするためにcookieを使用することを選択できます。

CasdoorSDK.exchangeForAccessToken()
  .then((res) => {
    if (res && res.access_token) {
      //Get Token
      return CasdoorSDK.getUserInfo(res.access_token);
    }
  })
  .then((res) => {
    // Storage Token
    Cookies.set("casdoorUser", JSON.stringify(res));
  });

Casdoor SDKの使用方法については、Casdoor公式ドキュメントを参照してください。

ステップ4: ミドルウェア認証機能の追加​

ユーザーが保護されたルートにアクセスしようとすると、ミドルウェア認証機能がその身元を確認します。 ユーザーが認証されていない場合、ログインページにリダイレクトされるか、アクセスが拒否されます。

例​

//protected route
const protectedRoutes = ["/profile"];
const casdoorUserCookie = req.cookies.get("casdoorUser");
const isAuthenticated = casdoorUserCookie ? true : false;

//Authentication Function
if (!isAuthenticated && protectedRoutes.includes(req.nextUrl.pathname)) {
  return NextResponse.redirect(new URL("/login", req.url));
}