DEV Community: Kyuhee Lee

Authentication vs. Authorization-Identify Myself

Kyuhee Lee — Tue, 03 Oct 2023 06:03:59 +0000

Authentication and authorization are essential applications in building secure web applications. this essential function is required when logging into personal online accounts for websites like Netflix, bank applications, and buildings that require secure access.

To utilize the function described, as a user you must register an account and provide personal information. However, even though register an account, you cannot access all systems because permissions are granted differently as administrator, developer, or user with different levels of accessibility.

Authentication is the process of verifying who you are when entering a secured application or building.

For example, to log in to the Amazon website, you must enter your ID and password. This verifies that legitimate users actually exist in the database and which permissions are granted to the account.

When logging in using password-based authentication, you must use a secret key which is a random key that protects the user's account from hacking.

from flask import Flask, make_response, jsonify, request, session
from flask_migrate import Migrate
from flask_restful import API, Resource

from models import db, Article, User

app = Flask(__name__)
app.secret_key = b'Y\xf1Xz\x00\xad|eQ\x80t \xca\x1a\x10K'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///app.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.json.compact = False

migrate = Migrate(app, db)

db.init_app(app)

api = Api(app)

Authorization refers to the process of allowing or denying users' access to an application. For example, all Amazon members are given minimum privileges, and if they purchase for prime access, they are given the privilege to use the Amazon Prime service and the privilege to use music and video applications.

How to write the code.

First, create data in models.py.

class Video(db.Model, SerializerMixin):
     __tablename__ = 'videos'

     id = db.Column(db.Integer, primary_key=True)
     title = db.Column(db.String)
     author = db.Column(db.String)
     files = db.Column(db.String)
     is_member_only = db.Column(db.Boolean, default=False)


     user_id = db.Column(db.Integer, db.ForeignKey('users.id'))

     def __repr__(self):
         return f'Article {self.id} by {self.title}'

class User(db.Model):
     __tablename__ = "users"

     id = db.Column(db.Integer, primary_key=True)
     username = db.Column(db.String)
     password = db.Column(db.String)
     created_at = db.Column(db.DateTime, 
     server_default=db.func.now())


     videos = db.relationship('Video', backref='user')

The code below ensures that the password is securely hashed before storing and provides authenticate method to check whether a given bcrypt matches the stored hash.

@hybrid_property
     def password_hash(self):
         raise Exception('Password hashes may not be viewed.')

     @password_hash.setter
     def password_hash(self, password):
         password_hash = bcrypt.generate_password_hash(
             password.encode('utf-8'))
         self._password_hash = password_hash.decode('utf-8')

     def authenticate(self, password):
         return bcrypt.check_password_hash(
             self._password_hash, password.encode('utf-8'))

     def __repr__(self):
         return f'User {self.username}, ID {self.id}'

The before_request decorator allows you to run a function before the request. In other words, the function is defined with the .before_request() decorator to check whether any permissions are granted or not before every request is made.

@app.before_request
def is_member_only():
        if request.endpoint == 'member_video' and not session.get('user_id'):

#endpoint refers to member_video route/path

         return {'error':'Unauthorized'},401


class Signup(Resource):

     ddef post(self):
         json = request.get_json()
         user = User(
             username=json['username'],
         )
         user.password_hash=json['password']

         db.session.add(user)
         db.session.commit()
         session['user_id']= user.id

         return user.to_dict(), 201

class CheckSession(Resource):
     def get(self):

     #the 'get' method, will check if a session 'user_id' 
     #exists and matches values in session.get('user_id')

         if session.get('user_id'):
             user =User.query.filter(User.id==session.get('user_id')).first()

#because of filter and .first() will retrieve the first
#matching user. If a matching found will return 200
# if it's not then will return 204

             return user.to_dict(),200

         return {}, 204



class Login(Resource):
     def post(self):
json = request.get_json()

         username=json['username']
         user =User.query.filter(User.username==username).first()

         password=json['password']
         if user.authenticate(password):
             session['user_id']=user.id
             return user.to_dict(), 200
         return{'error': 'Invalid username or password'}, 401


class Logout(Resource):
     def delete(self):
         session['user_id'] = None

         return {}, 204

class MemberVideo(Resource):
def get(self):
        videos = [video.to_dict() for video in Video.query.all() if video.is_member_only == True]

         return videos, 200
