A Guide to Creating a Console Cloud Google Account and Generating Credentials for your Angular application
Introduction
Hello there!
In this article, we will guide you through the process of creating a Console Cloud Google account and generating credentials to supercharge your Angular page. Whether you are a seasoned developer or just starting out, this comprehensive guide will provide you with step-by-step instructions to effortlessly navigate the process.
Step 1: Getting Started with Console Cloud Google
First We need to create a Console Cloud Google account. Follow these simple steps:
- Open your web browser and visit Google cloud console.
- Click on the “Get Started for Free” button.
- Sign in using your Google account or create a new one if you don’t have an existing account.
Step 2: Create a new project
- To create an project, You have to click on the ‘select a project’ dropdown and then, click in ‘new project’ button placed on the right.
2. After that, system shows you the next page:
We will change the project name to “Angular-app” and click on Create button.
3. After that, system shows you the next notification:
Step 3: Create OAuth consent screen
1. Select the project recently created and go to the option called APIs & Services > Enabled APIs & services:
2. System will show you the next screen:
Before to create the credentials that we need to for our application we need click on OAuth consent screen link. This screen will showing you when you try to log in on your application and try to use this method to authenticate.
3. ‘OAuth consent creen’ is basically the configuration of your company information.
I will choose to use Extenal because I wanted to use an “@google.com” account, if you have your own domain, I recommend you to use “internal” option.
4. In this step, You have to configure your consent screen. Google cloud offers you to customize some parts of your consent screen.
For this example, we will complete the App name with: angular-17.
On User support email, I suggest you to use the same email that you use to log in (Also, we will use the same email for the Developer contact information).
5. Scopes: for configuration purposes, We will skip this step without do any modification.
6. Test Users: these users (accounts) are destined to test our application, all accounts that you enter here will have privileges to test the application. For configuration purposes, I will use the same that I used on previous steps.
7. The last step is to confirm — using a summary- that all the information is correct.
8. You have click on “Back to Dashboard” button.
Now, we have created and configured the consent screen, we will continue to create our credential.
Step 4: Create the credentials
- Click on Credentials on the left navigation bar.
System shows you the previous page. In this tutorial, we will create a OAuth 2.0 client Id.
2. Click on Create Credentials, then ‘OAuth client Id’ option:
3. After that, system shows you the next dropdown:
4. You should to choice the “web application” option.
5. After to select that option, you have to enter the web app name. We will use Angular-web-app.
6. Now, we will charge the next two URLs. The first one is destinated to know the app origin url (for configuration purposes, we will use http://localhost:4200, that is the most common angular url used). The second one: http://localhost:4200/otherUrl is where we will redirect after a sucessull login.
7. If all the data is OK, System will shows you a notification message like this one:
NOTE: for privacy purposes, I changed the client ID and Client Secret keys
8. That is it!!, Now you can use your client ID hash on your application.
Thanks for your attention!
