Authentication Widget

Trying It Out

Embeding the SmartVault Widget

Let’s begin by adding the smartvault:embed element to our HTML code. Simply add the following line inside the body of Index.cshtml. We will set the configuration JSON, confObject, as the value of the conf attribute of the smartvault:embed element.

 

Setting Up the Configuration Object

and provide them access to the root structure of their own SmartVault account

Now let’s create the configuration object using JSON structure. Let’s begin by building an object that will allow a user to sign in and authorize the application if they haven’t yet, and provide them access to their own SmartVault account. The object will consist of three components, type, target, and initialization. We will set type to “Folder”. The target will include a pathType and a pth.
SmartVault automatically creates an account for the user on signup containing a vault called My First Vault and a folder called My First folder. For this tutorial, let’s assume that we’re going to give the user access to My First folder. If you have changed the name of this vault or folder in your account, you’ll probably want to update them here to match. (Click here for more details about the different components of the configuration object.)

{
	"type": "Folder",
	"target": 
	{
		"pathType": "pth",
		"pth": ["/nodes/pth/My Account/My First Vault/My First folder"]
	},
	"initialization":
	{
		"skipAuthorization": true
	}
}

 
Now that we have the JSON structure, let’s go ahead and add it to our code by inserting the following into the body of our Index.cshtml. Because we need the user’s account name in order to get the path to My First Folder, let’s store it in accountName.
As long as the smartvault:embed is part of the page DOM before the JavaScript libary is loaded, no extra steps are required. This is the normal case if you are serving the smartvault:embed tag already configured.

@{
        string accountName = "My Account";
        string json = "{\"type\": \"Folder\",\"target\": {\"pathType\": \"pth\",\"pth\": [\"/nodes/pth/" + accountName + "/My First Vault/My First folder\"]},\"initialization\":{ \"skipAuthorization\": true}}";
        
        . . .
}

 
Lastly, we’ll need to do a Base64 encoding of the the json object.

@{
        string accountName = "My Account";
        string json = "{\"type\": \"Folder\",\"target\": {\"pathType\": \"pth\",\"pth\": [\"/nodes/pth/" + accountName + "/My First Vault/My First folder\"]},\"initialization\":{ \"skipAuthorization\": true}}";

        byte[] jsonBytes = System.Text.Encoding.UTF8.GetBytes(json);
        string confObject = System.Convert.ToBase64String(jsonBytes);
}

 

Adding the SmartVault JavaScript Library

All we need now is to add the URL to the SmartVault JavaScript library into the head of your Index.cshtml. The URL to the current library is: https://27f279f3a36ecd6f7020-7bb8230884b698511e091eb8c2181806.ssl.cf1.rackcdn.com/unified/smartvault.min.js. *

 
When you start the application, you should get a full-page widget.

Putting It Together

Home View- Index.cshtml

@model string




    
    

    



        @{
            string accountName = "My Account";
            string json = "{\"type\": \"Folder\",\"target\": {\"pathType\": \"pth\",\"pth\": [\"/nodes/pth/" + accountName + "/My First Vault/My First folder\"]},\"initialization\":{ \"skipAuthorization\": true}}";
            byte[] jsonBytes = System.Text.Encoding.UTF8.GetBytes(json);
            string confObject = System.Convert.ToBase64String(jsonBytes);
        }

        

 
 
 
* We serve the library off CDN. If you need to serve the library yourself, contact sdk@smartvault.com.
 
 
 
 
Download ASPNET_MVC_SmartVault-Widget(Uploading).zip