메인 콘텐츠로 건너뛰기

Nuxt

nuxt-auth는 nuxt 프로젝트에서 casdoor를 통합하는 방법의 예입니다. 아래의 단계를 통해 안내하겠습니다. 많은 단계들이 nextjs-auth와 비슷합니다.

단계 1: Casdoor 배포​

먼저, Casdoor를 배포해야 합니다.

Casdoor 공식 문서의 서버 설치를 참조할 수 있습니다. Casdoor 인스턴스를 production mode에서 배포해 주세요.

성공적인 배포 후, 다음 사항을 확인하세요:

  • 선호하는 브라우저를 열고 **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 공식 문서의 미들웨어를 참조하세요.

단계 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",
};
주의

설정 값을 자신의 Casdoor 인스턴스로 교체하십시오, 특히 clientId, clientSecret, 그리고 serverUrl.

3.로그인 페이지로 리디렉션​

앱에 접근하는 사용자를 인증해야 할 때, 대상 URL을 보내고 Casdoor에서 제공하는 로그인 페이지로 리디렉션할 수 있습니다.

응용 프로그램 구성에서 미리 콜백 URL (예: http://localhost:8080/callback)을 추가했는지 확인하십시오.

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

4.토큰 받기 및 저장​

Casdoor 검증이 통과되면 토큰과 함께 응용 프로그램으로 다시 리디렉션됩니다.

토큰을 저장하기 위해 쿠키를 사용하는 것을 선택할 수 있습니다.

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');
  }
}