‣

담당자 - 변찬우#5345

GitHub - GSM-MSG/gauth-react: Created to support GSM login

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/GSM-MSG/gauth-react

프론트엔드상의 직접 구현 방법 →

https://gauth.co.kr/login?client_id={발급받은_clientid}&redirect_uri={설정한_redirectURI}

(E.g. https://gauth.co.kr/login?client_id=01010101010&redirect_uri=https://gcms.msg-team.com/login )

setLocation이후

GAuth code를 받을 프론트 페이지에서 QueryString으로 받습니다. (E.g router.query)

(E.g. http://localhost:8080/login, http://localhost:8080/login?code={발급 코드}

받은 code를 서버에 요청보내 인증/인가 로직을 처리합니다.

버튼 css

.gauth-signin-button {
	display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  max-width: 17rem;
  max-height: 5rem;
  white-space: nowrap;
  background: #2E80CC;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 0.5rem;
  padding: 0.7rem 0;
  font-weight: 600;
  outline: none;
  border: none;
}

Theme 별 css

white

background: white
color: #2E80CC

outlined

background: white
color: #2E80CC
border: 1px solid #2E80CC

Rounded 별 css

default

borderRadius: 0.5rem

rounded

borderRadius: 2rem

CodeSandBox 링크로 들어가면 예시 코드 있음