Easy Code Stuff: July 2019

Jul 12, 2019

JWT Token Decode Using Jquery

When it come to authentication we use many mechanism. Ones the user authenticated we must keep these details somewhere safe. So we can share this details with Client Applications which can be either PHP, HTML JavaScript, Angular, etc...

For This JWT (Jason Web Token) comes in handy as a Token to share with client and server. You can read more about JWT in there Website.

You can use below Jquery code to decode the given JWT Token and access the details in it.

<!DOCTYPE html>
<html>
<head>
    <title>JWT Token Decode Using Jquery</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
    <h3> JWT Token Decode Using Jquery</h3>
    <form>
       <textarea rows="2" cols="50" id="token"></textarea>
       <br/>
       <input type="button" name="Decode" id="btnDecode" value="Decode">
       <br/>
       <textarea rows="10" cols="50" id="txtDecode"></textarea>
    </form>
 
    <script>
       $(document).ready(function(){
          $("#btnDecode").click(function(event){
             var token = $('#token').val();
             if(token == ""){
                $("#txtDecode").val("Please insert the Token");
             }else{

                var decodedToken = parseJwt(token);
                $("#txtDecode").val(JSON.stringify(decodedToken));

             }
          });

        });
  
        function parseJwt (token) {
           var base64Url = token.split('.')[1];
           var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
           var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
             return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
             }).join(''));

           return JSON.parse(jsonPayload);
        };
  
    </script>
</body>
</html>

I have used the below token to test this code.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJNZW1iZXJJZCI6IjEiLCJNZW1iZXJOYW1lIjoi2YbZitmB2KfZhCDZhtiy2KfYsSIsIk1lbWJlckVtYWlsIjoiYWR2b3F1ZXNAZ21haWwuY29tIiwibmJmIjoxNTYyODU5MDcwLCJleHAiOjE1NjI5MzEwNzAsImlzcyI6IlN1a25hIiwiYXVkIjoiU3VrbmEifQ.A-v4D1u4HE1sKBDiZBTQ79WAkLVNnAcKrURRDkLv7bQ

This how it looks like. Hope you also got it correct.

Jul 11, 2019

Adding Content Pickers To Umbraco 8

In my previous article I setup the Umbraco CMS. Lets see how we can add content pickers. So we can give clients to change content as they wish.

Things I'm going to do in this articles.
1. Add a Text Field to get the First Name
2. Add a Numeric Field to get the Age
3. Add a Media Picker to get the Profile Image

Login to the Umbraco and click on "Settings" on the top menu.

Step 1
Create a Document Type. You can read more in Umbraco Documentation.
In the side menu you will see Document Types.
Right click on it and select first option "Document Type".
Click on "Add Property".
Give a name for the property.
Click on "Add editor".
Select a editor as you want.
Then click save.

Step 2
You will there is a template created for home. Now lets see how we can access the document type in it.

Step 3
Lets create a page for home.
Click on Content on the top menu.
Move the mouse to top of Content.
Click on the three dots(...).

Step 4
Select the Home template. Then you will get the content form. Fill it as you wish. Then click Save and Publish.

Step 6
Lets design the home page.
Add the below code.

@inherits Umbraco.Web.Mvc.UmbracoViewPage<ContentModels.Home>
@using ContentModels = Umbraco.Web.PublishedModels;
@{
 Layout = null;
 var profileImage = Model.Value<IPublishedContent>("profileImage").Url;
}

<h4>My Profile</h4>
<img src="@profileImage">
<br/>
First Name : @Model.Value("firstName")
<br/>
Age : @Model.Value("age")
<br/>

Lets see what we get in the browser.

Setting Up Umbraco 8 Using NuGet Package Manager

Umbraco is the leading Open Source Microsoft ASP.NET Content Management System. I'm not going to explain about Umbraco here, because you are reading this article after knowing Umbraco. If not please refer this link to Umbraco Web Site.

In order to set up Umbraco you need to Visual Studio. If you have not installed already download and install Visual Studio Community Edition. It's free.

Lets get into work.

Step 01
Open Visual Studio and Create a New ASP .NET Web Application. Make sure you select the Framework as .NET Framework 4.7.2. This is latest framework version is supporting right now in July 2019 for Umbraco 8. Give any name as you wish for the Project name. In my case I'm naming it as MyWebiste.

Step 02
Select the Template as Empty, because we don't need anything, even authentication.

Step 03
Right click the project file and click on the Manage NuGet Packages option. You will prompt to below screen. type "UmbracoCms" in the Browse section and click the install button.

Step 04
You will get the below prompt and ask to Accept the license. Click on I Accept as we want to install these packages.

Step 05
It will take sometime to install the umbraco cms to our project. If all went well you will get the below screen with success message.

Step 06
Now click on the run button on the visual studio. Then you will get the below prompt asking the Debugging mode or not. Initially we don't need any debugging because we are not planing to do so. Press OK. then you will get the Umbraco Set Up page in browser.