## 데모 시나리오

안녕하세요.나 방입니다. 데모 발표 시작하겠습니다.

저희가 이번주에 주로 구현한 기능은 로그인을 통한 페이지 및 기능 별 권한을 구현했습니다.
# 1 (1분) 호준

## Oauth를 통한 사용자 인증 시나리오
먼저 로그인 과정에 대해서 설명 드리겠습니다.
저희는 구글 OAuth를 사용해 소셜 로그인을 구현해봤는데요. 먼저 구글 로그인 버튼을 클릭하면 구글 계정 정보를 입력하게됩니다. 구글 계정을 입력하게되면 구글 인증 후 받아온 profile 정보를 db에 저장 후 api 서버에서 프로필 정보와 만료 시간을 기준으로 access token 과 refresh token을 발급해줍니다.

## 토큰의 유효성 검사 시나리오
저희는 사용자가 새로고침 및 다시 페이지를 방문했을 때에도 로그인을 유지시켜주기 위해
access token과 refresh token을 localStorage에 저장했습니다.

새로고침을 하거나, 라우팅, 재방문을 할 때 access token과 refresh token을 기반으로 서버에 요청을 보내 토큰의 유효성을 검사하게 되구요, access token이 유효한 경우 만료시간을 갱신 해서 로그인을 유지하도록 관리했습니다. 한번 새로고침을 해도 로그인이 유지되는지 확인해 볼까요? ㅎㅎ

보시는 바와 같이 새로 고침을 반복해도 로그인이 유지되는 걸 확인 하실 수 있습니다.

로그아웃 버튼을 클릭하면 localstorage에 accesstoken및 refresh token이 제거 되어 로그아웃 상태로 변경 됩니다!

다음은 페이지 및 기능 별 권한에 대해 재욱님께서 설명 드리겠습니다~

# 2 (1분 30초)
## 페이지별 권한 시나리오 => 재욱

페이지 및 기능 별 권한
라우팅 할 때 로그인이 필요한 페이지와 필요하지 않은 경우로 나누었습니다.
추가로, 페이지별로 권한을 부여하였습니다.
예를 들어, 방송 채널 페이지에서 로그인을 하지 않아도 들어갈 수 있지만 채팅을 할 수 없습니다.

> 로그인 하지 않으면 채팅이 쳐지지 않는 시나리오(기능)

우선 방송 채널 페이지로 이동 후 채팅이 불가한 경우를 보여드리겠습니다.
정원님 방송 채널 페이지로 이동해보시겠어요?
보시는 것 처럼 방송 채널 페이지는 로그인을 하지 않아도 이동이 가능합니다.

정원님 채팅 한 번 쳐보시겠어요??
보시는 것 처럼 로그인하지 않은 상태에서 채팅을 치게 되면 사용자는 채팅에 대한 권한이 없기 때문에
로그인을 위한 모달창 표시됩니다.

> 로그인 후 채팅 치는 시나리오

이제 로그인을 한 후 채팅을 쳐보겠습니다. (... 로그인 완료!)
로그인을 한 상태에서 채팅을 치면 보시는 것 처럼 **사용자의 닉네임을 기반**으로 채팅이 전송되는 것을 확인할 수 있습니다!!..

다음으로는 미디어 서버의 폴링 관련 하여 현구님께서 발표 진행해주시겠습니다.

# 3 (1분)

## 미디어 서버 폴링

