Introduction

Cette documentation offre une vue d’ensemble sur la mise en œuvre d’une connexion OAuth 2.0 pour accéder à l’API Pixxle Me, adaptée à tous types d’applications ou de plateformes de développement. L’objectif est de démontrer le flux général de l’authentification OAuth afin de sécuriser l’accès aux ressources utilisateur.

Il est indispensable de posséder une application Pixxle Login pour procéder. Si vous n’en disposez pas encore, veuillez visiter la Console de développement Pixxle pour créer votre application gratuitement.

 

Avertissement de sécurité

Lors de l’authentification OAuth, il est crucial de gérer de manière sécurisée les paramètres sensibles tels que client_id, client_secret, et autres données susceptibles de compromettre la sécurité de votre application en cas d’exposition. L’utilisation d’un fichier .env est une pratique recommandée pour sécuriser ces informations.

Utilisation du fichier .env

Un fichier .env est utilisé pour stocker des variables d’environnement qui sont chargées au démarrage de votre application, permettant ainsi de garder les informations sensibles hors du code source. Voici comment configurer et utiliser ce fichier :

1. Création du fichier .env :
   • Placez ce fichier à la racine de votre projet.
   • Assurez-vous d’ajouter le fichier .env à votre fichier .gitignore pour éviter son transfert vers votre dépôt Git.

   Exemple de contenu pour un fichier .env :

CLIENT_ID=monClientIdSecret
CLIENT_SECRET=monSecretClientSecret
REDIRECT_URI=https://monapp.exemple.com/callback
SCOPES=basic_information
STATE=random_string

 

Conseil de sécurité à l’intégration

Bien que le client_secret soit transmis lors de l’appel GET, notre système le récupère, le traite et l’isole afin de ne pas l’afficher publiquement. À aucun moment votre client_secret ne sera visible publiquement.

 

Sécurité renforcée via une redirection indirecte

Pour renforcer la sécurité et minimiser l’exposition directe de détails sensibles dans les URL, il est conseillé d’utiliser une méthode de redirection indirecte. Cette méthode consiste à créer un point d’accès sur votre propre serveur qui initie la connexion OAuth en interne plutôt que de rediriger directement vers l’URL de l’API externe. Voici comment procéder :

1. Création d’un point d’accès intermédiaire