#because of @app.before_request function above, the code now checking the MemberVideo (endpoint 'member_video) and and whether there is a valid user_id in the session.

api.add_resource(Signup, '/signup', endpoint='signup')
api.add_resource(CheckSession, '/check_session', endpoint='check_session')
api.add_resource(Login, '/login', endpoint='login')
api.add_resource(Logout, '/logout', endpoint='logout')
api.add_resource(MemberVideo, '/member_video', endpoint='member_video')

Conclusion

We learned the difference between authentication and authorization.
Authentication is the process that confirms the user's identity, while authorization determines which level of access the account holder has. Thank you for your time reading my post and I hope this helps you understand the difference between authentication and authorization better.

Difference Between Primary Key and Foreign Key in SQL

Kyuhee Lee — Tue, 08 Aug 2023 22:47:50 +0000

In the past, finding information took a lot of time because it was on paper. But today, when we order something or find information online, it doesn't take much time because the information is in a database, the process can be completed with a single click or a few keyword inputs. A database is a tool for collecting and organizing information. Also, it may collect orders, addresses, objects, or other items. As your company grows, using a database management system can greatly help your company grow.

Before creating or using any kind of database, you need to know two key constraints to be useful.

Primary Key
A primary key is a constraint that uniquely identifies each row in a table. Each table can have only one primary key. In a table, the primary key cannot be null and must have a unique value like the id number.

For example, before entering code to create a table in Python, you want to think about how you are going to normalize the table so you can use a statement like the SQL Join clause. Let's say you want to create a table like the example below, two students take several classes and the professor also teaches several classes, you have to find which key going to be the primary key and the foreign key.

Looking at the table above, we have the Student id, Student Name, Major, Course, Title, Instructor Name, Instructor Location, and Grade. The most unique key here is the student id because other keys can have many of the same content, but the student id is the only key that identifies that student.

Since the primary key cannot have nulls, you have to fill in the empty spaces by repeating the student number, name, and major.

Foreign Key
The foreign key is a column that references a primary key in another table. Also, it's a column or a group of columns in a relational database table that provides a link between data in other tables.

Let's look at the table and see which key can be both a foreign key and a primary key in another table. The major cannot be a foreign key because it could be various courses or another course with other professors, so it's not a unique key.

A course_id key can be both a foreign key and a primary key because it tells you what the course name is, who the professor is, and where the class gonna be.

However, both tables are not related to each other yet because there is no relationship between the Course to Student table, only Student to Course. At this time, creating a join table will define a many-to-many relationship on both Student and Course tables. The many-to-many relationship will contain both primary key as a foreign key and then using the relationship() function will define relationship on both tables.

If you look at the table below, there are three tables, one has only student information, the other one has course information, and student_course has both student_id and course_id that define a relationship on both tables.

Now that the table is organized using the Excel, all you have to do is enter the code in python.

# create join table
student_course = Table (
   "student_course
    Base.metadata, 
    Column ("id", Integer, primary_key=True),
    Column ("students_id", ForeignKey("students.id")),
    Column ("course_id", ForeignKey("course.id"))
)


#creating table 

class Student (Base):
    __tablename__= 'students'
    id = Column(Integer(), primary_key=True)
    name= Column(String())
    major=Column (String())

# repr () returns a string similar to how print() works
    def __repr__(self):
        return f"Student id:{self.id}: "\
            + f"Student name:{self.name} "\
            + f"Major:{self.major}"
    courses=relationship("Course ", secondary=student_course , 
    back_populates="courses")


class Course (Base):
    __tablename__= 'courses'
    id = Column(Integer(), primary_key=True)
    title= Column(String())
    instructor=Column (String())
    location = Column (String())


    def __repr__(self):
        return f"Course id:{self.id}: "\
            + f"Course title:{self.title} "\
            + f"Instructor:{self.instructor}"\
            + f"Location:{self.location}"
     students=relationship("Student", secondary=student_course , 
     back_populates="students")


if __name__ == '__main__':

    engine = create_engine('sqlite:///:memory:')
    Base.metadata.create_all(engine)

    Session = sessionmaker(bind=engine)
    session = Session()
    session.query(Student).delete()
    session.query(Course).delete()

students=[
    Student (student_id="52146", 
              name="Kyuhee Lee", major="MTH"),
    Student (student_id="75486", 
              name="Lilly Smith", major="ART")]

