Redux에서 Facebook 통합을 이용한 사용자 인증에 대한 실용 가이드

제목: Redux를 사용한 사용자 인증 플로우

이 블로그 포스트에서는 Redux를 사용하여 사용자를 인증하는 과정과 클라이언트 측 사용자 인증 코드를 구성하는 최적의 방법에 대해 살펴보고, Redux에 페이스북 로그인을 통합하여 웹 애플리케이션에서 인증 플로우를 처리하는 포괄적인 가이드를 제공할 것입니다.

Redux를 사용하여 사용자 인증하기

Redux를 사용하여 사용자를 인증하는 경우, 주로 인증된 사용자 데이터를 관리하는 authed 리듀서를 생성하는 것이 일반적인 방법입니다. 초기 상태와 리듀서를 설정하는 예제입니다:

const initialState = {
  accessToken: null,
  followings: {},
  likes: {},
  playlists: [],
  user: null
};

export default function authed(state = initialState, action) {
  switch (action.type) {
    case types.RECEIVE_ACCESS_TOKEN:
      return Object.assign({}, state, {
        accessToken: action.accessToken
      });
    // ... 다른 케이스
    default:
      return state;
  }
}

사용자가 인증 플로우를 완료하면, 인증된 상태(authed)에서 액세스 토큰 속성을 설정할 수 있습니다. 이 토큰을 사용하여 애플리케이션 전체에서 사용자가 인증되었는지 확인할 수 있습니다:

if (authed.accessToken) {
  // 로그인한 사용자에게는 다른 내용을 표시하거나 다른 작업을 수행합니다.
}

또한, 쿠키에 액세스 토큰을 저장하여 사용자가 애플리케이션으로 돌아올 때 인증을 유지할 수 있습니다. 쿠키에서 액세스 토큰을 읽고 유효성을 확인하여 사용자가 여전히 인증되어 있는지 확인할 수 있습니다:

// 페이스북의 /me 엔드포인트를 사용한 예제
const profileEndpoint = 'https://api.facebook.com/me';

// 액세스 토큰이 여전히 유효한지 확인합니다.
fetch(`${profileEndpoint}?access_token=${authed.accessToken}`)
  .then(response => {
    // 응답 처리
  })
  .catch(error => {
    // 에러 처리
  });

사용자가 로그아웃한 경우, 기본 상태로 authed 상태를 단순히 재설정하고 쿠키를 해제할 수 있습니다:

case types.RESET_AUTHED:
  return Object.assign({}, initialState);

참고 목적으로 해당 GitHub 저장소에 있는 이 코드 구현을 확인해 주십시오.

페이스북 로그인을 Redux에 통합하기

Redux에 페이스북 로그인을 통합하는 것은 유사한 접근 방식을 따릅니다. 로그인 프로세스를 처리하고 데이터를 저장하기 위해 사용자에 대한 추가적인 리듀서를 생성할 수 있습니다. 이 리듀서는 access_token, isLogin, isProcessingLogin, 그리고 profile과 같은 필드를 고려합니다:

const initialState = {
  access_token: null,
  isLogin: false,
  isProcessingLogin: true,
  profile: {}
};

export default function user(state = initialState, action) {
  switch (action.type) {
    // 로그인 액션 처리
    default:
      return state;
  }
}

그런 다음 로그인(logIn) 및 로그아웃(logOut)과 같은 액션을 정의하여 로딩, 에러 처리 및 UI 업데이트를 처리하는 해당 필드를 업데이트할 수 있습니다:

// 액션 생성자
const logIn = (params) => {
  return dispatch => {
    dispatch({ type: 'PROCESSING_LOGIN' });
    makeAPICall(params)
      .then(
        res => dispatch({ type: 'SUCCESS_LOGIN', payload: res }),
        err => dispatch({ type: 'FAIL_LOGIN', payload: err })
      );
  };
};

// 리듀서
const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'PROCESSING_LOGIN':
      return Object.assign({}, state, {
        isProcessingLogin: true
      });
    case 'SUCCESS_LOGIN':
      return Object.assign({}, state, {
        isLogin: true,
        isProcessingLogin: false,
        access_token: action.payload.meta.access_token
      });
    // ... 다른 케이스
    default:
      return state;
  }
};

코드를 특정 요구 사항에 맞게 수정하고 토큰 추가 또는 특정 요청에 대한 미들웨어 구축과 같은 추가적인 사용자 정의를 고려해 주십시오.

결론

인증은 웹 애플리케이션의 기본적인 요소이며, 효과적으로 처리하는 방법을 이해하는 것이 중요합니다. Redux의 강력한 기능을 활용하여 신뢰성 있고 체계적인 인증 플로우를 만들 수 있습니다. 사용자 인증 또는 페이스북 로그인을 통합하든지, Redux는 일관된 방식으로 인증 상태를 관리하기 위한 견고한 기반을 제공합니다.

이 블로그 포스트에서 제공된 예제와 코드 스니펫을 따라하면 Redux 기반 애플리케이션에서 견고하고 안전한 인증 프로세스를 구축하는 한 걸음 앞으로 나갈 수 있습니다.

참고 자료 : 

reactjs