빠른 시작: 이메일 및 비밀번호로 사용자 로그인

이 빠른 시작에서는 Identity Platform을 사용하여 이메일과 비밀번호로 사용자를 로그인 처리하는 방법을 보여줍니다.

시작하기 전에

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

    프로젝트 선택기로 이동

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

Identity Platform 사용 설정

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

    Identity Platform Marketplace 페이지로 이동

  2. Identity Platform 사용 설정을 클릭합니다. Cloud Console에 Identity Platform 페이지가 나타납니다.

이메일 로그인 구성

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

    ID 공급업체 페이지로 이동

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

  3. 공급업체 및 엔터프라이즈 제휴 표준 목록에서 이메일/비밀번호를 선택합니다.

  4. 사용 설정됨 스위치를 사용으로 전환합니다.

  5. 저장을 클릭합니다.

사용자 생성하기

  1. Cloud Console의 사용자 페이지로 이동합니다.

    사용자 페이지로 이동

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

  3. 이메일 및 비밀번호를 입력합니다.

  4. 저장을 클릭합니다. 신규 사용자가 사용자 목록에 표시됩니다.

사용자 로그인

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

  2. 다음 두 개의 기본 HTML 컨테이너를 추가합니다.

    <div>Identity Platform Quickstart</div>
    <div id="message">Loading...</div>
    
  3. API 키로 Identity Platform 클라이언트 SDK를 초기화합니다.

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

      ID 공급업체 페이지로 이동

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

    3. 초기화 코드를 index.html에 복사합니다. 예를 들면 다음과 같습니다.

      <script src="https://www.gstatic.com/firebasejs/9.0.1/firebase.js"></script>
      <script>
        // Initialize Identity Platform
        var config = {
          apiKey: "abcdefg123456",
          authDomain: "myproject.firebaseapp.com"
        };
        firebase.initializeApp(config);
      </script>
      
  4. signInWithEmailAndPassword()를 호출하여 사용자를 로그인 처리한 다음 onAuthStateChanged() 콜백으로 결과를 처리합니다. 아래 예시에서 emailpassword를 이전에 만든 사용자의 값으로 바꿉니다.

    <script>
      var email = "example@gmail.com";
      var password = "hunter2";
    
      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>
    
  5. 웹브라우저에서 index.html을 실행합니다. 사용자 이메일이 표시된 환영 메시지가 나타납니다.

수고하셨습니다. Identity Platform으로 첫 번째 사용자를 로그인 처리했습니다.

다음 단계

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

다음을 수행하는 방법에 대해 자세히 알아보세요.