Creating a url instance with JS

Question

I am integrating a simple HTML5 virtual classroom onto language teaching website.

I have copied the source code of the classroom and pasted it into an index.html page in the following folder...

site.com/classes/room-1

This is working fine however anyone can enter the classroom at any time, I need to restrict access the classes.

I want to accomplish this by making a unique url instance, so basically if you don't have the url link you can't access the classroom. So the url would look something like this...

site.com/classes/room-1?instance=l23jhvn23o1i2un3lnj12xas

Then when a teacher logs into his classroom with his teacher name a unique URL is generated and the teacher is redireted to that unique URL instance. He can share the link with the student via email and they can go ahead with the class.

Here is the snippet of code that deals with the instance url... so what is the best way to generate an instance of the URL?

function start()
{
    // Optional username and password. If not specified here, a popup dialog
    // box will appear.
    var username = '';
    var password = '';

    // The Groupworld server to connect to. You can optionally specify the
    // port number (using the format "server:port").
    var base = 'www.groupworld.net:9175:1639';

    // The object to load and instance name. To create a different "session",
    // just copy the html page and change the instance name.
    var object = 'new_conference:room-1';

    // Flags: not currently used.
    var flags = 0;
    groupworld.startup(username, password, base, object, flags);
}

Here is a graphical illustration of what we need...

Teacher work flow

Thanks in advance,

Jethro.

If you want to restrict the page to specified parameter in url you should use server side, like php. — jcubic
– jcubic, Commented Jan 22, 2016 at 14:19
What if the students spread the unique secret URL out? as @jcubic said you need to implement server-side soution — Mi-Creativity
– Mi-Creativity, Commented Jan 22, 2016 at 14:25
Right, could you explain that a bit more "restrict the page to specified parameter in url"? Is the parameter the instance? Also is this task impossible with JS or just less secure? — Jethro Hazelhurst
– Jethro Hazelhurst, Commented Jan 22, 2016 at 14:26
@Mi-Creativity the url needs to be generated on the fly... once the teacher loggs off the url is defunct — Jethro Hazelhurst
– Jethro Hazelhurst, Commented Jan 22, 2016 at 14:28
The best way is to generated the url in php and save instance parameter it in database or in a file then when teacher log out you will need to remove those parameters from database or file. You can't do that on the client because students and teacher don't use same browser. — jcubic
– jcubic, Commented Jan 22, 2016 at 14:33

CpnCrunch · Accepted Answer · 2017-04-07 03:35:49Z

1

There is now a sample open source php/mysql online tutoring website for Groupworld, which might help:

https://github.com/groupboard/tutor-scheduler

answered Apr 7, 2017 at 3:35

CpnCrunch

5,1011 gold badge36 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jethro Hazelhurst · Accepted Answer · 2016-01-26 17:34:45Z

I think I may have answered this myself, if anyone would be so kind as to check my logic I would be extremely grateful.

The key is in the classroom embed code here...

// The object to load and instance name. To create a different "session",

// just copy the html page and change the instance name.

var object = 'new_conference:jethro';

So I need to change the 'var object' in the Javascript from 'jethro' (which is what I named the classroom) to a random string each time a teacher creates a classroom. That random string should be held in a PHP variable which I'll call '$instance'...

So I have created an index.php login page with a temporary database. Here is the link on the live site: http://toucan-talk.com/classes

The temporary database has the following credentials

username: jethro

password: password

Here is the index.php code with comments by me...

<?php 
session_start();

if ($_POST['username']) {

        // Temporary database
    $dbUsname = "jethro";
    $dbPaswd = "password";
    $uid = "1";

    $usname = strip_tags($_POST['username']);
    $paswd = strip_tags($_POST['password']);

    if ($usname == $dbUsname && $paswd == $dbPaswd) {
        // Set session variables
        $_SESSION['username'] = $usname;
        $_SESSION['id'] = $uid;
        // To generate the random string from a word
        $str = "Hello"; // word to hash
        $instance = md5($str); // hash stored in variable
        header('Location: classroom.php?instance='.$instance);// Hash is concatenated onto the login redirect page
    } else {
        echo "<p>Oops! That username or password combination is incorrect. Please try again.</p>";
    }
}

?>



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Toucan-Talk Tutor Login</title>
</head>

<body>
    <div id="wrapper">
        <center>
            <img style="width: 250px;" alt="" src="http://www.toucan-talk.com/images/logos/footer-logo.png">
        </center>
        <h1>Enter Classroom</h1>
        <form id="form" action="index.php" method="post" enctype="multipart/form-data">
        Username: <input type="text" name="username"/><br>
        Password: <input type="password" name="password" /><br>
        <br>
        <center>
            <input class="button" type="submit" value="Enter" name="Submit" />
        </center>
        </form>
</body>
</html>

So I have concatenated that md5 hash onto the header page redirect so that I now get a url that looks like this: http://toucan-talk.com/classes/classroom.php?instance=8b1a9953c4611296a827abf8c47804d7

I have made another file called classroom.php which the header redirects to. Inside there I have the classroom embed code. Here is just the PHP inside that file:

<?php 
session_start();

// Variable with the md5() hash code
$instance =  $_GET['instance']; 

if (isset($_SESSION['id'])) {
    $uid = $_SESSION['id'];
    $usname = "Test variables: <br> Username: ".$usname. "<br> Id: ".$uid;
} else {
    echo 'Please login';
    die();
}

?>

As you can see I have defined the variable '$instance' again as $instance = $_GET['instance']; (I am not quite sure what this does still but it doesn't work without it!)

So I know $_GET['instance'] = $instance = 8b1a9953c4611296a827abf8c47804d7

Now I simply replace the Javascript 'var object' with the variable $instance in PHP tags to generate the classroom on the fly on the Groupworlds servers!

// The object to load and instance name. To create a different "session",
// just copy the html page and change the instance name.
var object = 'new_conference:<?php echo $instance ?>';

Now when I look at the classroom sourcecode the instance is the md5() hash!

sourcecode

This seems to do the trick... so does this seem like a reasonable way to solve this coding problem? I am excited to improve upon this to get something workable.

Many thanks for you guys help this far.

Jethro.

Collectives™ on Stack Overflow

Creating a url instance with JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related