Github Login - oAuth

2021.09.27 - [이것 저것] - OAUTH

OAUTH

oAuth의 인증절차에 대해서 다뤄봤던 글이 있다. 생활코딩님이 설명해주신 내용을 바탕으로

정리해두었다. 이 글을 먼저 보고오면 어떤 원리로 인증이 되는지 알 수 있을 것이다.

 

GitHub Apps

GitHub: Where the world builds software

new OAuth 를 누르고

위와 같이 적절한 내용을 적어준다 이 부분에서 중요한 곳은

Authorization callback URL인데 이 부분으로 정보를 받아오기 위한 주소라고 생각하자 authorization code가 발행되는 등 자주 쓰이니 적절하게 적어주자.

 

Authorizing OAuth Apps - GitHub Docs

Authorizing OAuth Apps - GitHub Docs

위 주소로 들어가면 깃허브로 로그인 할 수 있는 방법에 대해서 적혀있다.

먼저 유저가 깃허브로가서 로그인을 해야한다. 버튼을 만들고 누르면

접속이 안된다!!? 왜냐하면 우리는 몇가지 parameters를 보내줘야하는데 이것을 생략했기 때문이다

깃허브 oauth앱을 만들 때 생긴 client id를 url뒤에 넣어줘보자~~!

만약 깃허브에 로그인이 되어있지 않다면 로그인 창이 먼저 나왔을 것이지만 나는 이미 로그인이 되어있기에 바로 허가 창이 나왔다. public data에 접근할 수 있는 권한을 주는 것을 동의하는 것이다. 하지만 나는 더 많은 정보를 얻고 싶다.

그럼 어떻게 해야할까~~? parameter들을 추가하면 되는 것이다. 

scope라는 parameter인데 여러~~ 종류가 있는데 우리는 여기서 read:user와 user:email만을 사용해 보려고 한다.

이걸 공부하면서 아무 곳에서나 권한을 허락하면 안된다는 생각이 들었다.

공백을 사용하여 추가할 수 있다. 

먼저 read:user만 주어보았다. 이젠 public data가아닌 personal data로 바뀌었다. 여기엔 email이 저장되어있지 않나보다 user:email도 추가해보자 !! 

이렇게 원하는 정보들을 scope를 통해 정할 수 있다. 저 Authorize taehyeki는 잠시 !! 잠시 !! 누르지 마시고 그전에

github login url을 보면 엄~청 길어 보기쉽지 않은 것을 알 수 있어요

간단한 url을 따로 만들어서 거기에서 handler를통해 redirect를 해주는게 훨씬 깔끔할 것 같습니다. 어떻게 줄지는 마음이지만 강의에서 나온대로 해보겠습니다.

먼저 url이렇게 설명해주고

router, handler를 설정해줍니다.

주소에서 보이는 물음표(?) 뒷 부분이 search 부분이고 URLsearchParams는 GET요청시 데이터를 전달 할 때 사용합니다. 기존에는 search 부분을 수정하는 함수를 직접 구현해야 했지만, 이제는 브라우저가 제공합니다. (WEB API)

toString()하여 문자열화를 해줘야합니다!!!

자 이렇게 아까와 같이 잘 실행이 되는 것을 확인할 수 있습니다.

길고 긴 string을 가지는 것보다 이렇게 적는 편이 가독성도 좋고  재활용또한 가능하여 다른 곳에서도 쓸 수 있습니다!!

이제 Authorize taehyeki를 눌러봅시다 그럼 어떻게 될까요?

이런 url을 반환하는데 이거 어디서 많이 본거같죠??

아까 github에 적어두었던 주소입니다!!

즉 깃허브가 사용자를 아까 만들어놨던 url로 보내주게됩니다 어떤 중요한 코드와 함께...

이 부분은 다음시간에 알아보겠습니다.!!