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

Next.js

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

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

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

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

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

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

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

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

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

プロジェクトのルートにあるmiddleware.ts(または.js)ファイルを使用してミドルウェアを定義してください。 例えば、pagesappと同じレベルに、または適用される場合は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",
};
注意

特にclientIdclientSecretserverUrlについては、自分の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));
}