arrow_back

App Dev: Adding User Authentication to your Application - Python

Join Sign in

App Dev: Adding User Authentication to your Application - Python

1 hour 5 Credits

GSP186

Google Cloud selp-paced labs logo

Overview

This lab shows you how to add authentication to your application using Firebase. This authorization identifies who you are, and determines what you can do. For more information, see Authentication Overview.

Firebase is a comprehensive framework that allows you to create web and mobile applications. It integrates with Google Cloud so that you can import a Google Cloud project into a Firebase project. For more information about Firebase, see Cloud Functions and Firebase.

The application used in this lab is an online Quiz application. You add Firebase authentication and then configure authentication to use a simple email address and password credential, and ensure that users must register and log in before taking a quiz.

Objectives

In this lab, you perform the following tasks:

  • Register a Google Cloud project with Firebase.

  • Add Firebase configuration to a client-side web application.

  • Write Python code to integrate Firebase Authentication into a client-side web application.

Setup and requirements

Before you click the Start Lab button

Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Google Cloud resources will be made available to you.

This hands-on lab lets you do the lab activities yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use to sign in and access Google Cloud for the duration of the lab.

To complete this lab, you need:

  • Access to a standard internet browser (Chrome browser recommended).
Note: Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.
  • Time to complete the lab---remember, once you start, you cannot pause a lab.
Note: If you already have your own personal Google Cloud account or project, do not use it for this lab to avoid extra charges to your account.

How to start your lab and sign in to the Google Cloud Console

  1. Click the Start Lab button. If you need to pay for the lab, a pop-up opens for you to select your payment method. On the left is the Lab Details panel with the following:

    • The Open Google Console button
    • Time remaining
    • The temporary credentials that you must use for this lab
    • Other information, if needed, to step through this lab
  2. Click Open Google Console. The lab spins up resources, and then opens another tab that shows the Sign in page.

    Tip: Arrange the tabs in separate windows, side-by-side.

    Note: If you see the Choose an account dialog, click Use Another Account.
  3. If necessary, copy the Username from the Lab Details panel and paste it into the Sign in dialog. Click Next.

  4. Copy the Password from the Lab Details panel and paste it into the Welcome dialog. Click Next.

    Important: You must use the credentials from the left panel. Do not use your Google Cloud Skills Boost credentials. Note: Using your own Google Cloud account for this lab may incur extra charges.
  5. Click through the subsequent pages:

    • Accept the terms and conditions.
    • Do not add recovery options or two-factor authentication (because this is a temporary account).
    • Do not sign up for free trials.

After a few moments, the Cloud Console opens in this tab.

Note: You can view the menu with a list of Google Cloud Products and Services by clicking the Navigation menu at the top-left. Navigation menu icon

Activate Cloud Shell

Cloud Shell is a virtual machine that is loaded with development tools. It offers a persistent 5GB home directory and runs on the Google Cloud. Cloud Shell provides command-line access to your Google Cloud resources.

  1. In the Cloud Console, in the top right toolbar, click the Activate Cloud Shell button.

Cloud Shell icon

  1. Click Continue.

It takes a few moments to provision and connect to the environment. When you are connected, you are already authenticated, and the project is set to your PROJECT_ID. The output contains a line that declares the PROJECT_ID for this session:

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

gcloud is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.

  1. (Optional) You can list the active account name with this command:

gcloud auth list

(Output)

ACTIVE: * ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net To set the active account, run: $ gcloud config set account `ACCOUNT`
  1. (Optional) You can list the project ID with this command:

gcloud config list project

(Output)

[core] project = <project_ID>

(Example output)

[core] project = qwiklabs-gcp-44776a13dea667a6 For full documentation of gcloud, in Google Cloud, Cloud SDK documentation, see the gcloud command-line tool overview.

Launch the Cloud Shell code editor

From Cloud Shell toolbar, move Cloud Shell to a new window by clickin the Open in a new window icon External-Link-13.png, then click Open Editor Cloud-Shell-Editor-13.png icon to launch the code editor.

In the Cloud Shell terminal, run the following command to configure your Project ID, replacing YOUR-PROJECT-ID with your lab Project ID:

gcloud config set project <YOUR-PROJECT-ID>

Authorize Cloud Shell.

Prepare the case study application

For the sake of time, you'll clone the application skeleton from a repository on GitHub.com.

Clone source code in Cloud Shell

  1. Clone the repository from GitHub.com:

git clone https://github.com/GoogleCloudPlatform/training-data-analyst
  1. Create a soft link as a shortcut to the working directory.

ln -s ~/training-data-analyst/courses/developingapps/v1.2/python/firebase ~/firebase

Configure and run the case study application

  1. Change to the directory that contains the sample files for this lab:
cd ~/firebase/start
  1. Configure the application:

. prepare_environment.sh

This script file:

  • Creates an App Engine application.
  • Creates a Cloud Storage bucket named gs:[Project-ID]-media.
  • Exports two environment variables: GCLOUD_PROJECT and GCLOUD_BUCKET.
  • Runs > pip install -r requirements.txt.
  • Creates entities in Cloud Datastore.
  • Prints out the Project ID.

