![\"Risk-based](\"/5081309ed356e5e32a6454cd316bc45d/adaptive-mfa.webp\")
With rising cyber threats, organizations need strong authentication to safeguard sensitive data and user accounts. Multi-Factor Authentication (MFA) adds extra verification layers, while Risk-Based Authentication (RBA) adapts security based on user behavior.
\nBoth play a crucial role in preventing unauthorized access and reducing security risks. In this blog, we’ll explore what they are, how they work, and why they matter for your security.
\nMulti-factor authentication (MFA) is a security measure that requires users to provide multiple forms of verification before gaining access to a system. Instead of relying solely on passwords, MFA security uses a combination of authentication factors to strengthen security and prevent unauthorized access.
\nMFA typically involves three categories of authentication factors:
\nBy combining these factors, multi-layer authentication ensures that even if one factor is compromised, the account remains secure.
\nMulti-factor authentication in cyber security significantly reduces the risk of account breaches by adding multiple layers of protection beyond just passwords.
\nSince MFA security requires more than one authentication factor, stolen passwords alone cannot grant attackers access to accounts.
\nMany industries require MFA for compliance with security regulations such as GDPR, HIPAA, and PCI-DSS, ensuring adherence to data protection standards.
\nPhishing attacks often rely on stealing login credentials, but with MFA security in place, attackers would need access to an additional factor, making unauthorized access significantly more difficult.
\nProtect every login! Uncover the benefits of MFA.
\nWhen organizations implement strong authentication mechanisms, users feel more secure knowing their data is well-protected. This fosters trust in digital services and platforms.
\nBy requiring multiple authentication factors, MFA enhances identity risk management, reducing vulnerabilities related to credential-based attacks.
\nRisk-based authentication (RBA), also known as adaptive authentication, is a dynamic security approach that evaluates user behavior and contextual factors before granting access. Instead of applying uniform authentication policies, risk-based security adjusts authentication requirements based on perceived risk levels.
\n
Risk-based MFA makes it easier for users. Low-risk users can log in smoothly. High-risk access attempts need extra authentication steps. This balance between security and convenience enhances overall efficiency.
\nBy analyzing login behaviors, device information, and geographical location, risk authentication detects suspicious activities and prevents fraudulent access attempts. It effectively minimizes risks related to identity theft and account takeovers.
\nOrganizations leveraging risk-based authentication ensure compliance with stringent security regulations like the GDPR and CCPA by implementing advanced identity risk management. This helps in meeting legal and industry-specific security requirements.
\nFailing to comply with GDPR can lead to security breaches, damage your brand's reputation, and result in hefty fines! Learn more.
\nUnlike static security measures, risk-based authentication optimizes authentication requirements based on risk assessment, reducing unnecessary authentication steps and streamlining security processes without increasing operational costs.
\nWith cyber threats constantly evolving, risk-based MFA ensures security policies remain dynamic. Organizations can adjust authentication requirements based on new threat patterns and user behaviors.
\nWant a detailed guide on risk-based authentication? Download this insightful guide:
\n![\"an](\"/99ee0fac455a7e68c4148398be3b2de8/an-enterprises-guide-to-risk-based-authentication.webp\")
| Factor | \nRisk-Based Authentication (RBA) | \nTraditional Multi-Factor Authentication (MFA) | \n
|---|---|---|
| Authentication Approach | \nAdapts security measures based on user behavior and risk levels | \nRequires a fixed set of authentication steps for every login | \n
| User Experience | \nSeamless, prompts MFA only when risk is detected | \nRequires MFA for every login, which can be cumbersome | \n
| Security Level | \nDynamic security based on real-time risk analysis | \nStatic security, same for all users regardless of risk | \n
| Risk Assessment | \nConsiders factors like location, device, IP, and login patterns | \nNo contextual awareness, applies the same process to all users | \n
| Efficiency | \nReduces friction for low-risk users while securing high-risk attempts | \nIncreases login friction for all users equally | \n
| Best Use Cases | \nEnterprises needing adaptive security with minimal disruption | \nOrganizations requiring uniform authentication enforcement | \n
| Implementation Complexity | \nRequires AI/ML-driven risk assessment and continuous monitoring | \nEasier to implement with standard authentication methods | \n
| Compliance & Security | \nHelps meet compliance with intelligent access controls | \nMeets compliance but can add unnecessary friction | \n
Risk-based MFA is widely used across various industries to enhance security while maintaining user convenience. For example, banking institutions employ risk-based authentication by analyzing user behavior, transaction location and history.
\nE-commerce platforms use risk-based MFA to keep customer accounts safe. They watch buying patterns to identify fraudulent purchases.
\nSimilarly, corporate IT systems also leverage risk-based security to enforce strict authentication policies for high-risk access requests while allowing seamless logins for trusted employees.
\nImplementing advanced security measures like multi-factor authentication and risk-based authentication is crucial in today’s modern digital landscape.
\nMulti-factor authentication enhances security by requiring multiple verification methods, while risk-based MFA dynamically assesses risk to provide a seamless yet secure user experience. Organizations that leverage these technologies benefit from stronger identity protection, compliance adherence, and improved cybersecurity resilience.
\nIf you wish to reinforce your security by leveraging cutting edge MFA and risk-based auth, reach us for a quick demo.
\nHow Does One Implement Risk-Based Authentication?
\nOrganizations implement RBA by using AI-driven tools like LoginRadius that analyze user behavior, device, and location data to assess risk and enforce adaptive authentication.
\nHow to Enable Multi-Factor Authentication?
\nMFA can be enabled by integrating it into an organization's security framework through an identity provider, requiring users to verify identity through multiple authentication factors.
\nWhat is Adaptive Multi-Factor Authentication?
\nAdaptive MFA/ risk-based MFA dynamically adjusts authentication requirements based on real-time risk assessment, ensuring a secure yet seamless user experience.
\nHow Does Multi-Factor Authentication Make a System More Secure?
\nMFA enhances security by requiring multiple authentication factors, making it harder for attackers to gain unauthorized access even if one factor is compromised.
\nHow Does Risk-Based MFA Differ from Traditional MFA?
\nTraditional MFA uses set authentication steps. Risk-based MFA changes how we authenticate users. It does this by looking at user behavior and risk. Multi-factor authentication (MFA) is a way to improve security. It requires users to give more than one form of verification to access a system.
\n","frontmatter":{"date":"February 27, 2025","updated_date":null,"title":"Risk-Based Authentication vs. MFA: Key Differences Explained","tags":["API","Identity Management","User Authentication","CIAM Security"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/edcd19470ad543ebda9bf1653aa68f74/58556/banner.webp","srcSet":"/static/edcd19470ad543ebda9bf1653aa68f74/61e93/banner.webp 200w,\n/static/edcd19470ad543ebda9bf1653aa68f74/1f5c5/banner.webp 400w,\n/static/edcd19470ad543ebda9bf1653aa68f74/58556/banner.webp 800w,\n/static/edcd19470ad543ebda9bf1653aa68f74/99238/banner.webp 1200w,\n/static/edcd19470ad543ebda9bf1653aa68f74/7c22d/banner.webp 1600w,\n/static/edcd19470ad543ebda9bf1653aa68f74/04b61/banner.webp 6251w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.
\nWe’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the LoginRadius website—to be faster, more intuitive, and developer-first in every way.
\nThe goal? Having them spend less time searching and more time building.
\nLoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.
\nHere’s a closer look at what’s new and why it’s important:
\n![\"This](\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\")
Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.
\nThe new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.
\nSo, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.
\n![\"This](\"/e5358b82be414940f3fb146013845933/capabilities.webp\")
We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:
\nThis structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.
\n![\"This](\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\")
We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.
\nThe new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.
\n![\"This](\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\")
Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.
\nOur platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.
\nCheck out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.
\nDo not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!
\n","frontmatter":{"date":"February 21, 2025","updated_date":null,"title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},{"node":{"fields":{"slug":"/engineering/why-we-rebuilt-loginradius-dot-net-core-apis-with-go/"},"html":"Currently, the LoginRadius Identity Platform processes more than 100K requests per second. As our developer and enterprise customers grow, we should be able to scale our APIs to handle staggering loads of requests per second. It won’t be surprising if our APIs have to serve a million requests per second in the future.
\nGenerally, we add more instances, CPU, or memory for supporting high request volumes. However, it has been burdening our infrastructure budget and maintenance.
\nSo, we’re focused on reducing the cost of compute capacity by improving efficiency. In this engineering update, we share our experience with a highly effective, low-risk, large-scale performance and cost optimization with Go.
\nLoginRadius production environment consists of 30+ microservices backed by a cloud-native infrastructure. Most of these services are written in .NET and Node.js. In Q1 2021, we explored the possibilities of improving the performance of our services and optimizing costs.
\nLoginRadius tech stack consists of 30+ microservices. We have different microservices for each business service like Authentication, Web SSO, Federated SSO, etc.
\nCore Applications: Multiple microservices instances for Authentication, Account API, Analytics API, Risk-based Authentication, Backend Jobs, Integrations, and much more,
\nData Storage: MongoDB, Elasticsearch, Redis, and PostgreSQL clusters are used to store a range of datasets for various applications and functionalities.
\nQueues: Amazon Kinesis Data Streams, Amazon Simple Notification Service (SNS), Amazon Simple Queue Service (SQS), and Azure Queue Storage.
\nOther Services: Services for rate-limiting, bcrypt clusters, feature flags, and more.
\nRouting: AWS load balancers (ALB, NLB, and ELB from AWS) and some nodes running NGINX as a proxy.
\nWe've been utilizing a multi-cloud and multi-region architecture for years based on our and our customers’ data and privacy compliance requirements. However, as our usage (and load) grew with maintenance costs, we relied more on AWS resources.
\nThis is the basic architecture of the environment in the US:
\n![\"Basic](\"/491e73fe4836ca5daa93f6aad47f3b4d/basic-architecture.webp\")
Each request is processed as follows:
\n![\"Request](\"/fc6929115da8e289aaaaa4880d05fe5b/request-processing-flow.webp\")
The above diagram shows two cloud regions — US East and US West.
\nWhen requests come:
\nSo, how do we maintain high availability?
\nEvery availability zone has operating instances of all services (including databases). If one availability zone is down, we still have two availability zones.
\nWe are using a two-pronged scaling approach as scaling based on resource utilization (CPU & Memory) alone is not practical.
\nOnce, our multi-tenant application received a sudden spike in API requests — from thousands of requests to millions. Usually, adding new infrastructure to the existing pool takes around 60 seconds. And application deployment and start-up time were about 90 seconds. Plus, considering other possible delays in scaling, we can lose about 5 minutes for scaling up.
\nFurther, adding the time to gather metrics and make the scaling decision, the total delay can be ~6 minutes. This process can impact all multi-tenant customers' critical applications because user authentication and authorization are essential.
\nWe keep Scaling Buffers to support this kind of scenario.
\n\n\nScaling Buffers: During the Scale-up Time, the Scaling Buffer is the service's highest predicted traffic spike. Depending on the scaling strategy, we store several types of the buffer.
\n
Usually, we set a one million requests concurrency buffer. And based on the traffic pattern, our scaling automation triggers the scaling.
\nOur Platform performance is good. We can quickly handle millions of requests, and our application platform was scalable but not great. Minding the kind of growth we’re expecting, we wanted to improve and prepare our platform for the future.
\nNo. of requests can fluctuate within a few seconds if not minutes or hours, especially with specific events such as holiday shopping, promotional events, Black Friday, etc. So, in the event of traffic spikes, application startup time plays a significant role in scaling.
\nOur application startup time was around 90 seconds, so whenever scaling was happening due to high traffic, scaling took more time. That's why we needed to improve the application startup time.
\nWe used hundreds of AWS c5.2xlarge instances in a production environment to handle daily traffic. During certain events such as holiday shopping and Black Friday, we doubled our infrastructure according to expected traffic with a 20~30% buffer. We kept a high buffer because scaling took time with the existing .NET Core services. As a result, infrastructure cost was burdening as we were inefficiently deploying cloud infrastructure.
\nWe designed our Identity Platform a few years ago. Since then, the technology landscape has dramatically improved and optimized in recent years.
\nAlso, current technology platforms available to build and support our product (Identity Platform) are limited. So, it is crucial to align functionality with proper technology capabilities.
\nWe were facing challenges in customization. It was inflexible and limiting to deliver the required outcomes in more complex situations and use cases.
\nWe did a lot of research to choose the appropriate programming language for our application. We needed a language that would be simple to understand and learn, easy to maintain, and has high concurrency. Our research ended with Go due to its amazing qualities.
\nLet's take a closer look. Why choose Go? What makes Go such an excellent development language? What distinguishes it from the competition?
\nLet's get to the bottom of this by looking at what makes Go special.
\nGo is an open-source programming language developed by Google's Rob Pike, Robert Griesemer, and Ken Thompson. It was initially released in 2009. It has several enhancements and additions based on the C syntax to properly control memory use, manage objects, and enable static or strict typing along with concurrency.
\nConcurrent code can be executed in parallel by separate computer cores or in sequence. Most programming languages lack concurrent execution when working with multiple threads. They often slow down programming, compiling, and execution.
\nGo works with goroutines that are lightweight, low-cost threads. And Go channels allow goroutines to communicate with one another.
\nSequential Processes Communication: They are very similar to threads in Java but lightweight, and the cost of creating them is meager.
\nGo's core value is simplicity: it builds quickly, runs quickly, and is simple to learn. To help speed things up, there are no classes or type inheritance. This makes it easier to build a market-ready product quickly. Furthermore, its simplicity allows for quick and simple maintenance.
\nGo has an excellent standard library that includes a large number of built-in essential type functions and packages that are both practical and straightforward to use: I/O, encoding and decoding, manipulating raw bytes, network utility functions, parsing, debugging, and a lot more are all made simple by particular packages. Testing support is also included in the standard library, so no other dependencies are required.
\nGo has a simpler syntax than other languages and is simple to learn. The syntax of Go is somewhat similar to the C language. Developers can begin with Go in a couple of hours, but they need to spend time understanding best coding practices, especially understanding goroutines for concurrency.
\nWe run benchmarks on our API so that the performance insights help us make decisions about the tech stack. It will paint a clearer picture of where we stand compared to our existing tech stack and what areas need improvement or immediate attention.
\nWe did multiple stress tests on our high usage APIs built separately with .NET Core(Old) and Go (new).
\nWe are using Kubernetes to deploy and manage our microservices and application infrastructure and deploy our application microservices across multiple Pods.
\n| Test Item | \nValue | \n
|---|---|
| Instance Type | \nc5.2xlarge on AWS | \n
| No. of Instances | \n20 | \n
| Reverse Proxy | \nNGINX | \n
| Concurrent Requests | \n20K per second | \n
| Duration | \n5 minutes | \n
| Stress Test Tool | \nGatling | \n
We deployed both applications in the same infrastructure and did the same stress test.\nGolang application has performed much better.
\n![\"Requests](\"/425ce0aea8c01e3281101dd268d0def6/requests-and-responses-per-second-dot-net-core.webp\")
\n ![\"API](\"/d7b965865c218de9b3e71b6559787500/response-time-percentiles-dot-net-core.webp\")
\n ![\"Overall](\"/cd1c01d04ed3965ac3ca5bfce7ba66dc/overall-matrix-dot-net-core.webp\")
\n You can see some errors in Graph - 1(a) after ramping up to 15K users. Also, response time is increasing, as seen in Graph - 1(b).
\nThe application can recover after a couple of seconds, and after that, the application cannot respond. Application scaling is taking time. And existing infra cannot handle this spike, so the application crashes after 18K RPS.
\nWe did the same stress test with the new Go application. It is easily able to handle this kind of concurrency without any issue.
\n![\"Requests](\"/64fd50adc421658ca67fbf096038dc9e/requests-and-responses-per-second-go-lang.webp\")
\n ![\"API](\"/dd50184c7b2f042915816c6374a53590/response-time-percentiles-go-lang.webp\")
\n ![\"Overall](\"/19f6d7a35332ce026578459805a2327d/overall-matrix-go-lang.webp\")
\n The Go application can easily handle 20K ramp-up requests per second without any issue, as shown in Graph -2(a).
\nYou can see in Graph - 2(b) what the response time was after 2 min 47 sec for a couple of seconds. The Go application was scaling during that time. It is scaling quickly, so it is not impacting API request performance, and, also, the application can recover response API time as expected.
\nIn this article, you have learned how we have achieved better API performance by rebuilding them in Go, which were previously built in .NET Core. And you have understood our approach to this transition and how it increased the API performance of the LoginRadius Identity Platform.
\nLeverage LoginRadius Identity Platform to build authentication functionality for your web and mobile apps. Sign up for a free LoginRadius account here
\n","frontmatter":{"date":"June 06, 2022","updated_date":null,"title":"Why We Re-engineered LoginRadius APIs with Go?","tags":["Go","API",".NET","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/da26686e342d94b3007681cd0379367c/58556/high-performance-identity-apis.webp","srcSet":"/static/da26686e342d94b3007681cd0379367c/61e93/high-performance-identity-apis.webp 200w,\n/static/da26686e342d94b3007681cd0379367c/1f5c5/high-performance-identity-apis.webp 400w,\n/static/da26686e342d94b3007681cd0379367c/58556/high-performance-identity-apis.webp 800w,\n/static/da26686e342d94b3007681cd0379367c/99238/high-performance-identity-apis.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/guest-post/authenticating-flutter-apps/"},"html":"User authentication is the process of validating a user's identity to ensure that they are who they claim to be. Implementing user authentication in your application is critical to prevent unauthorized users from accessing sensitive information.
\nThis tutorial focuses on implementing user authentication and registration in Flutter applications using the LoginRadius API.
\nIf you wish to follow along with this tutorial, you must have the following set up:
\nThis tutorial is verified with Flutter v2.5.1 and Android Studio v3.5.
\nLoginRadius is a cloud-based, SaaS Customer Identity and Access Management (CIAM) platform that provides developers and businesses simplified and robust features for managing customer identity, privacy, and access. LoginRadius offers high-level, secure, and well-documented APIs for integrating User Authentication and Single Sign-on (SSO) into your application.
\nLoginRadius offers:
\nSo, with everything out of the way, let's get started.
\nAfter creating an account with LoginRadius, it sets up a free app for you. This is the app in which you would integrate the LoginRadius API with Flutter. Here my app name is “tayy”.
\n![\"LoginRadius](\"/0d7ac3f6bd1f6f3ad31570d5b79c1ebd/app_window.webp\")
Next, you need to obtain your LoginRadius API credentials. To do so, login to your Dashboard and navigate to the Configuration tab in the sidebar menu. You will find your API credentials under the API Key and Secret section. Copy and store your APP Name, API Key, and API Secret somewhere safe and easily accessible.
![\"LoginRadius](\"/8a552a2950ebab3006e383386c6a11ef/configuration_tab.webp\")
Create a new Flutter project and navigate to the folder of the application by running the following commands in your terminal:
\nflutter create loginradius_example\ncd loginradius_exampleNext, you need to install the dio package as a dependency in our project. The dio package is a powerful HTTP client used for making network requests.
Run the following command to get the newest version of the dio package in your project.
flutter pub add dioThen, install the dependency by running flutter pub get in your terminal.
The project is being structured in this order:
\n![\"Folder](\"/cb6ed60c36b1e957eec023d28a260df7/folder-structure.webp\")
Create a new dart file named api_client.dart and import the dio package into the file, as follows:
import 'package:dio/dio.dart';Now let’s create a class named ApiClient and initialize the Dio object in it. The ApiClient class will contain several methods for making network requests based on your features, including User Registration, User Login, Get User Profile Data, and User Logout.
import 'package:dio/dio.dart';\n\nclass ApiClient {\n final Dio _dio = Dio();\n\n Future<Response> registerUser() async {\n //IMPLEMENT USER REGISTRATION\n }\n\n Future<Response> login() async {\n //IMPLEMENT USER LOGIN\n }\n\n Future<Response> getUserProfileData() async {\n //GET USER PROFILE DATA\n }\n\n Future<Response> logout() async {\n //IMPLEMENT USER LOGOUT\n }\n}Before implementing the user registration functionality, you must first obtain the user registration endpoint URL from the LoginRadius API Docs.
\nAfter retrieving the endpoint URL, you need to send a POST request to the endpoint using the Dio package by passing in:
apiKey you obtained earlier as a query parameter;userData as the request body; and,SOTT key as a header, as shown below.class ApiClient {\n //...\n Future<Response> registerUser(Map<String, dynamic>? userData) async {\n try {\n Response response = await _dio.post(\n 'https://api.loginradius.com/identity/v2/auth/register', //ENDPONT URL\n data: userData, //REQUEST BODY\n queryParameters: {'apikey': 'YOUR_API_KEY'}, //QUERY PARAMETERS\n options: Options(headers: {'X-LoginRadius-Sott': 'YOUR_SOTT_KEY', //HEADERS\n }));\n //returns the successful json object\n return response.data;\n } on DioError catch (e) {\n //returns the error object if there is\n return e.response!.data;\n }\n }\n }The below code snippet shows how you’ll send a POST request to the LoginRadius login endpoint URL https://api.loginradius.com/identity/v2/auth/login, passing in your apiKey as a query parameter and the email and password of the user as the request body.
class ApiClient {\n //...\n Future<Response> login(String email, String password) async {\n try {\n Response response = await _dio.post(\n 'https://api.loginradius.com/identity/v2/auth/login',\n data: {\n 'email': email,\n 'password': password\n },\n queryParameters: {'apikey': 'YOUR_API_KEY'},\n );\n //returns the successful user data json object\n return response.data;\n } on DioError catch (e) {\n //returns the error object if any\n return e.response!.data;\n }\n }\n }To retrieve the user profile details, send a GET request to the Read Profile Endpoint URL https://api.loginradius.com/identity/v2/auth/account, passing in your apiKey as a query parameter and the user's access token as the header.
\n\nThe user’s access token is gotten from the successful response object of the User Login endpoint.
\n
class ApiClient {\n //...\n\n Future<Response> getUserProfileData(String accesstoken) async {\n try {\n Response response = await _dio.get(\n 'https://api.loginradius.com/identity/v2/auth/account',\n queryParameters: {'apikey': 'YOUR_API_KEY'},\n options: Options(\n headers: {\n 'Authorization': 'Bearer ${YOUR_ACCESS_TOKEN}',\n },\n ),\n );\n return response.data;\n } on DioError catch (e) {\n return e.response!.data;\n }\n }Finally, to implement the user logout functionality, you would send a GET request to the Invalidate User Access Token endpoint URL https://api.loginradius.com/identity/v2/auth/access_token/InValidate. This API call invalidates the user's active access token, requiring them to re-authenticate if they want to access their data.
class ApiClient {\n //...\n\n Future<Response> logout(String accessToken) async {\n try {\n Response response = await _dio.get(\n 'https://api.loginradius.com/identity/v2/auth/access_token/InValidate',\n queryParameters: {'apikey': ApiSecret.apiKey},\n options: Options(\n headers: {'Authorization': 'Bearer $accessToken'},\n ),\n );\n return response.data;\n } on DioError catch (e) {\n return e.response!.data;\n }\n }\n }That concludes the ApiClient class. Next, you'll build the UI for your Flutter application, making use of the methods you just created in the ApiClient class.
Your Flutter application will consist of four screens, which include:
\nLet’s begin by building the Registration Screen.
\nThe RegistrationScreen has two TextFormField widgets that serve as our email and password fields, as well as an ElevatedButton to handle event submission, as shown in the code snippet below from the register.dart file.
//...\n @override\n Widget build(BuildContext context) {\n Scaffold(\n backgroundColor: Colors.blueGrey[200],\n body: Form(\n key: _formKey,\n child: SizedBox(\n width: size.width,\n height: size.height,\n child: Align(\n alignment: Alignment.center,\n child: Container(\n width: size.width * 0.85,\n padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),\n decoration: BoxDecoration(\n color: Colors.white,\n borderRadius: BorderRadius.circular(20),\n ),\n child: SingleChildScrollView(\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: <Widget>[\n const Center(\n child: Text(\n "Register",\n style: TextStyle(\n fontSize: 30,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n SizedBox(height: size.height * 0.05),\n TextFormField(\n validator: (value) =>\n Validator.validateEmail(value ?? ""),\n controller: emailController,\n keyboardType: TextInputType.emailAddress,\n decoration: InputDecoration(\n hintText: "Email",\n isDense: true,\n border: OutlineInputBorder(\n borderRadius: BorderRadius.circular(10),\n ),\n ),\n ),\n SizedBox(height: size.height * 0.03),\n TextFormField(\n obscureText: _showPassword,\n validator: (value) =>\n Validator.validatePassword(value ?? ""),\n controller: passwordController,\n keyboardType: TextInputType.visiblePassword,\n decoration: InputDecoration(\n hintText: "Password",\n isDense: true,\n border: OutlineInputBorder(\n borderRadius: BorderRadius.circular(10),\n ),\n ),\n ),\n SizedBox(height: size.height * 0.06),\n Row(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n Expanded(\n child: ElevatedButton(\n onPressed: _handleRegister,\n style: ElevatedButton.styleFrom(\n primary: Colors.indigo,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.circular(10)),\n padding: const EdgeInsets.symmetric(\n horizontal: 40, vertical: 15)),\n child: const Text(\n "Register",\n style: TextStyle(\n fontSize: 20,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n ),\n ],\n ),\n ],\n ),\n ),\n ),\n ),\n ),\n ),\n );\n }\n //...In the onPressed callback of the ElevatedButton widget, you'll handle the validation of your form data.
If the form is validated, you pass your userData to the registerUser method from the ApiClient class for processing.
If the response is an error, you show a snackbar with the error message. Otherwise, the user is redirected to the Login Screen.
\n\n\nIn the following example, you've provided only a few user attributes as
\nuserData. To view the complete list of user attributes, please look at the body parameters of the User Registration API here.
Future<void> _handleRegister() async {\n if (_formKey.currentState!.validate()) {\n //show snackbar to indicate loading\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: const Text('Processing Data'),\n backgroundColor: Colors.green.shade300,\n ));\n\n //the user data to be sent\n Map<String, dynamic> userData = {\n "Email": [\n {\n "Type": "Primary",\n "Value": emailController.text,\n }\n ],\n "Password": passwordController.text,\n "About": 'I am a new user :smile:',\n "FirstName": "Test",\n "LastName": "Account",\n "BirthDate": "10-12-1985",\n "Gender": "M",\n };\n\n //get response from ApiClient\n dynamic res = await _apiClient.registerUser(userData);\n ScaffoldMessenger.of(context).hideCurrentSnackBar();\n\n //checks if there is no error in the response body.\n //if error is not present, navigate the users to Login Screen.\n if (res['ErrorCode'] == null) {\n Navigator.push(context,\n MaterialPageRoute(builder: (context) => const LoginScreen()));\n } else {\n //if error is present, display a snackbar showing the error messsage\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: Text('Error: ${res['Message']}'),\n backgroundColor: Colors.red.shade300,\n ));\n }\n }\n}The LoginScreen UI code is similar to the RegistrationScreen in that it also has two TextFormField widgets that serve as our email and password fields, as well as an ElevatedButton to handle event submission. So, for the sake of brevity, I’ll be leaving out the LoginScreen UI code and focusing mainly on the code to be written in the ElevatedButton onPressed callback in the login_screen.dart file.
//...\n //...\n Future<void> loginUsers() async {\n if (_formKey.currentState!.validate()) {\n //show snackbar to indicate loading\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: const Text('Processing Data'),\n backgroundColor: Colors.green.shade300,\n ));\n\n //get response from ApiClient\n dynamic res = await _apiClient.login(\n emailController.text,\n passwordController.text,\n );\n ScaffoldMessenger.of(context).hideCurrentSnackBar();\n\n //if there is no error, get the user's accesstoken and pass it to HomeScreen\n if (res['ErrorCode'] == null) {\n String accessToken = res['access_token'];\n Navigator.push(\n context,\n MaterialPageRoute(\n builder: (context) => HomeScreen(accesstoken: accessToken)));\n } else {\n //if an error occurs, show snackbar with error message\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: Text('Error: ${res['Message']}'),\n backgroundColor: Colors.red.shade300,\n ));\n }\n }\n }\n //...The code snippet above is a method that first validates the form before passing the email and password values to the login method from the ApiClient class for handling.
If the response is successful, you obtain the user’s access_token from the response data and pass it over to the HomeScreen. Otherwise, you display a snackbar with the error message that occurred.
Then, you pass the loginUsers method you created above to the onPressed property of the ElevatedButton widget in the LoginScreen, as shown below.
ElevatedButton(\n onPressed: loginUsers, //<--\n style: ElevatedButton.styleFrom(\n primary: Colors.indigo,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.circular(10)),\n padding: const EdgeInsets.symmetric(\n horizontal: 40, vertical: 15)),\n child: const Text("Login",\n style: TextStyle(\n fontSize: 20,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n ),Next, you need to provide a screen that reveals the user's profile data when they successfully log in, and the HomeScreen is there to do so.
The HomeScreen displays the user’s profile details using a FutureBuilder widget that accepts a future getUserData.
Future<Map<String, dynamic>> getUserData() async {\n dynamic userRes;\n userRes = await _apiClient.getUserProfileData(widget.accesstoken);\n return userRes;\n }The getUserData method above is used to retrieve details of a user by passing in the access_token obtained earlier from the LoginScreen to the ApiClient getUserProfileData method.
To display the result of your getUserData method on our screen, use a FutureBuilder widget. The code snippet below shows how to use the FutureBuilder to get the results of the getUserData future in the home.dart file.
class HomeScreen extends StatefulWidget {\n final String accesstoken;\n const HomeScreen({Key? key, required this.accesstoken}) : super(key: key);\n @override\n State<HomeScreen> createState() => _HomeScreenState();\n }\n class _HomeScreenState extends State<HomeScreen> {\n //instance of ApiClient class\n final ApiClient _apiClient = ApiClient();\n\n //get user data from ApiClient\n Future<Map<String, dynamic>> getUserData() async {\n dynamic userRes;\n userRes = await _apiClient.getUserProfileData(widget.accesstoken);\n return userRes;\n }\n @override\n Widget build(BuildContext context) {\n var size = MediaQuery.of(context).size;\n return Scaffold(\n backgroundColor: Colors.white,\n body: SizedBox(\n width: size.width,\n height: size.height,\n child: FutureBuilder<Map<String, dynamic>>(\n future: getUserData(), //<---\n builder: (context, snapshot) {\n if (snapshot.hasData) {\n if (snapshot.connectionState == ConnectionState.waiting) {\n return Container(\n height: size.height,\n width: size.width,\n color: Colors.blueGrey,\n child: const Center(\n child: CircularProgressIndicator(),\n ),\n );\n }\n //get results from snapshot\n String fullName = snapshot.data!['FullName'];\n String firstName = snapshot.data!['FirstName'];\n String lastName = snapshot.data!['LastName'];\n String birthDate = snapshot.data!['BirthDate'];\n String email = snapshot.data!['Email'][0]['Value'];\n String gender = snapshot.data!['Gender'];\n return Container(\n width: size.width,\n height: size.height,\n color: Colors.blueGrey.shade400,\n child: SingleChildScrollView(\n physics: const BouncingScrollPhysics(),\n //...\n //...Finally, let's add the logout feature.
\nAdd an ElevatedButton widget to the HomeScreen.
TextButton(\n onPressed: (){},\n style: TextButton.styleFrom(\n backgroundColor: Colors.redAccent.shade700,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.circular(5)),\n padding: const EdgeInsets.symmetric(\n vertical: 15, horizontal: 25)),\n child: const Text('Logout',\n style: TextStyle(color: Colors.white), ),\n ),\n ),On pressing the button, you'll call the logout method on the ApiClient class and pass in the access_token value, and then you route the user to the LoginScreen.
TextButton(\n onPressed: () async {\n await _apiClient.logout(widget.accesstoken);\n Navigator.pushReplacement(\n context, MaterialPageRoute(builder: (context) => const LoginScreen()));\n },\n style: TextButton.styleFrom(\n backgroundColor: Colors.redAccent.shade700,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.circular(5)),\n padding: const EdgeInsets.symmetric(\n vertical: 15, horizontal: 25)),\n child: const Text('Logout',\n style: TextStyle(color: Colors.white),\n ),\n ),![\"Preview](\"/968d860d94a6f5f996e709e22dcec84a/demo-project.gif\")
LoginRadius provides high-level, secure, and well-documented APIs to ease the implementation of authentication and user identity management. This tutorial has discussed LoginRadius's benefits and how to use the LoginRadius APIs to handle user authentication and registration in a Flutter application.
\nThe complete source code of the demo application is available on GitHub.
\n","frontmatter":{"date":"February 17, 2022","updated_date":null,"title":"Flutter Authentication: Implementing User Signup and Login","tags":["Authentication","Flutter","API"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/97c4aaf6f0e898b457c0574ba1f8c979/58556/user-authentication-for-flutter-apps.webp","srcSet":"/static/97c4aaf6f0e898b457c0574ba1f8c979/61e93/user-authentication-for-flutter-apps.webp 200w,\n/static/97c4aaf6f0e898b457c0574ba1f8c979/1f5c5/user-authentication-for-flutter-apps.webp 400w,\n/static/97c4aaf6f0e898b457c0574ba1f8c979/58556/user-authentication-for-flutter-apps.webp 800w,\n/static/97c4aaf6f0e898b457c0574ba1f8c979/99238/user-authentication-for-flutter-apps.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Yusuf Ahmed","github":null,"avatar":null}}}},{"node":{"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,"title":"Using JWT Flask JWT Authentication- A Quick Guide","tags":["Flask","JWT","API"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/1cfc51c7d9ade423f3b1992809ba5b1b/58556/coverImage.webp","srcSet":"/static/1cfc51c7d9ade423f3b1992809ba5b1b/61e93/coverImage.webp 200w,\n/static/1cfc51c7d9ade423f3b1992809ba5b1b/1f5c5/coverImage.webp 400w,\n/static/1cfc51c7d9ade423f3b1992809ba5b1b/58556/coverImage.webp 800w,\n/static/1cfc51c7d9ade423f3b1992809ba5b1b/99238/coverImage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Babatunde Koiki","github":"Babatunde13","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/github-api/"},"html":"API stands for Application Program Interfaces, which developers use to access web tools or information on the cloud. It allows different cross-platform applications to talk to each other.\nOne of the common examples of it is Google Speech to Text API used when you talk to Google Assistant.
\nGithub APIs( or Github ReST APIs) are the APIs that you can use to interact with GitHub. They allow you to create and manage repositories, branches, issues, pull requests, and many more.\nFor fetching publicly available information (like public repositories, user profiles, etc.), you can call the API. For other actions, you need to provide an authenticated token.
\nThe base URL for GitHub APIs is:- GithubAPI
\nRequest type: GET\nAPI endpoint: /users/{username}
\nExample :- curl https://api.github.com/users/devkapilbansal
![\"user_details\"](\"/fcabf9d423b1a71e7e92aa365512c4e1/user_details.webp\")
As you can see, API returns us a JSON response with info about the user, like its imageurl, name, mailaddress.
\nRequest type: GET\nAPI endpoint: /users/{username}/followers
\nExample :- curl https://api.github.com/devkapilbansal/followers
![\"followers\"](\"/1cae6a5b119732ee713738f1b2d9b51d/followers.webp\")
This URL returns info about all the users that follow a particular user.
\nRequest type: GET\nAPI endpoint: /user/{username}/following/{target_username}
\nThis endpoint doesn't return any content. It just returns a status code.
\nA status code of 204 means the target_user is followed by the user, whereas a status code of 404 means the user does not follow a target_user.
Example :- curl https://api.github.com/devkapilbansal/following/KapilBansal
When a user follows another user\n![\"follow\"](\"/57f8001411f9b8f5e38aad54e2d88e60/user_follows.webp\")
When a user doesn't follow another user\n![\"not_follow\"](\"/46b872a0a908417b69453e83a049ad01/user_not_follows.webp\")
If you provide an authenticated token, you don't need to provide a username in the endpoints mentioned above.
\nBy providing the token, you can create repositories/gists, comment on pull requests/issues, and all other tasks that you can perform from the Web Interface.
\nYou can get a token by going to Personal access tokens and clicking on Generate new token. You will be asked for the permissions/scopes of that token. Choose them wisely while creating one as some of these might be destructive.
\nAfter selecting scopes, click on generate token and save the token somewhere as you will not see that token again.
\nNote:- Store your token in a secured environment while using it.
\nRequest type: POST\nAPI endpoint: /user/{repos}\nRequired data: name
\nExample :- curl -H \"Authorization: token ${token}\" -d '{\"name\":\"Github API Testing\"}' https://api.github.com/user/repos
![\"create](\"/477483cdbc31361f442752fe4d10b405/create_repo.webp\")
Request type: GET\nAPI endpoint: /issues
\nExample :- curl -H \"Authorization: token ${token}\" https://api.github.com/issues
![\"list](\"/e8efdf1818159d6bb8dcaf3d93e9ae4e/list_issues.webp\")
Request type: POST\nAPI endpoint: /repos/{owner}/{repo_name}/issues\nRequired data: title
\nExample :- curl -H \"Authorization: token ${token}\" -d '{\"title\":\"Issue_For_Test\"}' https://api.github.com/repos/devkapilbansal/Github-API-Testing/issues
![\"create_issue\"](\"/6af01c54b3e9188ccde7155223633e89/create_issue.webp\")
Request type: POST\nAPI endpoint: /repos/{owner}/{reponame}/issues/{issueno}/comments\nRequired data: body
\nExample :- curl -H \"Authorization: token ${token}\" -d '{\"body\":\"Test comment\"}' https://api.github.com/repos/devkapilbansal/Github-API-Testing/issues/1/comments
![\"comment\"](\"/4df61697608dded30f461414e40fe21d/comment_on_issue.webp\")
Note - The same endpoint is used for commenting on pull requests too. Just change the issue number with the pull request number.
\nRequest type: PUT\nAPI endpoint: /repos/{owner}/{reponame}/issues/{issueno}
\nExample :- curl -H \"Authorization: token ${token}\" -d '{\"state\":\"close\"}' https://api.github.com/repos/devkapilbansal/Github-API-Testing/issues/1
Note - The same endpoint is valid for updating pull requests too.
\nThe above results can be verified on the GitHub website too.\n![\"results\"](\"/5a6d6e81b8243aeb1415ed6869a974c8/output.webp\")
There are a lot more endpoints that you can explore at Github. Also, you can only do the work you are authorized to with that token.\nAlthough there are plenty of data fields that can be sent with these endpoints, only required ones are shown above.
\n","frontmatter":{"date":"November 02, 2020","updated_date":null,"title":"Introduction to Github APIs","tags":["Github","API"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/9b0ec78bfd1a3c9406386c61f5dcb8c4/58556/GitHub_coverImage.webp","srcSet":"/static/9b0ec78bfd1a3c9406386c61f5dcb8c4/61e93/GitHub_coverImage.webp 200w,\n/static/9b0ec78bfd1a3c9406386c61f5dcb8c4/1f5c5/GitHub_coverImage.webp 400w,\n/static/9b0ec78bfd1a3c9406386c61f5dcb8c4/58556/GitHub_coverImage.webp 800w,\n/static/9b0ec78bfd1a3c9406386c61f5dcb8c4/99238/GitHub_coverImage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kapil Bansal","github":"devkapilbansal","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/what-is-graphql/"},"html":"GraphQL's popularity has skyrocketed since its release in 2015. It is the modern way of developing and querying APIs. GraphQL is an application programming interface (API) query language and server-side runtime that prioritises giving customers precisely the data they request.
\nGraphQL is designed to make fast, scalable, and developer-friendly APIs. GraphQL allows developers to build requests that pull data from multiple data sources in a single API call as an alternative to REST.
\nIt was developed internally by Facebook in 2012 before being publicly released in 2015. \"On 7 November 2018, the GraphQL project was moved from Facebook to the newly-established GraphQL Foundation, hosted by the non-profit Linux Foundation.\"
\nGraphQL is an application-level query language that helps data fetching and serving between client and server runtime by providing a standard protocol for queries. Its strength lies in the fact that it offers a modern, simpler, and efficient way to query and develop APIs. The real deal is its flexible data fetching -- the application only loads relevant data from the server. Also, GraphQL is hierarchical in nature; it structures relationships in a simple hierarchical manner to avoid complex queries while fetching data.
\nGraphQL offers much power and flexibility over Traditional APIs. One of the few things GraphQL was designed, was to solve Data Fetching/Loading problems.
\nData fetching is one of the most critical factors responsible for the performance of the application. Most of the time, the data provided by the API isn't required to run the application. This problem is termed as \"Over fetching\", which can be a more significant issue in mobile devices. Since devices with slower network connection are bound to take more load time, it creates a negative impact on end-users.
\nIn the current scenario, traditional REST APIs offer no clean way to solve this problem; GraphQL comes to the rescue. It allows clients to define the structure of the data required, and the same structure of the data is returned from the server. Therefore preventing fetching loads and loads of data, ultimately increasing performance.
\nAPI endpoints generally fetch specific data, hence to load a certain data-rich application, there have to be multiple requests to the server. But, applications should fetch relevant data in one round trip to avoid degrading performance. The flexibility and richness of the GraphQL, allows us to define all the data to fetch in a single request, avoiding multiple Round trips
\n![\"Wrapping](\"/694f76479da4ca6d382a0378c1c401c9/wrapper.webp\")
\nWrapping REST API in graphQL - Source - Joey Ng'ethe | TwigaTech
| Server -> | \nGraphQL Server -> | \nGraphql Client -> | \nClient | \n
|---|
Schema - GraphQL follows a type system to define the schema of an API. The syntax for writing schemas is called Schema Definition Language (SDL).
\n# A simple example to define schema\ntype Person {\n name: String!\n age: Int!\n}Query - The data or information that a client needs from a server can be fetched in a request using queries.
\n# This query fetches all specifically names of all users\n{\n users {\n name\n }\n}\n# This query fetches all names of all friends of user "Anup".\n{\n user(name: "Anup") {\n name\n friend {\n name\n }\n }\n}Mutation - Mutations are the way to modify data to the server; these include creating/updating/deleting data. They have similar syntax as queries, with special keywords ahead of them.
\n# This mutation adds a user with name "Anup" and age 20.\nmutation {\n addUser( name : "Anup", age: 20) {\n name\n age\n }\n}Despite its powers, you might not need graphQL in your applications -
\nGraphQL is a step forward in the world of applications by providing a significant boost in performance. Another plus point of GraphQL is that it is not meant to replace any existing solution but enhance and co-exist with REST APIs. Simply put, the future of GraphQL looks bright.
\n","frontmatter":{"date":"October 01, 2020","updated_date":null,"title":"What is GraphQL? - A Basic Guide","tags":["Engineering","API","GraphQL","Performance"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4674ea0950b63a1ff2d08638af559bc0/58556/graph.webp","srcSet":"/static/4674ea0950b63a1ff2d08638af559bc0/61e93/graph.webp 200w,\n/static/4674ea0950b63a1ff2d08638af559bc0/1f5c5/graph.webp 400w,\n/static/4674ea0950b63a1ff2d08638af559bc0/58556/graph.webp 800w,\n/static/4674ea0950b63a1ff2d08638af559bc0/210c1/graph.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Anup Aglawe","github":"anup-a","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/create-rest-api-in-deno/"},"html":"Deno, the creation of Ryan Dahl is a simple, modern, and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust. As Deno 1.0.0 has released, there is much-awaited curiosity amongst developers around working with this new stack.
\nWhen it comes to learning a new language, the first thing that comes to our mind is the creation of a todo app, supporting CRUD functionality. So here we will be creating a very simple Todo application using the Deno.
\nSo before starting I assume you have installed Deno on your system, if not then you can find the link here.\nFor the database, we will be using the JSON file as of now to completely focus on creating web API using Deno. Not more words and now let's start.
The file structure we are going to follow is as below
\n // Final directory structure\n deno-todo-api/\n --|controllers/\n |--|todo.ts\n |data/\n |--|todos.ts\n |interfaces/\n |--|Todo.ts\n |routes/\n |--|todo.ts\n --|server.ts\n At any point in time, if you are stuck somewhere, you can follow this link to get the complete code.
\ndeno-todo-api and move into that directory mkdir deno-todo-api && cd deno-todo-apiserver.ts in the root of the directory. server.ts file to start a serverimport { Application, Router } from "https://deno.land/x/oak@v17.1.4/mod.ts";\n\nconst app = new Application();\nconst port: number = 8080;\n\nconst router = new Router();\nrouter.get("/", ({ response }: { response: any }) => {\n response.body = {\n message: "Rest API tutorial with Deno",\n };\n});\napp.use(router.routes());\napp.use(router.allowedMethods());\n\nconsole.log('running on port ', port);\nawait app.listen({ port });Unlike NodeJS Deno does not need the package.json file for dependency management. Dependency management is simplified by having a list of modules and their respective URLs.
Here we have used oak, a middleware framework for Deno's HTTP server, including a router middleware.
\nserver.ts is the entry point for our web application. To check it run the following command in the root directorydeno run --allow-net server.tsOpen the browser and hit the URL http://localhost:8080/
You can see the following output in your browser
\n![\"Browser](\"/a36b331956a234f26c49283ce04a1f31/output_localhost.webp\")
mkdir controllers data interfaces routestodos.ts and the following code into itimport { v4 } from "https://deno.land/std/uuid/mod.ts";\n// interface\nimport Todo from '../interfaces/Todo.ts';\n\nlet todos: Todo[] = [\n {\n id: v4.generate(),\n task: 'Hello world app with Deno',\n done: true,\n },\n {\n id: v4.generate(),\n task: 'Simple Rest API with Deno',\n done: false,\n },\n];\n\nexport default todos;We will be using v4 provided by the uuid module to generate unique IDs.
interface/ folder Todo.ts and paste the following code. export default interface Todo {\n id: string,\n task: string,\n done: boolean,\n}What are the interfaces??
\nAn interface defines the specifications of an entity.
\n\n\nOne of TypeScript’s core principles is that type checking focuses on the shape that values have. In TypeScript, interfaces fill the role of naming these types and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.
\n
todo.ts in controllers/ directory and paste the following codeimport { v4 } from "https://deno.land/std/uuid/mod.ts";\n// interfaces\nimport Todo from "../interfaces/Todo.ts";\n// stubs\nimport todos from "../data/todos.ts";\n\nexport default {\n getAll: ({ response }: { response: any }) => {\n response.status = 200;\n response.body = {\n data: todos\n };\n },\n create: async (\n { request, response }: { request: any; response: any },\n ) => {\n const body = await request.body();\n if (!request.hasBody) {\n response.status = 400;\n response.body = {\n message: "Please provide the task detail and status",\n };\n return;\n }\n let newTodo: Todo = {\n id: v4.generate(),\n task: body.value.todo,\n done: false,\n };\n let data = [...todos, newTodo];\n response.body = {\n data\n };\n },\n getById: (\n { params, response }: { params: { id: string }; response: any },\n ) => {\n const todo: Todo | undefined = todos.find((t) => {\n return t.id === params.id;\n });\n if (!todo) {\n response.status = 404;\n response.body = {\n message: "No task found related to given ID",\n };\n return;\n }\n response.status = 200;\n response.body = {\n data: todo\n };\n },\n update: async (\n { params, request, response }: {\n params: { id: string },\n request: any,\n response: any,\n },\n ) => {\n const todo: Todo | undefined = todos.find((t) => t.id === params.id);\n if (!todo) {\n response.status = 404;\n response.body = {\n message: "No todo found",\n };\n return;\n }\n\n const body = await request.body();\n const updatedData: { task?: string; done?: boolean } = body.value;\n\n let newTodos = todos.map((t) => {\n return t.id === params.id ? { ...t, ...updatedData } : t;\n });\n response.status = 200;\n response.body = {\n data: newTodos,\n };\n },\n delete: (\n { params, response }: { params: { id: string }; response: any },\n ) => {\n const allTodos = todos.filter((t) => t.id !== params.id);\n\n response.status = 200;\n response.body = {\n data: allTodos,\n };\n },\n};routes and create todo.ts file in it and paste the following code import { Router } from "https://deno.land/x/oak/mod.ts";\n\nconst router = new Router();\n// controller\nimport todoController from "../controllers/todo.ts";\n\nrouter\n .get("/todos", todoController.getAll)\n .post("/todos", todoController.create)\n .get("/todos/:id", todoController.getById)\n .put("/todos/:id", todoController.update)\n .delete("/todos/:id", todoController.delete);\n\nexport default router;server.ts file with following codeimport { Application, Router } from "https://deno.land/x/oak/mod.ts";\nimport todoRouter from "./routes/todo.ts"; // added the router call\n\nconst app = new Application();\nconst port: number = 8080;\n\napp.use(todoRouter.routes()); // Intitialize the router with our application. \napp.use(todoRouter.allowedMethods());\n\napp.addEventListener("listen", ({ secure, hostname, port }) => {\n const protocol = secure ? "https://" : "http://";\n const url = `${protocol}${hostname ?? "localhost"}:${port}`;\n console.log(`Listening on: ${port}`);\n});\n\nawait app.listen({ port });deno run --allow-net server.tsNow open the postman and hit the get URL http://localhost:8080/todos/
![\"Browser](\"/5d4cd381f56310b0117435ea3cc06296/all_output.webp\")
To check the getByID router, copy the ID of any task and hit the URL like
\nhttp://localhost:8080/todos/:id
You will be getting output like below
\n{\n "data": {\n "id": "eeacacdc-e55b-4299-aab7-5f631a2e3975",\n "task": "Hello world app with Deno",\n "done": true\n }\n}Similarly, we can verify the complete crud API created. Below is the reference of all APIs created in the blog post
\n| API | \nMethod | \nDescription | \n
|---|---|---|
http://localhost:8080/todos/ | \nGET | \nFetch All todos | \n
http://localhost:8080/todos/{id} | \nGET | \nFetch todo by ID | \n
http://localhost:8080/todos/ | \nPOST | \nCreate New todo | \n
http://localhost:8080/todos/{id} | \nPUT | \nUpdate todo by ID | \n
http://localhost:8080/todos/{id} | \nDELETE | \nDelete todo by ID | \n
You can find the complete code of the repo here
\n","frontmatter":{"date":"June 08, 2020","updated_date":null,"title":"Create REST API using deno ","tags":["Deno","REST","API"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/4a65a81c1ab5e2211f19e9aeeb888f6b/58556/task.webp","srcSet":"/static/4a65a81c1ab5e2211f19e9aeeb888f6b/61e93/task.webp 200w,\n/static/4a65a81c1ab5e2211f19e9aeeb888f6b/1f5c5/task.webp 400w,\n/static/4a65a81c1ab5e2211f19e9aeeb888f6b/58556/task.webp 800w,\n/static/4a65a81c1ab5e2211f19e9aeeb888f6b/99238/task.webp 1200w,\n/static/4a65a81c1ab5e2211f19e9aeeb888f6b/135cd/task.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/understanding-jsonp/"},"html":"Nowadays, many API providers support JSONP requests. One reason for this is that most web browsers disable cross-domain requests when using basic Ajax.
\nFor example, if your website has the domain \"a.com\", it will use JavaScript hosted on a.com. When the a.com JavaScript makes an Ajax call to make a request on b.com, most web browsers would automatically deem the Ajax call as insecure and disable it. This is called the Same-Origin Policy and web browsers have this to prevent malicious scripts from sending off information to a different domain. Because you need the a.com JavaScript to access b.com to provide your service, this seems to pose a pretty big issue … JSONP to the rescue!
\nBefore understanding JSONP, we already know JSON is an object notation of JavaScript. The \"P\" stands for padding. So it’s a padded JSON, and, to be more specific, the JSON object is padded with a JavaScript function! It looks like this:
\njsFunction({"name" : "Ash Ketchum", "role" : "Pokemon trainer"});Thus, technically, any call that retrieves JSONP, sends off an executable JavaScript line, if and only if your page has a JavaScript function that has the same function name that’s returned in the JSONP!
\nLet’s look at an example: say the user is on a.com and the browser is using JavaScript hosted on a.com. Then I shouldn't have any issues making Ajax calls to a.com. Ajax GET requests to b.com however, would fail. To avoid this, I first create a method in the JavaScript code that's located on a.com with the following signature
\nfunction getData(data){\n// use this data\n}With this, an Ajax call using JSONP will pass through fine and return this data:
\ngetData({"name" : "test", "value" : "test Value"});After processing the request, the web browser will call the \"getData\" function because whenever a JavaScript tag is loaded, it gets executed.
\nNow, the JSON object will get passed as an argument to the getData function as the data parameter. So, you can think of the getData as a callback method of the request.
\nYou can see the below code clearly
\nfunction addJavascriptFile = function (url, context) {\ncontext = context || document;\nvar head = context.getElementsByTagName('head')\\[0\\];\nvar js = context.createElement('script');\njs.src = url;\njs.type = "text/JavaScript";\nhead.appendChild(js);\nreturn js;\n}\n\nfunction getJsonp = function (url, handle) {\n\n//creating random name of function as to not conflict with others\nvar func = 'jsonpCallback' + Math.floor((Math.random() \\* 1000000000000000000) + 1);\n\n//adding randomly created function to global window object\nwindow\\[func\\] = function (data) {\n\n//calling handle\nhandle(data);\n\n//removing random named declared function\nwindow\\[func\\] = function () {};\n\n//removing added js\ndocument.head.removeChild(js);\n}\n\n//manipulating and adding js file to head\nvar endurl = url.indexOf('?') != -1 ? url + '&callback=' + func : url + '?callback=' + func;\nvar js = addJavascriptFile(endurl);\n}The above code is not doing any magic, it will accept the URL of the API and add a parameter callback with a random name, and also create a global method with this same random name. It will then create a script tag and add the complete URL to src of this tag.
\nThe API will read the callback parameter from the query string and, if the callback parameter has the value \"jsonCallback\", the response will be as follows:
\njsonpCallback({"name" : "test", "value" : "test Value"});An API is an acronym for Application Programming Interface. API's include various tools, protocols, and routines. API's are used as a way for applications to communicate with various systems.
\nBut what does this mean? Well let me explain what they are with some examples. I am going to be using various API's for these examples.
\nLet's Begin
\nLet's start by looking at a favorite website of mine called The Yoda Speak Generator found here.
\nThis website allows users to enter text and get a return of that same text formatted the way Yoda might say it. This is done with an API.
\nYoda Speak: Fun stuff, api's are! Yes, hmmm.
\nAPI’s contain what is called an endpoint to access this API. The endpoint provides the connection to communicate with the API and give it some text to generate into Yoda Speak. The API would then return the generated Yoda Speak to the location of the request.
\nAnother way to think of an API is to think of it like an egg carton. An egg carton holds the eggs, protects them from damage and allows someone who wants to make breakfast a way to open and close the carton to access the eggs inside. The eggs inside would be the data, and the hand reaching into the carton would be much like the communication using an endpoint from a server.
\nOkay, Let's make breakfast.... Just Kidding!
\nFor those of you who are visual Let's look at some examples of the code. These snippets are in PHP because it is my favorite language. Below is a link to download a small zip file called apidemo.zip.
\nDemo Link
\nYou can host this directory on your localhost or on a website if you choose.
\nAfter you have extracted the zip and have a directory such as localhost/apidemo open a browser and enter http://localhost/apidemo/api.php?request=example&name=yourname where localhost is your domain.
To enter this endpoint in an application that makes API calls try Postman. Here is a link for a chrome extension.
\nTry using a GET and a POST method with parameters request=example for the example function in api.php and name=yourname to output a name
\nYou should now see the output \"Your name is yourname\" in your browser
\nexplore the files api.php, API.class.php and MyAPI.php to explore how this simple API is taking in the parameters and outputting a name
\nHopefully, I have explained API's so you have a basic understanding of what they are. There are many types of API's, one that you may see often is RESTful API's, these unlike this example must abide by constraints that have been defined by the REST architecture.
\n","frontmatter":{"date":"June 23, 2015","updated_date":null,"title":"What is an API","tags":["API","Postman"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/a01dd1d7515afffa79ea80811d70b895/403a4/whats-an-api-300x300.webp","srcSet":"/static/a01dd1d7515afffa79ea80811d70b895/61e93/whats-an-api-300x300.webp 200w,\n/static/a01dd1d7515afffa79ea80811d70b895/403a4/whats-an-api-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}}]}},"pageContext":{"tag":"API"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}