> For the complete documentation index, see [llms.txt](https://docs.dimigo.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dimigo.net/developer/oauth.md).

# Oauth 개발 안내

디풀 계정 센터와 연동하여 다양한 서비스를 개발 해 보세요.

## 1. 클라이언트 등록 방법

1. 아래 디풀 계정 센터에 접속하여 본인 계정으로 로그인한다.\
   <https://auth.dimigo.net>
2. [`개발자 전용 > 추가`](https://auth.dimigo.net/dev/add) 탭에 접속하여 본인의 서비스에 맞게 정보를 입력한다.
   * **서비스 이름**\
     본인의 서비스 이름을 입력하세요. 아래와 같이 표시됩니다.\
     ![](https://3546567717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgkiXT0WgNWQGhAq5ykA0%2Fuploads%2FFV49KZpXt2HTdGq61N37%2Flogin.png?alt=media\&token=ca41449a-ab66-4d41-8940-a36bd8e43f0b)
   * **가져올 정보**\
     어떤 정보를 가져올 지 선택합니다. \
     자세한 설명은 [`2. 서비스 연동 방법`](#id-2) 참고.
   * **Redirect Uri 목록** \
     본인이 허용할 `Redirect Uri`를 입력합니다. \
     여기에 입력되지 않은 Uri의 경우, 아래와 같이 거부됩니다.\
     ![](https://3546567717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgkiXT0WgNWQGhAq5ykA0%2Fuploads%2FClMw5klKbVb6oloVUsMU%2Fnored.png?alt=media\&token=4b4c8f1f-7377-4380-8018-781ca45b797c)
3. `추가하기` 버튼을 눌러 `서비스가 등록되었습니다.` 문구가 나오면 [`개발자 전용 > 수정`](https://auth.dimigo.net/dev/edit) 탭에 접속한다.
4. 등록한 서비스 이름 옆에 뜨는 문자열이 `client` 값이다.

## 2. 서비스 연동 방법

1. 본인의 서비스에서 로그인 버튼을 만든 뒤, 클릭 시 아래 URL로 redirect되게 설정한다.\
   `https://auth.dimigo.net/oauth?client=<client_값>&redirect=<redirect할_uri>`
2. 로그인 과정 후, `redirect uri` 의 `searchParams` 맨 뒤에 `token` 으로 요청한 정보가 추가됩니다.
3. `token`은 `JWT` 방식으로 RS256 암호화 되어 있습니다. 토큰 유효 시간은 5분입니다.
4. [`https://auth.dimigo.net/oauth/public`](https://auth.dimigo.net/oauth/public)에서 \
   `jwtVerify`에 필요한 public키를 받아와(<mark style="color:blue;">`GET`</mark>) 복호화를 하면 아래와 같은 type으로 구성되어 있습니다. \
   \
   *<mark style="color:red;">public key는 바뀔 수 있으니, 매번 위 URL에 요청하여 public를 받아와야 합니다.</mark>*<br>

   ```tsx
   {
     data: {
       id: string; // 식별번호
       email: string; // 이메일
       gender: "male" | "female"; // 성별
       name: string; // 이름
       number: number; // 학번
       type: "teacher" | "student"; // 사용자 종류
       profile_image: string; // 프로필 이미지 URL
     };
     iss: string;
     aud: string;
     iat: number;
     exp: number;
   }
   ```
5. 이제 이 정보를 잘 활용하면 됩니다\~!!
6. 예시 코드

   ```typescript
   /*
     전체 소스코드는 아래를 참고해주세요.
     https://github.com/jeamxn/dimigoin-pull-service/blob/main/src/app/auth/login/route.ts
   */

   import axios from "axios";
   import * as jose from "jose";

   type ClientType = {
     id: string; // 식별번호
     email: string; // 이메일
     gender: "male" | "female"; // 성별
     name: string; // 이름
     number: number; // 학번
     type: "teacher" | "student"; // 사용자 종류
     profile_image: string; // 프로필 이미지 URL
   };

   // 계정 센터에서 넘겨준 JWT 토큰
   const token = "";

   // 디미고인 계정 센터에서 Public Key 가져오기
   const public_key = await axios.get("https://auth.dimigo.net/oauth/public");
   const public_key_encodes = await jose.importSPKI(public_key.data, "RS256");

   // 디미고인 토큰 디코딩
   const decodedToken = await jose.jwtVerify(token, public_key_encodes);
   const data = decodedToken.payload as {
     data: ClientType;
     iss: string;
     aud: string;
     iat: number;
     exp: number;
   };
   ```