![\"Compiler\"](\"/static/bc558b256541ec86d2c0eb8e80ec9f12/50383/img1.png\" "\\"Compiler\\"")
\n Securing communications between a client and a server often requires credentials to identify both parties. That is where the different authentication techniques comes in. Two popular authentication methods are cookie-based and cookieless authentication. However, choosing any one of them depends on the organization's requirements. Both come with their benefits and challenges. This article will give a quick walkthrough of cookie-based and cookieless authentication along with their advantages and disadvantages.
\nCookies are pieces of data used to identify the user and their preferences. The browser returns the cookie to the server every time the page is requested. Specific cookies like HTTP cookies are used to perform cookie-based authentication to maintain the session for each user.
\nThe entire cookie-based authentication works in the following manner:
\nThe server verifies the user by querying the user data. If the authentication request is valid, the server generates the following:
\nThe server then passes the session ID to the browser that keeps it. The server also keeps track of the active sessions.
\nCookieless authentication, also known as token-based authentication, is a technique that leverages JSON web tokens (JWT) instead of cookies to authenticate a user. It uses a protocol that creates encrypted security tokens. These tokens allow the user to verify their identity. In return, the users receive a unique access token to perform the authentication. The token contains information about user identities and transmits it securely between the server and client.\nThe entire cookieless authentication works in the following manner:
\nLoginRadius provides multiple methods to implement a cookieless login workflow leveraging industry and security best practices. As a consumer-centric Identity platform, LoginRadius ensures that modern implementation methodologies comply with the changing security landscape. The cookieless authentication workflows detailed below are systems that LoginRadius has developed support for even before the recent browser-based privacy policies and are a core part of the LoginRadius platform.
\nThe LoginRadius API has been architected and designed to function as a cookieless authentication system. Once authentication occurs, a session token gets returned to the requesting client in the form of an access token which can be leveraged to take further authorized actions against the Consumer account. It is a core part of the LoginRadius authentication workflows, and APIs developed based on Oauth 2.0 protocols.
\nThese APIs provide flexibility in generating access tokens based on consumer authentication requests and are automatically validated and signed leveraging the LoginRadius API Key and Secret. Detailed API documentation is available here.
\nIn addition to the LoginRadius APIs, JWTs are a standard method to handle cookieless login. Once authentication is completed and verified, a signed token can be generated(leveraging LoginRadius APIs) to pass the consumer session to the client.
\nJWTs are a standard industry mechanism leveraged by various service providers and tools, making them ideal for interoperability with multiple applications. Find additional details on how to use JWT as part of your authentication workflows here.
\nIn addition to the above two options, LoginRadius provides flexibility and support for various authentication and authorization standards that support a cookieless authentication approach. Outbound authentication workflows such as OIDC and Oauth 2.0 allow for a modern standardized approach to authentication.
\nThese are industry-recognized and recommended authentication and authorization protocols that comply with security and privacy best practices, including supporting a cookieless authentication approach. Check out our dedicated documentation on outbound workflows.
\nCookieless authentication can facilitate more secure and scalable authentication. You should decide how to authenticate consumers considering your requirements and the benefits and challenges of cookie-based and cookieless authentication.
\n","frontmatter":{"date":"December 14, 2021","updated_date":null,"description":"Understand how cookie-based and cookieless authentication methods work. And learn their major differences, advantages, and disadvantages.","title":"Cookie-based vs. Cookieless Authentication: What’s the Future?","tags":["Authentication","JWT","Cookie"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/581ff70fe87fda67a0bad33af670f950/ee604/coverImage.png","srcSet":"/static/581ff70fe87fda67a0bad33af670f950/69585/coverImage.png 200w,\n/static/581ff70fe87fda67a0bad33af670f950/497c6/coverImage.png 400w,\n/static/581ff70fe87fda67a0bad33af670f950/ee604/coverImage.png 800w,\n/static/581ff70fe87fda67a0bad33af670f950/f3583/coverImage.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"Authentication is an essential part of any web application. But unfortunately, it is not always easy to implement. What is Authentication…","fields":{"slug":"/engineering/guest-post/securing-flask-api-with-jwt/"},"html":"Authentication is an essential part of any web application. But unfortunately, it is not always easy to implement.
\nAuthentication is a process of verifying that an entity is who they claim to be. For example, a user might authenticate by providing a username and password. If the username and password are valid, the system will check if the user can access the resource. After the system checks the user's details against its database and if the details are valid, the user is thus authenticated and can access available resources.
\nThe following factors are used to authenticate a user.
\nThis authentication is used when a user provides a username/email/phone number and a password. This is the most common and weakest authentication factor. The user simply inputs the email and password, and the system checks if the data is valid; if valid, the user gets authenticated and can access the resource. What happens if another person who is not a legitimate user tries to access the resource? The system denies access to the resource.
\nThis authentication uses more than one factor to authenticate a user. For example, the user tries to log in with, say, email and password; if the data is correct, a code is sent to the user's phone number, and the user is asked to input the code. If the user enters the code, the user gets logged in; otherwise, the user is not authenticated. Some applications even go a step further by not using two factors but using three factors.
\nThere are three types of authentication, as follows:
\nKnowledge authentication.In most applications, knowledge and property authentication are used as an extra layer of authentication.
\nThe following are the differences between authentication and authorization:
\nIn this tutorial, you'll work on authentication in flask middleware for an existing API built with Flask and PyMongo. The API is a book library API using which users can create books and upload cover images for the books and relevant data. PyMongo is used to connect to the mongo database. You'll use the PyJWT library to generate and verify JWT tokens for auth in flask.
\n\n\nYou can learn more about JSON Web Tokens (JWT) here.
\n
To get started, clone the repository and set up the application by running the following commands:
\ngit clone https://github.com/LoginRadius/engineering-blog-samples.git # Clone the repository\ncd /Flask/loginRadius-flask-auth # change directory\npython3 -m venv env # create virtual environment; if you're using Windows, `py -m venv env`\nsource env/bin/activate # activate virtual environment, if you're using windows, env/Scripts/activate\npip install -r requirements.txt # install dependencies\n# https://packaging.python.org/en/latest/guides/installing-using-pip-and-virtual-environments/The application is now set up and ready to run. You can run the app using the command flask run in the project directory. You can test that all the endpoints are working by testing the app in an API testing tool, like Postman.
As you've noticed, anybody can access the API; you need to restrict access to the API. Create new book data if they have the correct data, then add, delete, and update book data, but you don't want that. To do this, you need to implement an authentication middleware.
\nWhen we talk about authentication with flask, middlewares are created in Flask by creating a decorator; a function can have multiple middlewares, and the order matters a lot.
\nTo create your auth middleware, you need to install PyJWT -- the library you'll use to generate tokens. You’ll also use Pillow to alter image data before saving them to disk. Run the following command to install the packages:
\npip install pyjwt pillowYou need to add a secret key to your application; this is what you should pass to JWT.
\nAdd the following to your app.py file below the app declaration.
# app = Flask(__name__)\n\nSECRET_KEY = os.environ.get('SECRET_KEY') or 'this is a secret'\nprint(SECRET_KEY)\napp.config['SECRET_KEY'] = SECRET_KEYLet's create a file called auth_middleware.py in the root of your application and place the following inside this file:
from functools import wraps\nimport jwt\nfrom flask import request, abort\nfrom flask import current_app\nimport models\n\ndef token_required(f):\n @wraps(f)\n def decorated(*args, **kwargs):\n token = None\n if "Authorization" in request.headers:\n token = request.headers["Authorization"].split(" ")[1]\n if not token:\n return {\n "message": "Authentication Token is missing!",\n "data": None,\n "error": "Unauthorized"\n }, 401\n try:\n data=jwt.decode(token, current_app.config["SECRET_KEY"], algorithms=["HS256"])\n current_user=models.User().get_by_id(data["user_id"])\n if current_user is None:\n return {\n "message": "Invalid Authentication token!",\n "data": None,\n "error": "Unauthorized"\n }, 401\n if not current_user["active"]:\n abort(403)\n except Exception as e:\n return {\n "message": "Something went wrong",\n "data": None,\n "error": str(e)\n }, 500\n\n return f(current_user, *args, **kwargs)\n\n return decoratedThe function above is simply a decorator function. Inside this function, you check if there is an Authorization field in the headers part of the request; if this is missing, you return an authorization error.
Next, you check if it exists but is not valid; if it is not valid, you also return an authorization error.
\nIf everything goes fine, then the view function is called. As you can see, you return f(current_user, *args, **kwargs), where f is the next decorator or function that's being called after this decorator -- in your case, the view function, which means that the first argument of any view function that uses this decorator must be current_user.
You currently have a route to creating a new user, but you don't have one to log in. From what you have above, you're checking if the token passed as the header is valid, but now the question is -- how do you get to know the token. Basically, the login route fetches the token and sends it to the client.
\nAdd the following function below the add_user function:
@app.route("/users/login", methods=["POST"])\ndef login():\n try:\n data = request.json\n if not data:\n return {\n "message": "Please provide user details",\n "data": None,\n "error": "Bad request"\n }, 400\n # validate input\n is_validated = validate_email_and_password(data.get('email'), data.get('password'))\n if is_validated is not True:\n return dict(message='Invalid data', data=None, error=is_validated), 400\n user = User().login(\n data["email"],\n data["password"]\n )\n if user:\n try:\n # token should expire after 24 hrs\n user["token"] = jwt.encode(\n {"user_id": user["_id"]},\n app.config["SECRET_KEY"],\n algorithm="HS256"\n )\n return {\n "message": "Successfully fetched auth token",\n "data": user\n }\n except Exception as e:\n return {\n "error": "Something went wrong",\n "message": str(e)\n }, 500\n return {\n "message": "Error fetching auth token!, invalid email or password",\n "data": None,\n "error": "Unauthorized"\n }, 404\n except Exception as e:\n return {\n "message": "Something went wrong!",\n "error": str(e),\n "data": None\n }, 500So far, you've been able to create your auth middleware, but you need to use this middleware to protect routes. All you need to do is to pass this middleware immediately after the app.route middleware, then make current_user the first argument of the view function, as follows:
@app.route('/')\n@token_required\ndef user(current_user):\n return jsonify(current_user)\n\n@app.route('/<pdt_id>')\n@token_required\ndef product(current_user, pdt_id):\n return jsonify(Product.find({'user_id': pdt_id}))Add this middleware (@token_required) to every function you only want authenticated users to access. In the end, your whole app.py file should look as follows.
import jwt, os\nfrom dotenv import load_dotenv\nfrom flask import Flask, request, jsonify\nfrom save_image import save_pic\nfrom validate import validate_book, validate_email_and_password, validate_user\n\nload_dotenv()\n\napp = Flask(__name__)\nSECRET_KEY = os.environ.get('SECRET_KEY') or 'this is a secret'\nprint(SECRET_KEY)\napp.config['SECRET_KEY'] = SECRET_KEY\n\nfrom models import Books, User\nfrom auth_middleware import token_required\n\n@app.route("/")\ndef hello():\n return "Hello World!"\n\n@app.route("/users/", methods=["POST"])\ndef add_user():\n try:\n user = request.json\n if not user:\n return {\n "message": "Please provide user details",\n "data": None,\n "error": "Bad request"\n }, 400\n is_validated = validate_user(**user)\n if is_validated is not True:\n return dict(message='Invalid data', data=None, error=is_validated), 400\n user = User().create(**user)\n if not user:\n return {\n "message": "User already exists",\n "error": "Conflict",\n "data": None\n }, 409\n return {\n "message": "Successfully created new user",\n "data": user\n }, 201\n except Exception as e:\n return {\n "message": "Something went wrong",\n "error": str(e),\n "data": None\n }, 500\n\n@app.route("/users/login", methods=["POST"])\ndef login():\n try:\n data = request.json\n if not data:\n return {\n "message": "Please provide user details",\n "data": None,\n "error": "Bad request"\n }, 400\n # validate input\n is_validated = validate_email_and_password(data.get('email'), data.get('password'))\n if is_validated is not True:\n return dict(message='Invalid data', data=None, error=is_validated), 400\n user = User().login(\n data["email"],\n data["password"]\n )\n if user:\n try:\n # token should expire after 24 hrs\n user["token"] = jwt.encode(\n {"user_id": user["_id"]},\n app.config["SECRET_KEY"],\n algorithm="HS256"\n )\n return {\n "message": "Successfully fetched auth token",\n "data": user\n }\n except Exception as e:\n return {\n "error": "Something went wrong",\n "message": str(e)\n }, 500\n return {\n "message": "Error fetching auth token!, invalid email or password",\n "data": None,\n "error": "Unauthorized"\n }, 404\n except Exception as e:\n return {\n "message": "Something went wrong!",\n "error": str(e),\n "data": None\n }, 500\n\n\n@app.route("/users/", methods=["GET"])\n@token_required\ndef get_current_user(current_user):\n return jsonify({\n "message": "successfully retrieved user profile",\n "data": current_user\n })\n\n@app.route("/users/", methods=["PUT"])\n@token_required\ndef update_user(current_user):\n try:\n user = request.json\n if user.get("name"):\n user = User().update(current_user["_id"], user["name"])\n return jsonify({\n "message": "successfully updated account",\n "data": user\n }), 201\n return {\n "message": "Invalid data, you can only update your account name!",\n "data": None,\n "error": "Bad Request"\n }, 400\n except Exception as e:\n return jsonify({\n "message": "failed to update account",\n "error": str(e),\n "data": None\n }), 400\n\n@app.route("/users/", methods=["DELETE"])\n@token_required\ndef disable_user(current_user):\n try:\n User().disable_account(current_user["_id"])\n return jsonify({\n "message": "successfully disabled acount",\n "data": None\n }), 204\n except Exception as e:\n return jsonify({\n "message": "failed to disable account",\n "error": str(e),\n "data": None\n }), 400\n\n@app.route("/books/", methods=["POST"])\n@token_required\ndef add_book(current_user):\n try:\n book = dict(request.form)\n if not book:\n return {\n "message": "Invalid data, you need to give the book title, cover image, author id,",\n "data": None,\n "error": "Bad Request"\n }, 400\n if not request.files["cover_image"]:\n return {\n "message": "cover image is required",\n "data": None\n }, 400\n\n book["image_url"] = request.host_url+"static/books/"+save_pic(request.files["cover_image"])\n book["user_id"] = current_user["_id"]\n is_validated = validate_book(**book)\n if is_validated is not True:\n return {\n "message": "Invalid data",\n "data": None,\n "error": is_validated\n }, 400\n book = Books().create(**book)\n if not book:\n return {\n "message": "The book has been created by user",\n "data": None,\n "error": "Conflict"\n }, 400\n return jsonify({\n "message": "successfully created a new book",\n "data": book\n }), 201\n except Exception as e:\n return jsonify({\n "message": "failed to create a new book",\n "error": str(e),\n "data": None\n }), 500\n\n@app.route("/books/", methods=["GET"])\n@token_required\ndef get_books(current_user):\n try:\n books = Books().get_by_user_id(current_user["_id"])\n return jsonify({\n "message": "successfully retrieved all books",\n "data": books\n })\n except Exception as e:\n return jsonify({\n "message": "failed to retrieve all books",\n "error": str(e),\n "data": None\n }), 500\n\n@app.route("/books/<book_id>", methods=["GET"])\n@token_required\ndef get_book(current_user, book_id):\n try:\n book = Books().get_by_id(book_id)\n if not book:\n return {\n "message": "Book not found",\n "data": None,\n "error": "Not Found"\n }, 404\n return jsonify({\n "message": "successfully retrieved a book",\n "data": book\n })\n except Exception as e:\n return jsonify({\n "message": "Something went wrong",\n "error": str(e),\n "data": None\n }), 500\n\n@app.route("/books/<book_id>", methods=["PUT"])\n@token_required\ndef update_book(current_user, book_id):\n try:\n book = Books().get_by_id(book_id)\n if not book or book["user_id"] != current_user["_id"]:\n return {\n "message": "Book not found for user",\n "data": None,\n "error": "Not found"\n }, 404\n book = request.form\n if book.get('cover_image'):\n book["image_url"] = request.host_url+"static/books/"+save_pic(request.files["cover_image"])\n book = Books().update(book_id, **book)\n return jsonify({\n "message": "successfully updated a book",\n "data": book\n }), 201\n except Exception as e:\n return jsonify({\n "message": "failed to update a book",\n "error": str(e),\n "data": None\n }), 400\n\n@app.route("/books/<book_id>", methods=["DELETE"])\n@token_required\ndef delete_book(current_user, book_id):\n try:\n book = Books().get_by_id(book_id)\n if not book or book["user_id"] != current_user["_id"]:\n return {\n "message": "Book not found for user",\n "data": None,\n "error": "Not found"\n }, 404\n Books().delete(book_id)\n return jsonify({\n "message": "successfully deleted a book",\n "data": None\n }), 204\n except Exception as e:\n return jsonify({\n "message": "failed to delete a book",\n "error": str(e),\n "data": None\n }), 400\n\n@app.errorhandler(403)\ndef forbidden(e):\n return jsonify({\n "message": "Forbidden",\n "error": str(e),\n "data": None\n }), 403\n\n@app.errorhandler(404)\ndef forbidden(e):\n return jsonify({\n "message": "Endpoint Not Found",\n "error": str(e),\n "data": None\n }), 404\n\n\nif __name__ == "__main__":\n app.run(debug=True)Before running the application, let's look at the save_pic function inside the save_image.py file. This is the function responsible for saving uploaded pictures.
from PIL import Image\nimport secrets, os\nfrom flask import current_app as app\n\ndef save_pic(picture):\n file_name = secrets.token_hex(8) +os.path.splitext(picture.filename)[1]\n if not os.path.isdir(os.path.join(app.root_path, 'static')):\n os.mkdir(os.path.join(app.root_path,"static"))\n os.mkdir(os.path.join(app.root_path,"static/images"))\n os.mkdir(os.path.join(app.root_path,"static/images/books"))\n if not os.path.isdir(os.path.join(app.root_path, 'static/images')):\n os.mkdir(os.path.join(app.root_path,"static/images"))\n os.mkdir(os.path.join(app.root_path,"static/images/books"))\n if not os.path.isdir(os.path.join(app.root_path, 'static/images/books')):\n os.mkdir(os.path.join(app.root_path,"static/images/books"))\n file_path = os.path.join(app.root_path, "static/images/books", file_name)\n picture = Image.open(picture)\n picture.thumbnail((150, 150))\n picture.save(file_path)\n return file_nameYou should also add the following functions as helper methods of the User model class.
def disable_account(self, user_id):\n user = db.users.update_one(\n {"_id": bson.ObjectId(user_id)},\n {"$set": {"active": False}}\n )\n user = self.get_by_id(user_id)\n return user\n\ndef encrypt_password(self, password):\n return generate_password_hash(password)\n\ndef login(self, email, password):\n """Login a user"""\n user = self.get_by_email(email)\n if not user or not check_password_hash(user["password"], password):\n return\n user.pop("password")\n return userYour models.py file should look as follows:
"""Application Models"""\nimport bson, os\nfrom dotenv import load_dotenv\nfrom pymongo import MongoClient\nfrom werkzeug.security import generate_password_hash, check_password_hash\n\nload_dotenv()\n\nDATABASE_URL=os.environ.get('DATABASE_URL') or 'mongodb://localhost:27017/myDatabase'\nprint(DATABASE_URL)\nclient = MongoClient(DATABASE_URL)\ndb = client.myDatabase\n\nclass Books:\n """Books Model"""\n def __init__(self):\n return\n\n def create(self, title="", description="", image_url="", category="", user_id=""):\n """Create a new book"""\n book = self.get_by_user_id_and_title(user_id, title)\n if book:\n return\n new_book = db.books.insert_one(\n {\n "title": title,\n "description": description,\n "image_url": image_url,\n "category": category,\n "user_id": user_id\n }\n )\n return self.get_by_id(new_book.inserted_id)\n\n def get_all(self):\n """Get all books"""\n books = db.books.find()\n return [{**book, "_id": str(book["_id"])} for book in books]\n\n def get_by_id(self, book_id):\n """Get a book by id"""\n book = db.books.find_one({"_id": bson.ObjectId(book_id)})\n if not book:\n return\n book["_id"] = str(book["_id"])\n return book\n\n def get_by_user_id(self, user_id):\n """Get all books created by a user"""\n books = db.books.find({"user_id": user_id})\n return [{**book, "_id": str(book["_id"])} for book in books]\n\n def get_by_category(self, category):\n """Get all books by category"""\n books = db.books.find({"category": category})\n return [book for book in books]\n\n def get_by_user_id_and_category(self, user_id, category):\n """Get all books by category for a particular user"""\n books = db.books.find({"user_id": user_id, "category": category})\n return [{**book, "_id": str(book["_id"])} for book in books]\n\n def get_by_user_id_and_title(self, user_id, title):\n """Get a book given its title and author"""\n book = db.books.find_one({"user_id": user_id, "title": title})\n if not book:\n return\n book["_id"] = str(book["_id"])\n return book\n\n def update(self, book_id, title="", description="", image_url="", category="", user_id=""):\n """Update a book"""\n data={}\n if title: data["title"]=title\n if description: data["description"]=description\n if image_url: data["image_url"]=image_url\n if category: data["category"]=category\n\n book = db.books.update_one(\n {"_id": bson.ObjectId(book_id)},\n {\n "$set": data\n }\n )\n book = self.get_by_id(book_id)\n return book\n\n def delete(self, book_id):\n """Delete a book"""\n book = db.books.delete_one({"_id": bson.ObjectId(book_id)})\n return book\n\n def delete_by_user_id(self, user_id):\n """Delete all books created by a user"""\n book = db.books.delete_many({"user_id": bson.ObjectId(user_id)})\n return book\n\n\nclass User:\n """User Model"""\n def __init__(self):\n return\n\n def create(self, name="", email="", password=""):\n """Create a new user"""\n user = self.get_by_email(email)\n if user:\n return\n new_user = db.users.insert_one(\n {\n "name": name,\n "email": email,\n "password": self.encrypt_password(password),\n "active": True\n }\n )\n return self.get_by_id(new_user.inserted_id)\n\n def get_all(self):\n """Get all users"""\n users = db.users.find({"active": True})\n return [{**user, "_id": str(user["_id"])} for user in users]\n\n def get_by_id(self, user_id):\n """Get a user by id"""\n user = db.users.find_one({"_id": bson.ObjectId(user_id), "active": True})\n if not user:\n return\n user["_id"] = str(user["_id"])\n user.pop("password")\n return user\n\n def get_by_email(self, email):\n """Get a user by email"""\n user = db.users.find_one({"email": email, "active": True})\n if not user:\n return\n user["_id"] = str(user["_id"])\n return user\n\n def update(self, user_id, name=""):\n """Update a user"""\n data = {}\n if name:\n data["name"] = name\n user = db.users.update_one(\n {"_id": bson.ObjectId(user_id)},\n {\n "$set": data\n }\n )\n user = self.get_by_id(user_id)\n return user\n\n def delete(self, user_id):\n """Delete a user"""\n Books().delete_by_user_id(user_id)\n user = db.users.delete_one({"_id": bson.ObjectId(user_id)})\n user = self.get_by_id(user_id)\n return user\n\n def disable_account(self, user_id):\n """Disable a user account"""\n user = db.users.update_one(\n {"_id": bson.ObjectId(user_id)},\n {"$set": {"active": False}}\n )\n user = self.get_by_id(user_id)\n return user\n\n def encrypt_password(self, password):\n """Encrypt password"""\n return generate_password_hash(password)\n\n def login(self, email, password):\n """Login a user"""\n user = self.get_by_email(email)\n if not user or not check_password_hash(user["password"], password):\n return\n user.pop("password")\n return userHere's an example of the user request:
\n{\n "name" : "abc xyz",\n "email" : "xyz@gmail.com",\n "password" : "Abc@123"\n}Here, the name should have two words, and the password should have at least an uppercase later, a lower case letter, a digit, and a special character.
\nAnd an example of the book request:
\n{\n "title":"name of book",\n "cover_image": "path to image file locally",\n "category": "['romance', 'peotry', 'politics', 'picture book', 'science', 'fantasy', 'horror', 'thriller'],\n "description":"description",\n "user_id":"user_id"\n}While passing a book request, pass it via the form-data tab in Postman.
This article has explained flask JWT authentication .
\nIn some cases, handling flask authentication yourself may not be good enough or efficient -- to overcome this, you can simply use third-party authentication providers like LoginRadius. You can check out this tutorial to learn how to add LoginRadius to your Flask application.
\nYou can find the complete code for this article on Github. You can reach out to me on Twitter if you've any questions.
\n","frontmatter":{"date":"December 09, 2021","updated_date":null,"description":"This tutorial helps you build a simple Flask API and demonstrates how to secure it using JWT. In the end, you can test your API authentication using a sample schema.","title":"Using JWT Flask JWT Authentication- A Quick Guide","tags":["Flask","JWT","API"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/707e66d1cd3ca14a40e66ac10ad13cea/ee604/coverImage.png","srcSet":"/static/707e66d1cd3ca14a40e66ac10ad13cea/69585/coverImage.png 200w,\n/static/707e66d1cd3ca14a40e66ac10ad13cea/497c6/coverImage.png 400w,\n/static/707e66d1cd3ca14a40e66ac10ad13cea/ee604/coverImage.png 800w,\n/static/707e66d1cd3ca14a40e66ac10ad13cea/f3583/coverImage.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Babatunde Koiki","github":"Babatunde13","avatar":null}}}},{"node":{"excerpt":"Single-tenant and multi-tenant cloud architectures represent two core approaches to managing SaaS environments, each with unique benefits…","fields":{"slug":"/engineering/saas-single-tenancy-vs-multi-tenancy/"},"html":"Single-tenant and multi-tenant cloud architectures represent two core approaches to managing SaaS environments, each with unique benefits depending on how resources and infrastructure are utilized. In a single-tenant cloud, each customer has their own dedicated environment, offering greater control, data security, and customization. Meanwhile, multi-tenant cloud architecture allows multiple customers to share the same infrastructure, driving down costs and enabling faster, more frequent updates.\nHence, choosing the right cloud architecture is crucial for your business.
\nThis article comprehensively compares SaaS-based multi-tenant and single-tenant cloud architectures along with their benefits and drawbacks. The comprehension also points out which one to choose based on the organization’s requirements and scenario.
\nA single-tenant architecture dedicates a single instance of the software, infrastructure, or database to a single customer. The single-tenant system encapsulates all customer data and interactions distinctly from other customers. Moreover, customer information is not shared in any way.
\nIn a single-tenant architecture, the provider helps manage the software instance and dedicated infrastructure while giving a single-tenant nearly complete flexibility over software and infrastructure modification. Single-tenancy models provide control, reliability, security, and backup capability. In addition, each tenant has its independent database and software instance, keeping them separate from one another. Each tenant's data also has a remote backup, allowing tenants to restore their data in case of data loss quickly. In most cases, tenants can choose when they want to install any available updates themselves rather than waiting for the service provider to do so.
\nUltimately, potential customers who desire more control and flexibility to meet specific needs in their environment would likely prefer a single-tenant infrastructure over other solutions.
\nAlthough single-tenancy architecture is uncommon, it caters to easy auditing and maintenance. Here is the list of some other benefits a single-tenant cloud provides:
\nDespite all of the potential benefits of single-tenancy, it is still the least popular architecture among competing options, which you could attribute to some of its drawbacks. The following are some of the disadvantages of single-tenancy:
\nSingle-Tenant or Multi-Tenant SaaS: Which is Better for Your Business
\nMulti-tenancy is another cloud architecture wherein a single instance of a software program serves numerous customers. People usually refer to the real estate analogy to explain Single-tenant vs. Multi-tenant cloud architecture.
\nEvery user in a single-tenant cloud lives alone in a single building with its security system and amenities, entirely secluded from neighboring buildings. Tenants in multi-tenant cloud architecture, on the other hand, live in various apartments within a single apartment complex. They are both protected by the same security system and have access to the same communal facilities. However, each resident has a key to their apartment, ensuring that their privacy is protected. The actions of other tenants, however, are more likely to affect their comfort in the property.
\nMost startups choose a multi-tenant architecture having a single massive database containing all customer information. Customer data is kept confidential with the necessary security systems in place. While customers cannot view each other's data, they are all stored in the same database, and all of the data gets processed by the same computer.
\nIn contrast, the single-tenancy customer does not benefit from such scenarios.
\nWhile multi-tenant cloud architecture is usually the best option for most SaaS customers, it can have some drawbacks, including:
\nGreater Security Risk: As different customers share resources, the risk factor in a multi-tenant setup increases. In contrast to a single-tenant cloud, where security events remain isolated to a single customer, it is more likely to harm other customers if one customer's data is compromised.
\nIn multi-tenancy, an organization's data is not visible to other tenants. However, multiple users without the organization's affiliation get access to the same database. This increases the security risks.
\nA single-tenant setup of SaaS may be appropriate for certain companies or sectors where customer data privacy and security are paramount. The healthcare and finance industries are excellent examples, leveraging single-tenant cloud systems.
\nFor example, when working with patient information, applications in the healthcare industry must comply with HIPAA regulations. To maintain compliance, each hospital may need to establish its own data center on-site. The same is true for certain forms of financial information.
\nMost consumer-facing applications and start-ups that require comparatively less customizability tend to use a multi-tenant setup of SaaS. Also, multi-tenancy is preferred by organizations that want to opt for a cost-effective solution.
\nTo learn more about Single-Tenant vs Multi-Tenant Cloud, check out the infographic by LoginRadius.
\nThere are a lot of other factors an organization must keep in mind while deciding which SaaS architecture to choose. Some business factors are the purpose of cloud adoption, type of application, budget, scalability, customization, migration, visibility, backup, and recovery. Finally, organizations must brainstorm what they want to achieve and how their company operates to arrive at the best, ideal solution.
\n1. What is the difference between single tenant vs multi tenant?
\nIn single tenant architecture, a dedicated cloud infrastructure serves one client, while in a multi tenant cloud, multiple businesses share the same infrastructure, which optimizes resources.
\n2. Is AWS a single tenant?
\nAWS offers primarily multi tenant cloud environments, but single tenant architecture can be achieved through dedicated hosting options like Amazon EC2 Dedicated Instances.
\n3. What is a multi tenant cloud system?
\nA multi tenant cloud system allows multiple businesses to share the same infrastructure, with resources and applications managed centrally for efficiency.
\n4. What are some examples of single tenant and multi tenant systems?
\nPrivate clouds or custom SaaS deployments are examples of single tenant architecture, while platforms like Salesforce represent multi tenant cloud systems.
\n5. Which SaaS architecture is more secure: single tenant or multi tenant?
\nSingle tenant architectures generally offer more security due to isolated data environments, while multi-tenant systems have more shared risks but are often well-protected by cloud providers.
\n6. What is tenancy in cloud computing?
\nTenancy in cloud computing refers to how computing resources are shared—whether through single tenant or multi tenant systems that isolate or combine client resources.
\n7. What is a tenant in cloud computing?
\nA tenant in cloud computing is an entity, such as a business, that uses a specific cloud infrastructure, either in a single tenant or multi tenant setup.
\nLoginRadius provides both single-tenant and multi-tenant SaaS architecture for our CIAM solution.
\n","frontmatter":{"date":"December 01, 2021","updated_date":null,"description":"When choosing a SaaS architecture for your business, the decision between single-tenant and multi-tenant models can significantly impact performance, security, and cost. This blog explores the key differences, advantages, and potential drawbacks of each approach, helping you determine which solution best aligns with your business needs.","title":"Single-Tenant vs. Multi-Tenant: Which SaaS Architecture is better for Your Business? ","tags":["saas","Architecture"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/6e91625d67f997fc0d90b890f7111691/ee604/coverImage.png","srcSet":"/static/6e91625d67f997fc0d90b890f7111691/69585/coverImage.png 200w,\n/static/6e91625d67f997fc0d90b890f7111691/497c6/coverImage.png 400w,\n/static/6e91625d67f997fc0d90b890f7111691/ee604/coverImage.png 800w,\n/static/6e91625d67f997fc0d90b890f7111691/f3583/coverImage.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},{"node":{"excerpt":"What is a Smart Contract? Smart Contracts 📝 are simple programs stored on a blockchain network. You can say it's like an agreement between…","fields":{"slug":"/engineering/guest-post/ethereum-smart-contract-tutorial/"},"html":"Smart Contracts 📝 are simple programs stored on a blockchain network.
\nYou can say it's like an agreement between two people in the form of computer code. The transactions in a smart contract are processed by the blockchain and stored as a 42 character hex address with the prefix \"0x\"). All of which means that they can be sent automatically without needing a third party.
🤔 Remember: They're stored in a public database. And once a smart contract is deployed, it cannot be changed.
\nSolidity is one of the most popular languages used for building smart contracts on Ethereum Blockchain. It's also an object-oriented programming language.
\nRemix IDE from here.Sure and then Done.default_workshop, click on create new file.Hostel.sol.Now you're ready to write your first Smart Contract. 🤩
\nsolidity version in the smart contract:pragma solidity ^0.5.16;Hostel:contract Hostel{\n ...\n}contract Hostel{...} follow the steps below.address (42 char hex string with prefix : \"0x\") of the Landlord & the Tenant. address payable tenant;\n address payable landlord;uint (256-bit unsigned integer) uint public no_of_rooms = 0;\n uint public no_of_agreement = 0;\n uint public no_of_rent = 0;structure to store details of each Hostel room like Hostel no., Hostel name, Hostel address, No of total agreements, Monthly rent, One-time security deposit, Last agreement sign time, Vacancy, Landlord address, and Current Tenant Address. struct Room{\n uint roomid;\n uint agreementid;\n string roomname;\n string roomaddress;\n uint rent_per_month;\n uint securityDeposit;\n uint timestamp;\n bool vacant;\n address payable landlord;\n address payable currentTenant;\n }map previous structure with a uint(named : roomid).mapping(uint => Room) public Room_by_No;structure for each Rental Agreement and map that with a uint(named: agreementid). This will store details like: Hostel no., Agreement No, Hostel name, Hostel address, Monthly rent, One-time security deposit,Lockin Period, Agreement sign time, Landlord address, and Tenant Address. struct RoomAgreement{\n uint roomid;\n uint agreementid;\n string Roomname;\n string RoomAddresss;\n uint rent_per_month;\n uint securityDeposit;\n uint lockInPeriod;\n uint timestamp;\n address payable tenantAddress;\n address payable landlordAddress;\n }mapping(uint => RoomAgreement) public RoomAgreement_by_No;structure for each Rent payment and map that with a uint. This will store details like: Rent No., Hostel no., Agreement No, Hostel name, Hostel address, Monthly rent, Rent payment time, Landlord address, and Tenant Address. struct Rent{\n uint rentno;\n uint roomid;\n uint agreementid;\n string Roomname;\n string RoomAddresss;\n uint rent_per_month;\n uint timestamp;\n address payable tenantAddress;\n address payable landlordAddress;\n } mapping(uint => Rent) public Rent_by_No;Create some modifiers that will help you verify a few things before running a function.
\nHere require(...); means that if the given condition is not satisfied, the function won't execute, and the given string will appear as an error code.
The following will check if the message sender is the landlord.
\n modifier onlyLandlord(uint _index) {\n require(msg.sender == Room_by_No[_index].landlord, "Only landlord can access this");\n _;\n }The following will check if the message sender is anyone except the landlord.
\n modifier notLandLord(uint _index) {\n require(msg.sender != Room_by_No[_index].landlord, "Only Tenant can access this");\n _;\n }The following will check whether the room is vacant or not.
\n modifier OnlyWhileVacant(uint _index){\n \n require(Room_by_No[_index].vacant == true, "Room is currently Occupied.");\n _;\n }The following will check whether the tenant has enough Ether in his wallet to pay the rent.
modifier enoughRent(uint _index) {\n require(msg.value >= uint(Room_by_No[_index].rent_per_month), "Not enough Ether in your wallet");\n _;\n }The following will check whether the tenant has enough Ether in his wallet to pay a one-time security deposit and one month's rent in advance.
modifier enoughAgreementfee(uint _index) {\n require(msg.value >= uint(uint(Room_by_No[_index].rent_per_month) + uint(Room_by_No[_index].securityDeposit)), "Not enough Ether in your wallet");\n _;\n }The following will check whether the tenant's address is the same as who has signed the previous rental agreement.
\n modifier sameTenant(uint _index) {\n require(msg.sender == Room_by_No[_index].currentTenant, "No previous agreement found with you & landlord");\n _;\n }The following will check whether any time is left for the agreement to end.
\n modifier AgreementTimesLeft(uint _index) {\n uint _AgreementNo = Room_by_No[_index].agreementid;\n uint time = RoomAgreement_by_No[_AgreementNo].timestamp + RoomAgreement_by_No[_AgreementNo].lockInPeriod;\n require(now < time, "Agreement already Ended");\n _;\n }The following will check whether 365 days have passed after the last agreement has been created.
\n modifier AgreementTimesUp(uint _index) {\n uint _AgreementNo = Room_by_No[_index].agreementid;\n uint time = RoomAgreement_by_No[_AgreementNo].timestamp + RoomAgreement_by_No[_AgreementNo].lockInPeriod;\n require(now > time, "Time is left for contract to end");\n _;\n }The following will check whether 30 days have passed after the last rent payment.
\n modifier RentTimesUp(uint _index) {\n uint time = Room_by_No[_index].timestamp + 30 days;\n require(now >= time, "Time left to pay Rent");\n _;\n }The following function will be used to add Rooms.
\n function addRoom(string memory _roomname, string memory _roomaddress, uint _rentcost, uint _securitydeposit) public {\n require(msg.sender != address(0));\n no_of_rooms ++;\n bool _vacancy = true;\n Room_by_No[no_of_rooms] = Room(no_of_rooms,0,_roomname,_roomaddress, _rentcost,_securitydeposit,0,_vacancy, msg.sender, address(0)); \n \n }Now, create a function to sign the rental agreement for a hostel room between the landlord and a tenant.
\nBefore creating the signAgreement function, remember the following:
Tenant, meaning that the user's address and the landlord's address don't match.Let's use those modifiers here, so that:
\nsignAgreement will only execute only if the said room is vacant and the tenant has enough ether in their wallet.Remember those modifiers in point no.10? Use those modifiers here to execute the following function.
\n function signAgreement(uint _index) public payable notLandLord(_index) enoughAgreementfee(_index) OnlyWhileVacant(_index) {\n require(msg.sender != address(0));\n address payable _landlord = Room_by_No[_index].landlord;\n uint totalfee = Room_by_No[_index].rent_per_month + Room_by_No[_index].securityDeposit;\n _landlord.transfer(totalfee);\n no_of_agreement++;\n Room_by_No[_index].currentTenant = msg.sender;\n Room_by_No[_index].vacant = false;\n Room_by_No[_index].timestamp = block.timestamp;\n Room_by_No[_index].agreementid = no_of_agreement;\n RoomAgreement_by_No[no_of_agreement]=RoomAgreement(_index,no_of_agreement,Room_by_No[_index].roomname,Room_by_No[_index].roomaddress,Room_by_No[_index].rent_per_month,Room_by_No[_index].securityDeposit,365 days,block.timestamp,msg.sender,_landlord);\n no_of_rent++;\n Rent_by_No[no_of_rent] = Rent(no_of_rent,_index,no_of_agreement,Room_by_No[_index].roomname,Room_by_No[_index].roomaddress,Room_by_No[_index].rent_per_month,now,msg.sender,_landlord);\n }Now, create a function that the tenant will use to pay the monthly rent to the landlord.
\nBefore creating the payRent function, remember the following:
function payRent(uint _index) public payable sameTenant(_index) RentTimesUp(_index) enoughRent(_index){\n require(msg.sender != address(0));\n address payable _landlord = Room_by_No[_index].landlord;\n uint _rent = Room_by_No[_index].rent_per_month;\n _landlord.transfer(_rent);\n Room_by_No[_index].currentTenant = msg.sender;\n Room_by_No[_index].vacant = false;\n no_of_rent++;\n Rent_by_No[no_of_rent] = Rent(no_of_rent,_index,Room_by_No[_index].agreementid,Room_by_No[_index].roomname,Room_by_No[_index].roomaddress,_rent,now,msg.sender,Room_by_No[_index].landlord);\n }Let's create a function that the landlord will use to mark an agreement complete.
\nBefore creating agreementCompleted function, remember the following:
The function will only execute if the tenant had signed that agreement more than a year ago.
\nfunction agreementCompleted(uint _index) public payable onlyLandlord(_index) AgreementTimesUp(_index){\n require(msg.sender != address(0));\n require(Room_by_No[_index].vacant == false, "Room is currently Occupied.");\n Room_by_No[_index].vacant = true;\n address payable _Tenant = Room_by_No[_index].currentTenant;\n uint _securitydeposit = Room_by_No[_index].securityDeposit;\n _Tenant.transfer(_securitydeposit);\n}Let's create a function that the landlord will use to terminate an agreement.
\nBefore creating agreementTerminated function, remember the following:
function agreementTerminated(uint _index) public onlyLandlord(_index) AgreementTimesLeft(_index){\n require(msg.sender != address(0));\n Room_by_No[_index].vacant = true;\n }Now, click on the Solidity Compile option in the left sidebar.
0.5.16+Compile Hostel.solSimilar to as follows:
\n\n \n\n \nClick on the Deploy & Run Transactions option in the left sidebar.
Environment > JavaScript VM (London)Deploy![\"Deploy\"](\"/static/343cc66c27641d6a09263cfdd89f96c6/50383/img2.png\" "\\"Deploy\\"")
\n \n🎉 Congratulations, your smart contract has been deployed. 🎉
\nRemember that whenever a transaction is getting executed, it stores all the details in a unique hash key.
Now, under Deployed Contract click on > HOSTEL AT ..... (MEMORY)
V icon (dropdown menu) of addRoom function.Similar to as follows:
\n\n \n![\"AddRoom\"](\"/static/3bc47cb07ed572c00dd0e0588f8fccea/50383/img3.png\" "\\"AddRoom\\"")
\n \n\n\nNote: You're entering your details in
\nweinot inether(1 ether = 1000000000000000000 wei)
Then click on transact
🎉 Congratulations, you've successfully added your 1st room in the contract. 🎉
\n(You can find the same in the terminal also.)
\nNow the landlord of the room is your 1st Ether Address. (The one with 99.99 test ether in wallet.)
\nAccount Address from the dropdown menu. (Choose anyone except the one with 99.99 ether)![\"Change](\"/static/eb47d2dd91d0b7a616503cf0fab97c17/50383/img4.png\" "\\"Change")
\n \nwei, choose ether![\"Change](\"/static/d5fd5d1f68f4e5d37d78edf675a163a2/50383/img5.png\" "\\"Change")
\n \nScroll down and click on signAgreement, enter 1, and press signAgreement
You can check the same by entering RoomAgreementNo : 1
![\"Agreement](\"/static/2e78f99488e2d4b996bf69e041b3f2a9/50383/img6.png\" "\\"Agreement")
\n \n🎉 Congratulations, you've successfully signed your 1st agreement. 🎉
\nAll your transactions are shown in the terminal.
![\"Terminal\"](\"/static/7ebf72a72c72bbb334e0d52d8ce3cbf8/e5715/img7.png\" "\\"Terminal\\"")
\n \nNow, you can cross verify this by checking your ether account address.
Now you may ask, \"what's the use of smart contracts when there are several centralized methods?\"
\nLet me explain some advantages of smart contracts over centralized systems:
\nYou may also ask \"how are all the transactions recorded?\"
\nYou have to remember that smart contracts store data in a block of the blockchain, and all transactions are stored with a unique hash key.
In Remix IDE, you can download the complete transactions history as a JSON file. For that, follow these steps:
\nDeploy & Run TransactionTransactions Recorded (..) V dropdown menu.Save icon.ok.You may have noticed that whenever a transaction is executed, a few wei is getting deducted from your ether wallet.
It's called gas fee, which is the payment made by users to compensate for the computing energy required to process and validate transactions.
\nAs more Ethereum miners come up in near future, the gas fee will decrease in an inverse relation.
After this, if you want to build a fullstack website using React, you can use this smart contract as a backend.
\nFor that you need to install/download:
\nFrontend:
\nBackend:
\n\nTesting:
\n\nJust follow the official documentation of Web3.js to connect your smart contract with your React app.
\nYou've successfully understood what Solidity is and how smart contracts work. And you've successfully built and deployed a perfectly working smart contract (where a tenant can pay rent in ether (ETH) directly to the landlord's wallet without paying a single wei to a middle man).
\nTo download the complete code used in this tutorial, click here.
\nWant to quickly add user login and signup functionality to your React apps? Use LoginRadius for free.
\n","frontmatter":{"date":"November 24, 2021","updated_date":null,"description":"Smart contracts are an exciting way to build decentralized applications (dapps) on a blockchain. This tutorial helps you learn and build your first smart contract using Solidity on Ethereum blockchain.","title":"Build Your First Smart Contract with Ethereum & Solidity","tags":["Blockchain","Ethereum","Solidity"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/32b53a158fcbe237c5223007d8b14857/ee604/coverimage.png","srcSet":"/static/32b53a158fcbe237c5223007d8b14857/69585/coverimage.png 200w,\n/static/32b53a158fcbe237c5223007d8b14857/497c6/coverimage.png 400w,\n/static/32b53a158fcbe237c5223007d8b14857/ee604/coverimage.png 800w,\n/static/32b53a158fcbe237c5223007d8b14857/f3583/coverimage.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Aritra Belel","github":"belelaritra","avatar":null}}}},{"node":{"excerpt":"JSON (JavaScript Object Notation) is a text-based, language-independent format that is easily understandable by humans and machines. JOSE…","fields":{"slug":"/engineering/guest-post/what-are-jwt-jws-jwe-jwk-jwa/"},"html":"JSON (JavaScript Object Notation) is a text-based, language-independent format that is easily understandable by humans and machines.
\nJOSE (Javascript Object Signing and Encryption) is a framework used to facilitate the secure transfer of claims between any two parties. Its specifications provide a general approach to encryption of any content, not necessarily in JSON. However, it is built on JSON for easy use in web applications. Let's explore some of these specifications.
\nJWT is a standard mechanism used for authentication. It is compact and URL-safe to represent the claims to be transferred between two parties. Claims are a set of key/value pairs that provide a target system with information about a client to apply an appropriate level of access control to its resources. Claim names could be Registered (IANA), Public, or Private. Some registered claim names are:
\nJWT is mainly composed of three parts: header, payload, and signature that are Base64 URL-encoded.
\n[header].[payload].[signature]Here's a simple JWT example.
\nJSON Web Token:
\neyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTIzNDU2Nzg5LCJuYW1lIjoiSm9zZXBoIn0.OpOSSw7e485LOP5PrzScxHb7SR6sAOMRckfFwi4rp7o
header:\n{\n "alg" : "HS256", Header\n ---------------------------------> eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9\n "typ" : "JWT"\n}\n\nPayload:\n{\n "id" : 123456789, Payload\n ---------------------------------> eyJpZCI6MTIzNDU2Nzg5LCJuYW1lIjoiSm9zZXBoIn0\n "name" : "Joseph"\n}\n Signature\nOpOSSw7e485LOP5PrzScxHb7SR6sAOMRckfFwi4rp7o ----------------> OpOSSw7e485LOP5PrzScxHb7SR6sAOMRckfFwi4rp7oThis shows the decoded JSON Web Token. In the deserialized form, JWT contains only the header and the payload as plain JSON objects.
\nJWT is implemented using JWS or JWE. Learn more about JWT here
\nJWS is used to represent content secured with digital signatures or Hash-based Message Authentication Codes (HMACs) with the help of JSON data structures. It cryptographically secures a JWS Header and JWS Payload with a JWS Signature. The encoded strings of these three are concatenated using dots similar to JWT. The identifiers and algorithms used are specified in the JSON Web Algorithms specification.
\nThe JWS Header MUST contain an alg parameter, as it uses the algorithm to encode the JWS Header and the JWS Payload to produce the JWS Signature. Some of the commonly used algorithms to sign the JWS Header and Payload are:
\nJWS example:
\neyJ0eXAiOiJKV1QiLA0KICJhbGciOiJIUzI1NiJ9 ----------------> JWS Header\n\neyJpc3MiOiJqb2UiLA0KICJleHAiOjEzMDA4MTkzODAsDQogImh0dHA6Ly9leGFtcGxlLmNvbS9pc19yb290Ijp0cnVlfQ --------------> JWS PayloadIt has an Encoded JWS Header followed by an Encoded JWS Payload separated by a '.'. This is the JWS Signing input which, on signing with the HMAC SHA-256 algorithm and base64url encoding, gives the Encoded JWS Signature value:
\ndBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXkOn concatenation:
\neyJ0eXAiOiJKV1QiLA0KICJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJqb2UiLA0KICJleHAiOjEzMDA4MTkzODAsDQogImh0dHA6Ly9leGFtcGxlLmNvbS9pc19yb290Ijp0cnVlfQ.dBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXkLearn more about JWS here
\nJSON Web Encryption enables encrypting a token so that only the intended recipient can read it. It standardizes the way to represent the encoded data in a JSON data structure. Representation of the encrypted payload may be by JWE compact serialization or JWE JSON serialization.
\nThe JWE compact serialization form has five main components:
\nAll these components are base64url-encoded and are concatenated using dots (.).
The JOSE Header, the first element of the token, is the same as the headers of the previously mentioned JWT and JWS.
\nJWE has additional elements to the Header — enc and zip.
enc defines the content encryption algorithm while the alg element defines the encryption algorithm for the Content Encryption Key (CEK).
zip provides a compression algorithm if token compression is needed.
enc element. "header":\n{\n "alg" : "RSA-OAEP", --------------------> For content encryption key\n\n "enc" : "A256GCM" --------------------> For content encryption algorithm\n},\n\n "encrypted_key" : "qtF60gW8O8cXKiYyDsBPX8OL0GQfhOxwGWUmYtHOds7FJWTNoSFnv5E6A_Bgn_2W"\n\n\n"iv" : "HRhA5nn8HLsvYf8F-BzQew", --------------------> initialization vector\n\n"ciphertext" : "ai5j5Kk43skqPLwR0Cu1ZIyWOTUpLFKCN5cuZzxHdp0eXQjYLGpj8jYvU8yTu9rwZQeN9EY0_81hQHXEzMQgfCsRm0HXjcEwXInywYcVLUls8Yik",\n\n"tag" : "thh69dp0Pz73kycQ" --------------------> Authentication tag\n}Learn more about JWE here
\nJWK is a JSON structure representing a set of public keys as a JSON object using the Elliptic Curve or RSA algorithms. Public key representations can help verify the signature with the corresponding private key.
\nJWK consists of a JWK Container Object and an array of JWK Key Objects.
\nalg field must hold EC or RSA, respectively. Here is an example of a JWK using RSA:{\n"alg":"RSA",\n\n"mod": "0vx7agoebGcQSuuPiLJXZptN9nndrQmbXEps2aiAFbWhM78LhWx4cbbfAAtVT86zwu1RK7aPFFxuhDR1L6tSoc_BJECPebWKRXjBZCiFV4n3oknjhMs\ntn64tZ_2W-5JsGY4Hc5n9yBXArwl93lqt7_RN5w6Cf0h4QyQ5v-65YGjQR0_FDW2QvzqY368QQMicAtaSqzs8KJZgnYb9c7d0zgdAZHzu6qMQvRL5hajrn1n91CbOpbI\nSD08qNLyrdkt-bFTWhAI4vMQFh6WeZu0fM4lFd2NcRwr3XPksINHaQ-G_xBniIqbw0Ls1jF44-csFCur-kEgU8awapJzKnqDKgw",\n\n"exp":"AQAB",\n\n"kid":"2011-04-29"\n}It provides a Key ID for matching.
\nThe JWA specification focuses mainly on enumerating the algorithms necessary for JWS, JWK AND JWE. It also describes the operations that are specific to these algorithms and key types.
\nAlgorithms for JWS: These algorithms are used to sign the contents of the JWS Header and the JWS Payload
\n![\"JWS](\"/static/59304762300dd863a8ceddb2ca893b4b/e5715/JWS_algo.png\" "\\"JWS")
\n \n Algorithms for JWE These algorithms encrypt the Content Encryption Key (CEK) and produce the JWE Encrypted Key
\n![\"JWE](\"/static/41748e3c88f2a5504335f64ed916a05c/e5715/JWE_algo.png\" "\\"JWE")
\n \n Algorithms for JWK: JWA specifies a set of algorithm families to be used for the public keys represented by JWK
\n![\"JWK](\"/static/1a4fdfb901193d11ded56baade0feaa7/e5715/JWK_algo.png\" "\\"JWK")
\n \n Learn more about JWA here.
\nThe IETF JSON Object Signing and Encryption (JOSE) working group was chartered to develop a secure object format based on JSON and simplify adding object-based security features to internet applications.
\nThe basic requirements for these object formats are confidentiality and integrity mechanisms encoded in JSON. JWT, JWS, JWE, JWK, and JWA are the JOSE working group items intended to describe these object formats.
\nThe JOSE specifications have many use cases and are sought out for integrity protection, encryption, security tokens, OAuth, web cryptography, etc. Check out this site to know more about JOSE use cases.
\nWant to learn how to use JWT for authentication in your apps? Check out this informational JWT authentication guide.
\nReferences:
\n\n","frontmatter":{"date":"November 24, 2021","updated_date":null,"description":"Learn about the JOSE framework and its specifications, including JSON Web Token (JWT), JSON Web Signature (JWS), JSON Web Encryption (JWE), JSON Web Key (JWK), and JSON Web Algorithms (JWA). For easier reference, bookmark this article.","title":"What are JWT, JWS, JWE, JWK, and JWA?","tags":["JSON","Encryption"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/77dde0fdc2f90c1277d228bc32c367d2/ee604/coverImage.png","srcSet":"/static/77dde0fdc2f90c1277d228bc32c367d2/69585/coverImage.png 200w,\n/static/77dde0fdc2f90c1277d228bc32c367d2/497c6/coverImage.png 400w,\n/static/77dde0fdc2f90c1277d228bc32c367d2/ee604/coverImage.png 800w,\n/static/77dde0fdc2f90c1277d228bc32c367d2/f3583/coverImage.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Yashesvinee V","github":"Yashesvinee","avatar":null}}}},{"node":{"excerpt":"In this tutorial, you'll learn how to easily convert an OpenCV project into a web app that you can showcase. You'll use a library called…","fields":{"slug":"/engineering/guest-post/opencv-web-app-with-streamlit/"},"html":"In this tutorial, you'll learn how to easily convert an OpenCV project into a web app that you can showcase. You'll use a library called Streamlit, which helps you easily build a web user interface in Python. Yes, you heard it right — no HTML, CSS, or JavaScript required. Just Python!
\nLet's get started.
\nInstall OpenCV and Streamlit using pip. You would also need Pillow — another image library.
\npip install opencv-python streamlit Pillow\n\nIf you use Python 2.7, note that OpenCV doesn't directly support Python 2.7 in their latest versions. Accordingly, you have to specify an older version like this
\npip install opencv-python==4.2.0.32
import cv2\n\ndef brighten_image(image, amount):\n img_bright = cv2.convertScaleAbs(image, beta=amount)\n return img_bright\n\ndef blur_image(image, amount):\n img = cv2.cvtColor(image, 1)\n blur_img = cv2.GaussianBlur(img, (11, 11), amount)\n return blur_img\n\ndef enhance_details(img):\n hdr = cv2.detailEnhance(img, sigma_s=12, sigma_r=0.15)\n return hdr\n\nimg = cv2.imread(filename='tony_stark.jpg')\n\n# do some cool image processing stuff\nimg = enhance_details(img)\nimg = brighten_image(img, amount=25)\nimg = blur_image(img, amount=0.2)\n\ncv2.imshow('Tony Stark', img)\ncv2.waitKey(0)\ncv2.destroyAllWindows()Here are three image processing functions that accept an image, do some processing, and return the processed image.
\nbrighten_image — increases the brightness of the image.blur_image — applies a blur effect on the image.enhance_details — applies an effect to enhance the details of the image.These functions make use of the OpenCV functions to do the actual processing — for e.g.: cv2.GaussianBlur, etc. I'm not explaining in-depth about them and the various parameters they accept since this tutorial is more focused on integrating OpenCV with Streamlit. However, feel free to jump to the OpenCV documentation to know more details about them.
\nThis program reads the image from the filepath using cv2.imread(); then, it passes the image to these functions that do the processing. Finally, the image is displayed using cv2.imshow(). cv2.waitKey(0) is to wait till the user presses any key, after which the program is exited.
Streamlit offers some common UI components out of the box that you can place on your webpage. This makes it super easy to code up something real quick. The way Streamlit works is that it reruns the Python script every time a user interacts with the components. They have some caching and optimizations, but this simple design makes it easy to build interactive webpages using Streamlit.
\n\n\nSomeone said, “Talk is cheap. Show me the code.” So, let's see some code.
\n
Open an editor and copy-paste this to demo-app.py
import streamlit as st\n\nst.title("OpenCV Demo App")\nst.subheader("This app allows you to play with Image filters!")\nst.text("We use OpenCV and Streamlit for this demo")\nif st.checkbox("Main Checkbox"):\n st.text("Check Box Active")\n\nslider_value = st.slider("Slider", min_value=0.5, max_value=3.5)\nst.text(f"Slider value is {slider_value}")\n\nst.sidebar.text("text on side panel")\nst.sidebar.checkbox("Side Panel Checkbox")To start a streamlit app, simply run the command streamlit run with the filename — for example:
streamlit run demo-app.pyYou should get a similar output as follows.
\n You can now view your Streamlit app in your browser.\n\n Local URL: http://localhost:8501\n Network URL: http://192.168.1.8:8501Click on the links in the output to open the Streamlit app in your browser. You'll see something as follows.
\nIf you see the code, it's very straightforward. It imports streamlit as st. The default is a simple linear layout where you can place components on the webpage in a sequential manner.
\nFor example, st.title() , st.checkbox(), st.slider() places the components on the main page in the order they're called..
Streamlit also offers a side panel. In order to place components in the sidepanel, you can do as follows:
\nst.sidebar.title() , st.sidebar.checkbox(), st.sidebar.slider()
There are other components also apart from these. You can explore more in the docs.
\nLet's integrate your OpenCV program into Streamlit. Here is the complete code:
\nimport cv2\nimport streamlit as st\nimport numpy as np\nfrom PIL import Image\n\n\ndef brighten_image(image, amount):\n img_bright = cv2.convertScaleAbs(image, beta=amount)\n return img_bright\n\n\ndef blur_image(image, amount):\n blur_img = cv2.GaussianBlur(image, (11, 11), amount)\n return blur_img\n\n\ndef enhance_details(img):\n hdr = cv2.detailEnhance(img, sigma_s=12, sigma_r=0.15)\n return hdr\n\n\ndef main_loop():\n st.title("OpenCV Demo App")\n st.subheader("This app allows you to play with Image filters!")\n st.text("We use OpenCV and Streamlit for this demo")\n\n blur_rate = st.sidebar.slider("Blurring", min_value=0.5, max_value=3.5)\n brightness_amount = st.sidebar.slider("Brightness", min_value=-50, max_value=50, value=0)\n apply_enhancement_filter = st.sidebar.checkbox('Enhance Details')\n\n image_file = st.file_uploader("Upload Your Image", type=['jpg', 'png', 'jpeg'])\n if not image_file:\n return None\n\n original_image = Image.open(image_file)\n original_image = np.array(original_image)\n\n processed_image = blur_image(original_image, blur_rate)\n processed_image = brighten_image(processed_image, brightness_amount)\n\n if apply_enhancement_filter:\n processed_image = enhance_details(processed_image)\n\n st.text("Original Image vs Processed Image")\n st.image([original_image, processed_image])\n\n\nif __name__ == '__main__':\n main_loop()Let's understand what's happening here.
\nApart from the image processing functions, you have a 'main_loop' function to add the logic for the webpage.
\nNothing fancy about st.title(), st.subheader(), st.text() — they just print some text in different sizes.
Next, there are two sliders to get the amount by which you need to apply the blur and brightness filters.
\nNote that st.sidebar places these components in the sidebar.
slider() takes in some arguments: name of the slider, min value, max value, and the default value of the slider. This function returns the current value of the slider.
Next, there's a checkbox component.
\ncheckbox() returns True if the checkbox is checked; else, it would return False.
Next, there's a file_uploader component, through which users can upload files of different types specified by the type parameter. Here, it's restricted to the image file types needed for the demo usecase.
When the program starts, there are no files selected by the user. At this time, this component returns None. When a file is uploaded from the UI, this component returns the path of the file.
\nThis is why there's an if-check on the return value of this component. If no files are selected, you can skip the rest of the program by returning from the main_loop() function.
Remember that the entire program is rerun whenever there's user interaction on any components of the page. When a user uploads a file, the whole program is executed again — and the if-check fails so that the program executes the image processing logic.
\nPillow.Image() is used to open this file, then it's converted to a numpy array using np.array() so that OpenCV can process it.
Now, it's passed to the different processing functions along with the amount parameter.
Finally, the program displays the original and processed images using the st.image() component.
The web app is ready!
\nTo start the app, simply run:
\nstreamlit run demo-app.pyNow you can play with the filters. Of course, these are some basic filters, but you can extend it to more interesting filters — like cartoonify filters, etc. — using the rich features of OpenCV.
\nTo publish your app, you need to host this program somewhere. There are different hosting providers for complex projects. But for this hobby project, is there a simple and quick solution?
\nYes, there's one!
\nYou can host the Streamlit application in Streamlit Cloud for free. You can host up to 3 apps in an account for free with up to 1GB of memory.
\nCheck out this tutorial from the community to host your app in Streamlit Cloud.
\nYou can find the source code for this tutorial here. The web app discussed above is hosted here if you want to try it out.
\nWant to add user authentication and registration in your app quickly? Check out the LoginRadius Python integration.
\n","frontmatter":{"date":"November 10, 2021","updated_date":null,"description":"You can now easily publish your OpenCV apps to the web using Streamlit, a Python library. Follow this tutorial to learn the process step by step.","title":"How to Build an OpenCV Web App with Streamlit","tags":["OpenCV","Streamlit","Python"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/f0dac1cb4c79fe1494333f33ec9a3861/ee604/coverimage.png","srcSet":"/static/f0dac1cb4c79fe1494333f33ec9a3861/69585/coverimage.png 200w,\n/static/f0dac1cb4c79fe1494333f33ec9a3861/497c6/coverimage.png 400w,\n/static/f0dac1cb4c79fe1494333f33ec9a3861/ee604/coverimage.png 800w,\n/static/f0dac1cb4c79fe1494333f33ec9a3861/f3583/coverimage.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Dingu Sagar","github":"dingusagar","avatar":null}}}}]},"markdownRemark":{"excerpt":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie…","fields":{"slug":"/engineering/identity-impact-of-google-chrome-thirdparty-cookie-restrictions/"},"html":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients.
\nWhat does it mean for user authentication?
\nOn one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes).
\nOn the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies.
\nIn this article, we’ll discuss:
\nThird-party cookie restrictions affect user authentication in three ways, as follows.
\nIf your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app.
\nIf you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials.
\nIf you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future.
\nFor example, you have apps at example.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.
Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO.
\nUsually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits.
\nFor example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords.
\n\n\nNote: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method).
\n
Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative.
\nSpecific to authentication, Google recommends the following:
\nCHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds.
\nFor example, a user visits a.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com.
If the user visits b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.
You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.
\nIf you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.
\nHowever, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues.
\nWith Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage.
\nStorage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context.
\nIt is most suitable when loading cross-site resources and interactions, such as:
\nVerifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible.
\nAs it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options.
\nWith Related Website Sets, you can declare a primary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.
Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets
\nIt provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.
\nIt is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature.
\nThe top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.
If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication.
\nRelated Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited.
\nFedCM API enables federated SSO without third-party cookies.
\nWith FedCM API, a user follows these steps for authentication:
\nYou can access a user demo of FedCM here: FedCM.
\nFor more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.
\nFirstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.
\nWe’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.
\nPlease subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.
\nThe proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community.
\nMoreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.
\nFrom LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out.
\nTop-level site: It is the primary site a user has visited.
\nFirst-party cookie: A cookie set by the top-level site.
\nThird-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited a.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.