Simple_REST_API_pages/Test_Token_Authentication.html at main · alochbaum/Simple_REST_API_pages · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
    <title>Test Token Authentication</title>
    <script>
        function authenticate() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var serverIP = document.getElementById('serverIP').value;
            var serverPort = document.getElementById('serverPort').value;
            var sendingData = JSON.stringify({
                username: username,
                password: password
            });

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://' + serverIP + ':' + serverPort + '/api/5.0/auth/login/');
            //xhr.setRequestHeader('accept', 'application/json');
            xhr.setRequestHeader('Content-Type', 'application/json');

            xhr.onreadystatechange = function() {
               // if (xhr.readyState === XMLHttpRequest.DONE) {
                   if(xhr.status >= 200 && xhr.status < 300){
                    try {
                        // Decode JWT access token if needed
                        //var decode = decodeJWT(xhr);
                        var response = JSON.parse(xhr.responseText);
                        var refreshToken = response.refresh_token;
                        var accessToken = response.access_token;


                        // Store tokens securely (preferably in sessionStorage)
                        sessionStorage.setItem('refreshToken', refreshToken);
                        sessionStorage.setItem('accessToken', accessToken);
                        //sessionStorage.setItem('expiration', decode.exp);
                        document.getElementById('authResponse').textContent = 'Authentication successful. Tokens saved.';
                    } catch (err) {
                        document.getElementById('authResponse').textContent = 'Problem Parsing Auth: ' + err.message;
                    }
                   } else {
                        document.getElementById('authResponse').textContent = 'Authentication failed. Status code: ' + xhr.status;
                   }
             //   }
            };
            xhr.send(sendingData);

        }

        function makeAPICall() {
            var refreshToken = sessionStorage.getItem('refreshToken');
            if (refreshToken) {
                // Make API call using the refresh token
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'https://example.com/api', true);
                xhr.setRequestHeader('Authorization', 'Bearer ' + refreshToken);

                xhr.onreadystatechange = function() {
                    if (xhr.readyState === XMLHttpRequest.DONE) {
                        if (xhr.status === 200) {
                            document.getElementById('apiResponse').textContent = 'API call successful';
                        } else {
                            document.getElementById('apiResponse').textContent = 'API call failed. Status code: ' + xhr.status;
                        }
                    }
                };

                xhr.send();
            } else {
                document.getElementById('apiResponse').textContent = 'No refresh token found';
            }
        }

        function decodeJWT(token) {
            return JSON.parse(atob(token.split('.')[1]));
        }

    </script>
</head>
<body>
    <h2>Test Token Authentication</h2> <br>
    Note: user name has to be longer than 5 characters <br>
    <label for="username">Username:</label>
    <input type="text" id="username" value="Admin">
    <br>
    <label for="password">Password:</label>
    <input type="password" id="password" value="Admin">
    <br>
    <label for="serverIP">Server IP:</label>
    <input type="text" id="serverIP" value="192.168.3.80">
    <br>
    <label for="serverPort">Server Port:</label>
    <input type="text" id="serverPort" value="443">
    <br>
    <button type="button" onclick="authenticate()">Authenticate</button>
    <button type="button" onclick="makeAPICall()">Make API Call</button>
    <br>
    <span id="authResponse" class="response"></span>
    <br>
    <span id="apidata" class="response"></span>
</body>
</html>