본문으로 건너뛰기

카카오 로그인 (웹)

웹 로그인은 리디렉션 URI로 페이지를 이동해야 하므로 추가 과정이 필요합니다.

팁

웹에서 지원하는 API는 네이티브와 같은 응답 필드와 타입을 사용합니다. loginWithKakao와 refreshToken은 웹에서 지원하지 않습니다.

setAccessTokenWeb과 issueAccessTokenWithCodeWeb은 웹 전용 함수입니다. Android·iOS에서 호출하면 setAccessTokenWeb은 동기적으로 Package-UnsupportedPlatform 오류를 던지고, issueAccessTokenWithCodeWeb은 같은 오류 코드로 Promise를 거부합니다. 네이티브 로그인은 login 또는 loginWithKakao를 사용하며, 토큰 저장은 네이티브 SDK가 처리합니다.

로그인하기​

카카오 로그인으로 회원가입, 로그인, 추가 동의 받기, 약관 동의 받기 등을 할 수 있습니다.

카카오 콘솔에서 리디렉션 URI 추가​

카카오 콘솔의 카카오 로그인에서 리디렉션 URI를 추가합니다.

feat

경고

위 예시는 개발 환경에서 포트 80을 사용한 경우입니다. 개발 환경과 릴리스 환경에서 필요한 리디렉션 URI를 모두 등록해야 합니다.

const { code } = useGlobalSearchParams<{ code?: string }>();
const accessTokenIssued = useRef(false);
useEffect(() => {
  const go = async () => {
    const { accessToken } = await issueAccessTokenWithCodeWeb({
      code: code!,
      redirectUri: 'http://localhost',
    });
    setAccessTokenWeb(accessToken);
    accessTokenIssued.current = true;
  };

  if (code && !accessTokenIssued.current) {
    go();
  }
}, [code]);

1단계. 간편 로그인 후 이동한 페이지의 검색 매개변수에서 인가 코드 받기​

login() 함수를 호출하면 카카오 로그인 페이지로 이동합니다.

웹 플랫폼에서는 web 객체를 전달해야 합니다.

웹에서도 공통 옵션인 scopes, serviceTerms, prompts, nonce를 전달합니다. SelectAccount는 select_account로 변환합니다. useKakaoAccountLogin: true이면 카카오톡을 통한 로그인을 사용하지 않지만, web.throughTalk을 지정하면 그 값을 우선합니다.

loginHint는 카카오계정 로그인 화면의 ID 입력란에 미리 채울 값입니다. loginHint와 web.loginHint를 함께 전달하면 공통 옵션인 loginHint를 우선합니다.

web.scope, web.serviceTerms, web.prompt는 각각 대응하는 공통 옵션보다 우선합니다. nonce는 공통 옵션을 web.nonce보다 우선합니다.

import { login } from '@react-native-kakao/user';

...

login({
  web: {
    redirectUri: 'http://localhost',
    prompt: ['select_account'],
  },
})
주의

콘솔에 등록한 redirectUri와 login, issueAccessTokenWithCodeWeb 호출에 사용하는 값은 모두 같아야 로그인이 동작합니다.

인자들에 대한 자세한 정보는 공식 문서를 참고하세요.

2단계. 인가 코드로 액세스 토큰 발급받기​

issueAccessTokenWithCodeWeb() 함수를 호출해 인가 코드로 액세스 토큰을 발급받을 수 있습니다.

발급받은 액세스 토큰을 setAccessTokenWeb() 함수에 전달합니다.

다음은 Expo Router에서 검색 매개변수의 code로 로그인을 완료하는 예시입니다.

const { code } = useGlobalSearchParams<{ code?: string }>();
const accessTokenIssued = useRef(false);
useEffect(() => {
  const go = async () => {
    const { accessToken } = await issueAccessTokenWithCodeWeb({
      code: code!,
      redirectUri: 'http://localhost',
    });
    setAccessTokenWeb(accessToken);
    accessTokenIssued.current = true;
  };

  if (code && !accessTokenIssued.current) {
    go();
  }
}, [code]);
참고

위 코드는 예시입니다. 검색 매개변수에서 code를 얻은 뒤 issueAccessTokenWithCodeWeb, setAccessTokenWeb 을 순서대로 호출해야 합니다.

인자들에 대한 자세한 정보는 공식 문서를 참고하세요.

응답​

Promise로 토큰과 관련된 정보가 반환됩니다.

응답은 다음과 같습니다.

{
  tokenType: string;
  accessToken: string;
  idToken?: string;
  expiresIn: number; // unix
  refreshToken: string;
  refreshTokenExpiresIn: number; // unix
  scope?: string;
};