Application mobile: Ajout de la connexion Azure AD B2C à une application mobile hybride à l’aide d’Ionic Auth Connect

Azure Active Directory B2C (Azure AD B2C) est un excellent moyen d’activer l’authentification sécurisée pour vos utilisateurs sur mobile et sur le Web, de la connexion et de la déconnexion de base à la gestion des profils, etc.

Bien qu’Azure AD B2C soit conçu pour fonctionner correctement sur n’importe quel téléphone ou tablette iOS ou Android, l’intégration avec n’importe quel fournisseur d’authentification peut être particulièrement délicate sur un appareil mobile, en particulier si vous créez une application mobile « hybride » en utilisant quelque chose comme Cordova ou Capacitor . Des problèmes tels que le stockage sécurisé des jetons, les attaques Man-In-The-Middle et les mises à jour de sécurité en temps opportun peuvent être gênants et créer des risques s’ils ne sont pas gérés correctement.

C’est pourquoi l’équipe Ionic a conçu Auth Connect. Connexion d’authentification ionique facilite l’ajout d’une authentification sécurisée à toute application mobile hybride fonctionnant sur iOS, Android ou le Web. À l’aide d’une API simple et puissante, il gère la connexion et/ou l’enregistrement d’un utilisateur auprès d’un fournisseur d’authentification (comme Azure Active Directory) à l’aide de la norme OAuth/OpenId Connect.

Commencer

Dans ce didacticiel, nous ajouterons une fonctionnalité de connexion/déconnexion à une application Ionic de base en intégrant Ionic Auth Connect. Quelques étapes suffisent pour implémenter Auth Connect avec Azure AD B2C dans une application Ionic : configurez Azure AD B2C, installez Auth Connect dans une application Ionic et configurez Auth Connect pour utiliser Azure AD B2C.

Pour commencer, clonez ce référentiel et suivre. Le dossier « démarrer » contient la structure de base de l’application à laquelle nous allons apporter des modifications et le dossier « terminé » contient l’application terminée comme point de référence si nécessaire.

REMARQUE: Un Ionic Native Enterprise Edition clé est requise pour installer et utiliser le plugin Ionic Auth Connect. Ionic Native Enterprise propose une bibliothèque de plug-ins et de solutions Premier entièrement pris en charge et maintenus par l’équipe Ionic, avec un accès aux experts Ionic et un SLA de réponse garantie au développement d’applications critiques. Si vous souhaitez acquérir une clé ou en savoir plus, veuillez nous contacter ici.

Pour voir à quoi ressemble Ionic Auth Connect en action, visionnez cette courte vidéo.

Après avoir cloné le code, procédez comme suit :

1. Installez l’Ionic CLI :

npm install -g @ionic/cli

2. Dans un terminal, changez de répertoire dans le dossier « démarrer » dans le référentiel :

cd demo-authconnect-azureb2c/start

3. Courez npm installer. REMARQUE : cela échouera si une clé native ionique n’a pas été enregistrée.

4. Courir service ionique pour créer et diffuser l’application localement dans un navigateur Web.

L’application de référence

L’application Ionic est une version modifiée d’un projet de démarrage angulaire vierge. Il se compose de deux pages : la page d’accueil affiche les détails de l’utilisateur connecté (qui seront récupérés à partir d’Azure AD B2C) et la page de connexion protège la page d’accueil des accès non autorisés.

Configuration B2C Azure Active Directory

Avant d’intégrer Auth Connect dans l’application Ionic, vous devez mettre Azure Active Directory (AD) B2C opérationnel.

Noter: Pour des informations complètes sur la configuration d’Azure AD, consultez la documentation B2C officielle qui comprend des didacticiels sur la création d’un locataire B2C, l’enregistrement d’applications, etc.

Créer un locataire Azure AD B2C

Si vous n’en avez pas, créez un nouveau locataire B2C.

Enregistrer une application

Connectez-vous au portail Azure, puis accédez au Azure AD B2C page de services.

Commencez par créer une nouvelle application sous Gérer – Inscriptions d’applications – Nouvelle inscription.

azureb2c-register-app.png

Donnez un nouveau nom à votre application, puis sélectionnez les types de comptes pris en charge.

