리액트 애플 로그인

1.애플 개발자 계정 설정

먼저, 애플개발자계정에서 앱을 등록하고,"SigninwithApple"기능을 활성화 해야합니다.이 과정에서 BundleID와 관련된 설정을 하게 됩니다.

 

2.필요한 라이브러리 설치

리액트에서 애플로그인을 쉽게구현하기 위해react-apple-login같은 라이브러리를 사용할수 있습니다.다음과 같이 설치합니다.

npm install react-apple-login

 

3. 로그인 버튼 구현

애플로그인에서 AppleLogin 라이브러리를 사용한다면 한가지 유의할 점이 있다. 아래와 같이 responseMode 를 query 보내게 되면 이메일 계정 정보를 선택하는 화면이 노출 되지 않는다. 단순히 애플 로그인만 사용 할수 있으니 이메일정보를 받아와야 하는 프로젝트라면 post 방식을 이용해야 한다. 

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

const AppleLoginButton = () => {
  const handleSuccess = (response) => {
    console.log("로그인 성공:", response);
    // 서버에 response를 보내서 사용자 정보를 처리합니다.
  };

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

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

export default AppleLoginButton;

 

4. 서버 백엔드 처리

애플 로그인 후, 받은 인증 코드를 서버로 전송하여 사용자 정보를 가져오는 과정이 필요합니다. 서버에서는 애플의 API를 호출하여 사용자 정보를 검증하고, 필요한 경우 데이터베이스에 저장합니다.

 

5. 애플 로그인 api 예시 (Node.js)

const axios = require('axios');

const verifyAppleToken = async (token) => {
  const response = await axios.post('https://appleid.apple.com/auth/token', {
    // 필요한 파라미터 추가
  });
  return response.data;
};