Expiring Links Tutorial: Python Flask One-Time Link Generator

One time links are essential where users want to share resources with co-worker or friend’s effortlessly but at the same time restrict other from access.

Its works best because the link automatically inactive if some one go to the link for the first time. That means the same link will not work for the second time. or for other user.

Also we can set time so if no one enters the link it will automatically inactive after the specific time.

Now begin our program

  1. first the user will generate the link. and share..
  2. Other user will go to link and get access.
  3. the link(token) will be deleted from the active token list so it will not work anymore
  4. If no one access the link it will automatically remove from the shared link after specific time.

Generate link

we will use python secrets library to generate the unique token for the link

def generate_token():
    return secrets.token_urlsafe(16)

this is existing users list.( its example for the users who have account)


main_user_ids = ['user1', 'user2', 'user3']

So this users will be able to create the link for friends and co-workers

we will store the active token in python dictionary right now. For real world application you can use database like sql, mongodb or whatever you want

active_tokens = {}

This is code what the main users will get in the browser. You can use render template and place hte index.html in the template folder. but for simplicity we applied it directly.

@app.route('/', methods=['GET'])
def index():
    #return render_template('index.html')
    return """
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate Connection Link</title>
</head>
<body>
    <h1>Generate Connection Link</h1>
    <form action="/generate_link" method="post">
        <label for="user_id">Enter User ID:</label><br>
        <input type="text" id="user_id" name="user_id"><br><br>
        <input type="submit" value="Generate Link">
    </form>
</body>
</html>
"""

Here the main users will enter the user name and generate the link on behalf of them

This is the second part of the code where generate the key from the previous code form action generate link

from datetime import datetime, timedelta
TOKEN_EXPIRY_DURATION = timedelta(hours=1)

# Route to generate a connection link
@app.route('/generate_link', methods=['POST'])
def generate_link():
    user_id = request.form.get('user_id') if request.form.get('user_id') in main_user_ids else None
    if user_id:
        token = generate_token()
        expiry_time = datetime.now() + TOKEN_EXPIRY_DURATION
        active_tokens[token] = (user_id, expiry_time)
        return f"Generated link from user {user_id}: <a href='/connect/{token}'>Click here to connect</a>"  # Return the generated token to the user
    else:
        return "Invalid user ID"

Here in the server side get the user name from the user . if user name exists then create an unique token and link on behalf of the user

Next part Verify the users access



# Route to handle the connection link
@app.route('/connect/<token>', methods=['GET'])
def connect(token):
    if token in active_tokens:
        user_id, expiry_time = active_tokens[token]
        if datetime.now() < expiry_time:
            # Connection successful, do something with the user_id
            del active_tokens[token]  # Mark the token as used
            return f"You have grant access by {user_id}"
        else:
            return "Token expired"
    else:
        return "Invalid token"

In this part the link is received from the user and verify if that exist. if exist and have expiration time . It grant the permission to that user and delete link(token) from the active tokens.

The complete code


from flask import Flask, request, redirect, url_for, render_template
from datetime import datetime, timedelta
import secrets

app = Flask(__name__)

# Active tokens and their expiry times
active_tokens = {}

# Duration for the token to remain valid (e.g., 1 hour)
TOKEN_EXPIRY_DURATION = timedelta(hours=1)

# Main user IDs
main_user_ids = ['user1', 'user2', 'user3']

# Function to generate a unique token
def generate_token():
    return secrets.token_urlsafe(16)

# Route to render the form
@app.route('/', methods=['GET'])
def index():
    #return render_template('index.html')
    return """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generate Connection Link</title>
</head>
<body>
    <h1>Generate Connection Link</h1>
    <form action="/generate_link" method="post">
        <label for="user_id">Enter Your User ID( this represents the main users in the main usrs list. enter a name from the uses list main_user_id for example <b>user1</b> :</label><br>
        <input type="text" id="user_id" name="user_id"><br><br>
        <input type="submit" value="Generate Link">
    </form>
</body>
</html>
"""

# Route to generate a connection link
@app.route('/generate_link', methods=['POST'])
def generate_link():
    user_id = request.form.get('user_id') if request.form.get('user_id') in main_user_ids else None
    if user_id:
        token = generate_token()
        expiry_time = datetime.now() + TOKEN_EXPIRY_DURATION
        active_tokens[token] = (user_id, expiry_time)
        return f"Generated link from user {user_id}: <a href='/connect/{token}'>Click here to connect</a>"  # Return the generated token to the user
    else:
        return "Invalid user ID"



