로그인

로그인 기능

User Scenario

• 이메일과 패스워드를 입력하여 로그인을 한다.

• 이메일 및 패스워드 값이 유효성에 어긋날시 에러 메시지가 노출된다.

• 유효성에 어긋나거나 값이 채워지지 않은 경우 로그인 버튼은 Disabled 상태가 된다.

• 헤더에 로그인 페이지로 이동되는 링크가 제공된다.

• 로그인된 사용자는 헤더에 로그인 링크가 사라지고 장바구니 링크와 로그아웃 버튼이 제공된다.

• 로그인에 성공하면 이전 페이지로 이동한다.

Unit Test

LoginForm.test.tsx

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Route } from "react-router-dom";

import VALID_MSG from "@/constants/validMsg";
import { withAllContexts, withRouter } from "@/tests/utils";

import LoginForm from "./LoginForm";

const context = describe;

describe("LoginForm", () => {
  function renderLoginForm() {
    return render(
      withAllContexts(withRouter(<Route path="/" element={<LoginForm />} />))
    );
  }

  it("render correctly", () => {
    renderLoginForm();

    expect(screen.getByRole("textbox", { name: "E-mail" })).toBeInTheDocument();
    expect(screen.getByLabelText("Password")).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "로그인" }));
  });

  context("when email value is invalid", () => {
    it(`display error message "${VALID_MSG.EMAIL}"`, async () => {
      renderLoginForm();

      const emailInput = screen.getByRole("textbox", { name: "E-mail" });
      await userEvent.type(emailInput, "xxxxxxx");

      expect(emailInput).toHaveValue("xxxxxxx");
      expect(screen.getByText(VALID_MSG.EMAIL)).toBeInTheDocument();
    });

    it("submit button is disabled", async () => {
      renderLoginForm();

      const emailInput = screen.getByRole("textbox", { name: "E-mail" });
      await userEvent.type(emailInput, "xxxxxxx");

      expect(screen.getByRole("button", { name: "로그인" })).toBeDisabled();
    });
  });

  context("when password value is invalid", () => {
    it(`display error message "${VALID_MSG.PASSWORD}"`, async () => {
      renderLoginForm();

      const passwordInput = screen.getByLabelText("Password");
      await userEvent.type(passwordInput, "xxxxxxx");

      expect(passwordInput).toHaveValue("xxxxxxx");
      expect(screen.getByText(VALID_MSG.PASSWORD)).toBeInTheDocument();
    });

    it("submit button is disabled", async () => {
      renderLoginForm();

      const passwordInput = screen.getByLabelText("Password");
      await userEvent.type(passwordInput, "xxxxxxx");

      expect(screen.getByRole("button", { name: "로그인" })).toBeDisabled();
    });
  });

  context("when the form is empty", () => {
    it("submit button is disabled", async () => {
      renderLoginForm();

      expect(screen.getByRole("button", { name: "로그인" })).toBeDisabled();
    });
  });
});

LoginFormStore.test.ts

import VALID_MSG from "@/constants/validMsg";

import LoginFormStore from "./LoginFormStore";

const context = describe;

describe("LoginFormStore", () => {
  let store: LoginFormStore;

  beforeEach(() => {
    store = new LoginFormStore();
  });

  describe("change email", () => {
    it("email is changed", () => {
      const email = "[e-mail]";
      store.changeEmail(email);

      expect(store.email).toBe(email);
    });

    context("when value is invalid", () => {
      it(`error is ${VALID_MSG.EMAIL}`, () => {
        store.changeEmail("invalid email");

        expect(store.error).toBe(VALID_MSG.EMAIL);
      });
    });

    context("when value is valid", () => {
      it("error is empty", () => {
        store.changeEmail("[e-mail]");

        expect(store.error).toBeFalsy();
      });
    });
  });

  describe("change password", () => {
    it("password is changed", () => {
      const password = "password";
      store.changePassword(password);

      expect(store.password).toBe(password);
    });

    context("when value is invalid", () => {
      it(`error is ${VALID_MSG.PASSWORD}`, () => {
        store.changePassword("123123");

        expect(store.error).toBe(VALID_MSG.PASSWORD);
      });
    });

    context("when value is valid", () => {
      it("error is empty", () => {
        store.changePassword("password");

        expect(store.error).toBeFalsy();
      });
    });
  });

  describe("with reset", () => {
    it("all field values are initialized", () => {
      store.changeEmail("[e-mail]");
      store.changePassword("password");

      store.reset();

      expect(store.email).toBeFalsy();
      expect(store.password).toBeFalsy();
    });
  });
});

