Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

JavaScript로 Apple을 사용하여 인증

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Firebase SDK를 사용하여 종단 간 OAuth 2.0 로그인 흐름을 수행함으로써 사용자가 Apple ID를 사용하여 Firebase에 인증하도록 할 수 있습니다.

시작하기 전에

Apple을 사용하여 사용자를 로그인하려면 먼저 Apple 개발자 사이트에서 Apple로 로그인을 구성한 다음 Firebase 프로젝트의 로그인 공급자로 Apple을 활성화합니다.

Apple 개발자 프로그램에 참여

Apple로 로그인은 Apple 개발자 프로그램 회원만 구성할 수 있습니다.

Apple로 로그인 구성

Apple 개발자 사이트에서 다음을 수행합니다.

  1. 웹용 Apple로 로그인 구성 의 첫 번째 섹션에 설명된 대로 웹 사이트를 앱에 연결합니다. 메시지가 표시되면 다음 URL을 반환 URL로 등록합니다.

    https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler

    Firebase 콘솔 설정 페이지 에서 Firebase 프로젝트 ID를 얻을 수 있습니다.

    완료되면 다음 섹션에서 필요한 새 서비스 ID를 기록해 둡니다.

  2. Apple 개인 키로 로그인을 만듭니다 . 다음 섹션에서 새 개인 키와 키 ID가 필요합니다.
  3. 이메일 링크 로그인, 이메일 주소 확인, 계정 변경 취소 등 사용자에게 이메일을 보내는 Firebase 인증 기능을 사용하는 경우 Apple 비공개 이메일 릴레이 서비스를 구성하고 noreply@ YOUR_FIREBASE_PROJECT_ID .firebaseapp.com (또는 사용자 정의된 이메일 템플릿 도메인) Apple이 Firebase 인증에서 보낸 이메일을 익명의 Apple 이메일 주소로 릴레이할 수 있습니다.

Apple을 로그인 공급자로 활성화

  1. 프로젝트에 Firebase를 추가합니다 .
  2. Firebase 콘솔 에서 인증 섹션을 엽니다. 로그인 방법 탭에서 Apple 공급자를 활성화합니다. 이전 섹션에서 생성한 서비스 ID를 지정합니다. 또한 OAuth 코드 흐름 구성 섹션 에서 Apple 팀 ID와 이전 섹션에서 생성한 개인 키 및 키 ID를 지정합니다.

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

Apple로 로그인은 사용자가 로그인할 때 이메일 주소를 포함한 데이터를 익명화할 수 있는 옵션을 제공합니다. 이 옵션을 선택한 사용자는 privaterelay.appleid.com 도메인의 이메일 주소를 갖게 됩니다. 앱에서 Apple로 로그인을 사용하는 경우 이러한 익명화된 Apple ID와 관련하여 Apple의 모든 해당 개발자 정책 또는 조건을 준수해야 합니다.

여기에는 직접 식별하는 개인 정보를 익명의 Apple ID와 연결하기 전에 필요한 사용자 동의를 얻는 것이 포함됩니다. Firebase 인증을 사용할 때 여기에는 다음 작업이 포함될 수 있습니다.

  • 이메일 주소를 익명의 Apple ID에 연결하거나 그 반대의 경우도 마찬가지입니다.
  • 전화번호를 익명의 Apple ID에 연결하거나 그 반대로 연결
  • 익명이 아닌 소셜 자격 증명(Facebook, Google 등)을 익명의 Apple ID에 연결하거나 그 반대의 경우도 마찬가지입니다.

위의 목록은 완전하지 않습니다. 앱이 Apple의 요구 사항을 충족하는지 확인하려면 개발자 계정의 멤버십 섹션에 있는 Apple 개발자 프로그램 사용권 계약을 참조하십시오.

Firebase SDK로 로그인 흐름 처리

웹 앱을 빌드하는 경우 Apple 계정을 사용하여 Firebase로 사용자를 인증하는 가장 쉬운 방법은 Firebase JavaScript SDK로 전체 로그인 흐름을 처리하는 것입니다.

