1.

INTRODUCTION
In an increasingly digital world, securing access to online resources and ensuring
that only authorized users can reach specific web content is paramount. This project
addresses this need by combining the convenience of QR codes with a password-protected
authentication system, ultimately guiding users to an actual website upon successful
verification. By leveraging Python and its built-in qrcode module for QR code generation,
along with HTML and JavaScript for web-based interactions, this project offers a robust
solution for controlled access to web content.

The core of the project involves generating a QR code that, when scanned, redirects users
to a password-protected page. This page, implemented in HTML and JavaScript, requires
users to enter a password. If the password is correct, users are redirected to the intended
website, ensuring that only those with the correct credentials can access the content.

The use of QR codes for this purpose offers several advantages:

1. Convenience: QR codes can be easily scanned using any smartphone, providing

quick and easy access to the authentication page.
2. Security: By requiring a password to proceed from the QR code landing page to
the actual website, an additional layer of security is added.
3. Versatility: This method can be applied in various scenarios, such as granting
access to exclusive content, secure communications, or restricted event
information.

While the current implementation uses client-side password validation for simplicity, it
sets the stage for potential enhancements. Future iterations can include server-side
password verification, database integration for user management, multi-factor
authentication (MFA), and other advanced security measures.

This project showcases how the combination of QR code technology and web-based
authentication can provide a secure and user-friendly method for controlling access to
online resources, balancing ease of use with robust security measures.

1
1.1 Problem Definition

In the digital age, ensuring secure access to online resources is a critical concern for both
individuals and organizations. Traditional methods of access control, such as password-
protected pages, are often vulnerable to unauthorized access if not implemented correctly.
Additionally, the ease with which sensitive URLs can be shared or accessed without proper
authorization further complicates the security landscape. The challenge is to create a
system that combines convenience and security, providing controlled access to web content
in a user-friendly manner.

The specific problems this project aims to address are:

1. Unauthorized Access: Preventing unauthorized users from accessing sensitive or

restricted web content.
2. URL Security: Ensuring that URLs to sensitive content are not easily shared or
accessed without proper authorization.
3. User-Friendly Access Control: Creating a secure access control system that is
easy for users to navigate and use.
4. Scalability and Flexibility: Designing a system that can be easily scaled and
adapted to various use cases, from small personal websites to larger organizational
portals.
5. Integration with Existing Technologies: Leveraging existing technologies such as
QR codes, HTML, JavaScript, and Python to create a seamless and efficient
solution.

1.2 Objective of Project

The objective of this project is to create a secure and user-friendly system for
accessing web content using QR codes and password protection. The project will generate
QR codes with Python, which link to a password-protected page. Users must enter the correct
password to access the actual website. The system is designed to be intuitive, with clear
instructions, and is scalable for future enhancements such as server-side validation and
multi-factor authentication.

2
1.3 Limitation of Project

The limitations of the project include.

• Client-Side Authentication: Password validation is handled on the client side with

JavaScript, which is less secure than server-side methods.

• Static QR Codes: The QR codes do not update dynamically, requiring regeneration if

the password changes.

• No Multi-Factor Authentication (MFA): The system lacks additional layers of security

like MFA, which could enhance protection.

• Limited Scalability and Database Integration: The project does not support large-scale
applications or integrate with a database for managing user credentials and access logs.

3
 2. SYSTEM ANALYSIS

2.1 Existing system

Existing systems for web access control often use static password protection and
URLs. Authentication is typically handled on the server side, and QR codes, when used, are
static and do not incorporate advanced security features. This project aims to improve upon
these methods by combining QR code technology with a password-protected page for
enhanced security and a better user experience.

2.1.1 Disadvantages

• Static Password Protection

• Limited Security Features

• No Detailed Access Logs

2.2 Proposed System

The proposed system integrates QR code technology with enhanced security

measures to improve web access control. It uses Python and the qrcode library to generate
dynamic QR codes that redirect users to a password-protected page. This page is secured
using JavaScript for client-side validation, and upon correct password entry, users are
redirected to the actual website.

2.2.1 Advantages

• Dynamic QR Code Generation

• Password-Protected Access
• Client-Side Password Validation

2.3 Software Requirements

It deals with defining software resource requirements and prerequisites that need to
be installed on a computer to provide optimal functioning of an application. These
requirements or prerequisites are generally not included in the software installation package
and need to be installed separately before the software is installed. The software
requirements are a description of features and functionalities of the target system.

4
 1. Python: Programming language used for QR code generation.
o Version: 3.x
2. qrcode Library: Python library for generating QR codes.
o Installation: pip install qrcode[pil]
3. HTML/CSS: Markup and styling languages for creating web pages.
4. JavaScript: Scripting language for client-side password validation and user
interaction.
5. Web Browser: For testing and accessing the web pages.
o Examples: Google Chrome, Mozilla Firefox, Microsoft Edge
6. Text Editor or IDE: For writing and editing code.
o Examples: Visual Studio Code, PyCharm, Sublime Text
7. Web Server: Optional, for serving the web pages locally or on a network.
o Examples: Apache, Nginx, or Python's built-in HTTP server (http.server)
8. Operating System: The project can be developed and run on any operating system
that supports Python and web development.
o Examples: Windows, macOS, Linux

