Identity Platform을 사용하여 이메일로 사용자 로그인 처리

Identity Platform을 사용하여 이메일로 사용자 로그인 처리

Identity Platform을 사용하여 이메일과 비밀번호로 사용자를 로그인 처리하는 방법을 알아봅니다.

---

Google Cloud 콘솔에서 이 태스크에 대한 단계별 안내를 직접 수행하려면 둘러보기를 클릭합니다.

둘러보기

---

시작하기 전에

1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

3. Make sure that billing is enabled for your Google Cloud project.

4. 프로젝트에 다음 역할이 있는지 확인합니다. Identity Platform Admin, Service Usage Admin

   역할 확인

   1. Google Cloud 콘솔에서 IAM 페이지로 이동합니다.

      IAM으로 이동
   2. 프로젝트를 선택합니다.

   3. 주 구성원 열에서 이메일 주소가 있는 행을 찾습니다.

      이메일 주소가 열에 없으면 역할이 없는 것입니다.

   4. 이메일 주소가 있는 행에 대해 역할 열에서 역할 목록에 필요한 역할이 있는지 확인합니다.

   역할 부여

   1. Google Cloud 콘솔에서 IAM 페이지로 이동합니다.

      IAM으로 이동
   2. 프로젝트를 선택합니다.
   3. 액세스 권한 부여를 클릭합니다.
   4. 새 주 구성원 필드에 이메일 주소를 입력합니다.
   5. 역할 선택 목록에서 역할을 선택합니다.
   6. 역할을 추가로 부여하려면 다른 역할 추가를 클릭하고 각 역할을 추가합니다.
   7. 저장을 클릭합니다.

5. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

6. Make sure that billing is enabled for your Google Cloud project.

7. 프로젝트에 다음 역할이 있는지 확인합니다. Identity Platform Admin, Service Usage Admin

   역할 확인

   1. Google Cloud 콘솔에서 IAM 페이지로 이동합니다.

      IAM으로 이동
   2. 프로젝트를 선택합니다.

   3. 주 구성원 열에서 이메일 주소가 있는 행을 찾습니다.

      이메일 주소가 열에 없으면 역할이 없는 것입니다.

   4. 이메일 주소가 있는 행에 대해 역할 열에서 역할 목록에 필요한 역할이 있는지 확인합니다.

   역할 부여

   1. Google Cloud 콘솔에서 IAM 페이지로 이동합니다.

      IAM으로 이동
   2. 프로젝트를 선택합니다.
   3. 액세스 권한 부여를 클릭합니다.
   4. 새 주 구성원 필드에 이메일 주소를 입력합니다.
   5. 역할 선택 목록에서 역할을 선택합니다.
   6. 역할을 추가로 부여하려면 다른 역할 추가를 클릭하고 각 역할을 추가합니다.
   7. 저장을 클릭합니다.

Identity Platform 사용 설정

1. Google Cloud 콘솔의 Cloud Marketplace에서 Identity Platform 페이지로 이동합니다.

   Identity Platform으로 이동

2. Identity Platform 사용 설정을 클릭합니다.

이메일 로그인 구성

1. ID 공급업체 페이지로 이동

   Identity Platform 공급업체로 이동

2. ID 공급업체 페이지에서 공급업체 추가를 클릭합니다.

3. 공급업체 선택 목록에서 이메일/비밀번호를 선택합니다.

4. 사용 설정됨 전환 버튼을 클릭하여 설정합니다.

5. 공급업체 설정을 저장하려면 저장을 클릭합니다.

사용자 생성

1. Google Cloud Console에서 사용자 페이지로 이동합니다.

   사용자로 이동

2. '사용자 추가'를 클릭합니다.

3. 이메일 필드에 이메일과 비밀번호를 입력합니다. 이후 단계에서 필요하므로 두 값을 모두 기록해 둡니다.

4. 사용자를 추가하려면 추가를 클릭합니다. 새 사용자가 사용자 페이지에 나열됩니다.

사용자 로그인

사용자 로그인을 처리하는 단계는 앱에서 사용하는 SDK 버전에 따라 다릅니다. 애플리케이션에 맞는 올바른 단계를 따르고 있는지 확인합니다.

참고: 특히 프로덕션 앱의 경우 v9 SDK를 사용하는 것이 좋습니다. window.firebase와 같은 다른 SDK 관리 옵션에 대한 지원이 필요하면 버전 8에서 모듈식 웹 SDK로 업그레이드 또는 Firebase를 추가하는 다른 방법을 참조하세요.

SDK v9(모듈식)

SDK 설치 및 Firebase 초기화

Firebase JS SDK 버전 9에서는 JavaScript 모듈 형식을 사용합니다.