Firebase JavaScript SDK로 로그인 흐름을 처리하려면 다음 단계를 따르세요.

  1. 해당 공급자 ID apple.com 을 사용하여 OAuthProvider 인스턴스를 생성합니다.

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('apple.com');

    Web version 8

    var provider = new firebase.auth.OAuthProvider('apple.com');
  2. 옵션: 인증 제공자에게 요청하려는 기본값 외에 추가 OAuth 2.0 범위를 지정하십시오.

    Web version 9

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

    Web version 8

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

    기본적으로 이메일 주소당 하나의 계정 이 활성화되면 Firebase는 이메일 및 이름 범위를 요청합니다. 이 설정을 이메일 주소당 여러 계정 으로 변경하면 사용자가 지정하지 않는 한 Firebase에서 Apple에 범위를 요청하지 않습니다.

  3. 선택 사항: Apple의 로그인 화면을 영어 이외의 언어로 표시하려면 locale 매개변수를 설정하십시오. 지원되는 로케일은 Apple로 로그인 문서 를 참조하십시오.

    Web version 9

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

    Web version 8

    provider.setCustomParameters({
      // Localize the Apple authentication screen in French.
      locale: 'fr'
    });
  4. OAuth 공급자 개체를 사용하여 Firebase에 인증합니다. 팝업 창을 열거나 로그인 페이지로 리디렉션하여 사용자에게 Apple 계정으로 로그인하라는 메시지를 표시할 수 있습니다. 리디렉션 방법은 모바일 장치에서 선호됩니다.

    • 팝업 창으로 로그인하려면 signInWithPopup() 을 호출하십시오.

      Web version 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;
      
          // ...
        })
        .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);
      
          // ...
        });

      Web version 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;
      
          // ...
        })
        .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;
      
          // ...
        });
    • 로그인 페이지로 리디렉션하여 로그인하려면 signInWithRedirect() 를 호출하십시오.

      Web version 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web version 8

      firebase.auth().signInWithRedirect(provider);

      사용자가 로그인을 완료하고 페이지로 getRedirectResult() 를 호출하여 로그인 결과를 얻을 수 있습니다.

      Web version 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);
      
          // ...
        });

      Web version 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;
      
            // ...
          }
          // 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;
      
          // ...
        });

      여기에서 오류를 포착하고 처리할 수도 있습니다. 오류 코드 목록은 API 참조를 참조 하십시오.

    Firebase 인증에서 지원하는 다른 제공업체와 달리 Apple은 사진 URL을 제공하지 않습니다.

    또한 사용자가 이메일을 앱과 공유하지 않기로 선택하면 Apple은 해당 사용자의 고유한 이메일 주소( xyz@privaterelay.appleid.com 형식)를 제공하여 앱과 공유합니다. 개인 이메일 릴레이 서비스를 구성한 경우 Apple은 익명 주소로 전송된 이메일을 사용자의 실제 이메일 주소로 전달합니다.

    Apple은 사용자가 처음 로그인할 때만 표시 이름과 같은 사용자 정보를 앱과 공유합니다. 일반적으로 Firebase는 사용자가 Apple에 처음 로그인할 때 표시 이름을 저장하며 firebase.auth().currentUser.displayName . 그러나 이전에 Apple을 사용하여 Firebase를 사용하지 않고 앱에 사용자를 로그인한 경우 Apple은 Firebase에 사용자의 표시 이름을 제공하지 않습니다.

재인증 및 계정 연결

동일한 패턴을 reauthenticateWithPopup()reauthenticateWithRedirect() ) 와 함께 사용할 수 있으며, 최근 로그인이 필요한 민감한 작업에 대한 새로운 자격 증명을 검색하는 데 사용할 수 있습니다.

Web version 9

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

// Result from Redirect auth flow.
const auth = getAuth();
const provider = new OAuthProvider('apple.com');

