Login using Google credentials in Angular Web Application
Yikes! You should never be required to share your username, password, your credentials, to another service. There’s no guarantee that an organization will keep your credentials safe or guarantee their service won’t access more of your personal information than necessary.
We are going to implement a feature to login to an Angular web application using Google login interface. Login with Google makes it easy and safe for users to use applications. Also, application need not to be featured to manage user and credentials, saving plenty of complexities for developer and organization!
Prerequisites
- Angular basic
- Typescript
- Visual Studio Code
Implementation Steps
- About Web Application to be used
- Configure Google Client ID and Secret Key
- Enhance Angular application with Google Login
- Run the Application
1. About Web Application to be used
We are going to enhance basic angular application developed in Angular version 11.1.2, published at
https://pankaj-d-sonawane.medium.com/angular-web-application-basic-8839b60862da
We will be adding a Login button to navigate user to Google Login Interface. User submits Google credentials to validate it by Google API. On successful validation at Google API, application receives a Token and other user detail, which can be utilized in our application.
To implement Google Login feature, we are using angular library:
angularx-social-login
2. Configure Google Client ID and Secret Key
a. Browse Google API Console and login with google account.
https://console.developers.google.com/projectselector2/apis/credentials?pli=1&supportedpurview=project
b. Click on “CREATE PROJECT”
c. Provide “Project name” and Click on “CREATE”
d. Click on “CREATE CREDENTIALS” and select “OAuth client ID”
e. Click on “CONFIGURE CONSENT SCREEN”
f. Select option “External” and Click on “CREATE”
g. Fill AppName, User support email, Developer contact information.
Click on “SAVE AND CONTINUE”
h. Continue clicking on “SAVE AND CONTINUE” for Scopes & Test users screen.
In this post, application does not restrict on any scope. Any verified valid google user will be granted access to our application.
i. Scroll down on SUMMARY page and Click on “BACK TO DASHBOARD”
j. Fill information on “Create OAuth client ID” as stated in screenshot
k. Client Id and Secret will be generated. Make note of both keys, as these generated keys are needed to be used in application.
3. Enhance Angular application with Google Login
We will be adding ‘Login’ button on home page.
On click of ‘Login’ button, user to be prompted with Google Login Interface to allow user to submit username and password. On successful google user validation, we will be showing username and LogOff button on navigation bar.
To handle feature LogIn, LogOff & manage user detail , we will be adding an Angular Service.
We are majorly focusing on technical coding without much concentrating on styling and look of UI.
a. Open Visual Studio Code
b. Install SocialLoginModule
Open terminal and run below command -
>> npm install angularx-social-login
c. Create login service.
Open terminal and run below command.
>> ng g s service/AppLogin
A service file app-login.service.ts is created inside folder ‘service’.
Modify code in file app-login.service.ts to use SocialAuthService signIn and signOut api with google provider.
d. Project structure
e. Modify HomeComponent template to provision ‘Login’ button.
*ngIf is used in template to show/hide ‘Welcome’ text on successful login.
f. Modify HomeComponent to catch OnClick event of ‘Login’ button.
We are accessing AppLoginService service properties in HomeComponent template, so make sure in HomeComponent constructor to mention access specifier of AppLoginService as ‘public’.
g. Open app.module.ts and import GoogleLoginProvider, SocialAuthServiceConfig, SocialLoginModule.
Add GoogleLoginProvider configuration in providers section of AppModule.
Make sure to keep provider name as
provide: ‘SocialAuthServiceConfig’
Mention your google client id generated in step ‘2.k’, inside ‘GoogleLoginProvider’
h. Modify AppComponent template to provision ‘LogOff’ button.
i. Modify AppComponent to catch on click event of ‘LogOff’ button.
4. Run the application
a. Use below command in terminal of Visual Studio Code
>> npm start
b. After command runs successfully, open URL: http://localhost:4200 browser as stated in the command logs.
c. Click on ‘Login’ button and submit your google credentials. On successfully validation of credentials by google, our app will show user name and LogOff button in navigation bar.
What next
This application can be enhanced by passing logged in user details to backend web service. The user details can be validated with Google from backend web service and then map with our application specific registered user.
I will be covering it in our next post to be published soon.
Stay tuned!
Thank you for reading. If you like this post, give a Cheer!!!
Happy Secure Coding ❤
