GitHub 로그인 통합 방법: 4단계 가이드-JS 튜토리얼-php.cn

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

Susan Sarandon

풀어 주다： 2025-01-03 16:40:40

원래의

606명이 탐색했습니다.

문제

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

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

해결책

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

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

1단계: GitHub에 앱 등록

GitHub 설정으로 이동: GitHub 개발자 설정으로 이동합니다.
OAuth 앱: 사이드바에서 OAuth 앱을 클릭하세요.

How To Integrate GitHub Sign-In: A Four Step Guide

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

How To Integrate GitHub Sign-In: A Four Step Guide

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

How To Integrate GitHub Sign-In: A Four Step Guide

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;
}

로그인 후 복사

How To Integrate GitHub Sign-In: A Four Step Guide