GitHub 로그인 통합 방법: 4단계 가이드

문제

사용자가 모든 앱에 대해 고유한 사용자 이름과 비밀번호가 필요했던 시절을 기억하시나요? 앞으로 나아갈 시간입니다.

개발자와 기술에 정통한 사용자를 위한 탁월한 선택인 GitHub 로그인을 통합하여 앱에 더 간단하게 로그인해 보세요.

해결책

GitHub OAuth를 사용하면 사용자를 원활하게 인증하고 GitHub의 API를 통해 사용자의 공개 프로필이나 추가 데이터에 액세스할 수 있습니다.

이를 프런트엔드와 백엔드에 대해 관리 가능한 단계로 나누어 보겠습니다.

---

1단계: GitHub에 앱 등록

1. GitHub 설정으로 이동: GitHub 개발자 설정으로 이동합니다.

2. OAuth 앱: 사이드바에서 OAuth 앱을 클릭하세요.

1. 새 OAuth 앱 등록:
   • 홈페이지 URL: http://localhost:3000(또는 앱의 로컬 URL)을 사용하세요.
   • 인증 콜백 URL: http://localhost:3000(또는 GitHub 로그인을 통합하려는 배포 URL)을 사용하세요. 나중에 업데이트할 수 있습니다.

1. 클라이언트 ID 복사: GitHub가 생성되면 클라이언트 ID를 제공합니다.

2. 클라이언트 비밀번호 생성: 사용자 데이터에 대한 토큰 교환과 같은 백엔드 작업에 필요한 클라이언트 비밀번호를 생성합니다.

---

2단계: 프런트엔드 구현

GitHub 로그인 버튼 추가

GitHub 로그인 버튼을 표시하려면 다음 HTML과 CSS를 사용하세요.

<div>





<pre class="brush:php;toolbar:false">.github-signin-container {
  background-color: #000;
  transition: background-color 0.3s ease;
  border-radius: 6px;
  border: none;
}

.github-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
  width: 100%;
}

.github-signin-btn:hover {
  background-color: #333;
}

.github-signin-btn .github-icon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}

.github-signin-btn span {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

로그인 버튼 클릭 처리

JavaScript를 사용하여 사용자를 GitHub 인증 페이지로 리디렉션하세요.

const handleGithubLogin = () => {
  const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=read:user`;
  window.location.href = githubAuthUrl;
};

GITHUB_CLIENT_ID 및 REDIRECT_URI를 원하는 값으로 바꾸세요.

---

3단계: GitHub의 리디렉션 처리

GitHub는 ?code=를 사용하여 앱으로 다시 리디렉션됩니다. URL에서. 이 코드를 사용하여 액세스 토큰을 교환하세요.

useEffect(() => {
  const params = new URLSearchParams(window.location.search);
  const code = params.get("code");

  if (!code) return;

  const target = `https://backend.com/external-signup?app=${appName}&accessToken=${code}&provider=github`;
  callBackendAPI("GET", target);
}, []);

이렇게 하면 코드가 백엔드로 전송되어 액세스 토큰으로 안전하게 교환됩니다.

---

4단계: 백엔드 구현

액세스 토큰 교환 인증 코드

GitHub의 OAuth 토큰 엔드포인트 사용:

const GITHUB_ACCESS_TOKEN_URL = 'https://github.com/login/oauth/access_token';

const url = `${GITHUB_ACCESS_TOKEN_URL}?client_id=${GITHUB_CLIENT_ID}&client_secret=${GITHUB_SECRET_ID}&code=${request.body.code}`;

const response = await fetch(url, {
  method: "GET",
  headers: {
    Accept: "application/json",
    "Accept-Encoding": "application/json",
  },
});

const githubUserData = await response.json();
const accessToken = githubUserData.access_token;

GITHUB_CLIENT_ID 및 GITHUB_SECRET_ID를 1단계의 값으로 바꿉니다.

사용자 데이터 가져오기

액세스 토큰을 사용하여 GitHub의 사용자 API를 호출하여 사용자 정보를 검색하세요.

<div>





<pre class="brush:php;toolbar:false">.github-signin-container {
  background-color: #000;
  transition: background-color 0.3s ease;
  border-radius: 6px;
  border: none;
}

.github-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
  width: 100%;
}

.github-signin-btn:hover {
  background-color: #333;
}

.github-signin-btn .github-icon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}

.github-signin-btn span {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

이 데이터를 사용하여 데이터베이스에서 사용자를 생성하거나 업데이트하세요.

---

TL;DR

1. GitHub에 앱을 등록하여 클라이언트 ID와 클라이언트 비밀번호를 받으세요.
2. 프런트엔드에 GitHub 로그인 버튼을 추가하세요.
3. 사용자를 GitHub의 OAuth 페이지로 리디렉션하여 로그인하세요.
4. 인증 코드로 리디렉션을 처리하세요.
5. 백엔드에서 코드를 액세스 토큰으로 교환하세요.
6. 토큰을 사용하여 GitHub API에서 사용자 데이터를 가져옵니다.

---

보너스: LiveAPI로 생활이 더욱 편리해집니다.

저는 코드베이스에서 직접 안전하고 아름다운 API 문서를 생성하는 LiveAPI라는 도구를 개발 중입니다. 보너스: API를 실행하고 모든 언어로 요청 스니펫을 생성할 수 있습니다!

이 기능을 사용해 보고 앱에 집중하면서 문서화에 소요되는 시간을 절약하세요. 즐거운 코딩하세요!