일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Vue
- SAA
- S3
- git
- TypeScript
- 파이썬
- wetube
- 카톡
- SSA
- dict
- 튜플
- Props
- docker
- 중급파이썬
- async
- node
- crud
- Class
- flask
- RDS
- lambda
- AWS
- NeXT
- MongoDB
- pandas
- react
- merge
- socket io
- EC2
- 채팅
- Today
- Total
초보 개발자
Github Login - oAuth 2 본문
2021.09.27 - [RECAP - WETUBE] - Github Login - oAuth
이전에 포스팅 한 글이있습니다. 못보신 분들은 한번 보고와주세요 !!
우리가 적어둔 redirect URL 뒤에 code가 하나 딸려온 것을 알 수 있는데요이건 authorization code이라고 합니다.
1. code
2. client_id
3. client_secret
를 모아 깃허브에 보내서 액세스토큰이라는 것을 받아올 것이에요!!
startGithubLogin handler와 마찬가지로 baseUrl과 config를 추가해주는데 이번에는 fetch를 사용해서 access_token을 받아올 거에요 전에는 redirect URL에 딸려와서 req.query.code로 받아오면 되는데 지금은 post method를 사용하여 정보를 넘겨주고 headers : Accept : 'application/json' 옵션을 넣어주어 json형태로 받아오도록 합니다. ( header값을 넣지 않으면 다르게 return합니다 !! )
response.text() – 응답을 읽고 텍스트를 반환합니다,
response.json() – 응답을 JSON 형태로 파싱합니다.
노드에서 fetch를사용하려면 node-fatch라는 모듈이 필요해요 !!
npm i node-fetch
fetch를 import한 뒤
콘솔에 찍어보면 이렇게 access_token이 짜잔~~ 잘 나오는 것을 확인할 수 있습니다!!
하지만 access_token이 안 받아와진 경우도 있겠쬬??
이럴 경우 객체안에 키가 존재하는지 확인할 때에 "key" in object 를해주면 true or false로 반환을 해줍니다!!
이렇게 말입니다!!!
이제 받아온 access_token을 가지고 API에 접근하면됩니다.
access_token은 scope에 적은 내용에 대해서만 허용해 줄 뿐입니다. 이 외의 권한은 X
access_token이 없다면 login으로 redirect해주었고
access_token을 가지고 다시 fetch -> json()을 통하여 객체로 가져왔다.
많은 데이터가 나오지만 간략하게만 보여드렸습니다!! 여기서 email이 private으로 지정되어있으면 나오지 않는데
깃허브로 로그인을 눌렀을 때 기존 아이디의 유무를 확인하기 위해서 email은 꼭 필요하다!
아까 우리가 read:user과 user:email도 함께 accesstoken발행할 때 요청했었다.
지금 보여주는건 read:user이고 이번엔 user:email을 받아와 보겠다.
위처럼 url을 다르게 fetch하여 받아오면 된다. 다시말하지만 우리는 아까 access_token을 받아올 때 user:email을 scope안에 넣어왔기 때문에 가능한 것이다.
아까와 바뀐 것은 fetch에 들어가는 url밖에 없다.
이렇게 email이 나오는 것을 확인할 수 있고 여기서 primary와 verified가 true인 것을 찾아오면 된다.
find함수를 활용하여 emailObj에 넣어준다
emailObj가 없다면 login으로 돌려보내고
현재 DB에 같은 email주소가 있다면 기존에 만들어두었던 아이디가 있으니까 ( primary verified이기 때문에 신뢰도 상 승 ) else문으로 빠져서 로그인 시켜주면 되고 만약 없다면 새로 아이디를 만들어 준다. 그 아이디의 정보는 다 github에서 가져온 정보로 해결한다. 여기서 password는 일단 공백으로 둔다. 그리고 socialOnly라는 것을 만들어서 true로 설정해두어 SNS에서 만든 것인지 일반적으로 만들어진 것인지 구별하도록 한다.
userSchema도 다음과같이 변경해두자 password를 required로해두면 깃허브로 아이디 만들때 오류나기에 일단 required옵션을 뺐다.
이렇게 해두면
login이 잘 되는 것을 확인할 수있다!! 이로써 OAuth를 활용하여 github로 로그인하는 방법을 알아보았다.
확실히 코드가 길어지고 생각할 것이 많지만 하나하나 퀘스트 깨듯이 해나가니까 재밌다
'RECAP - WETUBE' 카테고리의 다른 글
avatar , video upload (multer, static) (0) | 2021.09.29 |
---|---|
middleware / edit, change-pw handler (★★★) (0) | 2021.09.28 |
Github Login - oAuth (0) | 2021.09.27 |
session의 옵션들(resave, saveUninitialized)과 dotenv (0) | 2021.09.27 |
join, login, logout handler ( SESSION ★★★) (0) | 2021.09.24 |