웹 서비스에 Firebase 추가

리전 ID

REGION_ID는 앱을 만들 때 선택한 리전을 기준으로 Google에서 할당하는 축약된 코드입니다. 일부 리전 ID는 일반적으로 사용되는 국가 및 주/도 코드와 비슷하게 표시될 수 있지만 코드는 국가 또는 주/도와 일치하지 않습니다. 2020년 2월 이후에 생성된 앱의 경우 REGION_ID.r이 App Engine URL에 포함됩니다. 이 날짜 이전에 만든 기존 앱의 경우 URL에서 리전 ID는 선택사항입니다.

리전 ID에 대해 자세히 알아보세요.

Google Cloud 프로젝트에 Firebase를 추가하고 인증 설정을 구성한 다음 Firebase를 웹 서비스에 추가합니다.

Firebase를 웹 서비스에 추가하면 사용자를 인증할 수 있으므로 각 사용자에게 맞춤설정된 환경을 제공할 수 있습니다.

시작하기 전에

이 가이드의 이전 단계를 모두 완료했다면 이 섹션을 건너뜁니다. 그렇지 않으면 다음 중 하나를 완료합니다.

  • Python 3 앱 빌드부터 시작하여 여기까지의 모든 단계를 완료합니다.

  • Google Cloud 프로젝트가 이미 있으면 웹 서비스 복사본을 다운로드하여 계속 진행할 수 있습니다.

    1. Git을 사용하여 샘플 애플리케이션 저장소를 다운로드합니다.

      git clone https://github.com/GoogleCloudPlatform/python-docs-samples

      또는 ZIP 파일로 샘플을 다운로드하고 압축을 풀 수 있습니다.

    2. 이전 단계의 파일 사본이 있는 디렉터리로 이동합니다.

      cd python-docs-samples/appengine/standard_python3/building-an-app/building-an-app-1

Google Cloud 프로젝트에 Firebase 추가

웹 서비스에 Firebase 인증을 사용하려면 Firebase를 Google Cloud 프로젝트에 추가하고 인증 설정을 구성합니다.

  1. Firebase Console의 프로젝트 추가 도구를 사용하여 기존 Google Cloud 프로젝트에 Firebase를 추가합니다.

    기존 Google Cloud 프로젝트에 연결되지 않은 이름을 다른 Firebase 계정에 사용할 수도 있습니다.

  2. Firebase Console에서 인증 로그온 제공업체를 사용 설정합니다. 이 웹 서비스의 경우 이메일/비밀번호 및 Google 로그인 제공업체를 사용 설정합니다.

    1. 빌드 > 인증 > 로그인 방법을 클릭합니다.

    2. 로그인 제공업체에서 이메일/비밀번호 제공업체를 커서로 가리키고 연필 모양 아이콘을 클릭합니다.

      로그인 제공업체

    3. 이메일/비밀번호 인증을 사용하도록 사용 설정 버튼을 전환합니다.

      사용 설정 버튼 전환

    4. 제공업체를 사용 설정한 후 저장을 클릭합니다.

    5. 로그인 제공업체 Google에도 같은 단계를 따릅니다.

  3. Firebase가 올바르게 인증하려면 도메인의 OAuth 리디렉션을 승인해야 합니다. 도메인을 승인하려면 다음 안내를 따르세요.

    1. 빌드 > 인증 > 설정을 선택합니다.

    2. 설정 페이지의 승인된 도메인에서 도메인 추가를 클릭합니다.

    3. http:// 프리픽스를 제외하고 App Engine의 앱 도메인을 입력합니다.

      PROJECT_ID. REGION_ID.r.appspot.com 여기서 PROJECT_ID는 Google Cloud 프로젝트 ID입니다.

웹 서비스에 Firebase 추가

웹 서비스에 Firebase를 추가하려면 Firebase 프로젝트의 커스텀 코드 스니펫, 자바스크립트, CSS 파일을 웹 서비스에 복사합니다.

  1. Firebase 콘솔로 이동하고 프로젝트를 선택합니다.

  2. 프로젝트 개요 페이지의 앱에 Firebase를 추가하여 시작하기 텍스트 아래에서 웹을 선택합니다. 프로젝트에 이미 앱이 추가된 경우 이 텍스트가 표시되지 않을 수 있습니다. 대신 기존 앱의 프로젝트 개요 > 프로젝트 설정 > 일반 페이지로 이동하여 아래로 스크롤하고 앱 추가를 선택합니다.

  3. 앱이 등록되면 맞춤설정된 코드 스니펫이 표시됩니다. 스니펫의 콘텐츠를 복사합니다. 나중에 이 코드 스니펫을 보려면 Firebase 앱의 프로젝트 설정 페이지로 이동하세요.

  4. 다음을 완료하여 templates/index.html 파일을 업데이트합니다.

    1. <head> 태그에 다음 줄을 추가합니다.

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

    2. 커스텀 코드 스니펫을 <body> 태그에 추가합니다.

      이 튜토리얼에서는 templates/index.html의 유일한 콘텐츠가 Firebase 서비스의 예시이므로 본문 상단에 코드를 추가할 수 있습니다. 프로덕션 환경에서는 Firebase 서비스를 사용하기 전에 본문 하단에 코드 스니펫을 추가하는 것이 좋습니다.

      커스텀 코드는 다음 모의 스니펫과 유사합니다.

      <!-- MOCK SNIPPET: DO NOT COPY -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

    3. Firebase의 인증 구성요소를 사용 설정하려면 위 스니펫의 TODO를 다음 스크립트 태그로 바꿉니다.

       <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>

      이 스크립트 주소는 웹용 Firebase UI 문서에 설명되어 있습니다.

    4. 본문의 나머지 부분을 다음 코드로 대체합니다. 나중에 이 가이드에서 이 코드를 인증된 사용자 데이터를 표시하는 데 사용합니다.

      <div id="firebaseui-auth-container"></div>

<button id="sign-out" hidden=true>Sign Out</button>

<div id="login-info" hidden=true>
  <h2>Login info:</h2>
  {% if user_data %}
    <dl>
      <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
      <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
      <dt>Last 10 visits</dt><dd>
	{% for time in times %}
          <p>{{ time['timestamp'] }}</p>
        {% endfor %} </dd>
    </dl>
  {% elif error_message %}
    <p>Error: {{ error_message }}</p>
  {% endif %}
</div>

다음 단계

이제 Google Cloud 프로젝트와 웹 서비스에 Firebase를 추가했으므로 웹 서비스에 코드를 추가하여 사용자를 인증하도록 사용 설정할 수 있습니다.

이전
데이터 처리
다음
사용자 인증