reauthenticateWithPopup(auth.currentUser, provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.

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

    // You can also get the Apple OAuth Access and ID Tokens.
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;

    // ...
  })
  .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);

    // ...
  });

Web version 8

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

firebase
  .auth()
  .currentUser
  .reauthenticateWithPopup(provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.
    /** @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;

    // ...
  })
  .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;

    // ...
  });

또한 linkWithPopup()linkWithRedirect() 를 사용하여 다른 ID 공급자를 기존 계정에 연결할 수 있습니다.

Apple은 사용자의 Apple 계정을 다른 데이터에 연결하기 전에 사용자의 명시적 동의를 요구합니다.

예를 들어 Facebook 계정을 현재 Firebase 계정에 연결하려면 사용자가 Facebook에 로그인할 때 얻은 액세스 토큰을 사용합니다.

Web version 9

import { getAuth, linkWithPopup, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
const provider = new FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // ...

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });

Web version 8

const provider = new firebase.auth.FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // Facebook additional data available in result.additionalUserInfo.profile,

      // Additional Facebook OAuth access token can also be retrieved.
      // result.credential.accessToken

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });

Chrome 확장 프로그램에서 Firebase로 인증

Chrome 확장 프로그램 앱을 빌드하는 경우 Chrome 확장 프로그램 ID를 추가해야 합니다.

  1. Firebase 콘솔 에서 프로젝트를 엽니다.
  2. 인증 섹션에서 로그인 방법 페이지를 엽니다.
  3. 승인된 도메인 목록에 다음과 같은 URI를 추가합니다.
    chrome-extension://CHROME_EXTENSION_ID

Chrome 확장 프로그램은 HTTP 리디렉션을 사용할 수 없으므로 팝업 작업( signInWithPopup , linkWithPopupreauthenticateWithPopup )만 Chrome 확장 프로그램에 사용할 수 있습니다. 인증 팝업이 브라우저 작업 팝업을 취소하므로 브라우저 작업 팝업이 아닌 배경 페이지 스크립트에서 이러한 메서드를 호출해야 합니다. 팝업 메소드는 Manifest V2 를 사용하는 확장에서만 사용할 수 있습니다. 최신 Manifest V3 에서는 팝업 작업을 전혀 수행할 수 없는 서비스 작업자 형태의 백그라운드 스크립트만 허용합니다.

Chrome 확장 프로그램의 매니페스트 파일에서 https://apis.google.com URL을 content_security_policy 허용 목록에 추가해야 합니다.

기본 firebaseapp.com 도메인과 유사하게 Apple에서 사용자 정의 도메인을 계속 확인해야 합니다.

http://auth.custom.example.com/.well-known/apple-developer-domain-association.txt

고급: Node.js에서 Firebase로 인증

Node.js 애플리케이션에서 Firebase로 인증하려면 다음 안내를 따르세요.

  1. Apple 계정으로 사용자를 로그인하고 사용자의 Apple ID 토큰을 가져옵니다. 여러 가지 방법으로 이를 수행할 수 있습니다. 예를 들어 Node.js 앱에 브라우저 프런트 엔드가 있는 경우:

    1. 백엔드에서 임의의 문자열("nonce")을 생성하고 해당 SHA256 해시를 계산합니다. nonce는 백엔드와 Apple 인증 서버 간의 단일 왕복을 확인하는 데 사용하는 일회성 사용 값입니다.

      Web version 9

      const crypto = require("crypto");
      const string_decoder = require("string_decoder");
      
      // Generate a new random string for each sign-in
      const generateNonce = (length) => {
        const decoder = new string_decoder.StringDecoder("ascii");
        const buf = Buffer.alloc(length);
        let nonce = "";
        while (nonce.length < length) {
          crypto.randomFillSync(buf);
          nonce = decoder.write(buf);
        }
        return nonce.slice(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');

      Web version 8

      const crypto = require("crypto");
      const string_decoder = require("string_decoder");
      
      // Generate a new random string for each sign-in
      const generateNonce = function(length) {
        const decoder = new string_decoder.StringDecoder("ascii");
        const buf = Buffer.alloc(length);
        var nonce = "";
        while (nonce.length < length) {
          crypto.randomFillSync(buf);
          nonce = decoder.write(buf);
        }
        return nonce.slice(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');
    2. 로그인 페이지에서 Sign In with Apple 구성에 해시된 nonce를 지정합니다.

      <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
      <div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
      <script>
          AppleID.auth.init({
              clientId: YOUR_APPLE_CLIENT_ID,
              scope: 'name email',
              redirectURI: URL_TO_YOUR_REDIRECT_HANDLER,  // See the next step.
              state: '[STATE]',  // Optional value that Apple will send back to you
                                 // so you can return users to the same context after
                                 // they sign in.
              nonce: HASHED_NONCE  // The hashed nonce you generated in the previous step.
          });
      </script>
      
    3. POSTed 인증 응답 서버 측에서 Apple ID 토큰을 가져옵니다.

      app.post('/redirect', (req, res) => {
        const savedState = req.cookies.__session;
        const code = req.body.code;
        const state = req.body.state;
        const appleIdToken = req.body.id_token;
        if (savedState !== state || !code) {
          res.status(403).send('403: Permission denied');
        } else {
          // Sign in with Firebase using appleIdToken. (See next step).
        }
      });
      

    또한 Apple로 로그인을 위한 웹페이지 구성을 참조하십시오.

  2. 사용자의 Apple ID 토큰을 얻은 후 이를 사용하여 Credential 객체를 빌드한 다음 자격 증명으로 사용자를 로그인합니다.

    Web version 9

    import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    
    // Build Firebase credential with the Apple ID token.
    const provider = new OAuthProvider('apple.com');
    const authCredential = provider.credential({
      idToken: appleIdToken,
      rawNonce: unhashedNonce,
    });
    
    // Sign in with credential form the Apple user.
    signInWithCredential(auth, authCredential)
      .then((result) => {
        // User signed in.
      })
      .catch((error) => {
        // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
        // make sure you're sending the SHA256-hashed nonce as a hex string
        // with your request to Apple.
        console.log(error);
      });

    Web version 8

    // Build Firebase credential with the Apple ID token.
    const provider = new firebase.auth.OAuthProvider('apple.com');
    const authCredential = provider.credential({
      idToken: appleIdToken,
      rawNonce: unhashedNonce,
    });
    
    // Sign in with credential form the Apple user.
    firebase.auth().signInWithCredential(authCredential)
      .then((result) => {
        // User signed in.
      })
      .catch((error) => {
        // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
        // make sure you're sending the SHA256-hashed nonce as a hex string
        // with your request to Apple.
        console.log(error);
      });

다음 단계

사용자가 처음으로 로그인하면 새 사용자 계정이 생성되어 사용자가 로그인한 자격 증명(사용자 이름 및 암호, 전화 번호 또는 인증 공급자 정보)에 연결됩니다. 이 새 계정은 Firebase 프로젝트의 일부로 저장되며 사용자 로그인 방식에 관계없이 프로젝트의 모든 앱에서 사용자를 식별하는 데 사용할 수 있습니다.

  • 앱에서 사용자의 인증 상태를 알 수 있는 권장 방법은 Auth 개체에 관찰자를 설정하는 것입니다. 그런 다음 User 개체에서 사용자의 기본 프로필 정보를 가져올 수 있습니다. 사용자 관리 를 참조하십시오.

  • Firebase 실시간 데이터베이스 및 Cloud Storage 보안 규칙 에서 auth 변수에서 로그인한 사용자의 고유한 사용자 ID를 가져와 사용자가 액세스할 수 있는 데이터를 제어하는 ​​데 사용할 수 있습니다.

인증 공급자 자격 증명을 기존 사용자 계정에 연결하여 사용자가 여러 인증 공급자를 사용하여 앱에 로그인하도록 허용할 수 있습니다.

사용자를 로그아웃하려면 signOut 을 호출하십시오.

Web version 9

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});