# 22-07-20

# Firebase로 GitHub 인증 - 2

이어서 알아볼 사항(07-19에서)

read:user를 통해서 제공 받은 정보를 저장하는 방법이 있는지 확인해보기(사용자 표시 이름 등)
- ~~수동 저장 과정으로 진행해보면 될까?~~
  - ~~일단 tokenResponse에 displayName으로 얻어올 수는 있음~~
- ~~Authentication이 아닌 Firestore Database에 저장하는 방식으로 진행해야 하나?~~
- 혹은 매번 GitHub API에 요청해야 할까? ✅
signInWithRedirect로는 제대로 진행이 되지 않음 ✅

# 사용자 정보 저장 및 불러오기

✅ addScope로 스코프 추가 하지 않아도 기본 email정보는 가져옴(email로 Firebase Authentication에 사용자를 구분하여 등록)

가입시 요구 정보 화면

공식문서 (opens new window)대로 저장된 유저 정보를 가져와보면 아래 정보만 확인 가능하다.

const userAuth = await onAuthStateChanged(auth, (user) => {
  if (user) {
    user.providerData.forEach(async (profile) => {
      console.log(profile);
      console.log("Sign-in provider: " + profile.providerId);
      console.log("  Provider-specific UID: " + profile.uid);
      console.log("  Name: " + profile.displayName);
      console.log("  Email: " + profile.email);
      console.log("  Photo URL: " + profile.photoURL);
    });
  };
// 이하 생략

하지만 displayName을 미설정한 사람(나😇)의 경우에는 null로 표시된다.
위 정보로는 유저의 로그인ID(이메일x)나 URL을 알 수 없다.

저장된 정보중 UID와 GitHub API를 이용해서 해당 정보를 가져오자 (공식문서 (opens new window))

# GitHub API로 유저 정보 가져오기

https://api.github.com/user/${uid} 로 아래 방법과 같이 요청할 수 있다.

fetch(`https://api.github.com/user/${uid}`, {
  headers: { 
    Accept: "application/json", 
    Authorization: token 
  },
})

토큰은 user.accessToken으로 가져올 수 있다.

const userAuth = await onAuthStateChanged(auth, (user) => {
// const userAuth = await onAuthStateChanged(auth, ({token}) => { 도 가능하다.
  if (user) {
    const token = user.accessToken 
  };

  // 이하 생략

user-to-server요청 (opens new window)이므로 시간당 15,000회로 제한된다.

GitHub Users API를 이용하여 아래와 같은 응답을 받을 수 있다.

{
  "login": "octocat",
  "id": 1,
  "node_id": "MDQ6VXNlcjE=",
  "avatar_url": "https://github.com/images/error/octocat_happy.gif",
  "gravatar_id": "",
  "url": "https://api.github.com/users/octocat",
  "html_url": "https://github.com/octocat",
  "followers_url": "https://api.github.com/users/octocat/followers",
  "following_url": "https://api.github.com/users/octocat/following{/other_user}",
  "gists_url": "https://api.github.com/users/octocat/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/octocat/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/octocat/subscriptions",
  "organizations_url": "https://api.github.com/users/octocat/orgs",
  "repos_url": "https://api.github.com/users/octocat/repos",
  "events_url": "https://api.github.com/users/octocat/events{/privacy}",
  "received_events_url": "https://api.github.com/users/octocat/received_events",
  "type": "User",
  "site_admin": false,
  "name": "monalisa octocat",
  "company": "GitHub",
  "blog": "https://github.com/blog",
  "location": "San Francisco",
  "email": "octocat@github.com",
  "hireable": false,
  "bio": "There once was...",
  "twitter_username": "monatheoctocat",
  "public_repos": 2,
  "public_gists": 1,
  "followers": 20,
  "following": 0,
  "created_at": "2008-01-14T04:33:35Z",
  "updated_at": "2008-01-14T04:33:35Z",
  "private_gists": 81,
  "total_private_repos": 100,
  "owned_private_repos": 100,
  "disk_usage": 10000,
  "collaborators": 8,
  "two_factor_authentication": true,
  "plan": {
    "name": "Medium",
    "space": 400,
    "private_repos": 20,
    "collaborators": 0
  }
}

login, html_url, avatar_url등을 활용할 수 있게 되었다.

# Firebase로 GitHub 인증 (signInWithRedirect)

signInWithPopup과 달리 signInWithRedirect가 동작하지 않았는데, 이 문제는 이 이슈(Firebase Auth is no longer working in incognito mode (opens new window))와 관련 있었던 것으로 생각된다.

실제로 시크릿모드가 아닌 환경에서는 잘 동작했다..😇 일단 현재로서 사용자가 시크릿 모드를 이용하지 않도록 안내하는 방법 보다는 popup으로 로그인을 연결하는 게 나은 방법일 것 같다.

← 22-07-19 22-07-21 →