How to Generate Random QR Codes for Temporary Access?

#harmonyos #arkts #cryptoarchitecturekit #temporaryaccesscodes

Read the original article：How to Generate Random QR Codes for Temporary Access?

Context

The feature allows users to generate random QR codes from numeric values for secure data transfer, temporary access, or authentication purposes. QR codes are generated using cryptographically secure random values, ensuring that each code is unique and unpredictable. The generated codes can be scanned by compatible devices for immediate use.

Description

The system must provide a reliable and user-friendly way to create new QR codes on demand. Each QR code is based on a 6-digit random number generated by a cryptographically secure random number generator. The user interface displays the current QR code and provides a button to generate a new one at any time. The QR codes must be visually clear, correctly sized for scanning, and centered on different device screens. This ensures usability and security for scenarios such as temporary access, authentication, or secure data sharing.

Solution / Approach

Create a cryptographically secure random number using CryptoArchitectureKit.
Generate a random 6-digit numeric value and store it in the component state.
Render the value as a QR code using a QR code UI component.
Provide a “Generate” button that refreshes the QR code whenever pressed.

This method generates a cryptographically secure 6-digit random number using the CryptoArchitectureKit. It first creates a random generator and sets a seed, then produces six random bytes. Each byte is mapped to a digit between 0 and 9, and the resulting digits are joined into a string. Finally, the generated value is stored in this.qrValue, which can be displayed as a QR code in the UI.

  async doRand() {
    let rand = cryptoFramework.createRandom();
    let seed = new Uint8Array([1, 2, 3]);
    rand.setSeed({ data: seed });

    let randOutput = await rand.generateRandom(6);
    let digits = Array.from(randOutput.data)
      .map(n => (n % 10).toString())
      .join('');

    this.qrValue = digits;
  }

This code defines a user interface for the QR code generator. It displays a text prompt, shows the current QR code based on this.qrValue, and includes a “Generate” button. When the button is pressed, it calls the doRand() method to generate a new random value, which updates the displayed QR code. The layout uses a Column to stack the elements vertically with margins and styling for proper spacing and visibility.

Column() {
  Text('Do you want to generate new QR code?')
    .margin(2)

  QRCode(this.qrValue)
    .width('50%')
    .height('50%')
    .margin(2)

  Button('Generate')
    .width('100')
    .height('25')
    .backgroundColor(Color.Pink)
    .fontSize(14)
    .fontWeight(FontWeight.Bold)
    .borderColor(Color.White)
    .margin(2)
    .onClick(async () => {
      await this.doRand();
    });
}

Output:

Key Takeaways

Use CryptoArchitectureKit to generate a cryptographically secure random numeric value.
The numeric value is then converted into a QR code and displayed in the app UI.

Previewers do not simulate QR code rendering or interactivity, so testing must be performed on real devices to verify display and scannability.

Each generated QR code is unique and unpredictable, making it suitable for temporary access codes, authentication, or secure data transfer scenarios.