Avec cela en main, définissez l’URI de redirection. Choisissez « Client public/natif (mobile et ordinateur) » – nous ajouterons le support Web dans une étape distincte. Ensuite, remplissez la valeur du champ de texte avec votre identifiant d’application unique au monde, qui est utilisé à la fois dans la configuration Azure et dans la configuration de l’application mobile native. Typiquement, cela prend la forme de company-AppName ou style DNS inversé – com.entreprise.app. Utilisez la formule « uniqueId://page ». Une fois que l’utilisateur de l’application s’est connecté à Azure AD, cela indique à Auth Connect vers quelle page rediriger dans votre application. Bien que n’importe quelle page puisse être utilisée, dans cet exemple, nous utiliserons la page de connexion, telle que com.entreprise.app://login. Cliquez sur le bouton d’enregistrement pour créer l’application.

Ajouter une plate-forme Web

Une fois l’application créée, accédez à Gérer – Authentification. Cliquez sur le bouton « Ajouter une plate-forme ». Sous Applications Web, choisissez « application à page unique ».

Sous URI de redirection, spécifiez une URL Web. Dans cet exemple, pour les tests locaux, nous utiliserons http://localhost:8100/ avec le nom de la page de connexion principale de votre application (généralement, connexion).

Ensuite, sous URL de déconnexion, spécifiez une URL Web vers laquelle rediriger une fois que l’utilisateur s’est déconnecté de votre application. Encore une fois, pour les tests locaux, spécifiez https://localhost:8100/ ainsi que le nom de la page de déconnexion (généralement Se déconnecter).

Enfin, sous Implicit Grant, activez « Jetons d’accès ». Cliquez sur le bouton Configurer pour enregistrer.

azureb2c-spa.png

De retour sur la page Authentification, regardez sous les paramètres de l’application à page unique. Cliquez sur le bouton « Ajouter un URI » pour ajouter des URI de redirection supplémentaires, y compris ceux d’autres environnements tels que la mise en scène ou la production. Cliquez sur Enregistrer lorsque vous êtes prêt.

azureb2c-web-redirecturis.png

Exposer une API

Accédez à la page « Exposer une API ». Cliquez sur « Ajouter un champ d’application », puis pour le nom du champ d’application, fournissez une valeur telle que « user_impersonation ». Pour les champs de nom d’affichage et de description, ajoutez des détails décrivant qu’il s’agit d’authentifier vos utilisateurs. Définissez l’état sur activé, puis cliquez sur le bouton « Ajouter une portée ».

Configurer les autorisations d’API

Ensuite, nous devons autoriser notre application afin qu’elle puisse se connecter à Azure B2C et récupérer les informations de profil utilisateur ainsi que les informations de connexion. Accédez à la page Autorisations de l’API, puis cliquez sur le bouton « Ajouter une autorisation ». Sous « Sélectionner une API », choisissez « Mes API », puis cliquez sur le nom de l’application B2C que nous sommes en train de configurer. Ensuite, sélectionnez l’autorisation « user_impersonation » (ou le nom que vous lui avez attribué à l’étape précédente), puis cliquez sur le bouton « Ajouter des autorisations ».

Enregistrez l’application, puis cliquez sur la ligne d’autorisation nouvellement ajoutée. Cliquez sur le bouton « Accorder le consentement de l’administrateur pour [your organization name] » puis choisissez  » Oui « .

azureb2c-api-permissions.png

Cliquez à nouveau sur la ligne d’autorisation « user_impersonation » pour ouvrir la fenêtre modale, puis cliquez pour copier le lien qui s’affiche. Notez cette URL, car elle sera utilisée ultérieurement dans le cadre de la propriété « scopes » d’Auth Connect.

azureb2c-scopes-link.png

Créer des flux d’utilisateurs (stratégies)

Créez au moins un flux d’utilisateurs, la série de pages qui définissent l’ensemble de l’expérience d’authentification pour votre application. Au minimum, créez un Inscrivez-vous et connectez-vous couler. Une fois le flux d’utilisateurs créé, sélectionnez-le dans la liste des flux d’utilisateurs, puis cliquez sur « Exécuter le flux d’utilisateurs » dans l’onglet Présentation. Notez l’URL en haut de la page, utilisée pour configurer Auth Connect URL de découverte biens.

Azure AD B2C est maintenant prêt à être utilisé avec Auth Connect.

Installer Auth Connect

Auth Connect fonctionne sur le Web ou sur mobile. Pour le déploiement sur mobile, nous utiliserons Capacitor, le runtime natif multiplateforme d’Ionic pour créer des applications mobiles et Web natives, à l’aide de JavaScript, HTML et CSS, avec une base de code partagée. En savoir plus sur le projet et comment déployer cette application Ionic sur mobile ici.

