This guide walks you through how to deploy the Cymatic SDK on login pages. If there is no form on the page, please refer to the basic deployment guide. If there is a registration or password reset form, please refer to the credential defense for registration and password reset forms guide.

The point of deploying Cymatic to login form pages is to provide unrivaled visibility into how your user base interacts with these forms, enforce credential requirements, and remediate any emerging threats(various password exploits, credential stuffing, account takeover, cross site scripting attacks, etc.)

Choosing which pages of your web application to deploy Cymatic on is up to you. If you are interested in gaining visibility into the user's complete digital journey across the app, You will want to deploy Cymatic on every page. However, if you are only interested in activity on certain pages, for example a login form, then you only need to deploy Cymatic on those pages.

Once the steps outlined below are completed, you will gain insight into IP reputation, Geo events, dark web threats, bot detection, and numerous password vulnerability risks your user base is exposing your web application to.

Step 1: Create a new Cymatic site

Follow the procedure outlined in the site registration guide. Perform this step only if your site has not already been created. If you have already created a site, skip to step 2.

Step 2: Obtain the Cymatic SDK snippet

Log in to the Cymatic web app. Once authenticated, from the sites page click on the site you want to deploy protection to. Navigate to settings > install SDK > install. Copy the snippet section to your clipboard.
To perform the following steps, you will need access to modify the HTML of the web application pages you would like to deploy Cymatic on.
Step 3: Deploy the SDK in your web app

In the HTML code of the login form page you would like to protect, add the SDK snippet obtained from step 2. This code needs to be added in the <head> section. Please note that the following is a sample and will not work on your web app.
<!-- Cymatic SDK Snippet for http://ec2-35-173-141-37.compute-1.amazonaws.com -->
<script src="https://sdk.cymatic.io/889bc83b-c928-4510-baff-47e4cd0ce88c/f5db7037-693d-4df5-851e-83dd98ee98c1/sdk"></script>

Step 4: Initialize the SDK

To initialize the Cymatic SDK on a login form page, a bit of information about the form is required. For the standard login form, the pieces of information required are as follows:

Form ID
username ID
password ID
submit button ID

The easiest way to define these values in the Cymatic snippet is by ID. However, if there is no ID tied to the selector required, other distinguishing values, such as a unique name, can be used.

To illustrate how to gather these values, we will use a test site located at http://cymlink.xyz/login.php.

Using your preferred browser, navigate to http://cymlink.xyz/login.php. Once on the page, you should be able to see a login form like the one pictured here:

On this form, right click the white area and from the menu, select "inspect." In the browser developer tools window that opened, find the form id:

Right click on the form id line in the developer tools window and from the menu select copy > copy selector.

In your preferred text editor, paste the selector. In this example, it should be #login_form.

Next, perform these same steps with your cursor in the username textbox on the form, then the password textbox, and finally with your cursor hovering over the submit button. The values obtained from each step should be #username, #password, and #clicked respectively.

Now that we have the selectors, we need to plug them into the initialization snippet. In this example, it will look like the following:
<script>
const config = {
login : {
selector : '#login_form',
username : '#username',
password : '#password',
submit : '#clicked',
}
};
CymaticXid.v2.init(config);
</script>

Perform these actions on your form. Once you have the selectors, plug them into the initialization snippet above. Once complete, paste the initialization snippet directly below the snippet you pasted into the <head> section in step 3.

Step 5: Test the deployment

Once the above snippets are deployed in your web app and the new configuration has been saved, it is recommended to test the deployment. To do this, simply navigate to the login form on your site that you deployed Cymatic on with your favorite browser. Once the page loads, enter your credentials into the login form. At this point, it does not matter if the credentials are valid or not. Once complete, log in to the Cymatic web app and select the site you just deployed to. Once in the site, navigate to activity logs > pre verifications. You should be able to see your authentication attempt along with any other authentication attempts that have occurred since Cymatic was deployed to the web app form.

If you do not see your authentication attempt in the pre verifications section, please try the following:
Clear the cache in your browser and try to access the page you deployed Cymatic on again.
In the browser tab that is on the page you deployed Cymatic on, right click the page and select "view page source." When the new tab opens up, search for "Cymatic" to confirm the snippets are present.
Confirm that the URL you typed in the browser to access your web application matches the URL entered in the Cymatic app for the site.
Confirm that the selectors you entered in the initialization script match the selectors on the login form and there are no mistypes.

If further assistance is needed, please contact us.
Was this article helpful?
Cancel
Thank you!