Formation OAuth2

Développement du Client dans l’architecture

oAuth2.

TP n°11 :oAuth2, développement du Client 1

 Sommaire
I. Objectif ............................................................................................................................................................ 3
II. Pré-requis ....................................................................................................................................................... 3
III. Architecture de oAuth2 ................................................................................................................................. 3
IV. Création de l’application au niveau du GITHUB ............................................................................................4
V. Création de l’application au niveau de Google .............................................................................................. 6
VI. Développement de l'application CLIENT .......................................................................................................8
1. Création du projet Maven ...................................................................................................................... 8
2. Le fichier pom.xml .................................................................................................................................. 9
3. La classe de démarrage MainApplication.............................................................................................10
4. La classe de démarrage SecurityConfig ................................................................................................10
5. La classe contrôleur HomeController ...................................................................................................11
6. Le fichier application.properties ..........................................................................................................11
VII. Tests ...........................................................................................................................................................12

TP n°11 :oAuth2, développement du Client 2

I. Objectif
L'objectif de ce TP est de vous expliquer l’architecture de la norme d’autorisation oAuth2 et vous montrer
comment développer le Client.

II. Pré-requis
Pour réaliser ce TP vous aurez besoin de :
 JDK 17.
 Spring Boot 3.
 Eclipse ou autre IDE ;
 Connexion à Internet pour permettre à Maven de télécharger les dépendances.

III. Architecture de oAuth2

Le schéma suivant vous montre l’architecture d’oAuth2 :

TP n°11 :oAuth2, développement du Client 3

Explications :

 Étape 1 : Tout d'abord, l'utilisateur accède aux ressources à l'aide de l'application cliente telle que
Google, Facebook, Twitter, etc.

 Étape 2 : Ensuite, l'application cliente recevra l'identifiant client et le mot de passe client lors de
l'enregistrement de l'URI de redirection (Uniform Resource Identifier).

 Étape 3 : L'utilisateur se connecte à l'aide de l'application d'authentification. L'ID client et le mot de

passe client sont propres à l'application client sur le serveur d'autorisation.

 Étape 4 : Le serveur d'authentification redirige l'utilisateur vers un URI (Uniform Resource

Identifier) de redirection à l'aide d'un code d'autorisation.

 Étape 5: L'utilisateur accède à la page située à l'URI de redirection dans l'application cliente.

 Étape 6 : L'application client recevra le code d'authentification, l'identifiant client et le mot de

passe client, et les enverra au serveur d'autorisation.

 Étape 7 : L'application d'authentification renvoie un jeton d'accès à l'application cliente.

 Étape 8 : Une fois que l'application cliente obtient un jeton d'accès, l'utilisateur commence à
accéder aux ressources du propriétaire de la ressource à l'aide de l'application cliente.

IV. Création de l’application au niveau du GITHUB

- Aller au lien https://github.com/settings/applications/new

TP n°11 :oAuth2, développement du Client 4

 o Dans « Application name », entrer le nom de votre application.
o Dans « Homepage URL », entrer l’URL suivante : http://localhost:8080
o Dans « Authorization callback URL » , entrer l’URL suivante :
http://localhost:8080/login/oauth2/code/github
o Cliquer sur « Register application ». La page suivante est affichée :

- Noter le Client ID.

TP n°11 :oAuth2, développement du Client 5

 - Cliquer sur le bouton « Generate a new client secret » pour générer le mot de passe, ce dernier est
généré comme illustré au niveau de l’écran ci-dessous :

V. Création de l’application au niveau de Google

- Aller au lien https://console.cloud.google.com/
- Créer un projet (par exemple : tp-oauth2-exemple).

- Aller à l’écran de consentement, voici le lien :

https://console.cloud.google.com/apis/credentials/consent?project=tp-oauth2-exemple
- Cocher « Externe » et cliquer sur Créer.
- Entrer : le nom de l’application, l’adresse email d’assistance utilisateur, l’adresse email du
développeur et cliquer ensuite sur « Enregistrer et continuer ».
- Cliquer ensuite sur Identifiants et cliquer sur « CREER DES IDENTIFIANTS », la liste déroulante
suivante s’affiche :

TP n°11 :oAuth2, développement du Client 6

 - Cliquer sur « ID client OAuth ».
- Cliquer sur « Configurer l’écran de consentement OAuth».
- Dans « Type d’application », choisir « Application Web »
- Entrer le nom de l’application.
- Dans « Origines JavaScript autorisées », entrer l’URL de votre application : http://localhost:8080

Dans «URI de redirection autorisé », entrer l’URL suivante :

http://localhost:8080/login/oauth2/code/google

Cliquer ensuite sur Créer, le CLIENT-ID et le CLIENT-SECRET seront générés comme expliqué ci-dessous :

TP n°11 :oAuth2, développement du Client 7

VI. Développement de l'application CLIENT

1. Création du projet Maven

Créer un projet Maven par exemple oauthsociallogin. L’arborescence finale du projet est :

TP n°11 :oAuth2, développement du Client 8

 2. Le fichier pom.xml

- Modifier le fichier pom.xml comme suit :

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.0.1</version>
<relativePath/>
</parent>
<groupId>ma.formations.security.oauth</groupId>
<artifactId>oauthsociallogin</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>oauthsociallogin</name>
<description>Authentication using a social web site</description>
<properties>
<java.version>17</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-oauth2-client</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>

TP n°11 :oAuth2, développement du Client 9

<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>

Explication :

- Remarquer que nous avons utilisé Spring Boot version 3.0.1.

- La JDK doit être 17.
- Pour développer le CLIENT dans l’architecture d’oAuth2, nous avons besoin des deux dépendances
suivantes :

3. La classe de démarrage MainApplication

La classe de démarrage est :

4. La classe de démarrage SecurityConfig

- Créer la classe SecurityConfig suivante :

TP n°11 :oAuth2, développement du Client 10

 5. La classe contrôleur HomeController

6. Le fichier application.properties

TP n°11 :oAuth2, développement du Client 11

Modifier le fichier application.properties comme suit :

VII. Tests

- Aller au lien http://loclahost:8080/, remarquer la ressource est bien consultée :

Explication :

- Au niveau de la classe SecurityConfig, la ressource « / » peut être accédée par tout le monde :

- Aller au lien http://loclahost:8080/secured , la page par défaut suivante s’affiche :

TP n°11 :oAuth2, développement du Client 12

Explications :

- Au niveau de la classe SecurityConfig, nous avons configuré Spring Security de telle sorte d’afficher
la page d’authentification par défaut :

- Cliquer sur GitHub, l’application redirige l’utilisateur vers la page d’authentification de GitHub :

- Entrer vos identifiants et cliquer sur « Sign in ». La page suivante s’affiche :

TP n°11 :oAuth2, développement du Client 13

 - Idem pour Google.

TP n°11 :oAuth2, développement du Client 14