Federation Authentication

Federation Authentication

Passport는 로컬 인증과 타사 인증을 비슷한 로직 작성 방법으로 처리할 수 있다는 것이 가장 큰 장점이다.

지난 시간에는 로컬 인증을 해보았으니 이번 시간에는 Facebook 타사 인증을 처리해보자.

 Facebook API 발급

타사 인증을 처리하기 위해서는 가장먼저 해야할 일은 해당 회사의 API를 발급받아야 한다.

발급받은 API 정보를 우리의 웹 애플리케이션에 등록하게되면 Facebook에서 전달하는 사용자 정보를 판단할 수 있고 데이터를 가공할 수 있게 된다.

이번 시간에는 사용자의 Facebook 계정 정보를 우리 웹 애플리케이션에서 인증처리를 하는데 사용할 것이기 때문에 Facebook의 API를 발급받도록 하자.

Facebook API는 Facebook Developer 페이지를 통해 발급받을 수 있으며, 반드시 페이스북 계정이 존재해야한다.

Facebook Developer : https://developers.facebook.com/

위의 경로에 접속하면 상단에서 시작하기 메뉴를 클릭하자.

페이스북 계정으로 로그인하면 Facebook Developers에 가입을 해야한다.

이 절차를 통해 3번째 첫 번째 앱 등록 단계에서 API를 발급받을 수 있게 된다.

가입을 완료하면 앱의 대시보드 화면으로 이동되게 된다. 

대시보드 화면에서 스크롤을 내려보면 "제품 추가"메뉴가 나타나는데 여기서 Facebook 로그인에 설정버튼을 클릭한다.

Facebook 로그인 설정을 클릭하면 Facebook 로그인 기능을 내 웹 애플리케이션에 사용할 수 있도록 API를 제공받을 수 있다.

API를 사용하기 위해 내가 소유한 애플리케이션이 어떤 플랫폼인지 선택하는 화면이 나타난다.

각 플랫폼에 맞춘 API 연동 소스를 제공해주기 때문에 알맞는 플랫폼을 선택하자.

웹을 선택하면 사이트의 URL을 등록해야한다.

만약 도메인을 연결해서 사용하고 있다면 메인 도메인 주소를 작성하면 되며, local에서 운영하고 있다면 localhost:포트번호를 등록해주자.

세이브를 누르면 API 연동을 위한 자바스크립트 소스를 제공해주는데 우리는 Passport를 통해 API를 연동을 처리할 예정이므로 Facebook에서 제공해주는 API 연동 소스는 스킵해도 된다.

대신 가장 중요한 정보를 사용해야한다.

Facebook Developer 앱 대시보드 화면 좌측에서 기본 설정에 들어가면 앱 ID와 앱 시크릿 코드를 볼 수 있는데, 이 정보들을 Passport 미들웨어에 작성하여 연동을 할 수 있으므로 반드시 기억해두자.

참고로 이 앱 ID와 앱 시크릿 코드는 절대 외부로 유출해선 안된다.

 Passport-Facebook 패키지 설치

Passport Document 메뉴에 들어가보면 Facebook 인증 방식을 사용하는 방법에 대한 문서를 제공하고 있다.

설치 구문을 통해 passport-facebook 외부 패키지를 설치해야한다.

 Passport Facebook 설정

Passport-Facebook 설치 화면에서 스크롤을 내려보면 설정 방법에 대한 정보도 알려주고 있다.

페이스북 인증을 사용하려면 먼저 Facebook Developers에서 앱을 생성해야하며, 앱 ID와 앱 시크릿 정보를 할당받아야 한다.

또한 Facebook이 사용자들을 우리의 애플리케이션으로 리다이렉션 시키기 위해 애플리케이션에 접근할 수 있도록 승인해야한다.

이것이 바로 우리가 Facebook Developer에서 진행했던 내용이다.

그리고 애플리케이션에 작성할 Strategy를 설정하는 방법을 알려준다.

passport-facebook 모듈을 require()로 애플리케이션에 주입시키고 Strategy로 설정한다.

Strategy 객체를 생성할 때 Facebook Developer에서 API를 생성하고 확인했던 앱 ID와 앱 시크릿 정보를 작성하고, 콜백URL 정보를 반드시 작성해야한다.

이후 Facebook으로부터 인증 처리 결과에 대한 콜백 함수를 작성한다.

Facebook 인증에 대한 확인 콜백은 accessToken, refesthToken, profile 정보를 인자로 받는다.

profile은 Facebook에서 제공하는 사용자 프로필 정보를 포함하고 있다.

중요한건 보안상의 이유로 리다이렉션 URL은 Facebook에 등록한 호스트 내에서 리다이렉션을 해야한다.

예를 들어서 Facebook Developer에서 API를 생성할 때 등록한 사이트 URL을 "http://www.AAA.com"로 등록했다면 AAA.com 도메인 내에서만 리다이렉션을 할 수 있다는 것이다. BBB.com과 같이 다른 도메인으로의 리다이렉션은 할 수 없다. 

문서를 본 정보대로 설정을 작성해보자.

설치한 passport-facebook 패키지를 애플리케이션에 require()로 주입시키고 Strategy로 명시한다.

passport-facebook 패키지를 require()했으니 이제 FacebookStrategy 객체를 생성할 수 있다.

객체를 생성할 때 옵션을 받는데, 앱 ID를 받는 clientID, 앱 시크릿 정보를 받는 clientSecret, callbackURL을 옵션으로 받는다.

추가로 profileFields라는 옵션을 받을 수 있는데 이 옵션은 공식 문서에서 제공해주는 정보는 아니지만 페이스북에게 기본적으로 제공받는 사용자 정보외에 추가적인 정보를 요청하는 옵션이다.

