[Backend] OAuth

🦋 OAuth(오어스)

• 인증을 중개해주는 메커니즘
  
• 회원가입대신 할 수 있는 소셜로그인이 대표적인 예
• 어떤 매커니즘으로 인증을 중개해주는가?

🦋 OAuth의 주체

Resource Owner

• 소셜로그인 하고싶어하는 사용자

Application

• 사용자가 소셜로그인을 통해 이용하고자 하는 새로운 서비스
• 경우에 따라 애플리케이션을 클라이언트와 서버로 세분화하기도 함

Resource Server & Authorization Server

• Resource Server : 사용자가 이미 쓰고있는 서비스의 서버
• Authorization Server : 그중 인증을 담당하는 서버

🦋 OAuth 인증방식 종류

Implicit Grant Type

• Grant Type : Authorization Server에서 Access Token을 받아오는 방식
• 잘안씀

Authorization Code Grant Type

1. 사용자가 Application에 접속합니다.
2. Application에서 Authorization Server로 인증 요청을 보냅니다.
3. Authorizaiton Server는 유효한 인증 요청인지 확인한 후 Authorization Code를 발급합니다.
4. Authorization Server에서 Application으로 Authorization Code를 전달합니다.
5. Application이 Authorization Code로 발급받은 Authorization Code를 전달합니다.
6. Authorizaiton Server는 유효한 Authorization Code인지 확인한 후 액세스 토큰을 발급합니다.
7. Authorization Server에서 Application으로 액세스 토큰을 전달합니다.
8. Application은 발급받은 액세스 토큰을 담아 Resource Server로 사용자의 정보를 요청합니다.
9. Resource Server는 Application에게서 전달 받은 액세스 토큰이 유효한 토큰인지 확인합니다.
10. 유효한 토큰이라면, Application이 요청한 사용자의 정보를 전달합니다.

• 요약하자면 사용자가 App에 보낸 요청을 App이 소셜서비스 서버에게 허락받고 사용자 정보를 받는것
  
• 그런데, 액세스토큰 만료됐을때 다시 발급받는게 귀찮을 수 있다.

Refrech Token Grant Type

• 이때 리프레시 토큰을 사용해서 액세스 토큰을 받아오는 방식
• Authorization Server가 리프래쉬 토큰을 검증한 뒤 액세스토큰을 발급해줘서 App이 액세스토큰으로 사용자 정보를 받아오는 것

🦋 OAuth의 장점

1. 쉽고 안전하게 새로운 서비스 이용 가능 : 클릭몇번으로 가입, 정보를 직접노출x이므로 안전, App입장에서도 회원정보 직접 안들고있어도 돼서 위험성이 적음
2. 권한 영역 설정 : 사용자는 원하는 정보에만 접근을 허락할 수 있어 안전, 선택적으로 제공가능

🦋 OAuth 과제 (클라이언트 입장)

2. 로그인

  const loginRequestHandler = () => {
    return window.location.assign(
      `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}`
    );
  };

5. /callback + Authorization code

  const getAccessToken = async (authorizationCode) => {
    try {
      const result = await axios.post('http://localhost:4000/callback', {
        authorizationCode,
      });
      const { accessToken } = result.data;
      setIsLogin(true);
      setAccessToken(accessToken);
    } catch (err) {
      alert(err);
    }
  };

9. 로그인 처리, userinfo로 사용자 정보 받아오기

  useEffect(() => {
    axios
      .post('https://localhost:4000/userinfo', { accessToken })
      .then((res) => {
        setIsLoading(true) //loading indicator 켜고 시작
      
        const {githubUserData, serverResource} = res.data; 
        setGithubUser(githubUserData) 
        setServerResource(serverResource)
      
        setIsLoading(false) //loading indicator 종료
      })
      .catch((err) => console.log(err))
  }, []);