Sending user credentials to a new page in JavaScript

My goal is to direct the user from one web page to another that requires a password for access. The user arrives on the initial page by scanning a barcode with a specific terminal, similar to a smartphone equipped with a customized barcode reader application that includes user and password data in its output.

For example: When the user scans a barcode linked to , the application appends the user and password before redirecting the user to the correct page: https://bob:[email protected]/redir.html

What I aim to do is transfer 'bob' and 'redpRrot93' to the destination page where the redirection occurs. For instance: https://bob:[email protected]/pages/destination.html

I have tested this code and can confirm it works:

<script>
    function redirectToContent(){
            if (location.protocol == "https:"){
                window.location='https\x3A\x2F\x2Fspock:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61170e13130408170e0d0013045452211616164f0c0802130e0f4c040f06080f040413080f064f0610">[email protected]</a>/ppages/404.html';
            }
            else {
                window.location='http\x3A\x2F\x2Fspock:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d2b322f2f38342b32313c2f38686e1d2a2a2a7330343e2f32337038333a343338382f34333a733a2c">[email protected]</a>/ppages/404.html';
            }
    }
</script>

However, I encountered difficulties finding a straightforward way to pass user and password information from the redir page.

This is the updated (and functioning) code snippet:

<script>
    function redirectToContent(){
            let username = "spock";
            let password = "vorreivolare53";
            // consider using template string literals with backticks ``
            // window.location = `https://mywebsite/${username}/${password}`;               
            if (location.protocol == "https:"){
                window.location=`https\x3A\x2F\x2F${username}:${password}@www.micron-engineering.gq/ppages/404.html`;
            }
            else {
                window.location=`http\x3A\x2F\x2F${username}:${password}@www.micron-engineering.gq/ppages/404.html`;
            }
    }
</script>

Answer №1

const username = "someUserName";
const password = "somePassword";

// Implementing template literals for easier string concatenation
window.location = `https://mywebsite/${username}/${password}`;

/* 
Template literals are a feature in ES6 JavaScript that simplify the process of inserting variable values into strings.
It uses backticks (located left of key 1), instead of single quotes.
*/

For more information, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I align rectangles with different heights to display side by side using Javascript?

Currently, I am designing a press page for a website where the headlines/articles are displayed in rectangles. To achieve this layout, I am using the following CSS: .press-blocks{ column-count: 4; column-gap: 2em; padding-left: 10%; padding ...

Tips for incorporating a Forgot/Reset password option into your #Firebase platform

In the project I'm working on, I am utilizing #AngularFire2. My goal is to incorporate a Reset / Forgot password link into the login page. Does anyone have suggestions on how to accomplish this task? I'm looking to get some insights from #AskFi ...

Displaying all components simultaneously instead of displaying placeholders and awaiting image downloads

Is there a way to instruct the browser to load all images first before displaying the page, rather than rendering img elements and then loading the images afterwards? I am working with asp.net on the server side, but I believe the solution may involve DOM ...

What could be the reason for my React/HTML select element occasionally failing to display the default selected value?

I am currently working on creating a select element in Reactjs/HTML and I am facing an issue with setting a default value based on a component variable. Essentially, the default value of the select should be the id of a component. This is my current imple ...

Associating the object key and value with distinct attributes within the component

person = {name: 'Alice', age: '19', weight: 52} I'm looking to display both the keys and values from the object in one label and input field respectively. I attempted using Object.entries, but couldn't figure out how to sepa ...

An effective method for linking a value from one ng-model to another is by identifying and matching a specific string

I have been tasked with binding a value to one model based on the content of another model when it contains a string that starts with "https". For instance, there are two text fields each associated with a different model. <input type="text" ng-model= ...

"Utilize JavaScript to detect both the loading and unloading events on a webpage

I attempted to capture the window.open onload and onunload events. The issue arises when I use URLs from other domains. For example: When the URL is for the same page, both events trigger as desired. window.open("/") View PLUNKER with same page URL .. ...

Manipulating HTTP responses and variables in Angular 6

I created a custom application using the MEAN stack that allows users to sign up and log in. To enhance security, I want users to reconfirm their identity by entering their password or a PIN if they return to the application after some time. To achieve th ...

Guide on creating a similar encryption function in Node JS that is equivalent to the one written in Java

In Java, there is a function used for encryption. public static String encryptionFunction(String fieldValue, String pemFileLocation) { try { // Read key from file String strKeyPEM = ""; BufferedReader br = new Buffer ...

Refresh a DIV using two SQL queries in forms

I am encountering an issue with updating a single div element using the results from two different forms on an HTML page. I want either form1 or form2 to display results in the same div element, and it should be updated with one line of content fetched fro ...

Is it possible to utilize Angular.js as a full substitute for a traditional JavaScript template engine?

While angular excels in two-way data binding and single-page applications, could it also serve as a viable replacement for a JavaScript template engine? Let's dive into the potential pros and cons of this approach. ...

When React JS and PHP(Mysql) combine, the error message "records.map is not a function" may appear

What problem am I facing with my code? The issue lies in my JavaScript code while trying to display the JSON array fetched correctly by the PHP file. The JavaScript implementation of JSON in the state is accurate, but an error occurs when attempting to us ...

Vue is now no longer displaying errors in the console

Something strange is happening while I'm debugging a Vue/Nuxt app. Suddenly, the errors in the console have disappeared whenever my Javascript references a function or variable that doesn't exist. Instead of showing an error, it just fails silent ...

Learn the method of showcasing a JavaScript variable value within an HTML href tag

Currently, I am in the process of rewriting my URL and category name to be passed into the URL. For this purpose, I am creating a URL friendly string using the following JavaScript function: function getUrlFriendlyString(str) { // convert spaces to &ap ...

The signature provided by the pusher is invalid: The expected HMAC SHA256 in hexadecimal digest is

The HTML file contains JavaScript code that calls the server for authentication. The code snippet from the HTML file is as follows: <html> <script> <head> var options = { authEndpoint: "api/pusher.json?socket_id=9900&channel_name ...

The mat-table's data source is failing to refresh and display the latest

When I click on a column header to sort the table, a function should trigger and update the data. However, the data is not updating as expected. Below is the code for the function and the table: <table mat-table #table [dataSource]="dataSourceMD&qu ...

Real-time Data Stream and Navigation Bar Location

Utilizing the EventSource API, I am pulling data from a MySQL database and showcasing it on a website. Everything is running smoothly as planned, but my goal is to exhibit the data in a fixed height div, with the scrollbar constantly positioned at the bott ...

Recoil: Executing a function when an atom is modified

My goal is to store a user object in an atom and cache it in localStorage every time it changes to avoid having the user sign in repeatedly if the app crashes: localStorage.setItem('user', JSON.stringify(user)) Previously, with useContext, I ach ...

Loading external libraries in Angular2: A step-by-step guide

I'm currently working on incorporating a Datepicker in Angular 2, but I'm facing an issue where the library is not loading. This is causing a template parsing error stating 'material-datepicker' is not a recognized element: My System.c ...

Is spine.js truly capable of 'streamlining' POST requests?

I recently came across a post by Alex Maccaw, where he discusses the challenges of sending Ajax requests in parallel: Maccaw explains that if a user creates a record and quickly updates it, two Ajax requests are sent simultaneously - a POST and a PUT. How ...