Merge branch 'qrcode' into 'main'

Draft: Qrcode

See merge request bde/nk20!196

README.md

@@ -58,7 +58,13 @@ Bien que cela permette de créer une instance sur toutes les distributions,
     (env)$ ./manage.py createsuperuser  # Création d'un⋅e utilisateur⋅rice initial
     ```
 
-6.  Enjoy :
+6. (Optionnel) **Création d'une clé privée OpenID Connect**
+
+Pour activer le support d'OpenID Connect, il faut générer une clé privée, par
+exemple avec openssl (`openssl genrsa -out oidc.key 4096`), et renseigner son
+emplacement dans `OIDC_RSA_PRIVATE_KEY` (par défaut `/var/secrets/oidc.key`).
+
+7.  Enjoy :
 
     ```bash
     (env)$ ./manage.py runserver 0.0.0.0:8000
@@ -228,7 +234,13 @@ Sinon vous pouvez suivre les étapes décrites ci-dessous.
         (env)$ ./manage.py check # pas de bêtise qui traine
         (env)$ ./manage.py migrate
 
-7.  *Enjoy \o/*
+7. **Création d'une clé privée OpenID Connect**
+
+Pour activer le support d'OpenID Connect, il faut générer une clé privée, par
+exemple avec openssl (`openssl genrsa -out oidc.key 4096`), et renseigner son
+emplacement dans `OIDC_RSA_PRIVATE_KEY` (par défaut `/var/secrets/oidc.key`).
+
+8.  *Enjoy \o/*
 
 ### Installation avec Docker
 

apps/activity/templates/activity/activity_entry.html

@@ -38,6 +38,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
 </a>
 
 <input id="alias" type="text" class="form-control" placeholder="Nom/note ...">
+<button id="trigger" class="btn btn-secondary">Click me !</button>
 
 <hr>
 
@@ -63,15 +64,46 @@ SPDX-License-Identifier: GPL-3.0-or-later
         refreshBalance();
     }
 
+    function process_qrcode() {
+        let name = alias_obj.val();
+        $.get("/api/note/note?search=" + name + "&format=json").done(
+            function (res) {
+                let note = res.results[0];
+                $.post("/api/activity/entry/?format=json", {
+                    csrfmiddlewaretoken: CSRF_TOKEN,
+                    activity: {{ activity.id }},
+                    note: note.id,
+                    guest: null
+                }).done(function () {
+                    addMsg(interpolate(gettext(
+                        "Entry made for %s whose balance is %s €"),
+                        [note.name, note.balance / 100]), "success", 4000);
+                    reloadTable(true);
+                }).fail(function (xhr) {
+                    errMsg(xhr.responseJSON, 4000);
+                });
+            }).fail(function (xhr) {
+                errMsg(xhr.responseJSON, 4000);
+            });
+    }
+
     alias_obj.keyup(function(event) {
         let code = event.originalEvent.keyCode
         if (65 <= code <= 122 || code === 13) {
             debounce(reloadTable)()
         }
+        if (code === 0)
+            process_qrcode();
     });
 
     $(document).ready(init);
 
+    alias_obj2 = document.getElementById("alias");
+    $("#trigger").click(function (e) {
+        addMsg("Clicked", "success", 1000);
+        alias_obj.val(alias_obj.val() + "\0");
+        alias_obj2.dispatchEvent(new KeyboardEvent('keyup'));
+    })
     function init() {
         $(".table-row").click(function (e) {
             let target = e.target.parentElement;

apps/member/templates/member/includes/profile_info.html

@@ -60,7 +60,10 @@
 {% if user_object.pk == user.pk %}
     <div class="text-center">
         <a class="small badge badge-secondary" href="{% url 'member:auth_token' %}">
-            <i class="fa fa-cogs"></i>{% trans 'API token' %}
+            <i class="fa fa-cogs"></i>&nbsp;{% trans 'API token' %}
+        </a>
+        <a class="small badge badge-secondary" href="{% url 'member:qr_code' user_object.pk %}">
+            <i class="fa fa-qrcode"></i>&nbsp;{% trans 'QR Code' %}
         </a>
     </div>
 {% endif %}

apps/member/templates/member/qr_code.html

@@ -0,0 +1,36 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n %}
+
+{% block content %}
+<div class="card bg-light">
+  	<h3 class="card-header text-center">
+		{% trans "QR Code for" %} {{ user_object.username }} ({{ user_object.first_name }} {{user_object.last_name }})
+  	</h3>
+  	<div class="text-center" id="qrcode">
+  	</div>
+</div>
+
+
+{% endblock %}
+
+{% block extrajavascript %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script>
+	var qrc = new QRCode(document.getElementById("qrcode"), {
+		text: "{{ user_object.pk }}\0",
+		width: 1024,
+		height: 1024
+	});
+</script>
+{% endblock %}
+
+{% block extracss %}
+<style>
+img {
+    width: 100%
+}
+</style>
+{% endblock %}

apps/member/urls.py

@@ -25,4 +25,5 @@ urlpatterns = [
     path('user/<int:pk>/aliases/', views.ProfileAliasView.as_view(), name="user_alias"),
     path('user/<int:pk>/trust', views.ProfileTrustView.as_view(), name="user_trust"),
     path('manage-auth-token/', views.ManageAuthTokens.as_view(), name='auth_token'),
+    path('user/<int:pk>/qr_code/', views.QRCodeView.as_view(), name='qr_code'),
 ]

apps/member/views.py

@@ -402,6 +402,14 @@ class ManageAuthTokens(LoginRequiredMixin, TemplateView):
         context['token'] = Token.objects.get_or_create(user=self.request.user)[0]
         return context
 
+class QRCodeView(LoginRequiredMixin, DetailView):
+    """
+    Affiche le QR Code
+    """
+    model = User
+    context_object_name = "user_object"
+    template_name = "member/qr_code.html"
+    extra_context = {"title": _("QR Code")}
 
 # ******************************* #
 #              CLUB               #

docs/external_services/oauth2.rst

@@ -43,6 +43,11 @@ On a ensuite besoin de définir nos propres scopes afin d'avoir des permissions
        'SCOPES_BACKEND_CLASS': 'permission.scopes.PermissionScopes',
        'OAUTH2_VALIDATOR_CLASS': "permission.scopes.PermissionOAuth2Validator",
        'REFRESH_TOKEN_EXPIRE_SECONDS': timedelta(days=14),
+       'PKCE_REQUIRED': False,
+       'OIDC_ENABLED': True,
+       'OIDC_RSA_PRIVATE_KEY':
+           os.getenv('OIDC_RSA_PRIVATE_KEY', '/var/secrets/oidc.key'),
+       'SCOPES': { 'openid': "OpenID Connect scope" },
    }
 
 Cela a pour effet d'avoir des scopes sous la forme ``PERMISSION_CLUB``,
@@ -57,6 +62,14 @@ On ajoute enfin les routes dans ``urls.py`` :
         path('o/', include('oauth2_provider.urls', namespace='oauth2_provider'))
     )
 
+Enfin pour utiliser OIDC, il faut générer une clé privé que l'on va, par défaut,
+mettre dans `/var/secrets/oidc.key` :
+
+.. code:: bash
+
+   cd /var/secrets/
+   openssl genrsa -out oidc.key 4096
+
 L'OAuth2 est désormais prêt à être utilisé.
 
 

docs/install.rst

@@ -227,6 +227,22 @@ En production, ce fichier contient :
    )
 
 
+Génération d'une clé privé pour OIDC
+------------------------------------
+
+Pour pouvoir proposer le service de connexion Openid Connect (OIDC) par OAuth2, il y a
+besoin d'une clé privé. Par défaut, elle est cherché dans le fichier `/var/secrets/oidc.key`
+(sinon, il faut modifier l'emplacement dans les fichiers de configurations).
+
+Pour générer la clé, il faut aller dans le dossier `/var/secrets` (à créer, si nécessaire) puis
+utiliser la commande de génération :
+
+.. code:: bash
+
+   cd /var/secrets
+   openssl genrsa -out oidc.key 4096
+
+
 Configuration des tâches récurrentes
 ------------------------------------
 

note_kfet/settings/base.py

@@ -268,6 +268,10 @@ OAUTH2_PROVIDER = {
     'OAUTH2_VALIDATOR_CLASS': "permission.scopes.PermissionOAuth2Validator",
     'REFRESH_TOKEN_EXPIRE_SECONDS': timedelta(days=14),
     'PKCE_REQUIRED': False, # PKCE (fix a breaking change of django-oauth-toolkit 2.0.0)
+    'OIDC_ENABLED': True,
+    'OIDC_RSA_PRIVATE_KEY':
+        os.getenv('OIDC_RSA_PRIVATE_KEY', '/var/secrets/oidc.key'),
+    'SCOPES': { 'openid': "OpenID Connect scope" },
 }
 
 # Take control on how widget templates are sourced