2.3.1 Functional and Non-Functional Requirements

Requirement’s analysis is very critical process that enables the success of a system or
software project to be assessed. Requirements are generally split into two types: Functional
and non-functional requirements.

Functional Requirements
These are the requirements that the end user specifically demands as basic facilities that
the system should offer. All these functionalities need to be necessarily incorporated into the
system as a part of the contract. These are represented or stated in the form of input to be
given to the system, the operation performed and the output expected. They are basically the
requirements stated by the user which one can see directly in the final product, unlike the
non-functional requirements.
Functional requirements of this project are:

• QR Code Generation
• Password-Protected Page

5
 • Dynamic URL Handling
• Access Control

Non-functional requirements

These are basically the quality constraints that the system must satisfy according to the
project contract. The priority or extent to which these factors are implemented varies from
one project to other. They are also called non-behavioural requirements.

They basically deal with issues like:

• Portability
• Security
• Maintainability
• Reliability
• Scalability
• Performance
• Reusability

2.4 Hardware Requirements

The most common set of requirements defined by any operating system or software
application is the physical computer resources, also known as hardware, a hardware
requirements list is often accompanied by a hardware compatibility list (HCL), especially in
case of operating systems. An HCL lists tested, compatible, and sometimes incompatible
hardware devices for a particular operating system or application.

• Processor: Intel Core i5 or equivalent

• RAM: 8 GB or more
• Storage: 256 GB SSD or more
• Operating System: Windows 10/11, macOS, or Linux
• Smartphone or Tablet:
o Camera: Integrated camera for scanning QR codes
o Operating System: iOS, Android, or any OS with QR code scanning
capability

6
2.5 Content Diagram

The Content diagram is an extension of UML notation. The purpose of the

Content diagram is to generate or represent a project structure (diagrams) and
relations between them. The Content table works as a table of contents for a project.
The Content Shape creates a table of contents of all diagrams of the project.

2.5: Content Diagram

7
 3. IMPLEMENTATION

3.1 Method of Implementation

The more complex the system being implemented, the more involved will be the
systems analysis and design efforts required for implementation. The implementation phase
comprises of several activities. The required hardware and software acquisition is carried
out. The system may require some software to be developed. For this, programs are written
and tested. The user then change over to his new fully tested system and the old system is
discontinued.

3.1.1 Technologies Used

The technologies that are used in the project are

1. Python
2. qrcode
3. html
4. javascript
5. css

1. Python

Python is a general-purpose interpreted, interactive, object-oriented, and high-level

programming language. It was created by Guido van Rossum during 1985- 1990. Like Perl,
Python source code is also available under the GNU General Public License (GPL).

Python is a high-level, interpreted, interactive and object-oriented scripting

language. Python is designed to be highly readable. It uses English keywords frequently
where as other languages use punctuation, and it has fewer syntactical constructions than
other languages.

Some of the key advantages of learning Python

• Python is Interpreted
• Python is Interactive

8
 • Python is Object-Oriented
• Python is a Beginner's Language

2. qrcode

The qrcode module in Python is a handy library for generating QR codes (Quick Response
Codes).

• Creates QR codes that can store text, URLs, and even small amounts of data.
• Offers options to customize the size, error correction level, and appearance of the
QR code.
• Converts the QR code information into a usable image file (PNG by default).

3. HTML

HTML, which stands for Hyper Text Markup Language, is the fundamental building block
for web pages. It's not a programming language, but rather a markup language that uses
tags to define the structure and content of a web page.

• Creates the skeleton of a web page, defining elements like headings, paragraphs,
lists, images, links, and more.
• Doesn't control the visual appearance (CSS handles that).
• Provides a way to structure information for browsers to interpret and display.

4.Java Script

• JavaScript (JS) is a high-level, interpreted programming language commonly used

for creating dynamic and interactive elements on web pages.
• It's considered one of the three core technologies (alongside HTML and CSS) for
building modern web applications.

• Client-side scripting: Adding interactivity to web pages (e.g., form validation,

animations, dynamic content updates).
• Building web applications: Creating single-page applications (SPAs) and complex
web interfaces using frameworks like React, Angular, Vue.js.

9
 • Server-side scripting: Node.js allows JS to be used for server-side development,
handling backend logic and data access.

5.CSS
CSS stands for Cascading Style Sheets. It's a language specifically designed to style the
presentation of a web page, separate from the content itself. Here's a quick breakdown of
what CSS offers:

• Styling Elements: CSS allows you to define styles for different HTML elements
like headings, paragraphs, lists, buttons, and more. You can control their
appearance using properties like:
o Font: Family, size, color, weight
o Background: Color, image
o Borders: Style, width, color
o Margins: Spacing around elements
o Padding: Space within elements
• Responsiveness: CSS can be used to create responsive websites that adapt their
layout to different screen sizes (desktop, mobile, tablet) by using media queries.