E2E Test

/// <reference types="cypress" />

// 이메일과 패스워드를 입력하여 로그인을 한다.
// 이메일 및 패스워드 값이 유효성에 어긋날시 에러 메시지가 노출된다.
// 유효성에 어긋나거나 값이 채워지지 않은 경우 로그인 버튼은 Disabled 상태가 된다.
// 헤더에 로그인 페이지로 이동되는 링크가 제공된다.
// 로그인된 사용자는 헤더에 로그인 링크가 사라지고 장바구니 링크와 로그아웃 버튼이 제공된다.
// 로그인에 성공하면 이전 페이지로 이동한다.

describe("Login", () => {
  beforeEach(() => {
    cy.visit("");
  });

  context("when email and password values are invalid", () => {
    it("unable to login", () => {
      cy.findByRole("link", { name: "Login" }).should("exist").click();

      cy.findByRole("textbox", { name: "E-mail" }).type("invalid email");
      cy.findByText("이메일 형식이 올바르지 않습니다.").should("exist");

      cy.findByLabelText("Password").type("invalid password1@");
      cy.findByText("비밀번호 형식이 올바르지 않습니다.").should("exist");

      cy.findByRole("button", { name: "로그인" }).should("be.disabled");
    });
  });

  context("when logged in", () => {
    it("login link disappears and is replaced by cart link and logout button", () => {
      cy.login();
      cy.visit("");
      cy.findByRole("link", { name: "Login" }).should("not.exist");
      cy.findByRole("link", { name: "Cart" }).should("exist");
      cy.findByRole("button", { name: "Logout" }).should("exist");
    });

    it("redirected back to the previous page", () => {
      cy.visit("products/0BV000PRO0001");

      cy.findByRole("link", { name: "Login" }).should("exist").click();
      cy.findByRole("textbox", { name: "E-mail" }).type("[e-mail]");
      cy.findByLabelText("Password").type("password");
      cy.findByRole("button", { name: "로그인" }).click();

      cy.url().should("include", "/products/0BV000PRO0001");
    });
  });
});

Authorization

인증을 받은 사용자가 이후 인증이 필요한 서비스를 이용할 때 서버에서 인증된 사용자인지 확인 후 허가를 해주는 것

세션(Session)

서버에서 가지고 있는 객체로, 특정 사용자의 로그인 정보를 유지하기 위해 사용한다.

• 기본적으로 HTTP는 무상태 프로토콜로 서버는 클라이언트의 상태를 보존하지 않는다.

• 세션을 이용하여 클라이언트의 상태를 유지할 수 있다.

• 서버가 클라이언트에게 고유한 Session ID 를 부여하면, 클라이언트는 서버에 요청할 때 마다Session ID 를 함께 전송하여 서버에게 자신이 누구인지 알려주는 역할을 수행한다.

세션 인증 방식

1. 로그인 요청

2. 서버에서 세션 ID를 발급하고 서버 메모리에 저장 후 클라이언트에게 전달

3. 브라우저에 세션 정보를 저장 & 이후 세션 ID와 함께 요청 수행

4. 서버에 저장된 세션 리스트를 확인 후 인가 처리

장점

• 클라이언트에게 세션 ID를 제공하고 회원에 대한 중요 정보는 서버에서 관리한다.

• 클라이언트가 가지고 있는 세션 ID 자체에는 민감한 개인정보를 포함하고 있지 않다.

• 메모리에 있는 세션 아이디들을 제어 가능하다

단점

• 서버의 메모리는 휘발성 메모리 (재부팅하면 날라감)

• 서버가 여러대인 경우 세션 유지가 번거로움

