Thanks to visit codestin.com
Credit goes to github.com

Skip to content

GitHub 로그인 기능 구현 #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Jul 20, 2022

Conversation

codeisneverodd
Copy link
Member

개요

로그인 전에는 아래와 같이 되어있다가 로그인을 완료하면
image
아래와 같이 이름과 이미지를 불러옵니다.
image

상세 작업내용

1. userState, 전역 상태 추가

이름과 이미지 외에도 아래와 같은 내용을 불러올 수 있으며, 해당 내용은 src/state/user.js 에서도 확인하실 수 있습니다 :)

const userObject = {
  avatar_url: "https://avatars.githubusercontent.com/u/54318460?v=4",
  bio: null,
  blog: "",
  company: null,
  created_at: "2019-08-20T13:16:15Z",
  email: "[email protected]",
  events_url: "https://api.github.com/users/codeisneverodd/events{/privacy}",
  followers: 73,
  followers_url: "https://api.github.com/users/codeisneverodd/followers",
  following: 168,
  following_url:
    "https://api.github.com/users/codeisneverodd/following{/other_user}",
  gists_url: "https://api.github.com/users/codeisneverodd/gists{/gist_id}",
  gravatar_id: "",
  hireable: null,
  html_url: "https://github.com/codeisneverodd",
  id: 54318460,
  location: null,
  login: "codeisneverodd",
  name: "codeisneverodd",
  node_id: "MDQ6VXNlcjU0MzE4NDYw",
  organizations_url: "https://api.github.com/users/codeisneverodd/orgs",
  public_gists: 1,
  public_repos: 9,
  received_events_url:
    "https://api.github.com/users/codeisneverodd/received_events",
  repos_url: "https://api.github.com/users/codeisneverodd/repos",
  site_admin: false,
  starred_url:
    "https://api.github.com/users/codeisneverodd/starred{/owner}{/repo}",
  subscriptions_url:
    "https://api.github.com/users/codeisneverodd/subscriptions",
  twitter_username: null,
  type: "User",
  updated_at: "2022-07-15T04:07:10Z",
  url: "https://api.github.com/users/codeisneverodd",
};

2. userState 제어를 위한 커스텀훅 구현

src/hooks/user 폴더를 보시면 userState를 제어하기 위한 커스텀 훅들이 구현되어있습니다!
중점적으로 보시면 좋은 hook은 useUserLoginuseUserProfile 이며 각각 로그인이되었는지, 로그인요청함수유저이미지, 유저이름, 유저깃허브url 을 반환합니다.

3. 깃허브 로그인 구현

동작 원리는

  1. 우선 깃허브 로그인 버튼을 클릭하면 로그인 페이지로 이동하며, 로그인에 성공하면 url에 code 라는 값이 추가되어 돌아오게됩니다.
  2. useSearchParamsuseEffect를 이용하여 code 값이 감지되면 이를 기반으로 로그인을 요청합니다. 로그인 로직은 useUserLogin 훅스를 참고하시면 됩니다! 로그인에 성공하면 유저정보는 sessionStorage에 저장됩니다.
  3. useUserLogin 훅스의 반환값으로 얻을 수 있는 isLoggedIn으로 로그인 상태를 알 수 있으며, 로그인이 되어있는 경우 로그인 버튼이 아닌 유저의 값을 표기합니다.

관련 이슈

@codeisneverodd codeisneverodd added the 기능 구현 기능 구현을 하였을 때 사용합니다. label Jul 20, 2022
@codeisneverodd codeisneverodd self-assigned this Jul 20, 2022
@netlify
Copy link

netlify bot commented Jul 20, 2022

Deploy Preview for solutionbank-web failed.

Name Link
🔨 Latest commit efefa5a
🔍 Latest deploy log https://app.netlify.com/sites/solutionbank-web/deploys/62d7d6b4ac05d200095a0857

@codeisneverodd codeisneverodd merged commit a08f334 into develop Jul 20, 2022
@codeisneverodd codeisneverodd deleted the feat-gitHubLogin-codeisneverodd branch July 20, 2022 10:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
기능 구현 기능 구현을 하였을 때 사용합니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant