TIL: 2022-11-14

⚙️ 오늘 배운 주제

OAuth 인증

 

🐹 오늘의 기분

이번 과제는 뭔가.. 될 듯 안 될 듯하면서 안 돼가지고 애먹었다. 그래서 라이브세션 때는 과제하면서 썼던 거 싹 지우고 똑같이 따라하면서 들었다. 분명 엄청 오래 걸렸었는데 뚝딱뚝딱 끝나서 굉장히 신기했음.. 작동되는 거 보고 뭐가 문제였는지 한참 생각해봤는데 try/catch문을 안 쓴 것과 isLoading상태의 변경 위치, useEffect()의 사용에서 차이가 있었다. 참 아리까리한 게 많았던 과제였다. 이따 또 다시 지우고 혼자 다시 해봐야지.....

 

🗝 키워드

OAuth, Authorization grant, Authorization code grant type, Refresh Token Grant type

 

🗣 스스로에게 설명

OAuth

소셜 로그인을 구현할 수 있는 방식
인증을 중개하는 외부 서버를 이용
직접 로그인 로직을 구현할 필요가 없다.

이미 사용자 정보를 가지고 있는 웹 서비스에서 인증을 대신해주고 토큰을 발급하여 이를 이용해 서버에서 인증이 가능해지는 방식

• 개발자는 회원가입, 회원 관리에 신경쓰지 않아도 됨
• 사용자는 따로 회원가입 폼을 작성해주지 않아도 됨

보안상의 이점도 존재한다.
유저의 민감한 정보가 App에 노출될 일이 없음.
인증 권한에 대한 허가를 미리 유저에게 구해야 하기 때문에 더 안전하다.

 

용어

Resource Owner 정보 제공자, 즉 사용자를 의미함
Client 사용자를 대신하여 보호된 리소스에 접근하는 애플리케이션
Local Server 클라이언트의 요청을 수락하고 응답할 수 있는 서버
Resource Server 사용자의 정보를 저장하고 있는 서버
Authorization Server 인증을 담당하는 서버, Access Token을 발급함
Authorization Grant Client가 Access Token을 얻는 방법 (Authorization Code Grant Type / Refresh Token Grant Type)
Autohrization Code Access token을 발급받기 위한 코드
Access Token 보호된 리소스에 접근하는데 사용되는 인증 토큰
Refresh Token 액세스 토큰이 만료되면 새로 발급받을 수 있게 도와주는 토큰

 

Authorization code grant type의 flow

 

❓ 막혔던 부분

환경변수 설정에서 막혔었다.
server에서는 그냥 환경변수에 작성해준대로 불러오면 되지만, react를 이용해 작성한 client 파일에서는 환경변수를 불러올 때 앞에 REACT_APP_을 붙여주어야 한다. 이것 때문에 엄청 끙끙댔는데 페어분께서 찾아주신 덕에 해결할 수 있었다. 처음엔 잘 몰라서 끝에 세미콜론을 붙였었는데 자꾸 오류가 발생했다. 혹시...? 싶어서 빼보니 작동이 아주 잘 됐다 ㅠㅠ.........🥲

따옴표 유무도 헷갈렸는데 찾아보니 글이 있어서 링크해둔다.
굳이 따옴표로 감싸줄 필요는 없고, 각 환경변수는 엔터로만 구분한다. (세미콜론이나 반점 X)

react evironment variables .env return undefined

 

axios에서 delete 메소드에 데이터를 담아 보내는 건 다른 메소드와 약간 방식이 달랐다.

// post
axios
  .post('url', {보낼 데이터})

// delete
axios
  .delete('url', {data: {보낼 데이터}})

두 번째 인자로 data:{} 형태로 보내주어야 했다.

 

🔎 공부가 더 필요한 부분

try/catch 
각 인증 방식의 특징을 설명할 수 있도록 다시 공부하기