TIL | 로그인 프로젝트 2

2. 소셜계정 로그인 구현

2018년 12월 기준 카카오톡 서비스의 시장점유율이 86%인 가운데, 카카오톡 계정을 보유한 사용자가 10명중 8~9명에 이르고 있습니다. 비단 카카오톡뿐만이 아니라 네이버, 페이스북 계정도 마찬가지일 것입니다. 이러한 가운데 소셜 계정을 이미 보유한 사용자는 소셜 계정 로그인으로 웹서비스에 로그인 할 때, 권한만 허용하는 절차를 거치고 나면 보다 간편하게 로그인을 할 수 있습니다. 그러나 사용자 입장에서 간단하게 느껴지는 이 절차는 실제 다소 복잡한 개발 절차를 필요로 합니다. /*이는 다소 복잡한 개발 프로세스가 따르는 것을 의미합니다.*/ 또한 소셜 계정 로그인을 구현하기 위해서는 /*너무 당연한 소리겠지만*/ 소셜 계정 서비스에서 사전 절차를 필요로 합니다. 사전 절차에서 개발자는 로그인 서비스를 위한 key값을 얻게 되고, 부여받은 key 값을 실제 로그인 프로세스에 등록합니다. /*개발자의 피와 땀으로 행한*/ 일련의 절차가 사전에 이루어진 후, 사용자는 개발자가 등록해둔 URL을 통해 소셜 계정으로 로그인을 할 수 있습니다. 이를 OAuth 인증이라 합니다. 각 소셜 서비스에서는 OAuth 접근 권한 위임을 위한 특정 key값을 제공하고, key값을 이용한 구현 방법을 문서로 상세하게 명시하고 있습니다. 문서를 읽어봐도 직접 구현하는 방법이 다소 복잡하지만, 본 포스팅으로 OAuth를 통한 소셜계정 로그인 구현과 관련하여 어떤 개발 프로세스가 필요한지를 상세하게 정리할 것입니다.

2.1 소셜계정 로그인 flow

소셜계정 로그인 flow는 소셜계정 로그인 구현 절차를 의미합니다. 쓰니는 소셜계정 로그인 사용자와 이를 서비스로 구현하는 개발자 측면으로 나누어보았습니다. 먼저 사용자가 로그인을 위해 화면에서 보는 것, 사용자가 화면에서 로그인을 위해 처리하는 과정을 세세하게 나누어보았습니다. 이를 개발자 입장에서 OAuth 인증 전과 후로 나누어서 로그인을 위해 접속하는 화면인 로그인 페이지와 OAuth 인증과정으로 구분하여 어떤 프로세스에 의해서 로그인 처리를 하는지로 구분해 보았습니다. 이때, 각 과정에서 frontend와 backend상으로는 어떤 과정이 필요한지를 구체적으로 살펴보았습니다.

2.1.1 사용자 측면

사용자 측면에서 로그인 프로세스는 다음과 같습니다.

로그인 페이지에 접속.

소셜 계정이 등록된 네이버/카카오/페이스북 서비스 아이콘 중 하나를 클릭.

선택한 소셜 계정 로그인 화면에서 본 서비스의 권한을 허용.(계정명, 닉네임을 선택함.)

자신의 계정과 패스워드를 입력한 후 확인

로그인 완료; 로그아웃 버튼이 있는 창으로 이동.

2.1.2 개발자 측면

개발자 측면에서는 로그인 페이지를 접속하고 OAuth 인증 과정으로 구분해볼 수 있습니다.

2.1.2.1 로그인 페이지 접속

(1) Frontend

- Pug : 템플릿 엔진은 pug를 사용하여 base.pug 페이지로 메인 화면을 연결. 
- TailwindCSS (CDN) : 이때, TailwindCSS로 화면의 템플릿 디자인의 상세한 스타일을 제어. 
                     (TailwindCSS CDN link 필요)
    - CDN ; CDN(Content Delivery Network) ; 인터넷 서비스 제공자에 직접 연결되어 데이터를 전송
- 화면에 보여지는 소셜 로그인을 위한 아이콘은 각 서비스마다 제약사항이 있으므로 이를 준수하여 
  템플릿에 적용.

(2) Backend

- ngrok : 패키지를 통해 localhost:PORT 를 tunneling하여 'https:// ' 형태의 보안된 주소로 포워딩함. 
    *ngrok ; Secure tunnels to localhost

- OAuth : 소셜 로그인을 위해서는 'htts://something.com'과 같은 반드시 https의 보안형태인
          주소로만 가능. 각 소셜 서비스의 개발자용 페이지에서 ngrok으로 생성한 보안 주소를 
          유효한 OAuth redirection URI로 세팅.
    *OAuth ; Delegation(접근 권한 위임)을 위한 공개 표준

- OAuth를 설정하면, 각 소셜 서비스마다 제공하는 key값을 알 수 있음.
- Key값과 ngrok으로 생성한 주소는 dotenv 패키지 설치 후 .env에 변수명으로 따로 저장하고, 이를 
  불러와서 사용.
- 메인 페이지에서의 구성 요소 각각은 router로 지정하여 이벤트 처리를 함.

2.1.2.2 OAuth 인증 과정

(1) Frontend

- 각 서비스마다 로그인 버튼 id가 존재하고, id에 따라 OAuth에 설정한 domain으로 이동.
- 기존 소셜 서비스의 로그인 접근 권한 허용 창을 띄움.
- 권한 허용 및 선택 허용(계정명, 닉네임)을 한 후 소셜 서비스 로그인 창을 띄움.
- 로그인 후 출력 페이지인 home.pug로 페이지 전환.

(2) Backend

- MongoDB : 로그인 정보는 getUserCollection으로 존재하는 경우 users 배열에 
            userid, 해당 플랫폼에서의 userID, 플랫폼명, 닉네임, 프로필 이미지 URL 변수를 할당하여 
    mongoDB에 저장.

- JWT(jsonwebtoken) : 로그인 정보에 따라 유효한지 아닌지를 검증한 후 유저가 존재하면 
                      accessToken을 구워 이를 반환.

- AccessTokenCookie : cookie 상태를 `httpOnly:true, secure:true`로 전환.