Flask-Datei: simpleAuthService.py

 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
 
from flask import Flask, request
import json

# make cross-origin AJAX possible because of using swagger editor
# https://flask-cors.readthedocs.io/en/latest/#using-json-with-cors
from flask_cors import CORS, cross_origin  
 
app = Flask(__name__)
CORS(app)  # make cross-origin AJAX possible

@app.route('/auth/user/login', methods=['POST'])
def loginUser():
    content_type = request.headers.get('Content-Type')
    if content_type == 'application/json':
        print(request)
        username = request.json['username']
        password = request.json['password']
    elif (content_type == 'application/x-www-form-urlencoded'):     # regular html form data
        username = request.form['username']
        password = request.form['password']
    else:
        return 'Content-Type not supported: ' + content_type, 400   # Bad request
    
    if username == "testUser" and password == "testPwd":            # Everything is OK
        return "{ \"token\": \"123456\" }"                          # JavaScript JSON parse don’t support single quote.
    else:
        return "{ \"token\": \"-1\" }", 403            # Forbidden


@app.route('/auth/user/<token>', methods=['DELETE'])
def logoutUser(token):
    return "{ \"token\": \"-1\" }" # 200 logout sucessful


if __name__ == '__main__':
    app.run()


Pytest-Datei: testSimpleAuthService.py

 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
import pytest
import json
from simpleAuthService import app

def test_login_json_sucess():
    data =  {
                "username": "testUser",
                "password": "testPwd"
            }
    response = app.test_client().post('/auth/user/login', json=data)
    assert response.status_code == 200
    token = json.loads(response.data.decode('utf-8')).get("token")
    assert token == '123456'

def test_login_json_fail():
    data =  {
                "username": "testUser",
                "password": "testWrongPwd"
            }
    response = app.test_client().post('/auth/user/login', json=data)
    assert response.status_code == 403
    token = json.loads(response.data.decode('utf-8')).get("token")
    assert token == '-1'

def test_login_form_success():
    data = "username=testUser&password=testPwd"
    headers = {'Content-Type': 'application/x-www-form-urlencoded'}
    response = app.test_client().post('/auth/user/login', data=data, headers=headers)
    assert response.status_code == 200
    token = json.loads(response.data.decode('utf-8')).get("token")
    assert token == '123456'

def test_logout():
    response = app.test_client().delete('/auth/user/123456')
    assert response.status_code == 200
    token = json.loads(response.data.decode('utf-8')).get("token")
    assert token == '-1'


HTML-Datei: index.html

 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
 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <title>Login/Logout Form</title>
      <script>
         var token = "-1";
         function login () {
            // post form data
            // var formData = new FormData(document.getElementById("myForm"));   // lazy but short
            // data = JSON.stringify(Object.fromEntries(formData.entries()))
            var formData = new FormData();
            formData.append("username", document.getElementById("username").value);
            formData.append("password", document.getElementById("password").value);
            data = JSON.stringify(Object.fromEntries(formData.entries()))
            // fetch post
            fetch("http://localhost:5000/auth/user/login", {
               method: "POST",
               headers: {
                  'Content-Type': 'application/json'
               },
               body: data
            })
     
            // return server response as text
            .then((result) => {
               if (result.status != 200 && result.status != 403) //if not logged and if not wrong username/pwd
                  throw Error(result.statusText);
               else
                  return result.text();
            })
            // output response
            .then((response) => {
               console.log(response);
               const obj = JSON.parse(response);   // JavaScript JSON parse don’t support single quote.
               document.getElementById("response").innerHTML = "Token = " + obj.token
               token = obj.token
            })
            // error handling
            .catch((error) => { 
               console.log(error); 
               alert("Oops! Something went wrong!")
            });
         }

         function logout () {
            // get with path data
            fetch("http://localhost:5000/auth/user/" + token, {
               method: "DELETE",
               headers: {
                  'Content-Type': 'application/json'
               }
            })
     
            // return server response as text
            .then((result) => {
               if (result.status != 200) //if not OK
                  throw Error(result.statusText);
               else
                  return result.text();
            })
            // output response
            .then((response) => {
               console.log(response);
               const obj = JSON.parse(response);   // JavaScript JSON parse don’t support single quote.
               document.getElementById("response").innerHTML = "Token = " + obj.token
            })
            // error handling
            .catch((error) => { 
               console.log(error); 
               alert("Oops! Something went wrong!")
            });
         }

         </script>
   </head>
   <body>     
      <form id="myForm" action = "http://localhost:5000/auth/user/login" method = "post">
          <p>Enter Name:</p>  
          <p><input id='username' type = "text" name = "username" value="testUser"/></p>
          <p>Enter Password:</p>  
          <p><input id='password' type = "password" name = "password" value="testPwd"/></p>
          <p><input type = "submit" value = "Login" /> 
      </form> 
      <button onclick="return login()">Login with JavaScript</button><button onclick="return logout()">Logout with JavaScript</button>
      <div id="response"></div>
   </body>
</html>


Quellcode auf GitHub:

https://github.com/ateachment/SimpleAuthService/tree/develop-dummy



Last modified: Sunday, 20 November 2022, 2:37 PM