L’ajout de condensateur est facile :

ionic integrations enable capacitor

Exécutez la commande suivante pour installer le plug-in Auth Connect. Pour le AUTH_URL_SCHEME variable, utilisez l’ID d’application unique au monde (par exemple : com.entreprise.app) que vous avez choisi lors de la configuration de l’application Azure AD ci-dessus.

npm install @ionic-enterprise/auth --variable AUTH_URL_SCHEME=com.company.app
npx cap sync

Configurer la connexion d’authentification

La configuration d’Auth Connect implique deux étapes : l’ajout des détails de configuration dans l’application à partir de votre locataire Azure AD et la mise en œuvre de la fonctionnalité de connexion/déconnexion.

Détails de la configuration Azure

Étant donné que l’application Azure AD B2C prendra en charge différentes valeurs par environnement (généralement mise en scène, contrôle qualité, production, etc.), nous pouvons la prendre en charge dans l’application Ionic à l’aide d’Angular. environnements. Ouvert src/environments/environment.ts puis ajoutez ce qui suit. Nous allons commencer par une configuration Web car il est plus facile de créer et de tester localement dans un navigateur :

import { IonicAuthOptions } from '@ionic-enterprise/auth';

export const azureWebConfig : IonicAuthOptions = {
  // the auth provider
  authConfig: 'azure',
  // The platform which we are running on
  platform: 'web',
  // client or application id for provider
  clientID: 'FILL_IN',
  // the discovery url for the provider
  // OpenID configuration
  discoveryUrl: 'FILL_IN',
  // the URI to redirect to after log in
  redirectUri: 'http://localhost:8100/login',
  // requested scopes from provider
  scope: 'openid offline_access email profile FILL_IN',
  // the URL to redirect to after log out
  logoutUrl: 'http://localhost:8100/login',
  // Show provider login in either current window or new tab
  implicitLogin: "CURRENT"
};

Certaines de ces valeurs « IonicAuthOptions » sont uniques et doivent être définies en fonction de l’application Azure AD que nous venons de créer ci-dessus :

* Plate-forme: utilisez « web » si vous l’exécutez en tant que PWA ou « condensateur » lorsque l’application est déployée en tant qu’application iOS ou Android.

* identité du client: l’_ID d’application (client)_ de votre application, qui se trouve sur la page Présentation. Exemple : cebbb0be-d578-4bbd-9712-4b0fe05c06aa

* redirigerUri: L’URI vers lequel rediriger une fois que l’utilisateur s’est connecté. Puisque nous testons localement dans un navigateur, utilisez « http://localhost:8100/login » car c’est sur quoi ‘ionic serve’ s’exécute.

* URL de déconnexion: L’URI vers lequel rediriger une fois l’utilisateur déconnecté. Encore une fois, utilisez « http://localhost:8100/”.

Les portée La propriété est utilisée pour déverrouiller l’accès aux ressources protégées, telles que les autorisations de lecture/écriture. Il existe une variété d’attributs disponibles; un exemple ressemble à : « openid offline_access email profile ».

En plus des valeurs ci-dessus, ajoutez le lien Full Scope Value créé précédemment à la propriété `scope`. Pour le trouver dans le portail Azure AD B2C, accédez à la page « Exposer une API », puis cliquez sur la portée que vous avez définie précédemment. Dans la fenêtre modale, copiez le lien qui apparaît sous « Nom de la portée ». Dans l’ensemble, cela ressemblera à ceci:

scope: 'openid offline_access email profile https://orgname.onmicrosoft.com/api/user_impersonation',

Les URL de découverte peut être trouvé en accédant à la page principale Azure AD B2C -> Stratégies -> Flux d’utilisateurs -> [Select User Flow] -> Onglet Présentation -> Bouton Exécuter le flux utilisateur. Le lien de découverte se trouve en haut de la page et ressemblera au format suivant :

https://B2C-TENANT-NAME.b2clogin.com/B2C-TENANT-NAME.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=POLICY-NAME

B2C-NOM DU LOCATAIRE est votre nom de locataire et le NOM DE LA POLITIQUE est le nom du flux d’utilisateurs créé précédemment.

La configuration mobile native est presque la même que sur le Web. Faites une copie de la configuration Web, puis modifiez les URL de redirection et de déconnexion. Utilisez la même valeur de variable AUTH_URL_SCHEME (App Id) depuis l’installation du plug-in Auth Connect. Par exemple, « com.company.app:// » plus le nom de la page de connexion. Changez la plate-forme en « condensateur » :