# Route to handle the connection link
@app.route('/connect/<token>', methods=['GET'])
def connect(token):
    if token in active_tokens:
        user_id, expiry_time = active_tokens[token]
        if datetime.now() < expiry_time:
            # Connection successful
            del active_tokens[token]  # Mark the token as used
            return f"You have grant access by {user_id}"
        else:
            return "Token expired"
    else:
        return "Invalid token"

if __name__ == '__main__':
    app.run(debug=True)



Optimize Website Performance: Pause Media Playback on Inactive Tabs

How pause media playback on inactive tabs can be very very useful?

By using visibilitychange event, its possible stop playback when user move to another browser tab or inactive. So we can save bandwidth and which can be used for active users to give them the best quality uninterrupted media playback. Because in streaming platform high bandwidth is the main challenging issue.

The Big Benefit of Pausing Media in Inactive Tabs

Pausing media playback in inactive tabs can be a surprisingly useful feature, especially for streaming platforms. Here’s how it benefits both users and the platform itself.

Reduced Bandwidth Consumption

By stopping media playback when a user switches to another tab, you can significantly reduce bandwidth usage. This is particularly important for streaming services, where high bandwidth is crucial for maintaining smooth playback. Lower overall bandwidth consumption frees up resources for active users, ensuring they experience uninterrupted high-quality streams.

Improved User Experience (For Most)

While some users might prefer media to continue playing in the background, many appreciate the ability to conserve bandwidth. This is especially true for users on limited data plans or those with unreliable internet connections. Pausing inactive tabs also helps to prevent unnecessary battery drain on mobile devices.

Making the Choice – User Research is Key

As a developer, it’s important to understand your user base. Conducting user research can help you determine whether implementing this feature aligns with your target audience’s needs. You can then offer the option to enable or disable pausing media in inactive tabs, giving users more control over their experience.

This is the example code you can test by yourself. This code shows when the tab is visible and when not. By determining the tab visibility its easy to pause and resume media. … You have to write simple function for this..



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab Activity Detection</title>
<script>
  // Function to handle tab visibility change
  function handleVisibilityChange() {
    var listElement = document.getElementById('activityList');
    var activity = document.hidden ? 'Inactive' : 'Active';
    var entry = document.createElement('li');
    entry.textContent = activity + ' - ' + new Date().toLocaleString();
    listElement.appendChild(entry);
  }

  // Add event listener for visibility change
  document.addEventListener('visibilitychange', handleVisibilityChange);

  // Initial setup based on tab visibility
  window.onload = handleVisibilityChange;
</script>
</head>
<body>
  <h1>Tab Activity Detection</h1>
  <p>This page logs tab activity as a list.</p>
  <ul id="activityList"></ul>
</body>
</html>



To test this. copy the code and run this code.

This code shows the result when the tab is visible and when not. And with this result we can pause and resume media playback and also other functions.

Go to another tab and back to this tab to get the result… tab visibility( when the tab was visible or not)

Tab Activity Detection

Tab Activity Detection

This page logs tab activity as a list.

    Play the audio and go to another tab and it will pause automatically

    Media Playback Example

    The complete code for this

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Media Playback Example</title>
    </head>
    <body>
    
      <!-- Audio element with controls -->
      <audio id="myAudio" controls>
        <!-- Source of the audio file -->
        <source src="https://upload.wikimedia.org/wikipedia/commons/5/5b/Ludwig_van_Beethoven_-_symphony_no._5_in_c_minor%2C_op._67_-_iii._allegro.ogg" type="audio/mpeg"> 
      </audio>
    
    <script>
      // Wait for DOM content to be loaded
      document.addEventListener("DOMContentLoaded", function() {
        // Get the audio element by its ID
        const audio = document.getElementById("myAudio");
        let playingOnHide = false;
    
        // Event listener for visibility change
        document.addEventListener("visibilitychange", () => {
          // Check if document is hidden
          if (document.hidden) {
            // Pause audio when document is hidden
            playingOnHide = !audio.paused; // Check if audio was playing before hiding
            audio.pause(); // Pause audio playback
          } else {
            // Resume audio playback when document becomes visible
            if (playingOnHide) {
              audio.play(); // Resume playback if audio was playing before hiding
            }
          }
        });
      });
    </script>
    
    </body>
    </html>