이번 포스트에는 Github 소셜 로그인을 위한 OAuth Apps 등록을 해보도록 하겠습니다!

1. Github Setting

먼저 Github에 로그인 한다음 우측 상단의 메뉴버튼을 클릭합니다.

• 1. setting 을 눌러 설정 화면으로 접근합니다.

2. Develper Settings

• 1. 설정 좌측탭 맨 하단에 있는 Developer Settings을 클릭합니다.

3. OAuth Apps

Developer Settings에 들어오면 좌측탭 두번째 메뉴인 OAuth Apps를 클릭합니다.

• 1. 상단 우측의 new OAuth app 버튼을 클릭해 새로운 앱을 등록하겠습니다.

4. Register a new OAuth app

이부분은 작성할 내용이 많습니다 천천히 작성해보겠습니다.

• 1. Application name
     어플리케이션의 이름을 입력합니다.
• 2. Homepage URL
     어플리케이션의 홈페이지 URL을 입력합니다.
     개발 환경에서는 http://localhost:3000을 사용하면 됩니다.
• 3. Authorization callback URL
     OAuth 인증이 완료된 후 돌아올 콜백 URL을 입력합니다.
     개발 환경에서는 보통 http://localhost:3000/api/auth/callback/github 형식으로 작성합니다.

• ✔ Application description (선택 사항)
  어플리케이션에 대한 설명을 입력하는 부분입니다.
  비워둬도 무방합니다.

• ✔ Enable Device Flow (선택 사항)
  Device Flow는 화면이 없는 장치(예: 터미널, IoT 기기, 콘솔 앱)에서 GitHub OAuth 인증을 할 수 있도록 도와주는 기능입니다.
  터미널 기반 앱이나 IoT 기기에서 인증이 필요하다면 활성화하세요.
  일반적인 웹 애플리케이션에서는 필요하지 않습니다.

5. Client ID

Client ID는 OAuth App을 식별하는 공개 값이므로 노출되어도 큰 보안 문제는 발생하지 않습니다.

하지만, 피싱 공격 등을 방지하기 위해 가능하면 .env 파일 등에 보관하는 것이 좋습니다.

Client Secret은 반드시 .env 파일에 보관하고, 절대 공개되지 않도록 주의해야 합니다.

• 1. Client ID
     OAuth 인증을 위해 GitHub에서 발급해주는 클라이언트 ID입니다.
     이 값은 공개적으로 사용될 수 있지만, 민감한 정보는 포함되어 있지 않습니다.
• 2. Generate a new client secret
     새로운 클라이언트 시크릿(Client Secret)을 생성하는 버튼입니다.
     클라이언트 시크릿은 OAuth 인증 과정에서 중요한 보안 정보이며, 절대 공개되지 않도록 주의해야 합니다.
     새로 생성하면 기존 시크릿이 무효화되므로, 필요할 때만 생성하세요.
• 3. Application logo
     어플리케이션의 로고를 설정하는 부분입니다.
     로고를 업로드하면 GitHub 로그인 화면에서 표시됩니다.
     설정하지 않아도 기능에는 영향을 주지 않습니다.
• 4. Update application
     설정을 변경한 후 저장하는 버튼입니다.
     설정을 수정한 후 반드시 눌러야 변경 사항이 적용됩니다.

6. Generate a new client secret

Generate a new client secret 버튼을 클릭하면 2차 인증을 통과한 이후 클라이언트 시크릿을 발급 받을 수 있습니다.

마치며

GitHub OAuth Apps 등록 과정은 생각보다 간단했으며, 쉽게 소셜 로그인을 위한 앱을 설정할 수 있었습니다.

하지만 OAuth 인증 과정에서는 중요한 보안 정보가 포함될 수 있으므로, 개발 시 Client Secret 등의 민감한 정보 관리에 주의하는 것이 중요합니다.

안전한 인증 환경을 구축하여 보안을 철저히 했으면 좋겠습니다!