Au lieu de rediriger les utilisateurs directement vers l’URL d’autorisation de l’API externe, créez un point d’accès sur votre propre serveur (par exemple, https://www.votresiteweb.com/pixxleme) qui gère cette redirection. Ce point d’accès construira l’URL d’autorisation en arrière-plan et redirigera l’utilisateur vers le serveur d’authentification.

2. Exemple de mise en œuvre

• Création d’une route dans votre application web : Configurez cette route dans votre système de gestion des routes, typiquement dans un fichier de configuration ou un contrôleur.
• Script de redirection sécurisée : Ce script récupère les variables nécessaires de l’environnement, construit l’URL de manière sécurisée et effectue la redirection.
• Lier ce script à votre frontend : Utilisez une balise <a> qui pointe vers le script sur votre serveur au lieu de l’URL de l’API externe.

Exemple de lien sur votre page web :

<!-- Exemple de lien sur votre page web -->
<a href="https://www.monsiteweb.com/pixxleme">Connectez-vous avec Pixxle Me</a>

 

3. Avantages de cette approche

• Sécurité accrue : Les paramètres sensibles comme le client_id et le client_secret ne sont jamais exposés dans le navigateur de l’utilisateur.
• Contrôle accru : Vous pouvez intégrer des mesures de sécurité supplémentaires, telles que des logs ou des contrôles de sécurité personnalisés, avant de procéder à la redirection.
• Maintenance simplifiée : Centraliser la logique de connexion simplifie les mises à jour et les modifications sans nécessiter de redéploiement du frontend.

Cette méthode de redirection indirecte ajoute une couche de sécurité essentielle en masquant les détails de l’URL d’authentification et en minimisant les risques liés à la manipulation directe de ces URLs par les utilisateurs ou des tiers non autorisés.

 

Étape 1 : Appel à l’API

Pour faire appel à l’API, vous devez effectuer une demande GET à l’URL suivante :

https://www.pixxle.me/oauth/authorize

Cette demande doit inclure plusieurs paramètres :

• client_id : Identifiant unique de votre application délivré par Pixxle Me.
• client_secret : Secret de votre application, utilisé pour sécuriser les communications.
• redirect_uri : URI où les utilisateurs sont redirigés après une tentative d’authentification.
• response_type : Indique que l’application attend un code qui sera échangé contre un token d’accès.
• scope : Définit les ressources et les opérations accessibles par l’application.
• state : Une valeur qui sera renvoyée par Pixxle Me pour maintenir l’état entre la redirection.

 

Exemple d’un appel GET en PHP :

$oauth_authorize_url_full = 'https://www.pixxle.me/oauth/authorize?' .
'client_id=' . esc_attr($client_id) .
'&client_secret=' . esc_attr($client_secret) .
'&redirect_uri=' . esc_attr($redirect_uri) .
'&response_type=code' .
'&scope=' . esc_attr($scopes) .
'&state=' . esc_attr($state)

 

Ce qui se traduit par une URL formée comme suit :

https://www.pixxle.me/oauth/authorize?client_id=XXX&redirect_uri=https://www.votresiteweb.px/XXX&responnse_type=code&scope=user.profile&state=496468479847

 

Le client_secret est traité par notre serveur et ne sera pas affiché dans l’URL publique.

 

Étape 2 : Récupération du Token d’Accès

Notre technologie IPM repose sur l’identification de l’utilisateur via notre Application Pixxle Me. Seul l’utilisateur souhaitant se connecter peut autoriser la connexion entre votre site web ou application avec notre service OAuth. Nous avons simplifié le processus en transmettant directement un Token d’Accès.

Une fois votre application Pixxle Login authentifiée, et après la validation de l’utilisation de ses données par notre service de l’utilisateur, notre service vous transfère un token d’accès dans votre URL de redirection (Redirect_uri) pour récupérer les données utilisateur et les utiliser dans votre site web ou application.

Ceci se présente de la manière suivante :

https://www.votresite.com/callback?code=XXX. Token .XXX

Il suffit de récupérer le paramètre code qui représente le Token pour faire votre demande à notre service pour récupérer les informations de l’utilisateur.

Étape 3 : Utilisation du Token et récupération des informations utilisateur

Afin de récupérer les informations de l’utilisateur Pixxle Me et de les utiliser dans votre site web ou application, vous devez transmettre une demande GET à l’URL suivante :

https://api.pixxle.me/api/access/user

Cette demande doit être accompagnée d’un header incluant le Token précédemment transmis par notre service en tant qu’autorisation Bearer.

Exemple de demande via un code PHP :

$code = $_GET['code'];
    
            // Faites une demande à l'API de Pixxle Me pour récupérer les informations de l'utilisateur
            $api_url = 'https://api.pixxle.me/api/access/user';
            $response = file_get_contents($api_url, false, stream_context_create([
                'http' => [
                    'method' => 'GET',
                    'header' => "Authorization: Bearer $code\r\n"
                ]
            ]));

 

Une fois votre application authentifiée et autorisée via le Token, vous recevrez en réponse les informations de l’utilisateur en format JSON. Nous vous informons que les informations transmises varient selon le scope indiqué lors de l’appel initial à l’API. Pour en savoir plus sur le type de scope disponible, vous pouvez vous rendre sur la page dédiée : Champs d’application (Scopes) pour les connexions OAuth pour Pixxle Login

Les informations transmises sont les suivantes (liste complète soumis à variation selon la scope demandé) :

// Nom de l'utilisateur
nom

// Prénom de l'utilisateur
prenom

// Adresse e-mail de l'utilisateur
email

// Numéro de téléphone de l'utilisateur en format international (+33600000000)
phone

// Récupération du paramètre URL de l'avatar
avatar

// Date de naissance
birthday

// Rue de l'adresse postale
rue

// Complément pouvant correspondre à la seconde ligne d'adresse postale
complement

// Code Postal de l'utilisateur
code_postal

// Ville de l'utilisateur
ville

// Pays de l'utilisateur
pays

 

Ce qui donne en exemple d’exploitation via cet extrait PHP :

// Exemple callback

public function auth_callback() {
        // Vérifiez si le code d'autorisation est présent dans la requête
        if (isset($_GET['code'])) {
            $code = $_GET['code'];
    
            // Faites une demande à l'API de Pixxle Me pour récupérer les informations de l'utilisateur
            $api_url = 'https://api.pixxle.me/api/access/user';
            $response = file_get_contents($api_url, false, stream_context_create([
                'http' => [
                    'method' => 'GET',
                    'header' => "Authorization: Bearer $code\r\n"
                ]
            ]));

                                $user_data = json_decode($response, true);
                $email = $user_data['email'];
                $fullname = $user_data['prenom'];

                // Chargez le modèle de base de données
                $db = \Config\Database::connect();
                $query = "SELECT id FROM sp_users WHERE email = ?";
                $result = $db->query($query, [$email]);
    }

Dans cet exemple, nous récupérons les élements via notre balise $user_data puis nous regardons dans la base de donnée existante si cette adresse e-mail existe déjà.

 

Conclusion

Nous avons conçu notre solution pour faciliter son intégration dans les standards OAuth de développement actuel. Si vous rencontrez des difficultés, nous vous invitons à nous poser vos questions via notre communauté sur Discord en utilisant le lien suivant : https://discord.gg/yfnWcQPj