Auteur : Merlin C.

cloudflare-logo Tutoriels

Sécuriser son site avec un certificat SSL avec CloudFlare.

Sécuriser son site contre le piratage est indispensable de nos jours. Notamment afin de protéger ses utilisateurs de différents types attaques (Ex : MAN IN THE MIDDLE [MITM], qui consiste à interférer les données échangées entre le client et le serveur).

Ce tutoriel va vous apprendre à installer un certificat SSL (chiffrement des données transmises au site) grâce au service CloudFlare (sur un serveur Web sous PLESK).

Découverte de CloudFlare

CloudFlare est une entreprise américaine qui propose un réseau de distribution de contenu (ou CDN), des services de sécurité Internet et des services distribués de serveur de noms de domaine, entre le visiteur et le fournisseur de services d’hébergement de l’utilisateur de CloudFlare ; le système fonctionne comme un serveur proxy inversé pour les sites Web.

(Source : Wikipedia)

Ajout du nom de domaine à CloudFlare

Dans ce tutoriel, nous allons utiliser le nom de domaine tutoriel-cloudflare.site.

Pour commencer, inscrivez-vous sur le site de CloudFlare. Une fois inscrit(e), vous serez automatiquement redirigé(e) vers la page d’ajout de site. Si vous n’avez pas encore de domaine, CloudFlare propose depuis peu l’enregistrement de domaine directement depuis sa plateforme.

Ajout de son site sur CloudFlare

N.B : Si vous venez d’enregistrer votre domaine, il se peut qu’il faille attendre quelques minutes avant la confirmation de celui-ci.

Erreur : votre domaine n’est pas enregistré

Une fois ajouté, il vous faudra choisir une offre. Dans notre cas, l’offre gratuite suffira amplement à suivre le tutoriel.

Choisir son offre CloudFlare

Une fois votre offre sélectionnée, CloudFlare va vous proposer de gérer vos DNS actuellement enregistrés. Si vous venez d’enregistrer votre domaine, votre service d’enregistrement de domaine a probablement dû ajouter des DNS par défaut, je vous conseille donc de tous les retirer à l’aide de l’option « Delete« .

Zone DNS CloudFlare

L’étape suivante va être de modifier les serveurs de nom de votre domaine. Si vous ne savez pas comment faire, je vous conseille de taper « Namecheap change nameserver » (en remplaçant les termes en italique par votre fournisseur de domaine).

CloudFlare : changer ses serveurs de nom

Ajouter votre domaine à Plesk

Une fois votre domaine ajouté à CloudFlare, il va vous falloir ajouter celui-ci à Plesk (panel de gestion présumé de votre hébergeur web).

Plesk : ajouter votre domaine

Une fois le domaine ajouté sur Plesk, il va falloir faire pointer celui-ci vers l’IP de votre site. Pour ce faire, il faudra récupéré l’IP de votre site via Plesk. On peut la retrouver en bas des options de gestion de votre domaine (voir ci-dessous).

Plesk : trouver l’IP de son site

Une fois l’IP de votre site récupérée, rendez-vous sur l’onglet DNS de CloudFlare afin d’y ajouter les DNS suivant (en remplaçant tutoriel-cloudflare.site par votre domaine et 1.1.1.1 par l’IP de votre site) :

CloudFlare : Zone DNS

Installation d’un certificat SSL CloudFlare Origin

Nous allons désormais passer à l’installation d’un certificat SSL CloudFlare Origin qui va permettre un chiffrement de bout en bout lors de transferts de données entre vos utilisateurs et votre site.

Pour ce faire, il faut vous rendre dans l’onglet SSL/TLS de CloudFlare afin d’activer le mode d’encryptage complet et strict. Une fois activé, rendez vous dans l’onglet Origin Server afin de générer le certificat requis à installer sur Plesk.

Afin de procéder à la configuration du certificat, cliquez simplement sur le bouton prévu à cet effet (voir ci-dessous).

Procédez ensuite à la création du certificat en conservant les paramètres de configuration par défaut.

Une fois le certificat créé, vous aurez désormais en votre possession le certificat Origin, ainsi que la clé privée. Je vous invite à conserver ces documents précieusement car aucune copie ne pourra être récupérable par la suite.

Une fois noté, rendez-vous sur Plesk afin d’y ajouter le certificat que vous venez de générer.

Remplissez ensuite les informations demandées avant d’insérer le certificat et la clé privée générés précédemment.

Vous aurez ensuite besoin du certificat CloudFlare Origin RSA, celui-ci est disponible dans la documentation CloudFlare. Vous pouvez également le copier depuis ICI.

Une fois les 3 champs remplis, vous pouvez désormais charger le certificat.

Une fois le certificat installé, commencez par sécuriser la messagerie (voir ci-dessous).

Rendez-vous ensuite dans les paramètres d’hébergement de votre site afin d’activer le certificat SSL.

Sélectionnez le certificat précédemment ajouté puis confirmer les changements.

Et voilà ! Votre site est désormais chiffré de bout en bout par le protocole HTTPS en SSL/TLS.

Gameplay SardJump Projets

SardJump un DoodleJump en python

DoodleJump est un jeu intemporel datant d’une dizaine d’années. Sardoche est un streamer professionnel. On a décidé de relier les deux en un seul et unique jeu extraordinaire.

Introduction

La création du jeu se fait en trois grandes étapes :

  1. Création de la fenêtre
  2. Création des objets
  3. Lancement du jeu

Création de la fenêtre

Initialisation des modules et du jeu

import pygame
from pygame.locals import *
import sys
import random

WHITE = (255, 255, 255)

class SardJump (object):
    def __init__(self):
      return

On importe le module pygame ainsi que d’autres modules basiques tels que random et sys, puis on défini la class SardJump dans laquelle on définira les fonctions.

