QR Code Login Like Whatsapp Webapp With Angular 7 + Ionic 4

Choose Java 11 as the course's long-term support version, given the six-month release cycle and current LTS options. Download from Oracle, sign in, and install with default settings.

Learn why IntelliJ IDE is preferred for this course, with a faster learning curve, strong code completion, language support, and compare with Eclipse, VS Code, and NetBeans.

Explore Spring dependency injection and the dependency inversion principle to build loosely coupled, testable apps using constructor, setter, and field injection with component, service, and controller annotations.

Explore the server side implementation for a qr code login app using Spring Boot, including MVC structure, entities, repositories, controllers, security, and Hibernate ORM.

Install a spring boot project in an IDE such as IntelliJ or Eclipse, select a Gradle setup, define group and artifact names, and include security, JPA, REST, and Lombok dependencies.

Install and configure Lumbergh for the server side, enabling annotation processing in settings to use the library effectively.

Configure server-side application properties by customizing spring environment settings, set the application name, data source credentials, timezone handling, automatic database creation, public key retrieval, and Liquibase change logs.

Create a user model class as a JPA entity with an auto-generated id, name, user name, password, and a role enum, including getters and setters for database mapping.

Practice database changes with Liquibase by creating a change log and change sets, wiring a master changelog, and defining a user table with rollback support.

Create a user repository interface that extends JPA repository to handle CRUD operations, and define queries like find by name and a @Query to select user names by id list.

Create a spring-based user service by defining a service interface and implementation, wired with dependency injection, exposing save, find by user name, and find all users, aligned with solid principles.

Create a new user controller in the mvc pattern, wire in the user service, and map api endpoints for registration, login, and listing users using post and get requests.

This lecture explains spring security configuration and customization, covering form login, http basic authentication, session and csrf handling, logout behavior, and how to customize access rules with an authorization filter.

Learn how Spring Security works and how to implement it, including secure login with encrypted authentication headers, a user details service, password encoding, and authorization rules.

Implement a customized user details service in Spring Security to load users by username from a repository, authorize by role, and integrate with security for the QR code login app.

Create a config package, extend the security configuration, and enable web security to customize access, configure cross-origin and public resources, login endpoints, and a user details service with password encoder.

Configure a websocket in spring boot by adding the websocket dependency and creating a config class, then define a message broker with a subscription path and application prefix.

Create a model class for qr code login request and response, including token and user fields, and generate equals and hashCode methods using the Lombok @Data annotation.

Implement QR code login by building queries for login requests and responses, invoking them from the user service and repository, and authenticating with tokens or unique fields instead of passwords.

Create a qr code login controller, wire the user service with dependency injection, and implement post-mapped rest api methods for token-based login and client authentication.

Test the server side in this lesson to verify backend functionality and ensure reliable handling of requests.

Explore Angular basics by building projects with the command line, managing dependencies via npm and package.json, and generating components, directives, services, pipes, and modules for an Angular app.

Set up an Angular 7 + Ionic 4 client, install Angular Material and Bootstrap, and create login, register, profile, and user list pages with authentication against a Spring REST API.

Continue the Angular project by configuring Angular Material modules for use in components and setting up bootstrap in the TypeScript configuration, and prepare for API calls.

Explore model–view–controller architecture in Angular by defining model classes in a model package, implementing services and controllers, and making HTTP POST and GET requests to the server.

Define four to five routes in the Angular routing module, with a default redirect to login. Include routes for register, profile or user list, and user page with path parameters.

Create a user model in the MVC structure by defining a user class with default fields in the client-side model package, setting up data structure and architecture.

Implement an authentication service that connects to a Spring server via REST API, using HTTP and observables to perform login, registration, and logout, and get users with encrypted headers.

Implement a login controller by wiring the authentication service (observable), user model, and router to submit credentials, display error messages, and navigate to the profile page after login.

implement a profile controller and view to display current user details from local storage, using the authentication service and router for logout and navigation to the login page.

Implement a register page controller and view by wiring the authentication service, user model, and router, handling user data and errors, and submitting to navigate to the login page.

Implement user list page controller in angular, listing users with a material table, integrating authentication service, data source, and columns, with sorting, paging, and router navigation to user detail page.

Implement a user detail page by creating a controller and view, importing the user model and router, reading route parameters and current user from local storage, and rendering details.

Install dependencies for a qr code login app using Angular 7 and Ionic 4, including web socket library and client, then create a mobile page for the qr code feature.

Configure an angular project by adding router sources for new components, import QR codes module, and set a global variable for the stomp chest library used by the Admiralty module.

Update authentication service to support qr code login by adding a method that sends post requests to the rest login api with json data and stores results in local storage.

Implement mobile controllers and authentication flow, establish a socket connection, subscribe to a session channel, and navigate to the profile page after authentication, while displaying a QR code for login.

Scaffold an Ionic app using the side menu template, then generate login, register, and details pages alongside an authentication service. Prepare Android with Cordova for deployment.

Configure the ionic app by updating the app name and replacing the icon and splash with assets, then import forms and http client modules for login, registration, and API calls.

Learn the model-view-controller architecture in Ionic by building model classes, services, and controllers. Implement post and get API calls from components to display data.

Create five main Ionic routers: login, register, home, leased, and EDI, using path parameters, with a detail page supporting id parameters.

Create a user model class using mvc architecture, define user fields with default values in the model package.

Implement an authentication service in an Angular and Ionic app using rest api calls and observables for login, logout, register, and user retrieval, secured by headers and local deployment endpoints.

Implement a login controller and view by wiring the authentication service and loading indicator, navigate to home with the ionic router, and disable the side menu on login.

Implement a register controller and view in angular, wiring the authentication service, router navigation to the login page, managing form variables and a loading indicator, and submitting the registration form.

Implement the user home page controller and view, display current user details from local storage, enable the side menu, and navigate to login using the authentication service and router.

implement a user list controller and view using ionic list to display all users, fetch them via the authentication service, and navigate to user detail pages with the router.

Implement the user detail controller and view by wiring the router for parameters, injecting the router and menu controllers, and disabling the side menu on the detail page.

Update our ionic mobile site by importing a code scanner plugin, installing dependencies with npm, and creating our first page; next lessons will cover details.

update the authentication service with a qr login method that posts login data in json to the predefined rest api authentication endpoints.

Implement a qr page and view, import the qr scanner plugin, create a scanner instance, navigate to results page with the Ionic router, and handle errors with a transparent background.

Implement the result page and initiate authentication using the qr value. Retrieve current user and session id from the activated route, then call the authentication service and display results.

Build a mobile application using Ionic, generate the resources icon, and run on Android or Windows platforms, then view the results in the platforms folder.

Learn to implement a QR code login like WhatsApp webapp using Angular 7 and Ionic 4, and test the login flow after development.