이 워크플로에서는 npm을 사용하고 모듈 번들러나 JavaScript 프레임워크 도구가 필요합니다. v9 SDK는 사용하지 않는 코드(트리 쉐이킹)를 제거하고 SDK 크기를 줄이기 위해 모듈 번들러를 사용하도록 최적화되었기 때문입니다.

v9 SDK를 사용하려면 다음 단계를 수행합니다.

1. 프로젝트 디렉터리에서 npm을 사용하여 Firebase를 설치합니다.

   npm install firebase

2. 앱에서 Firebase를 초기화하고 Firebase 앱 객체를 만듭니다.

   import { initializeApp } from 'firebase/app';
   
   const firebaseConfig = {
       apiKey: "API_KEY",
       authDomain: "AUTH_DOMAIN"
   };
   
   const app = initializeApp(firebaseConfig);

   다음을 바꿉니다.

   • API_KEY: Firebase 프로젝트의 apiKey입니다.
   • AUTH_DOMAIN: Firebase 프로젝트의 authDomain입니다.

   앱의 Firebase 프로젝트 구성에서 이러한 값을 찾을 수 있습니다.

   Firebase 앱은 일반적인 구성을 저장하고 Firebase 서비스 간에 인증을 공유하는 컨테이너와 유사한 객체입니다. 코드에서 Firebase 앱 객체를 초기화한 후 Firebase 서비스를 추가하고 사용할 수 있습니다.

   ESM을 사용하고 브라우저 모듈을 사용하려면 모든 import 줄을 다음 패턴으로 바꿉니다.
   import { } from 'https://www.gstatic.com/firebasejs/11.0.1/firebase-SERVICE.js',
   여기서 SERVICE는 SDK 이름입니다(예:firebase-firestore).

   브라우저 모듈을 사용하면 빠르게 시작할 수 있지만 프로덕션의 경우에는 모듈 번들러를 사용하는 것이 좋습니다.

자바스크립트에서 Identity Platform에 액세스

이제 Firebase SDK를 초기화했으므로 앱 어디서나 사용할 수 있습니다. 예를 들어 다음은 하드 코딩된 사용자로 로그인을 시도하고 웹페이지에 결과를 표시하는 앱입니다.

import { initializeApp } from 'firebase/app';
import {
  onAuthStateChanged,
  signInWithEmailAndPassword,
  getAuth
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app, {/* extra options */ });

document.addEventListener("DOMContentLoaded", () => {
  onAuthStateChanged(auth, (user) => {
      if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
      }
      else {
          document.getElementById("message").innerHTML = "No user signed in.";
      }
  });
  signIn();
});

function signIn() {
  const email = "EMAIL_ID";
  const password = "PASSWORD";
  signInWithEmailAndPassword(auth, email, password)
      .catch((error) => {
          document.getElementById("message").innerHTML = error.message;
      });
}

다음을 바꿉니다.

• API_KEY: Firebase 프로젝트의 apiKey입니다.
• AUTH_DOMAIN: Firebase 프로젝트의 authDomain입니다.
• EMAIL_ID: 이 가이드의 앞부분에서 만든 사용자 이메일 주소입니다.
• PASSWORD: 이 가이드의 앞부분에서 만든 사용자 비밀번호입니다.

모듈 번들러를 사용하여 크기 줄이기

참고: Angular CLI, Next.js, Vue CLI 또는 React 앱 만들기와 같은 자바스크립트 프레임워크 CLI 도구를 사용하는 경우 이 단계를 건너뛸 수 있습니다. 자세한 내용은 모듈 번들링 가이드를 참조하세요.

Firebase 웹 SDK는 사용하지 않는 코드를 삭제(트리 쉐이킹)하기 위해 모듈 번들러와 연동되도록 설계되었습니다. 프로덕션 앱에는 이 방식을 사용하는 것이 좋습니다. Angular CLI, Next.js, Vue CLI 또는 React 앱 만들기와 같은 도구는 npm을 통해 설치되고 코드베이스로 가져온 라이브러리의 모듈 번들링을 자동으로 처리합니다.

예를 들어 Webpack을 사용하여 번들 애플리케이션과 종속 항목 코드가 포함된 dist 폴더를 생성할 수 있습니다. 자세한 내용은 Firebase로 모듈 번들 사용을 참조하세요.

자바스크립트를 페이지로 가져오기

1. index.html라는 새 파일을 만듭니다.

2. 기본 HTML 컨테이너 2개를 추가하고 번들 js를 가져옵니다.

   <script defer src="js/bundled.js"></script>
   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

3. 웹브라우저에서 index.html을 실행합니다. 사용자 이메일이 표시된 환영 메시지가 나타납니다.

SDK v8(기존)