export const azureNativeConfig : IonicAuthOptions = {
  platform: 'capacitor',
  redirectUrl: 'com.company.app://login',
  logoutUrl: 'com.company.app://logout'
	
  // snip - other variables
}

Créer un service d’authentification pour la fonctionnalité de connexion

Avec les configurations d’environnement Azure AD ajoutées à l’application Ionic, nous pouvons désormais les exploiter dans un Service d’authentification classe qui encapsule la fonctionnalité de connexion d’Azure AD et d’Ionic Auth Connect.

Générez cette classe en utilisant le génération ionique commander:

ionic generate service services/authentication

S’ouvrir src/app/services/authentication.service.ts et importez Auth Connect, RxJs (pour suivre les changements de statut de connexion) et les objets de configuration Azure AD que nous venons de créer :

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { IonicAuth } from '@ionic-enterprise/auth';
import { Subject, Observable } from 'rxjs';
import { azureNativeConfig, azureWebConfig } from '../../environments/environment';

Ensuite, étendez la classe IonicAuth afin d’accéder à la fonctionnalité d’Auth Connect, et dans le constructeur, instanciez-la avec l’objet de configuration Azure approprié. Utilisation d’Ionic API de plate-forme, nous pouvons choisir dynamiquement la configuration à utiliser selon que l’application s’exécute sur le Web ou sur un appareil mobile.

export class AuthenticationService extends IonicAuth {
  constructor(platform: Platform) {
    // Determine whether to run on mobile or the web
    const selectedConfig = platform.is('hybrid') ? azureNativeConfig : azureWebConfig;
    super(selectedConfig);
}

L’implémentation de la fonctionnalité de connexion est assez simple – nous définissons notre propre méthode de connexion puis appelons la méthode de connexion d’Auth Connect.

async login(): Promise {
  await super.login();
}

Une fois la connexion réussie, Auth Connect appelle l’événement « onLoginSuccess », que nous pouvons remplacer ici pour exécuter toute logique supplémentaire dont nous avons besoin. Dans ce cas, nous pouvons émettre un événement RxJs lorsque le statut de connexion change (connecté ou déconnecté) puis réagir en conséquence (diriger l’utilisateur vers l’application ou revenir à la page de connexion).

onLoginSuccess() {
    this._loginStatusChanged.next(true);
}

Définissez le changement de statut observable juste en dessous de la définition de classe :

 // Emit event when login status changes 
  private _loginStatusChanged: Subject;

  get loginStatusChanged(): Observable {
    return this._loginStatusChanged.asObservable();
  }

Pour détecter et agir sur le changement de statut de connexion, rendez-vous sur `app.component.ts` dans `src/app`. Importez la classe AuthenticationService, puis abonnez-vous au changement de statut observable :

import { AuthenticationService } from './services/authentication.service';

// snip

constructor(

    private auth: AuthenticationService,
    private navController: NavController,
    private platform: Platform
  ) {

    this.initializeApp();

    this.auth.loginStatusChanged.subscribe(authenticated => 
         this.handleAuthChange(authenticated));
  }

Ensuite, ajoutez une méthode qui inspecte l’état de la tentative de connexion. En cas de succès, redirigez l’utilisateur vers la page d’accueil, sinon, restez sur la page de connexion :

private handleAuthChange(authenticated: boolean) {
    if (authenticated) {
      this.navController.navigateRoot(['home']);
    } else {
      this.navController.navigateRoot(['login']);
    }
  }

La dernière étape est simple : tirer parti du service d’authentification à partir de la page de connexion (`src/app/login/login.page.ts`). Tout d’abord, ajoutez un gestionnaire de clics au bouton Connexion :


