JWT authentication

Events Hackathons
1

Hi, I am trying to implement weavy’s ‘tasks’, feature in my website. But I am getting this error:

image
image709×230 13.6 KB

The code I have written is this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container" id="tasks">

    </div>
    <!-- <script src="https://demo.weavycloud.com/javascript/weavy.jquery.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://d.weavy.com/s"></script>
    <script src="https://localhost:44323/javascript/weavy.jquery.min.js"></script>
    <script>
        var sub = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjMiLCJuYW1lIjoia25vd2xlZGdlVGVzdGVyIiwiZXhwIjoxNjI5MTI1MzAxLCJpc3MiOiI3ZDBjYjZhYi0zYTUyLTQxNjctYmRmYS1lZDdkZDAzYTg4NTAifQ.XUtUH59jutstHXO3sTmYTKmS3d0naJNueiN_nmBv0DI";

        /* New Weavy instance with your JWT SUB */
        var weavy = new Weavy({ jwt: sub });

        /* This renders the tasks in your app.
        Update container to your placeholder */
        weavy.space({ key: sub }).app({
            key: "t",
            type: "tasks",
            container: "#tasks"
        });
    </script>
</body>

</html>

I am using https://jwt.io/ for creating JWT token.

image
image1480×543 48.4 KB

2

Hi @adityanaitan please make sure you place client secret in VERIFY SIGNATURE section.

4

Hi @Kris I have connected the weavy with my backend and the spaces are also been created successfully, but still the UI is not visible and there are still some errors:

image
image1920×1040 61.4 KB

6

Try configuring weavy.cors-origins on the server to match the url of your application.

<appSettings>
  <add key="weavy.cors-origins" value="http:/127.0.0.1:5000" />
</appSettings>
7

Hi @linus, I could not find the weavy.cors-origins file, but I found appSettings in Web.config file. These are the changes I have done:

<appSettings file="settings.config">
		<add key="weavy.cors-origins" value="http://127.0.0.1:5000" />
</appSettings>

The error is gone now, but the UI is still empty.
This is my HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='tasks-management-container'></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://localhost:44323/javascript/weavy.js"></script>
    <script>
        var sub = "{{ token }}";
        var weavy = new Weavy({ jwt: sub });
        weavy.space({ key: "test3" }).app({ key: "tasks-management", type: "tasks", container: "#tasks-management-container" });
    </script>
</body>
</html>

I am generating the JWT token on backend using pyjwt package. Here’s the code for that:

@app.route('/test')
def test():
    payload = {
        "sub": "123",
        "name": "knowledgeTester",
        "ext": 1629205767,
        "iss": "61b23688-3b7d-4303-b018-bd8ab4a21fa4",
        "email": "adityanaitan@gmail.com"
    }
    secret = "vd3ybq=szb5rzJEFsomr]g0bPNzw8-2V"
    token = jwt.encode(payload=payload, key=secret)
    return render_template('test.html', token=token)

This is how this page looks like now:

image
image1920×1034 42.2 KB

8

I think your #tasks-management-container is invisible, try specifying a height e.g. <div id="tasks-management-container" style="height:100vh"></div>.

9

Thanks a lot, it’s working perfectly now. :smiley:

1 Like