예를 들면 사용자가 우리의 웹에서 페이스북 로그인을 시도하는 경우 우리 웹 애플리케이션은 페이스북에게 사용자 정보를 요청한다.

이 때 페이스북이 우리에게 제공하는 사용자의 정보는 다음과 같다.

다양한 정보들을 주는데 email 정보는 제공해주지 않는다.

따라서 제공받지 못하는 정보들을 추가적으로 요청하기 위해서는 profileFields 속성으로 정의하여 요청해야한다.

이렇게 페이스북에게 요청할 정보들을 옵션으로 작성하고 요청을 시도하면 페이스북은 요청에 대한 응답과 사용자 정보를 콜백함수로 전달해준다.

콜백함수에서 사용자 정보를 담는 profile을 이용해 로그인을 처리하거나 회원가입 비즈니스 로직을 처리할 수 있다.

 로그인 라우트

Facebook으로 로그인을 처리하는 라우트를 작성하는 방법도 알려주고 있다.

페이스북 인증을 처리하기 위해서는 2개의 라우트 작성이 필요하다.

첫번째 라우트는 사용자를 Facebook에 로그인시키기 위해서 Facebook으로 리다이렉션시킨다.

두번째 라우트는 사용자를 로그인 처리해준 후 Facebook이 사용자를 우리의 애플리케이션으로 리다이렉션 시킨다.

유의해야할 점은 콜백을 담당하는 라우트의 URL 경로는 FacebookStrategy 객체를 생성할 때 옵션으로 작성한 callbackURL 정보와 일치해야한다.

이번에도 문서를 토대로 라우트를 작성해보자.

callback 라우트에서 로그인에 성공한다면 successRedirect 경로로 리다이렉션을 발생시켜주며, 로그인에 실패한 경우 failureRedirect 경로로 리다이렉션을 시킨다.

라우트를 작성했으니 라우트로 요청을 보낼 폼을 작성해보자.

로그인 폼에서 Facebook 로그인 메뉴를 추가해준다.

해당 메뉴를 클릭하면 "/auth/facebook" 라우트로 연결될 것이다.

이렇게 기본적인 공통 구조는 작성을 완성했다.

이제 로그인을 처리했을 때 FacebookStrategy로 콜백을 전달할 때 콜백함수에서 사용자 정보를 가공하여 로그인 처리 및 회원가입 처리를 진행하면 완성된다.

 로그인 처리하기

Facebook 라우트를 작성했고 사용자의 Passport의 authenticate() 미들웨어가 가로채도록 처리하였다.

미들웨어에서 'facebook'으로 식별처리를 했으니 이제 FacebookStrategy객체가 생성되고 콜백함수가 수행될 것이다.

콜백함수에 로그인 비즈니스 로직을 작성하자.

Facebook에서의 로그인은 Facebook이 전담을 하고 로그인이 이루어지면 콜백함수의 profile에 사용자 정보가 객체로 전달된다.

전달된 사용자의 페이스북 계정 정보를 이용해서 우리의 데이터 베이스에서 가입된 사용자인지 조회한다.

조회해서 가입된 사용자인 경우 done()함수를 이용해 serializeUser()로 조회한 정보를 전달하여 로그인을 처리한다.

 회원가입 처리하기

우리 사이트의 회원인지 판단을 하기 위해서 사용자의 페이스북 계정 정보를 우리 애플리케이션을 운영하는 데이터 베이스에 저장해야한다.

로그인을 시도할 때 데이터 베이스에 존재하지 않는 회원인 경우 회원가입을 진행한다.

사용자 정보를 저장하는 o2데이터 베이스의 userinfo 테이블은 아래의 구조로 이루어져있다.

Field	설명	옵션
Index	사용자 정보 고유 식별 인덱스	1씩 자동 증가, NOT NULL
id	사용자 아이디 정보	NOT NULL
pwd	사용자 패스워드 정보 (해싱됨)	NOT NULL
salt	해싱된 사용자 패스워드를 구분 하기 위한 salt 정보	NOT NULL
nickname	사용자 별칭	NOT NULL

공통적으로 NOT NULL이라는 특징이 존재하고 이로 인해 빈 데이터를 허용하지 않는다는 특징이 반영되어 있다.

따라서 반드시 pwd 컬럼이나 salt 컬럼에 데이터를 채워넣어야하는데 페이스북은 보안으로 인해 사용자의 페이스북 계정 정보를 전달할 때 계정 비밀번호 정보에 대해서는 전달해주지 않는다.

그러므로 우리는 전달받을 수 있는 한정된 정보를 최대한 활용해서 pwd 컬럼을 채워넣어야한다.

이 구조에서 사용자의 email 정보를 PBKDF2 암호화로 해싱하여 pwd 컬럼의 데이터를 대체할 것이다.

회원가입이 처리된 후 다시 한번 조회를 하여 우리 사이트에 가입된 회원인지 판단하고 자동으로 로그인을 처리해준다.

 로그인 실행하기

그럼 이제 로그인이 정상적으로 처리되는지 확인해보자.

로그인 화면에서 FaceBook Login 메뉴를 클릭한다.

로그인 메뉴를 클릭하면 페이스북의 로그인 화면으로 페이지가 리다이렉션된다.

페이스북 정보를 입력하고 로그인해보자.

로그인하게 되면 다음과 같이 우리의 웹 애플리케이션에 가입하는 화면이 나타난다.

계속 버튼을 클릭하게되면 페이지가 다시 우리의 페이지로 리다이렉션이 이루어지게된다.

회원 가입 처리가 정상적으로 이루어지고 로그인이 처리되면 /welcome페이지로 리다이렉션된다.