단아산보

AppleLogin 라이브러리에서 email 정보도 가져와서 사이트에서 활용해야 한다면 responseMode 를 form_post 로 설정하고 값을 보내고 다시 post 로 데이터를 받아야 한다.

post 데이터를 받는 부분이기 때문에 백엔드로 받아서 front 에서 토큰을 저장하는 로직을 구현 해주어야 한다. 

import React from 'react';
import AppleLogin from 'react-apple-login';

const AppleLoginButton = () => {
  const handleSuccess = (response) => {
    console.log("로그인 성공:", response);
    // 서버에 response.id_token을 보내서 사용자 정보를 처리합니다.
    fetch('https://yourapp.com/api/auth/apple', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id_token: response.id_token,
      }),
    })
    .then(res => res.json())
    .then(data => {
      console.log("서버 응답:", data);
      // 사용자 정보를 처리합니다.
    })
    .catch(error => {
      console.error("서버 통신 실패:", error);
    });
  };

  const handleError = (error) => {
    console.error("로그인 실패:", error);
  };

  return (
    <AppleLogin
      clientId="com.yourapp.identifier" // 애플 개발자 계정에서 등록한 클라이언트 ID
      redirectURI="https://yourapp.com/auth/apple/callback" // 리다이렉트 URI
      responseType="id_token" // id_token으로 변경
      responseMode="form_post" // POST 방식으로 변경
      usePopup={true} // 팝업으로 로그인할지 여부
      onSuccess={handleSuccess}
      onError={handleError}
    />
  );
};

export default AppleLoginButton;

이때 redirectURI 는 백엔드 api url 을 주어야 하고 아래와 같이 백엔드에서는 post 로 받아서 다시 front 로 /front/login 으로 id 와 email 정보를 넘겨 주고 front 에서는 세션 처리를 하면 된다.

email 값이 안넘어 온다면 form_post 로 변경해 보길 권한다. 

const appleToken = async (request, response) => {
    const { code } = request.body;

    if (!code) {
        return response.status(400).json({ message: 'Code is required.' });
    }

    const result = (data, message) => {
        if (message === messageMap.OK) {
            const { id, email } = data;
            response.redirect(`https://프런트도메인/front/login?snsid=${id}&email=${email}`);
        } else {
            response.status(message.status).json({ message: message.string });
        }
    };
};