3.2 Algorithmic Approach

1. Generate QR Code:
o Import qrcode and other necessary modules.
o Set up the QR code with parameters for version, error correction, etc.
o Encode the URL and generate the QR code image.
o Save the QR code image to a file.
2. Create Password-Protected Page:
o Write HTML for user interface (input for password and submit button).
o Style the page with CSS for better presentation.
o Implement JavaScript to handle password verification and redirection.
3. Deploy and Test:
o Upload the HTML file to your web server.
o Generate the QR code and distribute it.

10
 o Test the entire flow from scanning the QR code to accessing the password-
protected page and verifying password functionality.

3.3 Source code

3.3.1 QR Code Generation (Python)

This script generates a QR code that directs users to a protected webpage.

import qrcode

# URL of the protected page

url = "http://example.com/protected_page.html"

# Create a QR code object

qr = qrcode.QRCode(
version=1,
error_correction=qrcode.constants.ERROR_CORRECT_L,
box_size=10,
border=4,
)

# Add the URL data to the QR code

qr.add_data(url)
qr.make(fit=True)

# Create an image from the QR code instance

img = qr.make_image(fill='black', back_color='white')

# Save the image to a file

img.save("qr.png")

11
3.3.2 Protected Page HTML

A password-protected page where users must enter the correct password to access the
actual website.

HTML Code (protected_page.html):

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Protected Page</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

margin: 0;

.container {

text-align: center;

input {

margin: 10px;

12
 padding: 10px;

font-size: 16px;

button {

padding: 10px 20px;

font-size: 16px;

.message {

margin-top: 20px;

color: red;

</style>

</head>

<body>

<div class="container">

<h1>Enter Password to Continue</h1>

<input type="password" id="password" placeholder="Password">

<button onclick="checkPassword()">Submit</button>

<div class="message" id="message"></div>

</div>

<script>

function checkPassword() {

const passwordInput = document.getElementById('password').value;

const correctPassword = 'password123'; // Replace with your desired password

13
 const targetUrl = 'https://www.example.com'; // Replace with the target URL

const messageDiv = document.getElementById('message');

if (passwordInput === correctPassword) {

window.location.href = targetUrl;

} else {

messageDiv.textContent = 'Incorrect password. Please try again.';

</script>

</body>

</html>

3.3.3 Deploying the Project

1. QR Code Generation:
o Run the Python script to generate the QR code image. This image should be
distributed or displayed where users can scan it.
2. Protected Page Hosting:
o Host the protected_page.html file on a web server. Ensure the page is
accessible through the URL embedded in the QR code.
3. Testing:
o Test the QR code scanning process and password verification to ensure the
system redirects users correctly upon entering the correct password.
4. Distribution:
o Share or display the QR code where intended, and ensure that users know
the QR code leads to a password-protected page.

14
 4. OUTPUT SCREENSHOTS

4.1 QR CODE:

4.1 QR CODE

4.2 Scanning the QR code:

After scanning the QR code it redirects to the password protected page.

4.2 Scanning the QR code

15
4.3 Password-Protected Page:
After entering the correct password it redirects to the website else provides incorrect
password message.

4.3 Password-Protected Page

4.3.1 Incorrect Password Message

16
4.4 Actual Website:

4.4 Actual Website

17
 5. CONCLUSION AND FUTURE ENHANCEMENT
5.1 Project Conclusion

The project effectively integrates QR code generation with password-protected web access,
offering a blend of security and convenience. Utilizing Python’s qrcode module, we created
a QR code that directs users to a password-protected page. On this page, JavaScript manages
password verification, ensuring that only users with the correct password can access the
target website. This method streamlines the process of accessing secure content by reducing
the need for manual URL entry.

Overall, the project highlights a practical use of QR codes for enhancing digital security
while providing a user-friendly experience. Future improvements could involve
implementing multi-factor authentication and dynamic QR codes to further bolster security.
This approach demonstrates how combining QR codes with password protection can
effectively manage secure access in a web-based environment.

5.2 Future Enhancement

Future enhancements for this project could focus on several areas to improve
security, usability, and functionality:

• Multi-Factor Authentication (MFA): Add layers of security by requiring additional

verification methods like SMS codes or authentication apps alongside passwords.

• Dynamic QR Codes: Utilize QR codes that change periodically or are session-specific

to reduce the risk of unauthorized access.

• Enhanced Password Security: Strengthen password policies and encryption to protect

against unauthorized access and data breaches.

• Access Control Levels: Implement varying access levels for different user roles to
manage content visibility and permissions more effectively.

• User Management and Logging: Introduce user management systems and logging
features for better account management and monitoring of access patterns.

18
 6. REFERENCES

6.1 Web References

• https://pypi.org/project/qrcode/

• https://www.w3schools.com/html/

• https://www.geeksforgeeks.org/javascript/

• https://web.dev/learn/css/

• https://github.com/

• https://chatgpt.com/

19
20