Prêt à simplifier la connexion à votre site web ? Plongez dans notre guide étape par étape sur l'intégration de Google OAuth 2.0 pour la connexion à des sites web tiers. Nous vous guiderons tout au long du processus, facilitant l'amélioration de l'expérience utilisateur et le renforcement de la sécurité.
Avant de commencer, comprenons d'abord ce qu'est OAuth 2.0.
Qu'est-ce qu'OAuth 2.0 ?
OAuth 2.0 est un protocole d'autorisation standard ouvert qui permet aux applications tierces d'accéder à des ressources protégées sans fournir le nom d'utilisateur et le mot de passe de l'utilisateur. Il permet aux utilisateurs d'autoriser des applications tierces à accéder à leurs ressources protégées sans révéler directement leurs informations d'identification. OAuth 2.0 est largement utilisé dans les applications web et mobiles pour fournir un mécanisme d'autorisation sécurisé.
Le protocole OAuth 2.0 implique les rôles suivants :
- Propriétaire de la ressource : Généralement l'utilisateur, qui possède les ressources protégées, telles que les photos, les profils personnels, etc.
- Client : L'application tierce qui souhaite accéder aux ressources protégées du propriétaire de la ressource.
- Serveur d'autorisation : Le serveur chargé d'authentifier le propriétaire de la ressource et d'autoriser le client à accéder aux ressources.
- Serveur de ressources : Le serveur qui stocke les ressources protégées et fournit des API pour y accéder.
Le protocole OAuth 2.0 réalise l'autorisation via le flux d'autorisation. Les flux d'autorisation courants incluent :
- Octroi de code d'autorisation : Le client redirige l'utilisateur vers le serveur d'autorisation, l'utilisateur se connecte et autorise, et le serveur d'autorisation renvoie un code d'autorisation au client, que le client utilise ensuite pour échanger contre un jeton d'accès.
- Octroi d'informations d'identification du mot de passe du propriétaire de la ressource : Le propriétaire de la ressource fournit directement le nom d'utilisateur et le mot de passe au client, et le client utilise ces informations d'identification pour demander un jeton d'accès au serveur d'autorisation.
- Octroi d'informations d'identification du client : Le client utilise ses propres informations d'identification pour demander directement un jeton d'accès au serveur d'autorisation, ce qui convient aux cas où le client lui-même doit accéder aux ressources.
- Octroi implicite : Utilisé pour obtenir directement un jeton d'accès du client dans une application basée sur un navigateur.
Google OAuth 2.0 Octroi implicite : Implémentation et débogage Apidog
Google utilise le flux d'octroi implicite pour l'autorisation OAuth 2.0 sur le web, alors examinons comment l'implémenter et comment le déboguer dans Apidog.
Étape 1 : Configurer l'ID client et l'URL de redirection
Nous devons d'abord visiter la Google API Console pour obtenir les informations d'identification OAuth 2.0. Cliquez sur l'option "Informations d'identification" dans la barre latérale gauche, puis créez un ID client OAuth.
Sélectionnez ensuite le type de votre application, qui peut être un site web, une application Android ou iOS, selon votre entreprise. Ensuite, dans le champ "Origines JavaScript autorisées", entrez le domaine de votre site web.
S'il s'agit d'un débogage local, définissez-le généralement sur http://localhost ou http://localhost:8000 s'il y a un port. Le but est de faire savoir à Google la source HTTP où votre site web est hébergé. Ensuite, dans le champ "URI de redirection autorisés", entrez votre adresse de redirection, qui est généralement votre chemin de connexion ou tout autre domaine auquel vous pouvez accéder.
Après avoir configuré toutes les options pertinentes, cliquez sur le bouton "CRÉER" pour les enregistrer. Cela générera l'ID client et le secret client, dont nous aurons besoin plus tard.
Étape 2 : Configurer la page de demande d'autorisation OAuth
Sur la page, cliquez sur l'option "Écran de consentement OAuth" dans la barre latérale gauche pour créer une application.
Configurer l'écran de consentement OAuth
Dans cette page, remplissez les informations de base de l'application, telles que le nom, l'e-mail et le domaine. Les informations de cette page seront affichées dans la zone de connexion d'autorisation contextuelle, ce qui peut aider l'utilisateur final à comprendre qui vous êtes et comment vous contacter.
Ensuite, configurez les étendues. Passez à l'étape suivante et sélectionnez les autorisations auxquelles vous souhaitez accéder, puis enregistrez-les.
Vous pouvez également ajouter un compte de test, qui est un compte de messagerie qui peut effectuer une connexion OAuth 2.0 avant le lancement officiel, avec une limite de 100 utilisateurs autorisés maximum.
Après avoir terminé la configuration ci-dessus, nous pouvons officiellement entrer dans le flux principal de l'autorisation OAuth 2.0.
Étape 3 : Obtenir le jeton d'accès
Une fois les première et deuxième étapes prêtes, nous pouvons demander le jeton d'accès. Pour démontrer cette étape, nous utiliserons Apidog, un excellent outil de débogage et de gestion d'API. Vous pouvez obtenir directement le jeton dans Apidog.
Principales fonctionnalités d'Apidog dans la mise en œuvre du flux de connexion Google OAuth 2.0 :
- Configuration simplifiée : Apidog fournit une interface de configuration centralisée, permettant aux développeurs de saisir facilement l'ID client, l'URL de redirection et d'autres paramètres clés, sans avoir besoin de construire manuellement des URL de demande d'autorisation complexes.
- Sélection du mode d'autorisation intelligente : Apidog prend en charge l'identification automatique du mode d'autorisation de Google et offre la possibilité de sélectionner le mode d'octroi implicite, éliminant ainsi les tracas liés au basculement entre différents modes d'autorisation.
- Acquisition de jeton d'accès en un clic : Apidog peut guider les développeurs tout au long du flux d'autorisation et obtenir automatiquement le jeton d'accès, ce qui réduit considérablement la difficulté d'acquisition du jeton.
- Gestion automatique des jetons : Apidog ajoutera automatiquement le jeton d'accès obtenu à l'en-tête de la requête ou aux paramètres de requête, sans que le développeur ait besoin de gérer manuellement la transmission du jeton.
- Accès transparent aux ressources : Avec le jeton d'accès fourni par Apidog, les développeurs peuvent l'utiliser directement pour accéder aux ressources ouvertes de Google, sans avoir besoin d'une autorisation complexe supplémentaire.
Dans Apidog, créez un nouveau projet HTTP, puis créez une nouvelle requête et sélectionnez l'option "Modifier le document -> Auth -> OAuth 2.0".
Sélectionnez le mode d'autorisation "Implicite", car "OAuth 2.0 pour les applications web côté client" de Google utilise l'octroi implicite.
Entrez l'ID client et l'URL de redirection. Les paramètres du service Google OAuth 2.0 que vous avez configurés à la première étape.
Obtention d'un jeton d'accès
Selon la documentation officielle de Google, pour demander un jeton d'accès, l'URL à demander est :
https://accounts.google.com/o/oauth2/v2/auth
Vous pouvez remplir cette adresse dans le champ de saisie "URL d'authentification".
La documentation officielle de Google exige également que des paramètres supplémentaires soient inclus dans le chemin d'URL, tels que :
https://accounts.google.com/o/oauth2/v2/auth?
scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
include_granted_scopes=true&
response_type=token&
state=state_parameter_passthrough_value&
redirect_uri=https%3A//oauth2.example.com/code&
client_id=client_id
Remarque : Dans les applications réelles, aucun saut de ligne n'est nécessaire.
Cependant, dans Apidog, cela n'est généralement pas nécessaire, car les paramètres requis ont été configurés séparément dans d'autres options.
Si vous souhaitez les configurer, vous pouvez cliquer sur l'icône à côté de l'"URL d'authentification" pour configurer, ou cliquer sur "Plus" pour développer d'autres éléments de configuration, tels que l'ajout de la valeur openid à la "Portée" ici, qui est l'autorisation sélectionnée à l'"Étape 2" ci-dessus.
Une fois tous les éléments de configuration ci-dessus définis, vous pouvez cliquer sur le bouton "Obtenir le jeton" pour obtenir le jeton. Après avoir cliqué, s'il s'agit de la première connexion, une fenêtre s'affichera pour que vous puissiez autoriser, et vous pouvez remplir les informations.
Après avoir entré le nom d'utilisateur et le mot de passe, vous pouvez recevoir un code de vérification par SMS pour vérifier votre compte, ou vous pouvez directement associer le compte et obtenir le jeton d'accès.
Une fois l'autorisation terminée, le jeton d'accès sera automatiquement obtenu et affiché sur la page, et d'autres informations renvoyées par Google seront également analysées et affichées.
Étape 4 : Accéder aux ressources ouvertes en fonction du jeton
Avec le jeton d'accès obtenu, vous pouvez maintenant l'utiliser pour accéder aux ressources ouvertes de Google. Vous pouvez explorer toutes les API Google disponibles et leurs étendues d'autorisation dans le OAuth 2.0 Playground.
Lors de l'envoi de requêtes, Apidog joindra automatiquement le jeton à l'en-tête d'autorisation en tant que jeton Bearer. Si vous souhaitez inclure le jeton dans l'URL, vous pouvez modifier l'option "Position d'ajout de jeton" dans les paramètres d'Apidog sur "Paramètres de requête".
Conclusion
En résumé, la mise en œuvre de la connexion Google OAuth 2.0 comprend quatre étapes principales. Tout d'abord, à l'étape 1, vous devez configurer l'ID client et l'URL de redirection pour obtenir les informations d'identification OAuth 2.0. Ensuite, à l'étape 2, vous devez déterminer l'étendue des autorisations d'accès et créer une application, en configurant les informations pertinentes, y compris les autorisations accessibles et les comptes de test.
Ensuite, à l'étape 3, vous pouvez obtenir le jeton d'accès via la demande de jeton, avec l'aide d'un outil comme Apidog. Enfin, à l'étape 4, vous pouvez utiliser le jeton d'accès obtenu pour accéder aux ressources ouvertes de Google.
