ft_transcendence 42Oauth 구현 내용

 

42서울 마지막 과제인 ft_franscendence 과제(PingPong  게임 웹페이지)에서 42Oauth를 구현한 내용입니다.

구현 내용 이해를 위한 필수 개념만 간단히 소개한 후 실제 구현 과정을 간략하게 살펴보겠습니다.

OAUTH란?

가장 기본 구조

• 보통 Resource Owner(사용자)와 Client(우리 페이지), Resource Server(42 서버) 이렇게 셋이서 정보를 주고받는다
• Client가 Resource Server의 service를 사용하기 위해서 만들어진 기능으로 Client에서 User의 Resource Server ID, PW를 저장하고 있기에는 위험성이 있어서 Access Token을 통해 유저를 식별한다.
• 보통 Resource Server은 Client ID, Client Secret, Authorized redirect URIs를 받아서 Client를 식별한다. → API를 생성할 때 만들어짐
• Client Secret은 외부 공개 X

Api생성 후 정보를 저장하고 있는 상태 사진

• Client가 redirece url과 client id를 쿼리스트링으로 포함해서 Resource Server측으로 요청을 보내면 Resource Server는 Client id를 확인한다.
  • 같으면 scope에 해당하는 권한을 허용할 것인지 client에게 물어보고 동의하면 리다이렉션 주소로 Authenticate code를 Client에게 전송해준다.
• Client는 Authenticate code와 Client Secret, Client id, redirece uri를 모두 쿼리스트링으로 포함해서 Resource Server에게 전송한다.
• Resource Server는 Authenticate code를 보고 Resource Owner를 찾아서 정보가 모두 일치하는지 확인 후 Access tocken을 발급해준다.
• 이후 Client가 Access token으로 API를 호출하면 API 생성할 때 허용했던 범위 내에서 Resource Owner의 정보를 이용한 서비스를 제공해준다.

출처 - 생활코딩 OAuth 강의

: 강의가 길지 않아서 시간날 때 한번 보시면 도움이 됩니다~

 

Cookie란?

• 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로 클라이언트 측에 데이터를 저장하는 방법중 하나
• 보통 Key : value 형식으로 제작하여 저장된다.

특징

• 서버는 브라우저에 데이터를 넣을 수 있다.
  • 로컬 스토리지
  • 쿠키 (인증 등 여러 정보 저장 가능)
  • 세션 스토리지
• 쿠키를 브라우저에 저장해서 요청을 보낼 때 같이 요청 헤더에 포함해서 보낼 수 있다.
• 쿠키는 유효기간을 정해둘 수 있다.

 

JWT란?

• 당사자간에 정보를 JSON 객체로 안전하게 전송하기 위한 개방형 표준.
• 세 부분으로 나누어져 있고, .을 구분자로 한다.

JWT 구조

• 헤더에는 어떤 해시 알고리즘을 할 것인지, 토큰의 타입은 무엇인지를 정의할 수 있다.
• 내용에는 전달하는 데이터를 포함할 수 있는데 key, value형식으로 저장한다.
• 서명에는 인코딩된 Header.Payload 그리고 secret가 필요한다.
  • secret은 유저가 지정하는 비밀코드이다.

출처

JWT란 무엇인가

 

Prisma란?

ORM으로, 객체를 schema로 정의한다음 그 객체와 내가 선택한 데이터 베이스를 연결시켜주는 매개체이다.

• ORM중 하나로 자바스크립트를 이용해서 Database를 접근, 조회, 수정, 삭제가 가능하다.

 

schema란?

데이터베이스 스키마는 관계형 데이터베이스 내에서 데이터가 구성되는 방식을 정의합니다. 
여기에는 테이블 이름, 필드, 데이터 형식 및 이러한 엔티티 간의 관계와 같은 논리적 제약 조건이 
포함됩니다.

• 데이터베이스 스키마 : 데이터가 다른 테이블 또는 다른 데이터 모델과 어떻게 관련될 수 있는지 설명.
  • 데이터베이스의 "청사진", 실제로 데이터가 포함되어 있지 않음
• 데이터베이스 인스턴스 : 특정 시점의 데이터베이스 데이터 샘플
  • 여기에는 스키마가 데이터 값으로 설명하는 모든 속성이 포함.
  • 데이터베이스 인스턴스는 특정 시점의 스냅샷일 뿐이므로 데이터베이스 스키마와 달리 시간이 지남에 따라 변경될 가능성이 높다.

스키마 설명 출처

 

ORM 이란?

