Achievement Goals

소셜로그인, OAuth의 작동 방식을 이해할 수 있다.
직접 OAuth로 로그인 가능한 어플리케이션을 제작할 수 있다.
Authentication과 Authorization의 차이를 이해할 수 있다.
"브라우저" - "내 서버" - "인증 대행 서비스"간 요청/응답을 주고받는 다이어그램을 그릴 수 있다.
OAuth의 키워드를 설명할 수 있다.
🧨 Github 로그인 해보기

💥 준비

준비물 : 넘나 당연히 github 로그인.

깃허브에 Developer settings 에 들어가면 OAuth 를 발급할 수 있는 창이 나온다.

각자 고유의 clientId와 Client Secrets 이 나오는데
특히 Client Secrests 의 경우 절대로 노출되어서 안되니 조심하도록 한다! 본인조차도 발급된 직후에만 볼수 있으니 반드시 미리 알아두도록 한다.
나도 까먹어서 한개 더만들음.

그다음 환경변수 설정을 위해 GitHub App에서 제공한 위의 Client ID와 Client Secret을 .env 파일에 작성한다.

소셜로그인이기 때문에 앞서배운 쿠키/세션, 토큰과 달리 https인증인 cert.pem , key.pem 이 전혀 필요가없다! 처음엔 이것도 모르고 무조건 복붙했었음.

💥서버

서버폴더의 징그럽게 많은 파일중, 채워야 할 곳은 두곳, callback.js 와 images.js 이다.
callback 파일은 Access token을 받아올 수 있도록 도와주는 라우터파일이고, images 파일은 받아온 Access token을 확인한 후, local에 저장된 resource images를 클라이언트로 보내주는 라우터이다.
그 외에 index.js에는 express로 작성한 cors, port설정 등등의 코드가 있고 resources.js 에는 이미지파일에대한 정보가 있다.
콘솔찍으면 어차피 다 나오지만 한번씩 봐주고 넘어간다.

callback.js

앞서 말했듯이 Access token을 받아올 수 있도록 도와주는 라우터파일로,
깃허브 API 공식사이트를 들어가보면

토큰을 발급받기 위해 해당 https 주소로 POST 요청을 보낸다. 이따 반드시 필수로 요구하는것은 client_id , client_secrest, code 가 있다.

headers 에서 시간을 많이 잡아먹었는데, 그동안 headers 는 아묻따
'content-type':'application/json' 으로 작성하고있었다.
하지만 Accept 를 키로 주어야 하고 그 이유는 솔직히 잘모르겠다.
이제 해당 포스트요청을 잘 받아오면 토큰을 보내주고, 아니면 400번대로 보내준다.

images.js

images.js 파일은 만약 로그인이 성공되어 마이페이지를 보여줄 경우, resource-server 에 있는 이미지정보들을 클라이언트에게 보내주는 역할을 한다. accessToken이 맞다면 이미지들을 보내주고, 아니면 403번대로 리젝한다.

---

💥클라이언트

Login.js

Login.js는 깃허브 로그인 인증을 위해 github로 이동해야하고, 이에 적절한 url 을 넣는 역할을 한다.

깃허브 API 공식사이트에서 해당 주소에 cliend_id 는 필수로 넣어주어야 한다고 한다. 이때, 앱 id 와 클라이언트 id 가 동일해야하므로

.env 에 작성해둔 본인의 클라이언트 id 를 넣는다.

App.js

accessToken은 보안유지가 필요하기 때문에 클라이언트에서 바로 OAuth를 요청하지 않는다. 그렇기때문에 서버에 authorized 코드를 보내주고 서버에서 accessToken 을 보내주는것이 맞다. 그렇기때문에 localthost:8080/callback의 엔드포인트로 authrorizedCode 인것을 보내주어 토큰을 받아오는 형식을 취해야한다.

로그인이 되면? Mypage 에 accessToken 을 accessToken 프롭스로 전달!

Mypage.js

마지막으로, 로그인에 성공했을 때 나타나는 Mypage.js 이다.
제대로 토큰인증이 되었을 시

이름, 아이디, 주소, 레포지토리, 마지막으로 아까 resource서버에있던 이미지정보를 불러오면 된다.
여기서 github의 api로 사용자의 액세스토큰으로 정보를 받아와야 하므로

깃헙에서 제공하는 문서를 따라서 써본다.
이미 App.js에서 프롭스로 전달한 토큰이 있으므로 this.props.accessToken 작성.

문서에 나온것처럼 해당주소로 겟요청을 보내고 헤더에 authorization : 'token 발급받은OAuth토큰' 을 추가한다.
만약 그것이 성공적이면 아까 우리가 필요했던 정보,
이름, 로그인, 주소, 레포갯수를 받아올 수 있다.

이미지도 마찬가지로 처리!
그럼 끗~

OAuth 스프린트에서 활용도가 높은 github 소셜로그인을 배웠다.
사실 이게 다 차려놓은 밥상에 멱살잡히듯 끌려다니며 빈칸채우기를 한거라
처음부터 다시 하라고 하면 힘들것 같다. ㅠㅠadvanced인 구글 OAuth도 하고싶은데 어려오 ㅠㅠㅠㅠ