TIL 50일차

인증보안부분은 재미있으면서도 어렵다. 특히 OAuth는 내가 무심코 많이 써왔는데 어떻게 돌아가는지 알게 되니 흥미로웠다. 프로젝트를 하게 되면 OAuth를 적용하여 구글,카카오톡,네이버 로 로그인 할 수 있도록 만들어야겠다. OAuth 인증 방식을 구현하는 방법은 아래와 같다.

 

1. GitHub에 내 앱 등록

https://www.oauth.com/oauth2-servers/accessing-data/create-an-application/ 를 참고하여, OAuth 앱을 등록한다. Homepage URL 및 Authorization callback URL은, 안내한 문서의 스크린샷에서처럼 https://example-app.com 으로 써도 좋고 http://localhost:3000과 같이 써넣어도 좋다. 해당 스프린트에서는 클라이언트 주소(http://localhost:3000)로 리디렉션 한다.

 

2. 환경 설정

GitHub App에서 제공하는 Client ID 및 Client Secret의 정보를 채워 넣어야 한다.

• 주의: Client Secret은 항상 비밀로 지켜져야 한다.
• 서버에 .env.example 파일이 있다. 파일명을 .env로 수정하고, 파일 안에 clientID와 clientSecret 정보를 담자.

 

3. 서버 분석 및 서버 실행

제공되는 서버를 살펴보자. express를 이용해 만든 간단한 웹 서버다. Access token을 발급받는 과정은 서버에서 이루어지는 것이 더욱 안전하다. 그래서 클라이언트에서 받아온 Authorization code를 서버의 /callback 엔드포인트로 전달해 서버에서 github App에게 Access token 발급을 요청한다.

• /callback: 인증 정보를 바탕으로 Access token을 받아올 수 있도록 도와주는 라우터다.
• /images: 받아온 Access token을 확인한 후, local에 저장된 resource images를 클라이언트로 보내주는 라우터다.

서버 폴더에서 npm start 명령어로 서버를 실행시켜 ClientID와 ClientSecret을 잘 받아오고 있는지 확인해 보자.

 

 

4. Authorization code 받아오기 (Login Component)

클라이언트 페이지는 React로 구성되어 있다. 클라이언트 폴더에서 npm start 명령어로 클라이언트를 실행시켜 보자. OAuth sprint에서 npm test 명령어는 최소한의 구성 요소만 테스트한다. 여러분이 직접 브라우저 창이 어떻게 변화하는지 보고 콘솔 창에 뜨는 에러 메시지들을 확인하며 소셜 로그인 기능을 구현해 보자. 클라이언트 페이지는 Login Component부터 주석에 적혀 있는 가이드라인을 참고해 작성을 시작하자. 가장 먼저 해야 할 일은 Github App에 요청을 보내 Authorization code를 받아오는 일이다.

 

 

5. Access token 받아 오기 (App Component)

Authorization code를 받아왔다면 해당 코드를 server(server > index.js)에 전달해 Access token을 받아올 수 있다. 받아온 Access token은 App 컴포넌트의 state에 저장한 후, Mypage 컴포넌트에서 props로 내려받아 활용해보자.

 

 

6. 리소스 서버에 리소스 요청 (Mypage Component)

받아온 Access Token으로 client > src > components > Mypage.js 에서 리소스에 대한 API 요청을 할 수 있다. Access Token을 전달하는 방식은 앞서 토큰에서 배웠던 Bearer Token 을 headers에 담아 주어 전달할 수 있다. Mypage에서 받아와야 할 리소스는 2가지다.

먼저 Github API 요청에 Access token을 함께 보내어 유저 정보를 받아온다.local server에 저장된 이미지들을 받아온다.

완성된 마이페이지 화면에는 Github user 정보와 Resource 서버에 있는 이미지들이 담겨야 한다.