• 내용 : 소셜로그인 버튼을 누르면 내 깃허브 정보가 뜨게 합니다.

🌿 깃허브에 내 앱 등록

참고사이트를 보고 깃허브에 내 앱을 등록합니다.

1. 깃허브 - 셋팅 - 개발자셋팅 - 오어스 앱 - 새로운 오어스 앱에서 빈칸을 채웁니다
   

• Authorization callback URL은 인증 과정이 끝난 후 리디렉션을 통해 다시 내 앱으로 이동하는 url을 넣으면 됩니다.

2. Client ID 및 Client Secret 를 확인할 수 있습니다.

🌿 스프린트 진행 server

1. .env 에 깃허브에서 받은 client ID 와 secret 를 기입합니다.

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

2. git에 http로 작성해서, 스프린트에서도 인증서는 필요없습니다.

3. controller/callback.js
   깃허브문서를 보고 액세스토큰을 요청합니다.
   클라이언트에서 이미 authorizationCode를 받아서 보내줬습니다.

// 내가 작성한 코드
const axios = require('axios');
axios.defaults.headers.common['Accept'] = "application/json"; 
// 데이터는 객체로 받겠다.
const result = await axios.post(`https://github.com/login/oauth/access_token`, {
  client_id: clientID,
  client_secret: clientSecret,
  code: req.body.authorizationCode
})

// 레퍼런스 코드
axios({
    method: 'post',
    url: `https://github.com/login/oauth/access_token`,
    headers: {
      accept: 'application/json',
    },
    data: {
      client_id: clientID,
      client_secret: clientSecret,
      code: req.body.authorizationCode
    }
  })
// 확실히 레퍼런스 코드가 더 직관적이다.

4. controller/images.js
   클라이언트에서 액세스토큰이 제대로 들어오면 이미지 반환
   (resource server 역할을 하는 것 같다!)

🌿 스프린트 진행 client

1. Login.js 깃허브 인증 페이지로 이동하게 코드작성

class Login extends Component {
  constructor(props) {
    super(props)

    this.socialLoginHandler = this.socialLoginHandler.bind(this)

    // TODO: GitHub로부터 사용자 인증을 위해 GitHub로 이동해야 합니다. 적절한 URL을 입력하세요.
    // OAuth 인증이 완료되면 authorization code와 함께 callback url로 리디렉션 합니다.
    // 참고: https://docs.github.com/en/free-pro-team@latest/developers/apps/identifying-and-authorizing-users-for-github-apps

    this.GITHUB_LOGIN_URL = 'https://github.com/login/oauth/authorize?client_id='
    // = 뒷부분에 client ID 넣어주면된다.
  }

  socialLoginHandler() {
    window.location.assign(this.GITHUB_LOGIN_URL) 
    // 해당 url로 이동하는 핸들러이다.

  }

  render() {
  // 생략
  }
}

2. App.js
   authorizationCode 받아오면 axios로 서버에 액세스 토큰받아오게 요청
   서버의 callback.js 파일과 연관되는 부분.
   액세스토큰 받아오면 setState로 상태 업데이트

3. Mypage.js
   유저정보를 받아오는 axios작성
   이미지 받아오는 axios 작성해서
   각각 상태를 업데이트 해주면된다. (리액트적인 부분이라 생략함)