TIL

# 22-07-19

# Firebase로 GitHub 인증 (signInWithPopup)

프로젝트에 Firebase가 추가 되어있음을 전제로 시작(Firebase 초기화, 앱 객체 생성 공식 문서 참고 (opens new window))

GitHub Settings > Developer settings > OAuth Apps 에서 new OAuthApp을 등록한다.
등록할 때는 Firebase 문서 (opens new window)를 따라 설정을 해 주어야 한다.

  • ✔️ Firebase console의 Authentication에서 제공해주는 콜백 URL로 콜백 URL을 등록하기
import { getAuth, GithubAuthProvider, signInWithPopup, signInWithPopup } from "firebase/auth";

// GitHub 제공 업체 객체의 인스턴스 생성
const provider = new GithubAuthProvider();
// 요청 scope 범위 추가 
provider.addScope("read:user");
provider.addScope("user:email");

const auth = getAuth();
signInWithPopup(auth, provider);

로그인 버튼을 눌렀을때 동작하도록 함수를 구성(onClick시 동작하는 핸들러)하면 회원으로 등록된다.
(Firebase console > Authentication > users 에서 확인)

  • read:user를 통해서 제공 받은 정보를 저장하는 방법이 있는지 확인해보기(사용자 표시 이름 등)

    • 수동 저장 과정으로 진행해보면 될까?
      • 일단 tokenResponse에 displayName으로 얻어올 수는 있음
    • Authentication이 아닌 Firestore Database에 저장하는 방식으로 진행해야 하나?
    • 혹은 매번 GitHub API에 요청해야 할까?

  • signInWithRedirect로는 제대로 진행이 되지 않음(등록도 되지 않고, tokenResponse등을 읽어오지도 못함)

    • 이어서 확인해 보기

# Reference

  1. 자바스크립트에서 GitHub를 사용하여 인증 (opens new window)
  2. Authorizing OAuth Apps (opens new window)

← 22-07-20 →