본문으로 건너뛰기

appLogin

토스 인증 흐름을 시작해 사용자를 로그인시킵니다. 호출하면 사용자 동의 화면이 자동으로 표시되며, 사용자가 동의를 완료하면 authorizationCode와 referrer를 반환합니다. 반환된 인가 코드는 서버 측 인증 흐름에 즉시 전달해야 합니다.

시그니처​

import { appLogin } from '@apps-in-toss/web-framework';

declare function appLogin(): Promise<{
  authorizationCode: string;
  referrer: 'DEFAULT' | 'SANDBOX';
}>;

파라미터​

없음.

반환값​

Promise<{ authorizationCode: string; referrer: 'DEFAULT' | 'SANDBOX' }>

필드타입설명
authorizationCodestring서버 측 인증 흐름에 전달할 단기 유효 인가 코드.
referrer'DEFAULT' | 'SANDBOX'로그인 진입 경로. 'SANDBOX'는 개발/테스트 환경을 나타냅니다.

권한​

권한이 필요하지 않습니다 — appLogin은 별도의 PermissionName에 바인딩되지 않습니다. 호출 시 사용자 동의 화면이 자동으로 표시됩니다. 다른 네임스페이스에서 권한을 처리하는 방식은 Guides — 권한 처리 패턴을 참고하세요.

예제​

최소 예제​

import { appLogin } from '@apps-in-toss/web-framework';

async function handleLogin() {
  const { authorizationCode, referrer } = await appLogin();

  // 획득한 인가 코드와 referrer를 서버로 전달해요.
  console.log('authorizationCode:', authorizationCode, 'referrer:', referrer);
}

실전 예제 — 로그인 버튼에 연결하기​

import { appLogin } from '@apps-in-toss/web-framework';
import { useState } from 'react';

// `sendToServer`는 앱의 실제 API 클라이언트로 대체하세요.
declare function sendToServer(params: { authorizationCode: string; referrer: string }): Promise<void>;

function LoginButton() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleClick = async () => {
    setLoading(true);
    setError(null);
    try {
      const { authorizationCode, referrer } = await appLogin();
      await sendToServer({ authorizationCode, referrer });
    } catch (err) {
      setError('로그인에 실패했어요. 다시 시도해 주세요.');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <button type="button" onClick={handleClick} disabled={loading}>
        {loading ? '로그인 중...' : '토스로 로그인'}
      </button>
      {error && <p>{error}</p>}
    </>
  );
}

직접 실행해 보기​

sdk-example의 Auth 페이지에서 appLogin 카드를 실행해 결과를 확인할 수 있습니다.

sdk-example에서 실행해 보기

관련 API​

관련 가이드​

외부 참조​