개요

• 기존에 카카오로그인만을 사용하던 서비스에 구글로그인, 애플로그인을 구현하게 되었다.
• 그런데 구글로그인의 경우 카카오로그인과 같은 방식으로 구현이 가능했지만, 애플로그인의 경우 아무리 시도해도 카카오, 구글의 oAuth 로그인 방식을 그대로 가져올 수 없었다.
• 디버깅을 하면서 애플 로그인의 경우 문서에 언급되지 않거나 자세히 설명되지 않은 많은 제약이 존재함을 알게되었고, 이를 바탕으로 애플 로그인 방법을 정리하고, 주의해야할 점을 적어놓았다.

준비사항

• 애플 개발자 페이지에서 애플 로그인을 사용할 App id를 생성하고 redirect uri를 지정해주어야 한다.
• 애플 정책상 loaclhost를 사용할 수 없기 때문에 테스트를 위한 도메인과 배포 서버(github pages, aws s3과 같은 정적 배포여도 괜찮다)를 가지고 있어야 한다.

구현 방법

공식 문서에서 구현방법을 알려주고 있다.

apple login 스크립트 삽입

• html에 아래의 스크립트를 삽입해주자.

<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"/>

애플 로그인 로직 구현

• 로그인을 구현하는 컴포넌트를 아래와 같이 작성해주자.

export default const loginButton = () => {
	useEffect(() => {
    	AppleID.auth.init({
        clientId : '[CLIENT_ID]', //애플 개발자 설정에서 만든 app id
        scope : "name email",
        redirectURI : '[REDIRECT_URI]', //애플 개발자 설정에서 만든 앱의 로그인 redirect uri
        state : '[STATE]', //CSRF 공격 방지를 위한 임의의 문자열(값을 주지않는경우 작동하지 않음)
        nonce : '[NONCE]', //리플레이 공격을 방지하기 위한 임의의 문자열(값을 주지 않아도 작동함)
        usePopup : true //false인경우 post요청이 들어가기 때문에 반드시 true로 설정해야 함
      });
    } ,[]);
  
  	const onAppleLogin = async () => {
      try {
        const data = await AppleID.auth.signIn();
        const {
          authorization: { code, id_token, state }, 
          user: { email, name: { firstName, lastName} }
        } = data;
        
        
        /*
        로그인 관련 처리 수행
        */
      catch(error) {
        console.dir(error);
      }
    }
  
  
  return<>
    	<button onClick={onAppleLogin}>Apple Login</button>
    </>
}

주의사항

• 카카오 로그인과 같이 직접 location.href를 사용해 리다이렉트를 시키는 방법은 정적 배포만으로는 구현하기 어렵다.
  • scope에 email이 들어가게 되면 redirect uri로 post요청이 들어간다. -> 순수 리액트 + 정적배포만으로는 처리하기 어렵다.
  • code를 가져와 id token을 가져오려고 시도할 때, 카카오, 구글등과 다르게 client secret를 직접 제공하는 것이 아니라 JWT token을 직접 인코딩 해서 제공해야 한다
  • 이 모든걸 무시하고 id_token을 직접 가져오려 한다 해도 애플 로그인 시도시 safari에서 passkey를 사용시 redirect uri옵션을 무시하고 /login으로 리다이렉트시키며, code와 id_token을 제공하지않는다
  • 이런 방법이 필요한 경우, 프론트엔드에서 서버리스 함수등을 관리해주는 것을 추천한다.