reboottime / WebDevelopment

Some notes, thoughts and articles aggregated here about UI/UX and web development.
6 stars 0 forks source link

QR Code Mobile Authentication: System and Workflow #86

Open reboottime opened 1 year ago

reboottime commented 1 year ago

User and System Flow

User flow

  1. User visits the site, and the site presents user with a QR code (OTP)
  2. User scans the QR code uses the company's mobile app on iPhone
  3. After scanning the QR code successfully, after a while, user is logged in on the website.

System Flow

QR code generation: The website generates a unique QR code that encodes a URL or other information needed for the next steps, such as a unique token or identifier for the user session.

Display QR code: The website displays the generated QR code to the user, prompting them to scan it with their phone.

User scans QR code: The user scans the QR code with their smartphone's camera using a QR code scanning app.

Decode QR code: The QR code scanning app decodes the QR code and extracts the encoded URL or information.

Send user session information: The app sends a request to the server using the extracted URL or information. This request includes the unique token or identifier and any necessary authentication information, which is used to identify the user session on the website.

Server processes request: The server processes the request, verifies the user session, and updates the session status as authenticated.

Server signals website: The server sends a signal to the website (e.g., through websockets or long polling) to inform it that the user session has been authenticated.

Website updates: Upon receiving the signal from the server, the website updates the user's session as authenticated and redirects the user to the dashboard.

reboottime commented 1 year ago

References ( By ChatGPT)

WebSocket Essentials

  1. Protocol: WebSocket is a communication protocol built on top of the TCP/IP protocol, providing bidirectional, full-duplex communication between clients and servers.

  2. Connection: WebSocket establishes a single, long-lived connection, allowing for lower latency and real-time communication compared to traditional HTTP requests.

  3. Handshake: The initial connection starts with an HTTP handshake, upgrading the connection to a WebSocket connection if the server supports it.

  4. Data frames: Data is transmitted in frames, allowing for efficient data transfer, and can be sent as text (UTF-8 encoded) or binary data.

  5. Use cases: WebSocket is suitable for real-time applications such as online gaming, chat applications, live sports updates, financial market updates, and more.

  6. Integration: Many programming languages and libraries support WebSocket, making it easy to integrate into your applications.

  7. Security: WebSocket uses ws:// (unsecured) and wss:// (secured) schemes, the latter being encrypted with TLS/SSL, ensuring secure communication.

One Time Password

A One-Time Password (OTP) is a unique, temporary code that is used as an additional layer of security for authentication purposes. It is typically sent to a user's registered email address or mobile phone via SMS, voice call, or a dedicated app. The OTP is generated for a specific transaction or login session and is valid only for a short period of time, usually a few minutes.

The main purpose of using an OTP is to enhance security by ensuring that only the person who has access to the registered email or phone number can complete the transaction or access a particular account. This method helps protect against unauthorized access, as the OTP is difficult to predict or intercept, and its short validity period limits the risk of it being used maliciously. OTPs are commonly used in online banking, e-commerce transactions, and other sensitive online services.

QR code

QR codes are two-dimensional barcodes that store various types of information, with fast readability and error correction capabilities. QR codes can be easily scanned by smartphones, providing quick access to encoded information without additional hardware or software. Their versatility makes them suitable for applications like advertising, product packaging, and inventory management.