courses=[
    Course (course_id="60205", 
              title="Algebra", instructor="West", location="B222"),
    Course (course_id="20105", 
              title="Art", instructor="Kim", location="B213"),
    Course (course_id="320101", 
              title="Basic English", instructor="Porter", location="D319"),
    Course (course_id="740102", 
              title="Science", instructor="Kim", location="B213")]

session.bulk_save_objects (students, courses)
session.commit ()

Conclusion
We discussed the importance of primary and foreign keys when creating tables in a database. You've learned which keys are primary keys and which are foreign keys. Identifying two keys is important when creating a table because it tells the relationship between the tables. Again, primary keys contain unique values, and foreign keys contain values referenced by the primary key and are keys that can be used as primary keys in other tables, thereby determining relationships between tables. I hope this helps you understand how to easily find primary and foreign keys.

Communication Between the Parent Component and the Child Component.

Kyuhee Lee — Mon, 29 May 2023 09:39:11 +0000

React uses components to pass data from a parent to a child or uses callback function to let the child component communicate with the parent component.

Props
Props is a type of properties and arguments that pass down data or value from the parent component to the child component.

Lets look at an example below to find out which one is a parent and which one is a child first.

The Apps is the parent component and Header and Home are the Child component.

In this example, the Apps is passing the prop articleText and the commentText to each Child component with a value. The Home component will look like the example below to use the object (props) to access and render values

If you console.log (props) then you will see the message "Phase2 React project by Lee" inside of the Home component.

There is another way to pass the data calls Destructuring props.

Destructuring props.

Destructuring props helps developer to write easier, clean, and more readable code. It can assign a variable or can call more than one property.

Here is an example without using destructuring props.

Since we called props an object so we have to pass props to every property like props.img, props.name, props.description, and props.texture.

However, if we wrote a code with destructuring props, we can call these properties directly from the (props) object to write a simple readable code like the image below.

React can only pass props from parent to child, not between children or from child to parent. But what if we want to send a data opposite way? In this time, we can use a callback function in a child component to affect data in the parent component.

useState
useState is a React Hook that allow us to use a callback function. It's a function passed as an argument to another function, allowing the parent-child can communicate each other. In React, most callback functions are used as event handlers to pass data between components to continue rendering and updating them.

Before using useState in our component, we have to import useState from react like the image below on line 4.

The example above, the handCountClick function is passing an onClickTask event handler to the Home (child) component.

The Home component will look like image above, we are now passing onClickTask function in child component to make changes in App (parent) component.

Conclusion
Now we learned how the parent and child components are communicating with each other. Props is passing down the data from top to bottom and if we want to do the reverse then we should use a callback function. Thank you for your time reading this post, I hope this helped you to understand how React components communicate each other.

Understanding How the Website Finds the Item that You WANT!

Kyuhee Lee — Mon, 24 Apr 2023 08:24:52 +0000

When I was working for eCommerce Companies, I had a question about how I should design a website that would attract more customers’ attention and make ordering easier, so I became interested in website design and studied HTML and CSS. While I was studying those two codes I was wondering how the site finds and open the pages that I was looking for, so I decided to study more. Thankfully, Amazon provided the way and I was thankfully accepted into the Flatiron School.

During the course, I noticed that the HTML and CSS I learned were simple design coding that colored sketches, whereas I thought JavaScript is complicated because it is the programming that executes it. In the middle of learning a lot of things, I was getting answers little by little to what I was curious about before.

I was curious when I search for the name of an item on Amazon.com, how the site brings up the page I want among other pages. However, now I understand that the system uses filter() or find() to call pages.

filter()

For example, if you look at the code below, you have an array and function.

We know that we can iterate through the array to find the words contains from the search and give a result for the word that contains it, like how example finds out apple and grapes by searching only "ap".

Let's look at another example.

If you search for "Lip", it will look for the name that contains the word "Lip" and the result will give all four items except ColorStay Suede Ink.

find ()
Find is very similar to filter(), however, find() will return the first element that passed the provided function test.

Let's say we have the same array as above.

Function code and the result will be

The result gave the Couture Lipstick Satin instead of Ultra Rouge Lipstick because Couture Lipstick Satin is the first element and before the Ultra Rouge Lipstick.

So whenever we search for a word on amazon.com or Google, that's how the website finds the product or pages to bring it to us.

Thank you for time reading this post, I hope this helped you to understand how the filter() and find() work.