Apple로 사용자 로그인

이 문서에서는 Identity Platform을 사용하여 웹 앱에 Apple로 로그인을 추가하는 방법을 보여줍니다.

시작하기 전에

  • HTML 및 자바스크립트에서 Identity Platform을 사용하는 기본 웹 앱을 만듭니다. 자세한 방법은 빠른 시작을 참조하세요.

  • Apple Developer Program에 가입합니다.

Apple로 앱 구성

Apple 개발자 사이트에서 다음 단계를 따르세요.

  1. 웹용 Apple로 로그인 구성의 단계를 따릅니다. 여기에는 다음이 포함됩니다.

    1. 다음과 같은 반환 URL을 등록합니다.

      https://project-id.firebaseapp.com/__/auth/handler

    2. 다음 URL에서 파일을 일시적으로 호스팅하여 도메인을 확인합니다.

      https://project-id.firebaseapp.com/.well-known/apple-developer-domain-association.txt

    또한 서비스 ID 및 Apple 팀 ID를 기록해 둡니다. 이러한 ID는 다음 섹션에서 필요합니다.

  2. Apple 비공개 키를 사용하여 로그인을 만듭니다. 다음 섹션에서 키 및 ID가 필요합니다.

  3. Identity Platform을 사용하여 사용자에게 이메일을 보내는 경우 다음 이메일을 사용하여 Apple 비공개 이메일 릴레이 서비스로 프로젝트를 구성합니다.

    noreply@project-id.firebaseapp.com

    또한 앱에 맞춤 이메일 템플릿이 있는 경우 이 템플릿을 사용할 수 있습니다.

Apple의 익명 처리된 데이터 요구사항 준수

Apple은 사용자에게 이메일 주소 등의 데이터를 익명처리할 수 있는 옵션을 제공합니다. Apple은 이 옵션을 선택한 사용자에게 privaterelay.appleid.com 도메인이 있는 난독화된 이메일 주소를 할당합니다.

앱은 익명처리된 Apple ID와 관련된 모든 관련 개발자 정책 또는 Apple의 약관을 준수해야 합니다. 여기에는 개인 식별 정보(PII)를 익명 처리된 Apple ID와 연결하기 전에 사용자 동의를 얻는 과정이 포함됩니다. PII와 관련된 작업에는 다음이 포함되지만 이에 국한되지는 않습니다.

  • 익명처리된 Apple ID에 이메일 주소를 연결하거나 그 반대로 연결합니다.
  • 익명처리된 Apple ID에 전화번호 연결하거나 그 반대로 연결합니다.
  • 익명처리된 Apple ID에 익명처리되지 않은 소셜 사용자 인증 정보(Facebook, Google 등)를 연결하거나 그 반대로 연결합니다.

자세한 내용은 Apple 개발자 계정의 Apple 개발자 프로그램 라이선스 계약을 참조하세요.

Apple을 공급업체로 구성

Apple을 ID 공급업체로 구성하려면 다음 단계를 따르세요.

  1. Google Cloud 콘솔에서 ID 공급업체 페이지로 이동합니다.

    ID 공급업체 페이지로 이동

  2. 공급업체 추가를 클릭합니다.

  3. 목록에서 Apple을 선택합니다.

  4. 플랫폼에서 웹을 선택합니다.

  5. 서비스 ID, Apple 팀 ID, 키 ID, 비공개 키를 입력합니다.

  6. 승인된 도메인 아래의 도메인 추가를 클릭하여 앱의 도메인을 등록합니다. 개발 용도로는 localhost가 이미 기본적으로 사용 설정되어 있습니다.

  7. 애플리케이션 구성에서 설정 세부정보를 클릭합니다. 스니펫을 앱 코드에 복사하여 Identity Platform 클라이언트 SDK를 초기화합니다.

  8. 저장을 클릭합니다.

클라이언트 SDK로 사용자 로그인

사용자를 로그인 처리하려면 다음 단계를 따르세요.

  1. ID apple.com을 사용하여 OAuthProvider 제공업체 객체의 인스턴스를 만듭니다.

    웹 버전 9

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('apple.com');
    auth_apple_provider_create.js

    웹 버전 8

    var provider = new firebase.auth.OAuthProvider('apple.com');
    apple.js

  2. 선택사항: OAuth 범위를 추가합니다. 범위는 Apple에서 요청할 데이터를 지정합니다. 더 민감한 정보에는 특정 범위가 필요할 수 있습니다. 기본적으로 이메일 주소당 계정 1개가 사용 설정되어 있으면 Identity Platform은 email 및 name 범위를 요청합니다.

    웹 버전 9

    provider.addScope('email');