OBS에서 송출되는 데이터는 미디어 서버에 주기적으로 쌓이게 됩니다.
그러면, 클라이언트에서는 주기적으로 쌓이는 데이터 즉 hls 관련 파일들을 가져오는 과정이 필요한데,
이는 저희가 사용하고 있는 hls.js 라이브러리에서 대신 해주고 있습니다.
하지만, 한가지 문제점이 존재하는데, 미디어 서버에 파일이 갱신될 때는 문제가 되지 않는데
파일이 더이상 갱신되지 않을 때는 hls.js 라이브러리에서 에러를 방출하며 더 이상 파일을 가져오지 않는 문제가 발생합니다.
해당 문제를 해결하기 위해서 저희는 직접 미디어 서버로 폴링을 해주어서 해결하려고 했습니다.
(OBS 송출을 멈춘다.)
OBS 송출을 멈추게되면 더이상 미디어 서버로 데이터가 송출되지 않고, hls.js에서는 에러를 방출하게됩니다.
해당 에러를 저희가 catch를 해서 저희가 만든 폴링으로 제어권을 넘깁니다.
(네트워크 탭을 보여주며) 그러면 주기적으로 미디어서버에 .m3u8 파일이 변경되었는지 여부를 확인합니다.
이제 다시 OBS로 데이터를 송출해보겠습니다.
(OBS 송출을 재시작한다.)
파일이 변경되었다고 판단되면 다시 hls.js로 제어권을 넘깁니다.

이상으로 미디어 서버로의 폴링을 알아봤습니다. 다음으로 방송 종료 관련하여 정원님이 발표 진행해주시겠습니다.

# 4 (1분 미만)
## 방송 종료

스트리머가 방송을 종료했는데 방송 페이지에 시청자가 남아 있다면 안되겠죠?
이 문제를 해결하기 위해 스트리머가 방송 종료 버튼을 누르면 방송 관리 페이지 뿐만 아니라 방송 페이지에 방송 종료 이벤트가 소켓으로 전달됩니다.
종료 알림을 받은 사용자의 브라우저에는 방송종료 알림창이 띄워지고 확인을 누르면 메인 페이지로 이동됩니다.

------

## 사용자가 임의로 LocalStorage에 토큰을 삭제하는 상황

이전에 말씀 드린 것 처럼 토큰의 유효성 검사는 LocalStorage의 access token과 refresh token을 기반으로 서버에 요청하여 응답을 받습니다. OO님 로그인 하고 LocalStorage에서 토큰을 삭제하고 새로고침 해보시겠어요?

(...로그아웃이 된다.)
로그아웃이 된 것을 확인할 수 있는데요.
로그인 후 사용자가 임의로 LocalStorage에 토큰을 삭제하면 서버에 보낼 토큰이 없기 때문에 새로고침을 하면 로그이아웃이 된 것입니다!!.

### Oauth 로그인 구현(Access token, Refresh Token DB)
- 구글 로그인 요청 후 access token 과 refresh token을 받아와 local storage에 저장.
- access token 만료 시 refresh token으로 access token 발급
- 로그 아웃 버튼 클릭 시 access token, refresh token 제거

### 로그인 상태 유지
- 네트워크 탭을 열어서
- Accees Token 과 Refresh Token을 LocalStorage에 저장하여 자동로그인 구현
- 단, 라우팅 및 새로고침 과정에서 매번 토큰의 유효성을 검사함
- 사용자가 임의로 토큰을 LocalStoarge에서 삭제하면 새로고침 혹은 라우팅 할 때 자동으로 로그아웃이 됨

### 페이지별 권한 (로그인 vs 비로그인)

- 로그인 한 경우와 로그인 하지 않은 경우의 라우팅 처리
- 로그인 하지 않은 경우
- stream-manager에 입장하지 못하게 하는 것..?
- public route, private route

### 사용자별 기능 권한 부여(로그인 vs 비로그인)
- 로그인 하지 않은 사용자는 방송에 들어갈 수 있다. 하지만 채팅은 칠 수 없음.

### 미디어 서버 폴링
- 방송 송출이 안될 경우 resource etag 확인해서 resource update 여부를 확인하면서 polling을 했다.

- 권한별 라우팅
-
- 새로고침해도 유지되는 로그인 ㅎㅎㅎ
- https
- 로그인 기능
- 로그아웃
- 로그인 시 채팅 입력 메시지 DB 저장
- 페이지 별 권한 설정
- 비 로그인 시 채팅 입력 못하도록(기능 별 권한 설정)
- 채팅 메시지에 우리 이름 보이는거
- 방송 종료하면 다 내쫓아