Nuxt

nuxt-authは、nuxtプロジェクトでcasdoorを統合する方法の例です。以下の手順をご案内します。多くの手順はnextjs-authと似ています。

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

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

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

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

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

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

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

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

プロジェクトのルートにあるmiddlewareディレクトリに.jsまたは.tsファイルを作成してミドルウェアを定義します。そして、ファイル名がミドルウェアの名前として識別されます。例えば、nuxt-authでは、middlewareディレクトリにmyMiddleware.jsというファイルを作成し、nuxt.config.jsのような他の場所でmyMiddlewareとして参照できます。

例

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

export default function ({route, redirect}) {

  if (protectedRoutes.includes(route.path)) {
    //redirect the incoming request to a different URL
    redirect('/login');
  }
}

ミドルウェアを機能させるには、nuxt.config.jsにルーターを追加する必要があります。以下のように：

export default {
    // other configuations

    // what to add
    router: {
    middleware: ['myMiddleware'] // replace to your middleware name
  },
}

詳細については、nuxt公式ドキュメントのmiddlewareを参照してください。

ステップ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: ミドルウェア認証機能の追加

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

例

import Cookies from "js-cookie";

const protectedRoutes = ["/profile"];

export default function ({route, redirect}) {
  const casdoorUserCookie = Cookies.get('casdoorUser');
  const isAuthenticated = !!casdoorUserCookie;

  if (!isAuthenticated && protectedRoutes.includes(route.path)) {
    redirect('/login');
  }
}

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

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

例​

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

1.SDKのインストール​

2.SDKの初期化​

例​

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

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

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

例​