Next.js에서 IdentityServer 연결 with oidc-client

Identity서버를 연결하기 위해 가장 기본인 oidc-client를 이용한 접속을 시도해 보겠습니다.

 

(1) 먼저 Next.js 프로젝트를 생성해 주세요.

npx create-next-app testapp

 

(2) oidc-client 를 설치해 줍니다.

npm install oidc-client

 

(3) root에 위치한 page.tsx 에 내용을 다음과 같이 작성해 줍니다.

"use client"

import { OidcClient,UserManager } from "oidc-client";

export default function Home() {
  var config = {
      authority: "https://localhost:5100",
      client_id: "RoslynDevJS",
      redirect_uri: "http://localhost:3000/callback",
      response_type: "code",
      scope: "openid profile",
      post_logout_redirect_uri: "http://localhost:3000/",
  };

  const mgr = new UserManager(config);
  console.log(mgr);

  mgr.events.addUserSignedOut(() => {
    console.log('addUserSignedOut');
  });

  const onLogin = async () => {
    await mgr.signinRedirect();
  };

  const onApi = async () => {
    let user = await mgr.getUser();
    if (user !== null && user !== undefined) {
      console.log('user : ', user);
    } else {
      console.log('user empty');
    }
  };

  const onLogout = async () => {
    await mgr.signoutRedirect();
  };

  return (
    <main className="flex min-h-screen items-center justify-between p-10">
      <div className="flex justify-between space-x-2">
        <button id="login" className="bg-gray-100 p-4" onClick={onLogin}>Login</button>
        <button id="api" className="bg-gray-100 p-4" onClick={onApi}>Call API</button>
        <button id="logout" className="bg-gray-100 p-4" onClick={onLogout}>Logout</button>

        <pre id="results"></pre>
      </div>
    </main>
  );
}

 

(4) 콜백을 받기 위한 callback 폴더에 page.tsx 파일을 작성해 줍니다.

"use client"

import { OidcClient,UserManager } from "oidc-client";

export default function Callback() {
    const mgr = new UserManager({response_mode : "query"}).signinRedirectCallback().then(() => {
        document.location.href = "/";
    }).catch((e:any) => { console.error(e); });

    return (
        <>
        <p>Hello world.</p>
        </>
    );
}

 

(5) 실행하면 인증서버를 통해 로그인을 하고, 인증된 정보를 받아오는 것을 확인할 수 있습니다.

npm run dev