Τίτλος εργασίας: Flask Να χρησιμοποιήσετε το framework για να αναπτύξετε μια φόρμα που επιτρέπει εγγραφές νέων χρηστών σε ιστοσελίδα. Οι χρήστες να αποθηκεύονται σε αρχείο.
Η εργασία αυτή δημιουργήθηκε στο πλαίσιο του μαθήματος Εισαγωγή στην Επιστήμη του Ηλεκτρολόγου Μηχανικού (ECE_Y210) του τμήματος Ηλεκτρολόγων Μηχανικών και Τεχνολογίας Υπολογιστών του Πανεπιστημίου Πατρών.
- Το μεγαλύτερο πρόβλημα της εφαρμογής είναι ότι τα html templates σχεδιάστηκαν για υπολογιστή με τον browser σε πλήρη οθόνη (1920x1080) και δεν είναι ευανάγνωστα σε άλλες συνθήκες. (π.χ. κινητό)
- Μερικές φορές όταν ο χρήστης συνδέεται μέσω του λογαριασμού του στο Google επιστρέφεται ένα σφάλμα σύμφωνα με το οποίο το token που επέστρεψε η Google χρησιμοποιήθηκε πολύ νωρίς. Για τον λόγω αυτόν υπάρχει προγραμματιστεί μια μικρή καθυστέρηση των 6 δευτερολέπτων
- Επίσης ο mail server που χρησιμοποιεί η έκδοση στο Azure μερικές φορές αδυνατεί να στείλει email σε διευθύνσεις @gmail.com. Αυτό όμως είναι πρόβλημα του mail server και όχι της εφαρμογής.
Αφού κατεβάσετε τον κώδικα και ενδεχομένως φτιάξετε και ενεργοποιήσετε ένα εικονικό περιβάλλον πρέπει να εγκαταστήσετε τις ακόλουθες βιβλιοθήκες:
| Library Name | Version |
|---|---|
| bcrypt | 3.2.2 |
| cachetools | 5.2.0 |
| certifi | 2022.5.18.1 |
| cffi | 1.15.0 |
| charset-normalizer | 2.0.12 |
| click | 8.1.3 |
| colorama | 0.4.4 |
| dnspython | 2.2.1 |
| email-validator | 1.2.1 |
| Flask | 2.1.2 |
| Flask-Bcrypt | 1.0.1 |
| Flask-Login | 0.6.1 |
| Flask-WTF | 1.0.1 |
| google-auth | 2.7.0 |
| google-auth-oauthlib | 0.5.1 |
| gunicorn | 20.1.0 |
| idna | 3.3 |
| itsdangerous | 2.1.2 |
| Jinja2 | 3.1.2 |
| MarkupSafe | 2.1.1 |
| oauthlib | 3.2.0 |
| pathlib | 1.0.1 |
| Pillow | 9.1.1 |
| pyasn1 | 0.4.8 |
| pyasn1-modules | 0.2.8 |
| pycparser | 2.21 |
| pyotp | 2.6.0 |
| python-dotenv | 0.20.0 |
| qrcode | 7.3.1 |
| requests | 2.27.1 |
| requests-oauthlib | 1.3.1 |
| rsa | 4.8 |
| six | 1.16.0 |
| urllib3 | 1.26.9 |
| Werkzeug | 2.1.2 |
| WTForms | 3.0.1 |
το οποίο μπορείτε να κάνετε με την εντολή:
pip install -r requirements.txt
Στην συνέχεια πρέπει να δώσετε τιμές στις μεταβλητές που βρίσκονται στο αρχείο .env. Δείτε Μεταβλητές Συστήματος
Είμαστε έτοιμοι!:tada: Τρέχουμε το πρόγραμμά μας app.py:
python app.py
Στο αρχείο .env υπάρχουν οι ακόλουθες μεταβλητές:
| Όνομα μεταβλητής | Επεξήγηση | Αποδεκτές Τιμές |
|---|---|---|
| DEBUG | TRUE για να τρέξει το Flask σε debug mode. Διαφορετικά False | TRUE | FALSE |
| PORT | Η πόρτα στην οποία θα τρέξει η εφαρμογή. Απαιτείται Port Forwarding. | 1 - 65535 |
| DOMAIN | Ένα domain ή διεύθυνση IP που να δείχνει στον υπολογιστεί που φιλοξενεί την εφαρμογή. Χρησιμοποιείται κατα την αποστολή των email. | Ένα domain ή διεύθυνση IP που να δείχνει στον υπολογιστεί που φιλοξενεί την εφαρμογή |
| SECRET_KEY | [Flask Docs](https://flask.palletsprojects.com/en/2.1.x/config/#SECRET_KEY) | Ένα οποιοδήποτε string |
| WTF_CSRF_SECRET_KEY | [Flask-WTF Docs](https://flask-wtf.readthedocs.io/en/1.0.x/config/) | Ένα οποιοδήποτε string |
| OAUTHLIB_INSECURE_TRANSPORT | 1 για να λειτουργήσει η δυνατότητα σύνδεσης μέσω Google σε περιπτώσεις που δεν υποστηρίζεται https. Διαφορετικά 0 | 0 | 1 |
| EMAIL_FROM_HEADER | From email header | Name <soneone@example.com> |
| EMAIL_SMTP_SERVER_IP | Ένα domain η διεύθυνση IP που να δείχνει στον SMTP Server | Ένα domain η διεύθυνση IP που να δείχνει στον SMTP Server |
| EMAIL_SMTP_SERVER_PORT | Η πόρτα του SMTP Server | 25 | 465 | 587 | 2525 |
| EMAIL_SMTP_SERVER_LOGIN | Το usename με το οποίο πρέπει να γίνει η σύνδεση στον SMTP Server | Το usename με το οποίο πρέπει να γίνει η σύνδεση στον SMTP Server |
| EMAIL_SMTP_SERVER_PASSWORD | Ο κωδικός με τον οποίο πρέπει να γίνει η σύνδεση στον SMTP Server | Ο κωδικός με τον οποίο πρέπει να γίνει η σύνδεση στον SMTP Server |
| GOOGLE_CLIENT_ID | Το string που πήρατε από το Google Cloud Platform | Το string που πήρατε από το Google Cloud Platform |
| GOOGLE_SECRET_FILE | Η θέση που είναι αποθηκευμένο το αρχείο που κατεβάσατε από το Google Cloud Platform | Η θέση που είναι αποθηκευμένο το αρχείο που κατεβάσατε από το Google Cloud Platform |
| GOOGLE_REDIRECT_URL | Η διεύθυνση στην οποία θα επιστρέφει ο χρήστης αφού συνδεθεί μέσω Google. | /signInWithGoogle/auth |
Για να λειτουργήσει η δυνατότητα σύνδεσης μέσω Google πρέπει να δηλωθούν στο αρχείο .env οι μεταβλητές GOOGLE_CLIENT_ID και GOOGLE_SECRET_FILE. Για να βρούμε αυτές τις τιμές:
- Μεταβαίνουμε στο Google Cloud Platform
- Επιλέγουμε το project που θέλουμε να χρησιμοποιήσουμε ή δημιουργούμε ένα νέο
- Επιλέγουμε
Navigation menu>APIs & Services>Credentials - Επιλέγουμε
Create Credentials>OAuth client ID
- Ίσως σας ζητηθεί να δημιουργίσετε μία
OAuth consent screen - Επιλέγουμε
Application type:Web applicationκαι ένα όνομα.
- Ως
Authorized redirect URIsεισάγουμεhttps://example.com/signInWithGoogle/authήhttp://example.com/signInWithGoogle/authαν ή εφαρμογή είναι ακόμα σε testing mode
- Επιλέγουμε
Create - Στο παράθυρο που εμφανίζεται υπάρχει το
GOOGLE_CLIENT_IDκαι μπορούμε να αποθηκεύσουμε το CLIENT SECRET
Η εφαρμογή γίνεται εύκολα κατανοητή. Αξίζει όμως να αναφέρουμε ότι υπάρχει η σελίδα /admin στην οποία έχουν πρόσβαση μόνο οι 'διαχειριστές'. Για να γίνει ένας χρήστης διαχειριστής πρέπει το κλειδί isAdmin που αντισοιχεί στον λογαριασμό του, και μπορεί να βρεθεί στο αρχείο /App/data/users.json, να είναι ορισμένο σε true