provider.addScope('name');
    auth_apple_provider_scopes.js

    웹 버전 8

    provider.addScope('email');
provider.addScope('name');
    apple.js

  3. 선택사항: 인증 흐름을 현지화합니다. 언어를 지정하거나 기기의 기본 언어를 사용할 수 있습니다. 지원되는 언어는 Apple로 로그인 문서를 참조하세요.

    웹 버전 9

    provider.setCustomParameters({
  // Localize the Apple authentication screen in French.
  locale: 'fr'
});
    auth_apple_provider_params.js

    웹 버전 8

    provider.setCustomParameters({
  // Localize the Apple authentication screen in French.
  locale: 'fr'
});
    apple.js

  4. 제공업체 객체를 사용하여 사용자를 로그인 처리합니다. 팝업 창을 열거나 현재 페이지를 리디렉션할 수 있습니다. 휴대기기에서는 사용자가 리디렉션하기 더 용이합니다.

    signInWithPopup()을 호출하면 팝업이 나타납니다.

    웹 버전 9

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // The signed-in user info.
    const user = result.user;

    // Apple credential
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;

    // IdP data available using getAdditionalUserInfo(result)
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The credential that was used.
    const credential = OAuthProvider.credentialFromError(error);

    // ...
  });
    auth_apple_signin_popup.js

    웹 버전 8

    firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;

    // You can also get the Apple OAuth Access and ID Tokens.
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;

    // IdP data available using getAdditionalUserInfo(result)
  // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;

    // ...
  });
    apple.js

    페이지를 리디렉션하려면 먼저 signInWithRedirect()를 호출합니다.

    signInWithRedirect, linkWithRedirect, reauthenticateWithRedirect를 사용할 때는 권장사항을 따르세요.

    웹 버전 9

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_apple_signin_redirect.js

    웹 버전 8

    firebase.auth().signInWithRedirect(provider);
    apple.js

    그런 다음 페이지가 로드될 때 getRedirectResult()를 호출하여 Apple 토큰을 검색합니다.

    웹 버전 9

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

// Result from Redirect auth flow.
const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    const credential = OAuthProvider.credentialFromResult(result);
    if (credential) {
      // You can also get the Apple OAuth Access and ID Tokens.
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    }
    // The signed-in user info.
    const user = result.user;
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The credential that was used.
    const credential = OAuthProvider.credentialFromError(error);

    // ...
  });
    auth_apple_signin_redirect_result.js

    웹 버전 8

    // Result from Redirect auth flow.
firebase
  .auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // You can get the Apple OAuth Access and ID Tokens.
      var accessToken = credential.accessToken;
      var idToken = credential.idToken;

      // IdP data available in result.additionalUserInfo.profile.
      // ...
    }
    // The signed-in user info.
    var user = result.user;
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;

    // ...
  });
    apple.js

    이 시점에 오류를 파악해서 처리할 수도 있습니다. 오류 코드 목록은 API 참조를 확인하세요.

다른 많은 ID 공급업체와는 달리 Apple에서는 사진 URL을 제공하지 않습니다.

사용자가 앱에 실제 이메일을 공유하지 않는 경우 Apple에서는 사용자가 대신 공유할 고유 이메일 주소를 프로비저닝합니다. 이 이메일은 xyz@privaterelay.appleid.com 형식을 사용합니다. 비공개 이메일 릴레이 서비스를 구성한 경우 Apple은 익명처리된 이메일 주소로 전송된 이메일을 사용자의 실제 이메일 주소로 전달합니다.

Apple은 사용자가 처음 로그인할 때만 표시 이름과 같은 사용자 정보를 앱과 공유합니다. 대부분의 경우 Identity Platform은 이 데이터를 저장하므로 향후 세션 중에 firebase.auth().currentUser.displayName을 사용해 데이터를 가져올 수 있습니다. 하지만 Identity Platform과 통합하기 전에 사용자가 Apple을 사용하여 앱에 로그인할 수 있도록 허용한 경우에는 사용자 정보를 사용할 수 없습니다.

다음 단계