• ORM : 객체(Object)와 DB의 테이블을 자동으로 연결(Mapping)시켜 RDB 테이블을 객체 지향적으로 사용하게 해주는 기술
• → 어플리케이션의 객체를 RDB 테이블에 자동으로 영속화 해주는 것
• 객체 필드와 관계형DB를 매핑해서 간접접으로 데이터베이스의 데이터를 다룰 수 있게 해준다. ⇒ SQL을 직접 사용하지 않아도 된다!!!!!
• 영속화 : 데이터를 프로그램이 종료되더라도 유지할 수 있도록 저장하는 과정
• = 메모리에 있는 데이터를 데이터베이스(DB)나 파일 같은 저장소에 저장하는 것

 

RDB란?

• RDB(Relational Database) : 관계형 데이터 모델에 기반을 둔 데이터베이스
  • 관계형 데이터 모델 : 모든 데이터를 2차원 테이블 형태로 표현
• DB는 RDB와 NoSQL로 구분할 수 있다.
• 보통 정확성과 일관성이 중요한 경우에는 RDB를 사용하고, 데이터의 유형이 유동적이고 정형화되어있지 않다면 확장성과 유연성을 고려햐여 NoSQL을 이용한다.

 

실제 OAuth 구현 단계

1. 42API 생성 → redirect URL 제작 → redirect요청
2. 42로그인을 통해 code 획득 → 쿼리스트링으로 코드 전달됨
   1. 쿼리스트링?
      → ‘웹 서버에 저장된 프로그램을 웹 브라우저로 전달하는 것’
      https://www.google.com/search?q=트센화이팅&oq=트센&sourceid=chrome&ie=UTF-8
      • 파라미터가 여러 개 일 때는 **‘&’**로 이어준다.
      • [파라미터 명]=[파라미터 값]이 한 세트로 작동
   2. 실제 url 예시
      http://localhost/callback/42?code=8e0000d47a4b4383da906c712868df966937f8e9743fb1bb6cda0b2f64c8c7a2
      → 쿼리스트링을 파싱해서 코드 부분만 변수에 저장
3. const { code } = request.query → 쿼리만 잘라줌
4. code로 access token 획득
   • 요청할 쿼리 내용을 제작해서 post로 보내면 response의 data에 accesstoken이 담겨서 온다.

   const data = qs.stringify({
               grant_type: 'authorization_code',
               client_id: `${process.env.OAUTH_UID_42}`,
               client_secret: `${process.env.OAUTH_SECRET_42}`,
               code: code,
               redirect_uri: '<http://localhost/api/auth/callback/42>',
           }); //요청 쿼리 내용
   
           const response = await axios.post(url, data, {
               headers: {
                   'Content-Type': 'application/x-www-form-urlencoded',
               }
           }); //요청 post -> response에 응답 담겨서 온다.

5. 해당 토큰을 이용하여 api요청을 보내면 된다. → 유저 정보 반환해줌
   • userinfo.data에 유저 정보가 들어있는데 여기서 key값으로 검색하면 원하는 값을 받아올 수 있다.

   const userinfo = await axios.get("<https://api.intra.42.fr/v2/me>", {
               headers: {
                   Authorization: `Bearer ` + response.data.access_token
               }
           });

   • 유저 정보를 이용하여 DB에 유저 생성해서 정보를 저장한다.
   • 이후 해당 정보를 이용하여 jwt를 생성하고 이를 쿠키로 만들어서 유저 식별에 활용한다.

구현 완료 PR

시영없는 시영팀 PR

Be/o auth/feat login 42 OAuth 구현 및 access token 발급 #11 by duckgii · Pull Request #22 · Without-C/FT_Transcendence

 

배운점

1. 그래서 Oauth를 왜 사용하냐?

    : 직접 로그인을 구현하려면 유저별로 아이디와 비밀번호를 저장하는 테이블도 만들어야하고, 여러가지 보안 관련 이슈(SQL 인젝션 등)도 같이 고려해야하는데 이미 다른 사이트에서 잘 만들어둔 로그인 서비스를 활용하면 고생을 덜 할 수 있다.

2. 개념적인 내용들

   : 프론트에서 백으로 어떤 방식을 통해 정보를 전달해줄 수 있는지(쿼리, 쿠키 등등)와 실제로 프론트와 백이 어떻게 서로 상호작용하면서 동작하는지 배울 수 있었다.(get, redirect 등등)

3. API 사용

   : API에 대해 중요하다고 이야기는 많이 들었는데, 직접 API를 등록해서 사용해보니  API가 가진 강력함을 느꼈다. 다른 사이트에서 잘 구현해둔 기능을 내가 원하는대로 사용할 수 있다는 점이 상당히 매력적이었고, 이 경험을 토대로 다른 API들도 많이 사용해보고 나만의 서비스를 구축해보고 싶다는 생각이 들었다.