Click Check my progress to verify the objective. Configure the case study application

  1. Run the application:

python run_server.py

Start the case study application

In Cloud Shell, click Web preview Web-Preview-13.png > Preview on port 8080 to preview the Quiz application.

Leave this window open because you need the Cloud Shell Web preview domain later in this lab.

Examine the case study application code

In this lab you'll view and edit files. You can use the shell editors that are installed on Cloud Shell, such as nano or vim or the Cloud Shell code editor.

This lab uses the Cloud Shell code editor to review the Quiz application code.

Review the client application

  1. In the Cloud Shell Editor, Navigate to the /training_data_analyst/courses/developingapps/v1.2/python/firebase/start folder using the file browser panel on the left side of the code editor.

  2. Continue navigating. Open ...quiz/webapp/static/client/. Click on the index.html file.

    This file is the single page in the AngularJS Single Page Application (SPA). It contains <script></script> tags for the application libraries and code, and markup where the SPA renders dynamic output.

  3. Select the qiq-login-template.html file in the ...quiz/webapp/static/client/app/auth/ folder.

    This file contains the AngularJS template for the Login component. Notice how it contains a couple of textboxes and a button. The button has an event handler that runs code when it is clicked.

  4. Still in this folder, select the qiq-login.js file.

    This file contains an AngularJS component. It allows the user to log in to the application or to navigate to a registration page.

Work with Firebase

Next, create a Firebase project for your Google Cloud project and enable the Authentication feature.

Create a Firebase project

  1. Open a new browser tab and navigate to Firebase Console.

    You may need to sign in again using your lab username and password.
  2. On the Welcome to Firebase! page, click Add project.

  3. In the Enter your project name dialog, select your project name.

    add_a_project.png

  4. Check I accept the Firebase terms. Click Continue.

  5. In the Confirm Firebase billing plan dialog, click Confirm Plan.

  6. In the A few things to remember when adding Firebase to a Google Cloud project dialog, click Continue.

  7. In the Google Analytics for your Firebase project dialog, click Continue.

  8. In the Configure Google Analytics dialog:

  • Uncheck Use the default settings for sharing Google Analytics for Firebase data.

  • Check to accept the Measurement Controller-Controller Data Protection terms and acknowledge you are subject to the EU End User Consent Policy.

  • Check I accept the Google Analytics terms.

  • Click Add Firebase.

    firebase_console.png

  1. When your new project is ready, click Continue.

Configure Firebase Authentication

  1. In the left pane of the Firebase page, click Build > Authentication.

    firebase2.png

  2. On the Authentication overview page, click on Get started.

  3. On the Sign-in method tab, hover over the Email/Password provider, and then click the pencil.

    hover_edit.png

  4. Click Enable to allow users to sign up using their email address and password, and then click Save.

    enable_signin.png

  5. Under Authorized Domains, click Add Domain.

  6. Return to your running Quiz application and copy the domain.

  7. Return to the Firebase console, paste the domain into the Domain text box, and then click Add.

    auth_domain.png

Integrate a client-side web application with Firebase

Now apply your Firebase configuration to your client-side web application.

Apply Firebase configuration to a web application

  1. In the Firebase UI, click Project Overview in the upper-left corner of the Firebase console.

  2. Click the web icon.

    Firebase_webApp.png

  3. Register your app - give your app a nick name, then click Register app.

Click Check my progress to verify the objective. Work with Firebase

  1. Copy Firebase SDK scripts.

  2. In the Cloud Shell code editor, open the index.html file in training_data_analyst/courses/developingapps/v1.2/python/firebase/start/quiz/webapp/static/client/.

  3. Paste the Firebase configuration markup just before the other <script></script> tags at the bottom of the page.

  4. Add the following Firebase library below the firebase-app.js line in the Firebase configuration you just added:

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

    add_script.png

  5. Save the index.html file, then close the file.

Run the application

  1. Return to the Quiz application and refresh your browser.

  2. In the navigation bar, click Take Test.

    register.png

  3. In the navigation bar, click GCP, People, or Places.

    register.png

    You should not be able to take a test without being logged in.

  4. In the navigation bar, click Register.

  5. Enter any email address and password into the form fields, and then click Register.

You should now be logged in and redirected to the Google Cloud quiz.

  1. In the navigation bar, click Logout.

You should be logged out and redirected to the Quiz homepage.

Congratulations

This conclude the self-paced lab, App Dev: Adding User Authentication to Your Application - Python. You used Firebase to add authentication to your quiz application.

completion_badge_Application_Development_-_Python-135.png completion_badge_Cloud_Development-135.png

Finish your Quest

This self-paced lab is part of the Application Development - Python and Cloud Development Quests. A Quest is a series of related labs that form a learning path. Completing this Quest earns you the badge above, to recognize your achievement. You can make your badge (or badges) public and link to them in your online resume or social media account. Enroll in a Quest and get immediate completion credit if you've taken this lab. See other available Quests.

Next steps / learn more

Manual last updated October 18, 2021
Lab last tested March 25, 2021

Copyright 2022 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.