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

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


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

둘러보기


다음 섹션에서는 둘러보기를 클릭할 때와 동일한 단계를 수행합니다.

시작하기 전에

  1. Google Cloud 계정에 로그인합니다. Google Cloud를 처음 사용하는 경우 계정을 만들고 Google 제품의 실제 성능을 평가해 보세요. 신규 고객에게는 워크로드를 실행, 테스트, 배포하는 데 사용할 수 있는 $300의 무료 크레딧이 제공됩니다.
  2. Google Cloud Console의 프로젝트 선택기 페이지에서 Google Cloud 프로젝트를 선택하거나 만듭니다.

    프로젝트 선택기로 이동

  3. Cloud 프로젝트에 결제가 사용 설정되어 있는지 확인합니다. 프로젝트에 결제가 사용 설정되어 있는지 확인하는 방법을 알아보세요.

  4. Google Cloud Console의 프로젝트 선택기 페이지에서 Google Cloud 프로젝트를 선택하거나 만듭니다.

    프로젝트 선택기로 이동

  5. Cloud 프로젝트에 결제가 사용 설정되어 있는지 확인합니다. 프로젝트에 결제가 사용 설정되어 있는지 확인하는 방법을 알아보세요.

Identity Platform 사용 설정

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

    Identity Platform으로 이동

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

이메일 로그인 구성

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

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

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

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

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

사용자 생성

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

    사용자로 이동

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

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

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

웹페이지 만들기

  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에 복사합니다. 상태는 다음과 비슷하게 표시됩니다.

    <script src="https://www.gstatic.com/firebasejs/9.8.4/firebase.js"></script>
    <script>
      // Initialize Identity Platform
      var config = {
        apiKey: "abcdefg123456",
        authDomain: "myproject.firebaseapp.com"
      };
      firebase.initializeApp(config);
    </script>
    

사용자 로그인

  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. 생성된 사용자를 삭제하려면 사용자 이름 옆에 있는 삭제를 클릭합니다. 삭제를 클릭하여 확인합니다.

프로젝트 삭제

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

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

  1. 콘솔에서 리소스 관리 페이지로 이동합니다.

    리소스 관리로 이동

  2. 프로젝트 목록에서 삭제할 프로젝트를 선택하고 삭제를 클릭합니다.
  3. 대화상자에서 프로젝트 ID를 입력한 후 종료를 클릭하여 프로젝트를 삭제합니다.

다음 단계

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

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