메인 콘텐츠로 건너뛰기

Next.js

nextjs-auth는 next-js 프로젝트에서 casdoor를 통합하는 방법의 예입니다. 아래의 단계를 통해 안내하겠습니다.

단계 1: Casdoor 배포​

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

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

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

  • 선호하는 브라우저를 열고 **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",
};
주의

설정 값을 자신의 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 공식 문서를 참조하여 Casdoor SDK 사용 방법을 확인할 수 있습니다.

단계 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));
}