{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/158","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Let's face it, at some point you look at a radio or a checkbox button and you're like... this looks like something that starts with an \"s…","fields":{"slug":"/engineering/styling-radio-and-check-buttons-with-css/"},"html":"

Let's face it, at some point you look at a radio or a checkbox button and you're like... this looks like something that starts with an \"s\" and ends with a \"hit\". I'm here to stop you from saying that word and go on with your life without worrying about those ugly things.

\n

We're just going to use code here. No images, just pure scalable user interface using code. Cool, eh? Let's get started.

\n

Let's create our code structure first.

\n
<!-- Radio --> \n<label>\n<input type="radio">\n<span>I'm a radio button</span>\n</label>\n<!-- Checkbox -->\n<label>\n<input type="checkbox">\n<span>I'm a checkbox</span>\n</label>
\n

If it looks ugly, don't be alarmed. That's normal for an untamed code from the wild. All you gotta do now is to tame it with our very best tool, CSS.

\n

First thing you have to do is to hide the element that generates the hideous button, which is... DUN DUN DUN... the input tag. Don't worry, we can still trigger it even though it's hidden. How? by nesting it inside the label tag.

\n

Now that the default toggles are gone, we need to create our fake —but amazing— toggles.

\n

Radio Button

\n

We can't really customize this toggle that much because it needs other toggles to work properly. Let's just prettify it a bit.

\n
label input[type="radio"] {\n    display: none;\n}\nlabel input[type="radio"] ~ span {\n    position: relative;\n    display: inline-block;\n    padding: 3px 0 3px 25px;\n}\nlabel input[type="radio"] ~ span:before {\n    content: "";\n    position: absolute;\n    display: block;\n    width: 18px;\n    height: 18px;\n    background: #fff;\n    margin-right: 5px;\n    border: 1px solid #ccc;\n    border-radius: 50%;\n    left: 0;\n    top: 0;\n    box-sizing: border-box;\n    transition: all 300ms ease-in-out;\n}\nlabel input[type="radio"]:checked ~ span:before {\n    border: 5px solid #29d;\n}
\n

\n \n

label.spin input[type="checkbox"] {\n    display: none; /*hides ugly toggle*/\n}\nlabel.spin input[type="checkbox"] ~ span {\n    position: relative;\n    display: inline-block;\n    padding: 3px 0 3px 25px; /*adds spacing on the left*/\n}\n/*create our new toggle*/\nlabel.spin input[type="checkbox"] ~ span:before {\n    content: "\\2713"; /*add a new check mark*/\n    text-align: center;\n    font-size: 13px;\n    position: absolute;\n    display: block;\n    width: 18px;\n    height: 18px;\n    background: #fff;\n    color: #fff;\n    margin-right: 5px;\n    border: 1px solid #ccc;\n    border-radius: 50%;\n    left: 0;\n    top: 0;\n    box-sizing: border-box;\n    transition: all 500ms ease-in-out;\n}\n/*if checked do this*/\nlabel.spin input[type="checkbox"]:checked ~ span:before {\n    transform: rotatez(360deg);\n    background: #29d;\n    border-color: #29d;\n}
\n

Oh yes! Beautiful toggle.

\n

\n \n \n

\n

Bonus!

\n

Have you ever seen those toggles where it slides to the left and right when you click it? Did you know you can do that too using CSS? Let's try it.

\n

First, we're going to design the default look of an unchecked checkbox. By now you know that we need to hide the default toggle.

\n
label input[type="checkbox"] { display: none; }
\n

And then add a space on the left of the span using padding. While you're there, add a position relative to because we need to contain the rest of the elements inside the span.

\n
label input[type="checkbox"] ~ span { position: relative; display: inline-block; padding: 3px 0 3px 35px; }
\n

Now, let's create our toggles using CSS pseudo element :before and :after. Why? Because generated CSS is easier to handle.

\n
label input[type="checkbox"] ~ span:before, label.slide input[type="checkbox"] ~ span:after {\n    content: "";\n    position: absolute;\n    display: block;\n    width: 18px;\n    height: 18px;\n    background: #fff;\n    margin-right: 5px;\n    border: 1px solid #ccc;\n    left: 0;\n    top: 0;\n    box-sizing: border-box;\n    transition: all 300ms ease-in-out;\n}
\n

This will generate a box looking element. Since it's targeting both pseudo elements, they will look identical and on top of each other.

\n

It's time to start prettifying those pseudo elements.

\n

For :after, since this is the background where the :before toggle slides through. We need to modify the width to look bigger. Add an inset shadow to make it look like it's pushed through and a red background for an \"off\" effect.

\n
label input[type="checkbox"] ~ span:before {\n    width: 30px;\n    border-radius: 20px;\n    box-shadow: inset 0 2px 5px -1px rgba(0, 0, 0, 0.4), inset 0 -2px 0 -1px rgba(255, 255, 255, 0.2);\n    background: #F22613;\n}
\n

For :before, we just need to make it look like a circle and lift it off a bit using box-shadow.

\n
label.slide input[type="checkbox"] ~ span:after {\n    box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.5);\n    border-radius: 50%;\n}
\n

The \"on\" part just needs a little bit of pushing to the side and changing the background to blue or green.

\n
label.slide input[type="checkbox"]:checked ~ span:before {\n    background: #29d;\n}\nlabel.slide input[type="checkbox"]:checked ~ span:after {\n    left: 13px;\n}
\n

The CSS is a bit longer here because there's a lot of elements that need to change, but take a chill pill because CSS won't slow your page down.

\n

And that's it. Your pretty checkbox or radio button toggles.

\n","frontmatter":{"date":"June 16, 2015","updated_date":null,"description":null,"title":"Styling Radio and Check buttons with CSS","tags":["CSS"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/56b8ac1b7f3b7dfdc03ce43aa1e62eaa/7d145/radio-check-buttons-css-1.png","srcSet":"/static/56b8ac1b7f3b7dfdc03ce43aa1e62eaa/69585/radio-check-buttons-css-1.png 200w,\n/static/56b8ac1b7f3b7dfdc03ce43aa1e62eaa/497c6/radio-check-buttons-css-1.png 400w,\n/static/56b8ac1b7f3b7dfdc03ce43aa1e62eaa/7d145/radio-check-buttons-css-1.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Social sharing button offers an easy way to distribute your content to a wider audience. The major social providers allow options to…","fields":{"slug":"/engineering/configuring-social-sharing-buttons/"},"html":"

Social sharing button offers an easy way to distribute your content to a wider audience. The major social providers allow options to configure the content that will be shared programmatically. In this guide we explore the options that you can use in order to configure the shared content of your social shares including: Message, URL, Image, and Image Caption/Description.

\n

Facebook

\n

Facebook utilizes Open Graph Tags which are meta tags that can be included on your page and are scrapped by Facebook when determining the content that should be shared with a specific button. These tags can be included in the head section of your page. All meta tags should be formatted with a property value of \"og:\", some useful tag names are:

\n\n

Example of og meta tags that can be included in your html head tag:

\n
<!--\n\n\n\n\n\n-->
\n

If you are modifying these tags it can take some time for the changes to translate over to Facebook. You can refer to this blog on troubleshooting, testing, and force updating your configured sharing systems.

\n

Google

\n

Google offers multiple ways that you can set the shared content which it intelligently determines the most relevant details to be displayed in the share. This works to varying degrees with the following options available and taking precedence respectively:

\n\n

Below is an example of basic structured data markup:

\n
<!--\n Your Site Title \n\n\n    A description of your site.\n\n-->
\n

Below is an example of using basic meta tags to define the shared content:

\n
<!--\n\n-->
\n

Twitter

\n

The best way to customize your Twitter shares is to modify the URL query string parameters that gets triggered when the share icon is clicked. Another way is to customize the <a> tag by including data-attribute tags as detailed on Twitters Tweet button creation instructions . If you do not have control over the links or triggers that are being used to activate the Tweet popup you can also set Twitter Card meta tags which handle the Twitter customizations.

\n
<!--\n\n\n\n\n-->
\n

Various providers will utilize some of the above methods with open graph tags being one of the most common methods for controlling the shared content. Other systems will customize this content based off of parameters that are passed into the script or URL that is used to trigger the share interface. Getting these to be correctly configured can be a bit of a trial and error process, you can use the resources detailed in this blog post to help test and verify that you have correctly configured your social sharing content.

\n","frontmatter":{"date":"June 09, 2015","updated_date":null,"description":null,"title":"Configuring Your Social Sharing Buttons","tags":["SocialSharing"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/238b1852ad4d0bf59dc00d0079239993/630fb/configuring-social-share-buttons-300x300.png","srcSet":"/static/238b1852ad4d0bf59dc00d0079239993/69585/configuring-social-share-buttons-300x300.png 200w,\n/static/238b1852ad4d0bf59dc00d0079239993/630fb/configuring-social-share-buttons-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"Recently, I was working on an implementation to build an embedded app on Shopify with PHP. I realized that the 3rd party PHP SDK recommended…","fields":{"slug":"/engineering/shopify-embedded-app/"},"html":"

Recently, I was working on an implementation to build an embedded app on Shopify with PHP. I realized that the 3rd party PHP SDK recommended by Shopify called \"phpish\" does not support the feature to \"PUT\" assets into your shopify shop's theme. The link to \"phpish\" git repository can be found  here, I'd like to thank these guys for their great work, it saved me lots of time to get the implementation on the right track.

\n

So if you want to do a PUT API call to Shopify web service, you can do it in raw PHP by customizing a CURL request, this is not very hard. But prior to make the Asset API call, first you need to retrieve the currently activated theme ID by calling the Shopify Theme API call, this part can be done easily with the help of phpish.

\n

Then it is the time to customize your CURL request to do the PUT API call, remember phpish stores our information such as Oauth Token and Shop into the $_SESSION, we can leverage on that or manually fill in the correct information

\n
<!-- array("key" => "snippets/put-asset.liquid", "value" => "this is a test to put assets"));\n$ch = curl_init($_SESSION['shop']."/admin/themes/$theme_id/assets.json");\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\ncurl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");\n$headers = array();\n$headers[] = "X-Shopify-Access-Token: ".echo $_SESSION['oauth_token'];\n$headers[] = "Content-Type: application/json";\ncurl_setopt( $ch, CURLOPT_HTTPHEADER, $headers );\ncurl_setopt( $ch, CURLOPT_POSTFIELDS, json_encode($data));\n$response = curl_exec($ch);\necho "";\necho curl_error($ch)."";\nvar_dump($response);\ncurl_close($ch);\n?>-->
\n

Let me briefly explain this snippet, so first you define an array with key and value, key maps to the file name that you want to create, and value is the actual code or asset you want to pass in. Then you create a curl request with method \"PUT\" like all the other requests

\n
$ch = curl_init($_SESSION['shop']."/admin/themes/$theme_id/assets.json");\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\ncurl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");
\n

Next is something special for Shopify, to make an API call to Shopify you have to specify Oauth_Token in your request to tell Shopify who you are, and so does Content-Type.

\n
$headers = array();\n$headers[] = "X-Shopify-Access-Token: ".echo $_SESSION['oauth_token'];\n$headers[] = "Content-Type: application/json";
\n

Last but not least, json encode your data array into JSON format and send the request.

\n
curl_setopt( $ch, CURLOPT_POSTFIELDS, json_encode($data));\n$response = curl_exec($ch);
\n

The last part is just to catch the returned response or show the error message from your CURL request if something is going wrong.

\n

Hope this can help someone, happy coding.

\n","frontmatter":{"date":"June 02, 2015","updated_date":null,"description":null,"title":"Shopify Embedded App","tags":["Shopify","PHP"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.8867924528301887,"src":"/static/4872b27152104126f3a84ce3bb3dc334/2b011/shopify.png","srcSet":"/static/4872b27152104126f3a84ce3bb3dc334/69585/shopify.png 200w,\n/static/4872b27152104126f3a84ce3bb3dc334/2b011/shopify.png 308w","sizes":"(max-width: 308px) 100vw, 308px"}}},"author":{"id":"Lucius Yu","github":null,"avatar":null}}}},{"node":{"excerpt":"Are you having trouble with accessing API endpoint? Unsure why your API is not returning data? Most modern browsers have tools or plugins…","fields":{"slug":"/engineering/api-debugging-tools/"},"html":"

Are you having trouble with accessing API endpoint? Unsure why your API is not returning data? Most modern browsers have tools or plugins that allows you to quickly and easily test your API calls and see the sample returned data. In this post we go through some tools available for common browsers and web tools that will cut down the total troubleshooting time.

\n

Google Chrome

\n

Chrome offers a wide variety of apps that are quick and easy to install through the Chrome app webstore. Postman is one of those app and it offers a very robust REST API testing solution. It allows you to quickly create and format a wide range of API calls, and keeps a record of previously accessed APIs for easy reference and reuse. Postman have an easy to understand interface that allows you to quickly reformat the included parameters, headers, and form data. Returned data can be viewed in multiple different formats depending on your preferences.

\n

Another added benefit of Postman is its built-in support for common authentication procedures like: Basic Auth, Digest Auth, and OAuth 1.0/2.0. These \"helpers\" allow you to bypass some of the common tasks that can be troublesome in the mentioned protocols such as signing your request(OAuth 1.0) or requesting an Access token(OAuth 2.0).

\n

Mozilla Firefox

\n

Poster or RestClient are both useful tools that allow you to test out your API calls within Mozilla Firefox. They offer many similar systems as Postman, allowing you to set various parts of your API quickly and easily. With built in features to set such as Base URL, Auth method, Timeout, Action, Content, headers, and query parameters; It returns a complete response object allowing you to troubleshoot APIs before integrating them into your systems. Both RestClient and Poster allow you to save your requests for future use.

\n

Other Systems

\n

Runscope: This is a powerful tool that allows you to set up test cases for your APIs. Which makes it easy for you to not only handle many of the features as described in the above two systems, but to also schedule these requests to perform periodically. This allows you to monitor your APIs and have email notifications sent out when specific conditions are met. You can also mask the API requests to run them from different locations worldwide allowing you to test user cases from a global audience.

\n

SoapUI: This is an extremely robust solution that can handle your entire testing environment. It also have built in features to test out RESTful API calls, as well as SOAP calls. This solution is very extensive and has many options that cover the full suite of features detailed in the above technologies. On top of that, they have a well formatted instructions available on their site, detailing how to setup and configure the program.

\n","frontmatter":{"date":"May 26, 2015","updated_date":null,"description":null,"title":"API Debugging Tools","tags":["Engineering","GoogleChorme","MozilaFirefox","SoupUI","RunScope"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/949b6e4da71216d7a55b82e01a8bcaa1/630fb/api_debugging-tools-300x300.png","srcSet":"/static/949b6e4da71216d7a55b82e01a8bcaa1/69585/api_debugging-tools-300x300.png 200w,\n/static/949b6e4da71216d7a55b82e01a8bcaa1/630fb/api_debugging-tools-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"Overview Filter Portfolio can be very useful for websites, especially when there is a lot of images you want to show to users. It is always…","fields":{"slug":"/engineering/use-php-to-generate-filter-portfolio/"},"html":"

Overview

\n

Filter Portfolio can be very useful for websites, especially when there is a lot of images you want to show to users. It is always nice to keep it into different categories and allow your user to play with them.

\n

But adding a tag and a div on hundreds of images is definitely not fun. Our goal today is to use PHP to generate the Filter Portfolio instead of manually adding them one by one.

\n

The logic is like this, first we have a folder to contain all the portfolio images. It could be like this:

\n

\"assets->img->logos->businesses\"

\n

\n \n

\n

I know people hate this, but we are going to use a little pre-built javascript file called MixitUp, I promise it is a very easy but powerful tool to use, see a demo here.

\n

There is already very comprehensive tutorial on how to install that plugin  in their github repository, you can follow either of these.

\n
    \n
  1. Download the javascript file from github
    2. \n
\n

Click this link git -> src to open the repository for the javascript file, download and save it in your asset folder.

\n
    \n
  1. Import js and css
    2. \n
\n

You can do this right before the closing body tag. You probably have Jquery installed already, but just in case you don't.

\n
<!--\n-->
\n

It is recommended to link your Mixitup function while your document is ready, so add this after the importing lines.

\n
<!--\n$(document).ready(function(){\n    jQuery(function(){\n        $(function() {\n            $('#Container').mixItUp();\n        });\n    });\n});\n-->
\n
    \n
  1. Add the code
    2. \n
\n

Here is where the fun begins! I am not going to do any stylings in this tutorial, since you can always customize it yourself. Okay, first of first, add a div as a container of your filter portfolio section, so:

\n
<!---->
\n

Next, we need to add those clickable filter buttons to the div we just created. We can add them programmatically, but to be honest, it is not that bad to do it manually.

\n
<!-- All \n Eateries \n Cafes \n Bars, Clubs & Lounges \n Lifestyle \n\n Health & Fitness \n Fashion \n Beauty & Spas \n Entertainment -->
\n

Please note, for these <a> tags, you need to follow the patterns of MixitUp. Basically in class attribute you need to specify \"filter\" for it, and in data-filter, you need to tell which category it is. Next we are going to write some PHP code, to iterate through the destination folder, and process the files within it.

\n
<!--\nvalid()) {\n    if (!$it->isDot()) {\n        $subject = $it->getSubPathName();\n        // Mac OS automatically creates .DS_store file to store metadata\n        // The following regex is used to ignore those files\n        $pattern = '/\\\\.DS/';\n        preg_match( $pattern, $subject, $match );\n        if( !$match ) {\n            $file_path_name = str_replace("\\\\", "/", $subject);\n?>\n    <div class="mix getSubPath(); ?> col-md-3 ">\n        <img src="" alt="" class="business-logo-img"/>\n    \nnext();\n}\n?>\n-->
\n

The code is pretty straightforward, just want to label out a couple of things.

\n

First, we specified which folders we are working with and then we used a built-in recursive iterators to cycle through the folder.

\n

For each item we found in every sub-folder, $it->getSubPath will return the sub-folder name and $it->getSubPathName will return the name of the file. Create a div for each image, and play with those returned parameters to fit them into the pattern of MixitUp.

\n

The $it->isDot() function and regular expressions are used to filter out some system hidden files such as \".DS_Store\" and others, since we do not want to them to be shown as images.

\n

Easy, right? If you like this post, click share and help people who's having this kind of issue.

\n","frontmatter":{"date":"May 19, 2015","updated_date":null,"description":null,"title":"Use PHP to generate filter portfolio","tags":["PHP"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/1ea6f04417f886989e6dc30837c305f5/7d145/php-filter-portfolio.png","srcSet":"/static/1ea6f04417f886989e6dc30837c305f5/69585/php-filter-portfolio.png 200w,\n/static/1ea6f04417f886989e6dc30837c305f5/497c6/php-filter-portfolio.png 400w,\n/static/1ea6f04417f886989e6dc30837c305f5/7d145/php-filter-portfolio.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Lucius Yu","github":null,"avatar":null}}}},{"node":{"excerpt":"When we start thinking about authentication in any kind of software (it can be web, mobile, desktop, or even console), the first thing that…","fields":{"slug":"/engineering/password-secure/"},"html":"

When we start thinking about authentication in any kind of software (it can be web, mobile, desktop, or even console), the first thing that comes to mind is username/password, this is an older but still effective technique to protect and identify users. Securing these passwords is not an easy task we require better techniques to secure these passwords from attackers. Generally, passwords stored in databases, so we can secure passwords by traditional techniques to prevent access to databases like firewalls, role definitions, etc. but just to prevent database intrusions is not a fully secured way, we require further password protections by converting them into non-readable (encrypted) formats. To understand encrypting passwords we have to understand plain text passwords and how these kinds of passwords are insecure.

\n

Let's start our journey

\n

Plain text passwords [Never Store Plain text Passwords]

\n

Plain text passwords are stored directly in a database without any encryption. These passwords are very insecure because:\n- If someone hacks your database he can access any account and do anything possible after login.\n- Developers or employees who are working on a project commonly misuse the password and spread these passwords to other people for misuse.

\n

As a hard and fast rule plain text passwords should NOT be accepted in any case or used for any project or product.

\n

Encrypted passwords [Not recommended]:

\n

Encryption helps us by protecting data from hackers. In network communication, the same techniques can be used in saving passwords. Any encryption algorithm can be used to protect passwords. So on registration plain text passwords are encrypted and saved to your database.

\n
```\nEncryptedPassword = Encrypt ( Password, Key);\n```
\n

Get this encrypted password from database then de-crypt and match\nPassword = Decrypt ( EncryptedPasword, Key);

\n

Match with user entered password.

\n

But passwords will still not be fully secured because encrypted data can be always be de-crypted with the encryption key if someone get the key then they can de-crypt your password.

\n

Hashed passwords [Recommended]

\n

Hashing is a method of encryption to get original data from hash. Hashing algorithms are used in network data communications. The encryption encrypts the data but hashing protects tampering with the encrypted data. Hashing algorithms are widely used in securing passwords.

\n

In case of hashing validation of password performed refer to the following pseudo-code:

\n

On registration

\n
PasswordHash = HASH(Password);
\n

Some of the hashing algorithms support salts(a set of characters that is appended to your hash) like HMAC

\n
PasswordHash = HASH(Password, salt);
\n

On login the same process happens, get hash from users entered password

\n
  inputPasswordHash = HASH(inputPassword);
\n

And compare with the saved password

\n
  If(SavedPassworHash == inputPasswordHash){\n\n  //user get login\n\n  }
\n

For making a strong hash from non-salted hash algorithms, salt is appended or prepended to your password string. Appending and prepending also has two kinds of implementations one is a universal salt and the second is per password random salt, let us understand one by one.

\n

Universal salt : in this implementation every password has one salt.

\n\n

In this implementation every password has it's own random salt, but the question is how we preserve salt for a password? Answer is the salt is appended with password by a separator. And on login split that saved string by separator and get hashed password and salt.

\n

On registration when we save password

\n
  Salt = RandomString();\n  PasswordHashWithSalt = Hash(Password+Salt) + ":" + Salt;
\n

On login when compare password : first split salt and password hash

\n
  StringArray = Split(PasswordHashWithSalt , ":" );\n  Salt = StringArray\\[1\\];\n  PasswordHash = StringArray\\[0\\];
\n

Than get hash of user entered password by salt

\n
inputPasswordHash = Hash(inputPassword + Salt);
\n

Then compare both password hash

\n
If(PasswordHash == inputPasswordHash){\n\n//user get login\n\n}
\n

Some popular encryption methods : Most of people use following algorithms for hashing passwords, explaining all algorithms is out of scope of this blog. I am adding reference URLs for more reading. I am adding only strong hashing algorithms

\n
    \n
  1. PBKDF2
    2. \n
  2. bcrypt
    3. \n
  3. scrypt
    4. \n
  4. Argon2
    5. \n
\n

Hash cracking techniques

\n

Brute force: It is the most popular password cracking technique, in this loop every combination of numbers and alphabets are tried. Suppose one system have password minimum length is 6 digits then

\n

000000, 000001,000002……………….111111,111112……..AAAAAA etc.

\n

In any case user have set simple password like 123123, it will be cracked simply. How to prevent this kind of scenarios

\n
    \n
  1. Enforce to user to use at-least one number, one symbols, one capital letter and one small letter in password.
    2. \n
  2. On login form if someone entered more than three time wrong password for one username then ask for human verification by captcha, it will be prevented by automatic brute force password generator.
    3. \n
\n

Dictionary attacks:

\n

In crypt-analysis and computer security, a dictionary attack is a technique for defeating a cipher or authentication mechanism by trying to determine its decryption key or pass-phrase by trying hundreds or sometimes millions of likely possibilities, such as words in a dictionary. (Wikipedia)

\n

it is just extended version of brute force attack, in this attacker attack by dictionary words, most of time people set their password as meaningful name to keep easily in mind. And in this attack.

\n

Rainbow tables

\n

A rainbow table is a precomputed table for reversing cryptographic hash functions, usually for cracking password hashes. Tables are usually used in recovering a plain text password up to a certain length consisting of a limited set of characters. It is a practical example of a space/time trade-off, using less computer processing time and more storage than a brute-force attack which calculates a hash on every attempt, but more processing time and less storage than a simple look-up table with one entry per hash. Use of a key derivation function that employs a salt makes this attack unfeasible. (Wikipedia)

\n

Migrating Hashing algorithm

\n

Sometimes people realize that their Hashing algorithm is weak so they think to migrate system to one algorithm to another but hashing algorithms are one way so getting original password is not possible so the question becomes how to make this possible. There are two ways to do this.

\n

Reset all passwords: In this approach just migrate your algorithm from one to another but keep password hash same, but password will not be matched because hash of one algorithm doesn't match with hash of another algorithm, so email to user about it that our system has improved security system and send link with this email for resetting password, so user will reset password.

\n

Migrate on login: this approach is tricky in this case maintain one parameter for checking is password upgraded to new algorithm, set false for all user by default and when use come for login check this check if it is false then compare password with old algorithm and if password get matched then start user's session and get newer hash from plain text password and saved to database and update is password upgraded check to true. Now from next time user's password will be checked by newer algorithm.

\n","frontmatter":{"date":"May 14, 2015","updated_date":null,"description":null,"title":"Password Security","tags":["Security","Password"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/e7bb89604f85c7699b36ea7c43eab30e/7d145/password-security.png","srcSet":"/static/e7bb89604f85c7699b36ea7c43eab30e/69585/password-security.png 200w,\n/static/e7bb89604f85c7699b36ea7c43eab30e/497c6/password-security.png 400w,\n/static/e7bb89604f85c7699b36ea7c43eab30e/7d145/password-security.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","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.

\n

We’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.

\n

The goal? Having them spend less time searching and more time building.

\n

What’s New and Improved on the LoginRadius Website?

\n

LoginRadius’ 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.

\n

Here’s a closer look at what’s new and why it’s important:

\n

A Developer-Friendly Dark Theme

\n

\"This

\n

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.

\n

The 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.

\n

So, 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

Clear Categorization for LoginRadius Capabilities

\n

\"This

\n

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:

\n\n

This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.

\n

Developer-First Navigation

\n

\"This

\n

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.

\n

The 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

Quick Understanding of Integration Benefits

\n

\"This

\n

Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.

\n

Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.

\n

Over to You Now!

\n

Check out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.

\n

Do 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,"description":"LoginRadius’ 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 redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"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.jpg"}}}},"pageContext":{"limit":6,"skip":942,"currentPage":158,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}