Création de la fenêtre et choix des dimensions.

 def __init__(self):
        self.screen = pygame.display.set_mode((800, 600))
 def run(self):
        global score
        clock = pygame.time.Clock()
        self.generatePlatforms()
        while True:
            self.screen.fill(WHITE)
            self.screen.blit(self.background,(0,0))
            FONT = pygame.font.Font('assets/fonts/Optimus.otf', 30)
            text = FONT.render("Score : " + str(score),False,(255,255,255)).convert_alpha()
            clock.tick(60)

            for event in pygame.event.get():
                if event.type == QUIT:
                    sys.exit()

On gère l’affichage et la taille de l’écran avec « self.screen = pygame.display.set_mode((800, 600)) », on gère ce qui est affiché tant que l’écran et actif et on utilise la fonction « pygame.event.get() » pour fermer l’écran.

Création des objets

Charger les images dans le jeu

def __init__(self):
        pygame.font.init()
        self.screen = pygame.display.set_mode((800, 600))
        self.playerRight_1 = pygame.image.load("assets/right_1.png").convert_alpha()
        self.playerRight = pygame.image.load("assets/right.png").convert_alpha()
        self.playerLeft = pygame.image.load("assets/left.png").convert_alpha()
        self.playerLeft_1 = pygame.image.load("assets/left_1.png").convert_alpha()
        self.plateform = pygame.image.load("assets/plateform.png").convert_alpha()
        self.background = pygame.image.load("assets/bg.png").convert()

Tout d’abord, pour commencer on importe les images en indiquant leur chemin d’accès.

Définition des variables nécessaires au bon fonctionnement du jeu

        self.cameray = 0
        self.playerx = 400
        self.playery = 400
        self.xmovement = 0
        self.jump = 0
        self.direction = 0
        self.gravity = 0
        
        self.platforms = [[400, 500]]
        self.score = 0

On crée dans la fonction __init__ les variables nécessaires au fonctionnement du jeu, donc, le suivi de la caméra, les positions du joueur, les sauts automatiques, la gravité, la position des plateformes et enfin le score.

Système de mouvement.

def updatePlayer(self):
        global score
        if self.playerx > 850:
            self.playerx = -50
        elif self.playerx < -50:
            self.playerx = 850
        self.playerx += self.xmovement
        if self.playery - self.cameray <= 200:
            self.cameray -= 10

On crée la fonction « updatePlayer(self) » dans laquelle seront mises toutes les modifications sur le personnage comme la téléportation de droite à gauche.

key = pygame.key.get_pressed()
        if key[K_RIGHT]:
            if self.xmovement < 10:
                self.xmovement += 1
                self.direction = 0
        elif key[K_LEFT]:
            if self.xmovement > -10:
                self.xmovement -= 1
                self.direction = 1

On attribue les touches droite et gauche aux mouvements du personnage.

if not self.jump:
            self.playery += self.gravity
            self.gravity += 1
        elif self.jump:
            self.playery -= self.jump
            self.jump -= 1

Cette partie de la fonction updatePlayer(self) permet de créer une gravité donc lorsque le personnage ne saute pas il tombe, mais le problème et qu’il faut qu’il y ai un point de collision pour sauter dessus. C’est la qu’on va créer les fonctions en lien avec les plateformes.

Création des plateformes

def generatePlatforms(self):
y = 700
        while y > -100:
            x = random.randint(0, 900)
            self.platforms.append((x, y))
            y -= 50

def drawPlatforms(self):
        for plat in self.platforms:
            regenerate = self.platforms[1][1] - self.cameray
            if regenerate > 600:
                self.platforms.append(
                    (random.randint(0, 700), self.platforms[-1][1] - 50))
                self.platforms.pop(0)
            self.screen.blit(
                    self.plateform, (plat[0], plat[1] - self.cameray))

On génère aléatoirement les plateformes avant de les afficher.

def updatePlatforms(self):
        for p in self.platforms:
            rect = pygame.Rect( p[0], p[1], self.plateform.get_width() - 10, self.plateform.get_height())
            player = pygame.Rect(self.playerx, self.playery, self.playerRight.get_width() - 10, self.playerRight.get_height())
            if rect.colliderect(player) and self.gravity and self.playery < (p[1] - self . cameray):
                self.jump = 15
                self.gravity = 0

On crée un effet collision avec le personnage et les plateformes qui lui permettra de sauter dessus sans tomber.

Système de score et mort

        if self.playery - self.cameray <= 200:
            self.cameray -= 10
            score += 1

Le score est calculé en fonction de l’avancement dans la partie. Lorsque la caméra monte, le score augmente également.

            FONT = pygame.font.Font('assets/fonts/Optimus.otf', 30)
            text = FONT.render("Score : " + str(score),False,(255,255,255)).convert_alpha()
    		
      		self.screen.blit(text, (550, 50))

On crée le texte du score dans la boucle du jeu et on ne l’affiche qu’après la création et l’affichage des autres éléments (fond, plateformes et personnage) afin que celui-ci soit au premier plan.

Lancement du jeu

self.drawPlatforms()
self.updatePlatforms()
self.updatePlayer()
self.screen.blit(text, (550, 50))
pygame.display.flip()
pygame.display.set_caption("SardJump")

On appelle toutes les fonctions dans la fonction run puis on lance le jeu avec SardJump().run().

Conclusion 

Pour pouvoir jouer à cette version du jeu SardJump, téléchargez le code par l’intermédiaire du lien ci-dessous. Les commandes sont assez intuitives : les flèches gauche/droite pour se déplacer, et les flèches haut/bas pour changer de skin de plateforme. Les paliers de skins de personnage sont à 1.000 et 10.000 points.
Amusez-vous bien !