Overview

This lab shows how to add authentication to your application using Identity Platform. This authorization identifies who you are, and determines what you can do. For more information, refer to the Authentication at Google documentation.

Identity Platform provides a drop-in, customizable authentication service for user sign-up and sign-in. Development and admin activities are made easier with a range of app SDKs (Android, iOS, and web) as well as admin SDKs (Node.js, Java, Python, and more). For more information about Identity Platform, refer to Identity Platform.

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

Objectives

In this lab, you perform the following tasks:

• Add Identity Platform configuration to a client-side web application
• Write JavaScript code to integrate Identity Platform Authentication into a client-side web application

Setup and requirements

For each lab, you get a new Google Cloud project and set of resources for a fixed time at no cost.

1. Make sure you signed into Qwiklabs using an incognito window.

2. Note the lab's access time (for example, and make sure you can finish in that time block.

Note: There is no pause feature. You can restart if needed, but you have to start at the beginning.

3. When ready, click .

4. Note your lab credentials. You will use them to sign in to Google Cloud Console.

5. Click Open Google Console.

6. Click Use another account and copy/paste credentials for this lab into the prompts.

Note: If you use other credentials, you'll get errors or incur charges.

7. Accept the terms and skip the recovery resource page.

Note: Do not click End Lab unless you are finished with the lab or want to restart it. This clears your work and removes the project.

Activate Google Cloud Shell

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

Google Cloud Shell provides command-line access to your Google Cloud resources.

1. In Cloud console, on the top right toolbar, click the Open Cloud Shell button.

   

2. 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. For example:

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

• You can list the active account name with this command:

gcloud auth list

Output:

Credentialed accounts: - @.com (active)

Example output:

Credentialed accounts: - google1623327_student@qwiklabs.net

• You can list the project ID with this command:

gcloud config list project

Output:

[core] project =

Example output:

[core] project = qwiklabs-gcp-44776a13dea667a6 Note: Full documentation of gcloud is available in the gcloud CLI overview guide .

Task 1. Prepare the case study application

In this task, you clone, configure, and run the Quiz application.

Clone source code in Cloud Shell

1. To clone the repository for the class, execute the following command:

git clone --depth=1 https://github.com/GoogleCloudPlatform/training-data-analyst

2. Create a soft link to the working files:

ln -s ~/training-data-analyst/courses/developingapps/v1.3/nodejs/firebase ~/firebase

Configure and run the case study application

1. Navigate to the directory that contains the sample files for this lab:

cd ~/firebase/start

2. Update the App Engine region using the sed command.

export REGION={{{project_0.startup_script.app_region|REGION}}} sed -i "s/us-central/$REGION/g" prepare_environment.sh

3. To configure the application, execute the following command:

. prepare_environment.sh Note: 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 npm install.
• Creates entities in Cloud Datastore.
• Prints out the Google Cloud Platform Project ID.

3. To run the application, execute the following command:

npm start

Start the case study application

• In Cloud Shell, click Web preview () > Preview on port 8080 to preview the Quiz application.

Leave this window open for now, because you will need the Cloud Shell Web preview domain (which is in the form: 8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-europe-west1-ctgq.cloudshell.dev) later in this lab.

Task 2. Examine the case study application code

In this section, you use the Cloud Shell text editor to review the case study application code.

Launch the Cloud Shell Editor

• From Cloud Shell, click Open Editor to launch the code editor.

Note: If necessary, click Open in a new window. You can switch back to terminal with Open Terminal.

Review the client application

1. Select the index.html file in the firebase/start/server/public/client/ folder.

Note: This file is the single page in the AngularJS SPA. It contains <script></script> tags for the application libraries and code and markup where the SPA will render dynamic output.

2. Select the qiq-login-template.html file in the firebase/start/server/public/client/app/auth/ folder.

Note: 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.

3. Select the qiq-login.js file.

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

Task 3. Configure Identity Platform authentication

In this task you confirm that billing is enabled for your cloud project. Next, you configure Identity Platform to sign in a user with an email and password. You then create a user which you can use to login to the Quiz Application.

Confirm that billing is enabled

• In the Google Cloud Console, on the Navigation menu (), click Billing.

  Verify that a Billing account is linked to the project. You should see a message stating that the Billing account "Qwiklabs Production gcpd xx" is linked to this project.

Configure Identity Platform for email and password

1. In the Google Cloud Console, on the Navigation menu (), click View all Products then search and click Identity Platform.

2. Click Enable Identity Platform.

   Note: If you see the Leave site pop-up message, click Leave.

   The Identity Platform page appears in the Cloud Console.

   

3. Click Add a Provider.

4. In the Sign-in method window, for Select a provider, select Email / Password.

5. Click Enabled.

6. In the Authorized Domains pane, click Add Domain.

7. Return to the running Quiz Application and copy the domain (which has the format 8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-europe-west1-ctgq.cloudshell.dev).

8. Click Save.

9. In the new identity provider window click Save.

   You may need to scroll down to see the Save button.

Add a user

1. In the Identity Platform pane, click Users.

2. Click Add User.

3. In the Add user dialog box, specify the following:

   Email	user1@example.com
   Password	abc123!

4. Click Add.

Task 4. Integrate a client-side web application with Identity Platform

In this task you apply the your Identity Platform configuration to your client-side web application.

1. In the navigation pane, click Providers.

2. Click Application Setup Details.

3. In the Configure your application dialog box, copy the Identity Platform markup.

   

4. Click Close.

5. Return to the Cloud Shell code editor, then open firebase/start/server/public/client/index.html.

6. Paste the copied Identity Manager configuration script markup into the blank lines just before the series of <script></script> lines at the bottom of the file.

7. Save the index.html file.

Task 5. Run the application

In this task you verify that you can login to the Quiz Application using the credentials you created in Identity Platform in a previous step. You then register a new user in the Quiz Application and verify that these credentials are added to Identity Platform.

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

2. In the navigation bar, click Take Test.

   

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

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

4. In the navigation bar, enter the the following invalid credentials:

   Email	user2@example.com
   Password	abcd1234$

5. Click Login.

   Note: Login will fail because the user is not registered.

6. Enter the the following credentials that you created in a previous task:

   Email	user1@example.com
   Password	abc123!

7. Click Login.

   The user's email address should be shown in the navigation bar, and the first question will be presented.

   Note: If the login does not work, the password may not have been configured correctly. Return to the Users page in Identity Platform and delete user1@example.com, and then add user1@example.com with the correct password.

8. In the navigation bar, click Logout.

9. Click the Register link.

10. In the new form, enter the following credentials:

    Email	user2@example.com
    Password	abcd1234$

11. Click Register.

    A complex password is required. If you have entered an acceptable password, you should be logged in and redirected to the GCP quiz.

    You are able to answer questions and submit answers.

12. In the navigation bar, click Logout.

    Note: You will be logged out and redirected to the Quiz homepage.

13. In the Google Cloud Console, in the Identity Platform navigation pane, click Users.

    Note: You should see user2@example.com has been added as a user.

Congratulations!

In this lab, you learned how to use Identity Platform to enable email and password registration for your application.

End your lab

When you have completed your lab, click End Lab. Google Cloud Skills Boost removes the resources you’ve used and cleans the account for you.

You will be given an opportunity to rate the lab experience. Select the applicable number of stars, type a comment, and then click Submit.

The number of stars indicates the following:

• 1 star = Very dissatisfied
• 2 stars = Dissatisfied
• 3 stars = Neutral
• 4 stars = Satisfied
• 5 stars = Very satisfied

You can close the dialog box if you don't want to provide feedback.

For feedback, suggestions, or corrections, please use the Support tab.

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.