Apple 로그인 구현해보기

안녕하세요 프론트엔드 개발자 ken입니다. 오늘은 애플 로그인 동작방법과 간단한 예제에 대해 알아보겠습니다.

애플 로그인은 OAUTH 2.0을 기반으로 동작합니다.

애플 로그인 프로세스

로그인 프로세스는 다음과 같습니다.

1. 사용자가 계정 정보를 입력 후 로그인 요청을 합니다.
2. 애플은 사용자의 아이디와 이메일을 암호화 하고 해당 정보들을 포함하는 ID 토큰을 생성합니다.
3. ID 토큰과 함께 사용자를 웹 사이트로 리디렉션 합니다.
4. 리디렉션 된 웹의 URL에서 토큰을 추출하고 디코딩 하면 사용자의 애플 계정 정보를 가져옵니다. 해당 정보를 바탕으로 웹에서 사용자를 인증하고 세션이 생성됩니다.

애플 로그인 설정

애플 로그인 시 service ID, client ID, redirect URL등을 설정해야 합니다.

1. https://developer.apple.com/account/resources 페이지에 접속합니다.
2. Apple Developer에 로그인 화면이 뜨면 Apple 계정으로 로그인 합니다.
3. Certificates, Identifiers & Profiles 로 이동 후 Identifiers → App IDs → Service IDs → Identifiers를 클릭합니다.

4. Services IDs를 클릭한 후 순서대로 기입하여 Service IDs를 생성합니다.

Description에는 만들려는 service id를 입력하고 Identifier에는 리버스 도메인을 작성합니다.

5. 생성된 Service IDs에서 Sign in with Apple 체크 박스를 체크해 줍니다.

6. configure를 누르면 아래와 같이 팝업이 뜹니다.

Primary App ID 에서 애플로 로그인을 사용할 app id 를 선택

Domains and Subdomains 에는애플로 로그인을 사용할 도메인을 입력합니다.

Return URLs 에는 애플로 로그인 이후 콜백값을 받을 url을 입력하면 됩니다.

Domains and Subdomains 는 프로토콜을 제외한 도메인만 입력하면 되고, Return URLs 은 프로토콜이 포함된 주소를 입력해야 합니다.

save 후 continue 를 누르면 service id 및 redirect url 설정이 완료됩니다.

React 웹에 Sign in with Apple 구현하기

보안을 위해 프론트에서는 code값 까지만 추출하고 이후 백엔드에서 진행됩니다.

AppleLogin.tsx

import AppleLogin from 'react-apple-login'

function AppleLoginButton() {
  const clientId = `${process.env.REACT_APP_APPLE_CLIENT_ID}`
  const redirectURL = process.env.REACT_APP_HOST + '/auth/apple/callback'

  return (
    <>
      <AppleLogin
        clientId={clientId}
        redirectURI={redirectURI}
        render={(renderProps: any) => (
          <SocialButton>
           ...
          </SocialButton>
        )}
      />
    </>
  )
}

clientId에는 사전에 설정한 Identifier값을 넣어줍니다.

redirectURL에는 설정한 콜백 주소를 넣어줍니다.

저는 react-apple-login 라이브러리를 사용하여 간편하게 만들었습니다.

참고

react-apple-login

AppleCallBack.tsx

import {signInApple} from 'api/auth'
import React, {useEffect} from 'react'
import {useDispatch} from 'react-redux'
import {useHistory} from 'react-router-dom'
import {appleSignUpFail, appleSignUpSuccess} from 'redux/modules/appleSignup'
import {changeNameSuccess} from 'redux/modules/changeName'

/**
 * 애플 로그인 시 애플에서 코드값을 받아와 추출하는 페이지
 */
function AppleCallBack() {
  const history = useHistory()
  const dispatch = useDispatch()
  const appleLogin = async () => {
    const code = new URL(window.location.href).searchParams.get('code')
    if (code) {
      sessionStorage.setItem('appleCode', code)
      // 웹 서버로 code 값을 전송
      const user = await signInApple({auth: code, platform: 'web'})
      // 사용자 인증 성공시 메인 페이지로 이동
      if (user) {
        history.push('/')
        return
      }
      dispatch(appleSignUpSuccess())
      history.push('/auth/sign-up')
    } else {
      sessionStorage.removeItem('appleCode')
      dispatch(appleSignUpFail())
      alert('로그인에 실패하였습니다.')
      history.push('/auth/sign-in')
    }
  }
  useEffect(() => {
    appleLogin()
  }, [])

  return <></>
}

export default AppleCallBack

사용자가 로그인 시 콜백 페이지로 리디렉션 됩니다. 해당 페이지의 URL에서 code값을 추출하여 웹 서버로 전송하면 프론트에서는 인증과정이 끝나게 됩니다.

이후 서버에서는 해당 code값을 가지고 애플 서버와 통신하여 인증을 거칩니다. 모든 인증이 완료 되면 세션 값을 받고 로그인이 성공적으로 완료됩니다.