• 서버에서 세션 정보를 기록하고 관리하므로 트래픽이 몰릴 경우 서버에 메모리 부하가 존재할 수 있다.

쿠키(Cookie)

사용자가 특정 사이트를 방문할 때 사용자 컴퓨터에 저장하는 기록 파일

• 서버에 자원을 전혀 사용하지 않음

• 쿠키 정보는 항상 서버에 전송된다.

• 보안에 민감한 데이터는 저장하면 안된다.

• 쿠키는 http, https를 구분하지 않고 전송 (secure 옵션을 적용하면 https 경우만 전송)

HttpOnly: 자바스크립트에서 접근 불가, HTTP 전송에만 사용됨 (XSS 공격 방지)

SameSite: XSRF 공격 방지, 요청 도메인과 쿠키에 설정된 도메인이 같은 경우만 쿠키 전송

OAuth

Open Authorization의 약자로 인증과 권한 부여를 위한 개방형 프로토콜

사용자가 자신의 리소스를 다른 애플리케이션과 공유할 수 있도록 허용하는 인증 권한부여 메커니즘

• 주로 소셜 로그인 기능을 이용할 때 사용된다.(Google, Kakao)

• 사용자는 자신의 계정 정보를 직접 제공하지 않고도 다른 서비스의 접근 권한을 부여할 수 있다.

• 사용자가 설정한 권한에 대해서만 접근할 수 있다. with Access token

OAuth 2.0 핵심 구성 요소

• Resource Owner: 특정 서비스를 사용하려는 사용자

• Client: 특정한 개인/회사가 만든 서비스(웹/앱 서버)를 의미

• Resource Server: 사용자의 개인정보를 가지고 있는 서버(Google, Kakao 등)

  • Client는 Access token을 Resource Server에 보내서 사용자의 개인정보를 받음

• Authorization Server: 실질적인 권한을 부여하는 서버

  • 사용자는 자신의 SNS 계정 정보를 넘겨 Authroization Code를 받음

  • Client는 사용자로부터 받은Authroization Code를 넘겨 Access Token을 받는다

OAuth 2.0 동작 예시

1. SNS 로그인 (클라이언트 → 웹서버)

2. 서버에서 Client ID, Redirect URI를 클라이언트에게 응답 (서버 → 클라이언 트)

3. 서버에서 받은 값들을 이용해 SNS 로그인 페이지 요청 (클라이언트 → Authorization Server)

4. SNS 로그인 페이지 제공 (Authorization Sever → 클라이언트)

5. 제공받은 SNS 로그인 페이지에서 로그인 수행 (클라이언트 → Authorization Server)

6. 로그인이 성공하면 Authorization Code 전달 (Authroization Server → 클라이언트)

7. 전달받은 Authorization Code를 가지고 Redirect URI 접속 (클라이언트 → 서버)

8. Autorization Code를 Authorization Server에 전달 (서버 → Authroization Server)

9. Access Token 발급 (Authroization Server → 서버)

10. Access Token으로 API 호출 (서버 → Resource Server)

11. 요청된 자원 전달 (Resource Server → 서버)

12. 서비스 제공 (서버 → 클라이언트)

JWT (Json Web Token)

인증에 필요한 정보를 암호화한 JSOn 형식의 토큰

• 토큰을 HTTP Header에 담아 요청해서 서버가 클라이언트를 식별할 수 있도록 한다.

  • Authorization: Barer {JWT}

• 인증이 완료되면 서버에서 Token을 발급하고 저장하지 않고 클라이언트에게 통째로 전달한다.

JSON(JavaScript Object Notation) → 데이터를 주고 받기 위한 데이터 포맷 중 하나 (key: value) 쌍을 이루는 객체

JWT 구성요소

• Header → 토큰 타입(jwt), signature에 사용되는 해싱 알고리즘 등의 정보 포함

• Payload → key:value 형식의 정보(claim)들로 구성됨

• Signature → Header + Payload + Server Secret Key 정보를 합하여 암호화(해싱 알고리즘)을 통해 생성된 값

토큰 관리하기

Local Storage

Cookie

토큰 주입하기

Axios Interceptor