   Log in

Ensuite, ajoutez une nouvelle méthode pour appeler la méthode de connexion d’AuthenticationService :

async login() {
  await this.authService.login();
}

Juste une dernière étape nécessaire. Lors de l’exécution en tant qu’application web, l’utilisateur sera redirigé vers la page de connexion Azure AD. Une fois la connexion réussie, ils seront renvoyés à l’application Ionic et, puisqu’il s’agit d’un «nouveau» chargement de la page, nous devons transmettre le jeton d’accès à Auth Connect. Pour ce faire, transmettez l’url du navigateur à la fonction `handleCallback` d’Auth Connect :

async ngOnInit() {
    if (window.location.hash) {
        await this.authService.handleCallback(window.location.href);
    }
}

Une fois handleCallback terminé, Auth Connect appelle `onLoginSuccess()` dans la classe AuthenticationService, qui déclenche l’événement de changement d’état de connexion, permettant finalement à l’utilisateur d’accéder à la page d’accueil.

C’est ça! Cliquez sur le bouton Connexion dans le navigateur, connectez-vous à l’aide de vos informations d’identification Azure AD B2C, puis vous devriez être redirigé vers l’application Accueil.

Afficher les détails de l’utilisateur Azure AD

La connexion est agréable, mais et si nous allions plus loin en affichant certains des détails du profil de l’utilisateur Azure AD sur la page d’accueil ?

De retour dans AuthenticationService, déclarez une nouvelle méthode pour récupérer les informations de profil de l’utilisateur à partir d’Azure. Accédez à toutes les informations via la fonction « getIdToken » d’Auth Connect :

async getUserInfo() {
    const idToken = await this.getIdToken();
    if (!idToken) {
      return;
    }

    let email = idToken.email;

    if (idToken.emails instanceof Array) {
      email = idToken.emails[0];
    }

    return {
      id: idToken.sub,
      email: email,
      firstName: idToken.given_name,
      lastName: idToken.family_name,
      picture: "assets/user-placeholder.jpg"
    };
  }

Ensuite, dans la page d’accueil (`src/app/home/home.page.ts`), appelez `getUserInfo` lorsque la page se charge :

user: any;

constructor(private authService: AuthenticationService) { }

async ngOnInit() {
    this.user = await this.authService.getUserInfo();
}

Pour terminer, mettez à jour le modèle HTML de la page d’accueil afin qu’il affiche désormais les informations de profil de l’utilisateur :


  
Application mobile: Ajout de la connexion Azure AD B2C à une application mobile hybride à l'aide d'Ionic Auth Connect

{{ user.firstName}} {{ user.lastName }}

{{ user.email }}

Log out

Si vous exécutez toujours « ionic serve », enregistrez tous les fichiers, puis la page devrait se recharger, affichant les détails de votre profil utilisateur Azure AD.

Implémentation de la déconnexion

La dernière étape consiste à ajouter une fonctionnalité de déconnexion. Puisque nous sommes déjà dans le code de la page d’accueil, ajoutez une nouvelle fonction qui appelle directement la fonction `logout` d’Auth Connect :

async logout() {
    await this.authService.logout();
  }

De retour dans AuthenticationService, implémentez l’événement « onLogout » d’Auth Connect, qui se déclenche une fois qu’il a réussi à déconnecter l’utilisateur actuel. Tout ce que l’application a à faire est de déclencher l’événement de changement d’état de connexion, en passant « false » pour indiquer que l’utilisateur n’est plus connecté :

onLogout() {
    this._loginStatusChanged.next(false);
  }

Rappelons que cet événement sera intercepté dans `app.component.ts`, et comme « authentifié » est maintenant faux, l’utilisateur sera redirigé vers la page de connexion :

private handleAuthChange(authenticated: boolean) {
    if (authenticated) {
      this.navController.navigateRoot(['home']);
    } else {
      this.navController.navigateRoot(['login']);
    }
  }

Rechargez la page, cliquez sur le bouton Déconnexion, et vous devriez être déconnecté puis redirigé vers la page de connexion.

Et après?

En quelques étapes seulement, nous avons ajouté l’authentification Azure AD B2C à une application Ionic, avec des fonctionnalités complètes de connexion et de déconnexion. Avec Auth Connect maintenant en place, il existe de nombreux chemins à parcourir à partir d’ici. Vous pouvez affiner davantage l’expérience utilisateur Azure AD (comme la personnalisation de l’interface utilisateur) ou commencez à tester Auth Connect dans une application native tout de suite.

À propos de Ionic Auth Connect

Auth Connect est construit et maintenu par l’équipe Ionic. Ionic crée des outils et des services qui permettent aux développeurs Web de fournir de superbes applications mobiles et Web natives, en utilisant les outils Web, les bibliothèques et les frameworks qu’ils connaissent et aiment. Notre environnement d’exécution natif multiplateforme, Capacitor, offre un moyen sécurisé de fournir des applications Web sur un appareil mobile. Lorsqu’il est associé à la solution Auth Connect d’Ionic, la mise en œuvre de l’authentification unique dans les applications Web est encore plus facile.

Bonne création d’applications !

#Ajout #connexion #Azure #B2C #une #application #mobile #hybride #laide #dIonic #Auth #Connect