Skip to main content

Authentication Finesse

 Authentication Finesse

So far, we've used Replit authentication as a bit of a bully. It's forced users to authenticate on every page.


For a blog engine, this will probably put users off. We want them to be able to read your online literary genius without being turned off by having to create an account and login.


Today is all about finessing the Replit authenticator so that it works in a more subtle way.


Custom Buttons

To start, I've turned on the authenticator from the files panel and then select or use a prebuilt login page. Make sure you do this before you write any code!


👉 This time though, I've clicked the use your own custom button link.



 Now I've got some lovely code snippets to steal work with.


Add an HTML template

👉 Next I add in a HTML template page where the button will appear. The page is called page.html and can be found in your file tree. Here's the code:

<html>

  <head>

    <title>My Website</title>

  </head>


  <body>

    <h1>Here's my site</h1>

    <p>Everyone can read this.</p>

  </body>  

</html>


 And we read that page into our main.py Flask code too:


from flask import Flask


app = Flask(__name__)


@app.route('/')

def index():

  page = ""

  f = open("page.html", "r")

  page = f.read()

  f.close()

  return page



app.run(host='0.0.0.0', port=81)


Edit page.html

👉 Let's add the authentication. To do this, I'm editing the page.html file.


I used the auto add HTML package button in the authentication panel and moved the code into the header.

I used the Insert Custom Button option to add the button code to the body.

Here's the code to update in page.html:


<html>

  <head>

    <title>My Website</title>

    <script src="https://replit.com/public/js/repl-auth-v2.js"></script>

  </head>

  

  <body>

    <h1>Here's my site</h1>

    <p>Everyone can read this.</p>

    

    <button onclick="LoginWithReplit()"> Login </button>

  </body> 

</html>


Stopping the code and re-running it will show you the login button on your page.


Build a 'hello' page

👉 Now, let's build a quick 'hello' page that we can redirect a recognized user to.


Add the necessary imports from flask import Flask, request, redirect.

Check for a recognized user (in the index subroutine) and redirect if they are recognized:


def index():

  if request.headers["X-Replit-User-Name"]:

    return redirect("/hi")`


Build a quick hi page that displays the username:


@app.route("/hi")

def hi():

  page = ""

  page += f"""<h1>{request.headers["X-Replit-User-Name"]}</h1>"""

  return page

Add a quick if that redirects if the user is not logged in. This stops the user from adding /hi directly to the URL to try and bypass the login.

def hi():

  if not request.headers["X-Replit-User-Name"]:

    return redirect("/")


Here's the whole code:

from flask import Flask, request, redirect


app = Flask(__name__)


@app.route('/')

def index():

  if request.headers["X-Replit-User-Name"]:

    return redirect("/hi")


  page = ""

  f = open("page.html", "r")

  page = f.read()

  f.close()

  return page


@app.route("/hi")

def hi():

  if not request.headers["X-Replit-User-Name"]:

    return redirect("/")

  

  page = ""

  page += f"""<h1>{request.headers["X-Replit-User-Name"]}</h1>"""

  return page


app.run(host='0.0.0.0', port=81)


What's the Best Key?

User name might not be the best piece of info to use to identify a user because the user can change this. The thing that's unique that never changes is their user ID - this would be a good piece of info to use as a key because it's unique and permanent for every user.


We can also get information about:


What teams a user belongs to.

Roles (teacher, student, Replit staff etc)

Profile pic

Display The Pic

Yeah, that would be great, wouldn't it. Like a book of faces, a picture book, a face novel....Ok, I'll stop now.


Anyway, let's add the user's profile pic to the hi page:


👉 Here's the whole code:


from flask import Flask, request, redirect


app = Flask(__name__)


@app.route('/')

def index():

  if request.headers["X-Replit-User-Name"]:

    return redirect("/hi")


  page = ""

  f = open("page.html", "r")

  page = f.read()

  f.close()

  return page


@app.route("/hi")

def hi():

  if not request.headers["X-Replit-User-Name"]:

    return redirect("/")

  

  page = ""

  page += f"""<h1>{request.headers["X-Replit-User-Name"]}</h1>"""


  ###### The new bit ##################

  page += f"""<img src="{request.headers["X-Replit-User-Profile-Image"]}" width="200">"""

  

  return page


app.run(host='0.0.0.0', port=81)


Comments

Post a Comment

Popular posts from this blog

Hide & Remove,Come Back!,

 Hide & Remove DISCLAIMER: I promise the good stuff is coming back. We have to go through the valley to get to the mountain, right? Sometimes, we want to remove a button, image or piece of text from the screen. To do this, we use pack_forget(). 👉 We'll start with our default tkinter program. import tkinter as tk window = tk.Tk() window.title("Hello World")  window.geometry("300x200")  hello = tk.Label(text = "Hello World")  hello.pack()  button = tk.Button(text = "Click me!")  button.pack() tk.mainloop() 👉 Now I'm going to add a new subroutine to hide the label and call it on a button click. import tkinter as tk window = tk.Tk() window.title("Hello World")  window.geometry("300x200")  # New subroutine def hideLabel():   hello.pack_forget() # Removes the 'hello' label hello = tk.Label(text = "Hello World")  hello.pack()  button = tk.Button(text = "Click me!", command = hideLabel) # Call...
Post a Comment
Read more

String Manipulation

   String Manipulation Does this code look familiar from the insult generator project? name = input("What's your name? ") if name == "David" or name == "david":   print("Hello Baldy!") else:    print("What a beautiful head of hair!") Right now, if the user writes "DAVID" or "david", the if statement works correctly. However, "DaVID" does not give the correct output. To the computer, " david", "dAviD", and "david" are completely different. To simplify what the user typed in, we can add these functions to the end of the name of the variable: .lower() = all letters are lower case .upper() = all letters are upper case .title() = capital letter for the first letter of every word .capitalize() = capital letter for the first letter of only the first word    
Post a Comment
Read more

Web Scraping

 Web Scraping Some websites don't have lovely APIs for us to interface with. If we want data from these pages, we have to use a tecnique called scraping. This means downloading the whole webpage and poking at it until we can find the information we want. You're going to use scraping to get the top ten restaurants near you. Get started 👉 Go to a website like Yelp and search for the top 10 reastaurants in your location. Copy the URL.   url = "https://www.yelp.co.uk/search?find_desc=Restaurants&find_loc=San+Francisco%2C+CA%2C+United+States"   Import libraries 👉 Import your libraries. Beautiful soup is a specialist library for extracting the contents of HTML and helping us parse them. Run the Repl once your imports are sorted because we want the Beautiful Soup library to be installed (it'll run quicker this way). import requests from bs4 import BeautifulSoup url = "https://www.yelp.co.uk/search?find_desc=Restaurants&find_loc=San+Francisco%2C+CA%2C+Unite...
Post a Comment
Read more