웹페이지 만들기

1. 로컬 머신에서 index.html이라는 새 파일을 만듭니다.

2. HTML 파일에서 기본 HTML 컨테이너 두 개를 추가합니다.

   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

API 키로 Identity Platform 클라이언트 SDK 초기화

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

   ID 공급업체로 이동

2. 애플리케이션 설정 세부정보를 클릭합니다.

3. 초기화 코드를 index.html에 복사합니다.

사용자 로그인

1. 사용자 로그인을 처리하려면 다음 코드를 index.html에 복사합니다.

   <script>
     var email = "EMAIL_ID";
     var password = "PASSWORD";
   
     firebase.auth().onAuthStateChanged(function(user) {
       if (user) {
         document.getElementById("message").innerHTML = "Welcome, " + user.email;
       } else {
         document.getElementById("message").innerHTML = "No user signed in.";
       }
     });
   
     firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
       document.getElementById("message").innerHTML = error.message;
     });
   </script>
   

   이 코드는 signInWithEmailAndPassword()를 호출한 후 onAuthStateChanged() 콜백으로 결과를 처리합니다.

   다음을 바꿉니다.

   • EMAIL_ID: 앞에서 만든 사용자의 이메일
   • PASSWORD: 앞에서 만든 사용자의 비밀번호

2. 웹브라우저에서 index.html을 엽니다. 사용자 이메일이 표시된 환영 메시지가 나타납니다.

실패한 사용자 로그인 시도에는 한도가 있습니다. 실패한 로그인 시도가 여러 번 빠르게 발생하면 사용자가 일시적으로 계정에 액세스할 수 없게 됩니다.

다른 Identity Platform 한도에 대한 자세한 내용은 할당량 및 한도를 참조하세요.

삭제

이 페이지에서 사용한 리소스 비용이 Google Cloud 계정에 청구되지 않도록 하려면 다음 단계를 수행합니다.

공급업체 및 사용자 삭제

기존 Google Cloud 프로젝트를 사용한 경우 계정에 요금이 청구되지 않도록 만든 공급업체와 사용자를 삭제합니다.

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

   ID 공급업체로 이동

2. 공급업체를 삭제하려면 공급업체 이름 옆에 있는 삭제를 클릭합니다. 삭제를 클릭하여 확인합니다.

3. Google Cloud Console에서 사용자 페이지로 이동합니다.

   사용자로 이동

4. 생성된 사용자를 삭제하려면 사용자 이름 옆에 있는 삭제를 클릭합니다. 삭제를 클릭하여 확인합니다.

프로젝트 삭제

비용이 청구되지 않도록 하는 가장 쉬운 방법은 튜토리얼에서 만든 프로젝트를 삭제하는 것입니다.

프로젝트를 삭제하는 방법은 다음과 같습니다.

주의: 프로젝트를 삭제하면 다음과 같은 효과가 발생합니다.

• 프로젝트의 모든 항목이 삭제됩니다. 이 문서의 태스크에 기존 프로젝트를 사용한 경우 프로젝트를 삭제하면 프로젝트에서 수행한 다른 작업도 삭제됩니다.
• 커스텀 프로젝트 ID가 손실됩니다. 이 프로젝트를 만들 때 앞으로 사용할 커스텀 프로젝트 ID를 만들었을 수 있습니다. appspot.com URL과 같이 프로젝트 ID를 사용하는 URL을 보존하려면 전체 프로젝트를 삭제하는 대신 프로젝트 내에서 선택한 리소스만 삭제합니다.

여러 아키텍처, 튜토리얼, 빠른 시작을 살펴보려는 경우 프로젝트를 재사용하면 프로젝트 할당량 한도 초과를 방지할 수 있습니다.

1. In the Google Cloud console, go to the Manage resources page.

   Go to Manage resources

2. In the project list, select the project that you want to delete, and then click Delete.
3. In the dialog, type the project ID, and then click Shut down to delete the project.

다음 단계

실제 앱에서는 사용자가 전용 등록 페이지를 사용하여 가입한 후 이메일과 비밀번호를 입력하여 로그인합니다. Identity Platform에서 이러한 페이지에 사용할 수 있는 사전 빌드된 인증 UI를 제공하거나 개발자가 직접 빌드할 수 있습니다. 소셜 미디어 공급업체(예: Facebook 또는 Google), 전화번호, OIDC 또는 SAML과 같은 추가적인 로그인 방식을 지원할 수도 있습니다.

다음 내용에 대해 자세히 알아보세요.

• JavaScript, Android, iOS, C++, Unity로 사용자 로그인 처리

• OIDC 또는 SAML로 사용자 로그인 처리

• 기존 앱에서 Identity Platform으로 사용자 마이그레이션