הוספת Firebase לשירות האינטרנט

מזהה אזור

‫REGION_ID הוא קוד מקוצר ש-Google מקצה על סמך האזור שבוחרים כשיוצרים את האפליקציה. הקוד לא תואם למדינה או למחוז, למרות שחלק ממזהי האזורים עשויים להיראות דומים לקודים נפוצים של מדינות ומחוזות. באפליקציות שנוצרו אחרי פברואר 2020, המחרוזת REGION_ID.r כלולה בכתובות URL של App Engine. באפליקציות קיימות שנוצרו לפני התאריך הזה, מזהה האזור הוא אופציונלי בכתובת ה-URL.

מידע נוסף על מזהי אזורים

אישור

הערה: אם אתם פורסים שירות אינטרנט חדש של Python ב- Google Cloud, מומלץ להתחיל עם Cloud Run.

מוסיפים את Firebase ל Google Cloud פרויקט, מגדירים את הגדרות האימות ואז מוסיפים את 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
     

הוספת Firebase לפרויקט Google Cloud

כדי להשתמש באימות ב-Firebase בשירות האינטרנט שלכם, צריך להוסיף את Firebase לפרויקט Google Cloud ולהגדיר את הגדרות האימות.

1. מוסיפים את Firebase לפרויקט Google Cloud קיים באמצעות הכלי הוספת פרויקט במסוף Firebase.

   אפשר גם להשתמש בחשבון Firebase עם שם אחר, שלא משויך לפרויקט Google Cloud הקיים.

2. מפעילים את ספקי הכניסה לאימות במסוף Firebase. בשירות האינטרנט הזה, תפעילו את ספקי הכניסה Email/Password ו-Google:

   1. לוחצים על אבטחה > אימות > שיטת כניסה.

   2. בקטע ספקי כניסה, לוחצים על הוספת ספק חדש > אימייל/סיסמה.

   3. מעבירים את הלחצן הפעלה למצב מופעל כדי להשתמש באימות באמצעות כתובת אימייל וסיסמה, ולוחצים על שמירה.

      טיפ: למידע נוסף על הפעלת ספקים אחרים, אפשר לעיין בקטעים 'לפני שמתחילים' במדריכים של Google,‏ Facebook,‏ Twitter ו-GitHub ב-Firebase.

3. כדי ש-Firebase יבצע אימות בצורה תקינה, צריך לאשר את הדומיין להפניות אוטומטיות של OAuth. כדי לאשר את הדומיין:

   1. לוחצים על אבטחה > אימות > הגדרות.

   2. בקטע דומיינים מורשים בדף הגדרות, לוחצים על הוספת דומיין.

   3. מזינים את הדומיין של האפליקציה ב-App Engine, לא כולל הקידומת http://:

      ‫PROJECT_ID. REGION_ID.r.appspot.com כאשר PROJECT_ID הוא מזהה הפרויקט ב-Google Cloud .

הוספת Firebase לשירות האינטרנט

כדי להוסיף את Firebase לשירות האינטרנט, מעתיקים את קטע הקוד המותאם אישית של פרויקט Firebase, את קובצי ה-JavaScript ואת קובצי ה-CSS אל שירות האינטרנט:

1. נכנסים אל מסוף Firebase ובוחרים את הפרויקט.

2. בדף סקירת הפרויקט, מתחת לטקסט Get started by adding Firebase to your app (מתחילים בהוספת Firebase לאפליקציה), בוחרים באפשרות web (אינטרנט). אם כבר הוספתם אפליקציה לפרויקט, יכול להיות שהטקסט הזה לא יופיע. במקום זאת, תצטרכו לעבור אל הדף Project Overview (סקירת הפרויקט) > Project settings (הגדרות הפרויקט) > General (כללי) של האפליקציה הקיימת, לגלול למטה ולבחור באפשרות Add app (הוספת אפליקציה).

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. מחליפים את הערך TODO בקטע הקוד שלמעלה בתג הסקריפט הבא כדי להפעיל את רכיב האימות של Firebase:

       <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>

השלבים הבאים

אחרי שהוספתם את Firebase לפרויקט Google Cloud ולשירות האינטרנט, אתם יכולים להוסיף קוד לשירות האינטרנט כדי לאפשר לו לאמת משתמשים.