Fermer

mai 21, 2018

Authentification d'entreprise avec Kinvey


Dans le développement de l'entreprise, il y a des choses qui sont difficiles et il y a des choses qui sont vraiment difficiles. Cela est généralement dû à la complexité de l'échelle et à la prolifération de différents systèmes dans les grandes entreprises. Dans ma propre expérience, faire en sorte que les systèmes se parlent les uns aux autres peut être suffisant pour que les développeurs aient envie de se tirer les cheveux.

La bonne nouvelle est que Progress Kinvey offre de multiples outils un développeur d'entreprise beaucoup plus facile, en particulier lorsqu'il s'agit d'intégrer des systèmes complexes. Par exemple, dans mon post précédent j'ai montré comment Kinvey vous permet de «mobiliser» facilement vos données RDBMS d'entreprise existantes. Dans cet article, je souhaite montrer comment Kinvey peut également simplifier la connexion d'un système d'authentification d'entreprise existant avec votre application mobile ou Web en utilisant une fonctionnalité appelée Mobile Identity Connect .

J'ai également parlé de Mobile Identity Connect dans un publication antérieure sur Comprendre les utilisateurs dans Kinvey .

Quelle authentification d'entreprise?

Notre exemple va se connecter en se connectant à Azure Active Directory . J'ai choisi cela en grande partie parce qu'il offre aux lecteurs un moyen facile de recréer les étapes et l'application si elles choisissent de le faire elles-mêmes. Évidemment, il est important de souligner que les étapes peuvent différer selon le type de système d'authentification utilisé par votre entreprise.

Actuellement, vous pouvez connecter Kinvey à un service d'authentification par l'une des méthodes suivantes:

 new- auth-service "title =" nouveau-auth-service "/> </p>
<p> Si vous ne voyez pas votre option dans cette liste, gardez à l'esprit que l'option Flex <a href= Flex Runtime fonctionne comme une option personnalisée peut gérer potentiellement tous les scénarios non couverts par les autres options.

Dans notre exemple, je vais parcourir la connexion Azure AD via OpenID Connect.

Configuration d'Azure Active Directory

L'installation d'Azure AD est probablement la Cela ne veut pas dire que c'est difficile, mais simplement qu'il y a un certain nombre d'étapes pour que tout soit correctement configuré.

  1. À partir du portail Azure cliquez sur Azure Active Directory ou cliquez sur + Nouveau et recherchez f ou Azure Active Directory.
     AzureAD "title =" AzureAD "/> </li>
<li> Choisissez l'option" App Registrations "et" Enregistrement d'une nouvelle application ". <img decoding= https://auth.kinvey.com .  create-application "title =" create-application "/> </li>
<li> Une fois créé, choisissez" Reply URLs. "<img decoding= https://auth.kinvey.com/oidc/redirect (voir docs )  reply-urls "title =" reply-urls "/> </li>
<li> Retour à les paramètres de l'application, choisissez "Autorisations requises", puis "Windows Azure Active Directory". <img decoding= Ronald Heiney pour son aide dans la détermination de ces étapes.

    Configuration de Mobile Identity Connect

    la console Web Kinvey vous devez choisir l'option Connexion mobile à partir de la navigation de gauche. Ensuite, cliquez sur le bouton "Ajouter un service d'authentification". De là, vous verrez toutes les options discutées plus tôt dans cet article.

     nouveau-auth-service "title =" nouveau-auth-service "/> </p>
<p> Choisissez l'option" OpenID Connect ". regardez mes paramètres de service d'authentification, puis discutez de chaque champ et comment l'obtenir à partir d'Azure </p>
<p> <img decoding= http: // localhost: 8080 ).

  2. Les bonnes nouvelles sont que le lot suivant de propriétés peut tout être trouvé dans un seul endroit sur Azure. Les mauvaises nouvelles sont que (d'après mon expérience) trouver cet emplacement est un peu compliqué. Permettez-moi de le parcourir.

    La documentation montre que le document de métadonnées Open ID Connect peut être trouvé à:

    La partie délicate semble être de trouver votre locataire remplir l'URL. Il y a une page complète de documentation montrant comment obtenir le locataire, mais j'ai réussi à trouver le mien en utilisant les étapes suivantes:

    1. Dans le portail Azure, choisissez "Azure Active Directory" puis "App Registrations" puis "Endpoints".  app-registrations-endpoints "title =" app-registrations-endpoints "/> </li>
<li> Chacun des endpoints listés inclut le locataire, dans la plupart des cas suivant immédiatement le <span style= https://login.microsoftonline.com / partie de l'URL.  points de terminaison "title =" points de terminaison "/> </li>
<li> Branchez cette valeur dans la partie <span style= {locataire} de l'URI ci-dessus.

    Maintenant que nous avoir les métadonnées, nous pouvons tirer les valeurs suivantes:

  • URI de fournisseur : Ceci est le token_endpoint à partir des métadonnées.
  • Grant Endpoint : Ceci est le authorization_endpoint de la métadonnées.
  • Identificateur de l'émetteur : Ceci est la valeur de émetteur tirée des métadonnées.

Ok, nous avons presque terminé. Il y a juste quelques champs à compléter.

  • ID du client : Il s'agit de l'ID d'application dans Azure Active Directory "App Registrations".  ApplicationID "title =" ApplicationID "/> </li>
<li> <strong> Client Secret </strong>: Ceci est le secret que nous avons copié lorsque nous avons créé la clé d'application dans Azure plus tôt. <img decoding= Tester le service

    Avant de sauter au code, il vaudrait la peine de tester notre service. De cette façon, nous pouvons être sûrs que si nous rencontrons des problèmes, ils sont dans notre code et pas dans notre configuration.

    Depuis la console du navigateur Kinvey, cliquez sur l'option "API Console" puis cliquez sur "Afficher Options "lien

     api-console" title = "api-console" /> </p>
<p> Ensuite, cliquez sur le lien pour changer le type d'autorisation. </p>
<p> <img decoding= e App

    À titre d'exemple, j'ai créé un écran de connexion très simple qui utilise le service d'authentification Mobile Identity Connect que nous venons de configurer pour se connecter à l'application. C'est une version beaucoup simplifiée de l'application construite pour mon tutoriel préalable sur l'authentification .

    Tout d'abord, bien sûr, vous devrez importer le Kinvey SDK . Ensuite, nous créons un formulaire très simple avec un bouton de connexion (le nom d'utilisateur et le mot de passe ne sont pas nécessaires puisque, comme vous le verrez, l'authentification est similaire à Microsoft via un fournisseur OAuth)

    <[19659067] div id = "encapsuleur" = "encapsuleur" >

    [ div class = "récipient" >

    < ] h1 > Bienvenue </ h1 >

    < div id = "erreur" classe = "erreur" > </ div >

    Forme classe = "forme" id [19659069] = "inscription" >

    < ou ou ou ou "bouton" id = "bouton de connexion" = "loginbutton" > bouton de connexion </ >

    forme >

    </ div >

    </ div >

    Notez que le CSS de cet exemple est essentiellement le même à partir de mon exemple de connexion précédent avec des styles inutiles supprimés. Pour économiser de l'espace, je ne répète pas le CSS complet ici.

    Le JavaScript est assez simple aussi. Jetons un coup d'oeil et ensuite je vais le parcourir.

    var client = Kinvey.init ({

    AppKey: 'kid_rJf4EsJ8f'

    AppSecret: 'cf8e49769b83466db5b34f6ce1a83b77'

    });

    // par souci de simplicité dans un exemple d'application, je suis toujours connecté sortie de l'utilisateur lorsque la page est chargée

    var promesse = Kinvey.User.logout ();

    // connexion à l'aide de l'authentification Kinvey

    document.getElementById ( 'login-button' ). AddEventListener ( 'clic' fonction [19659069] (événement) {

    var utilisateur = nouveau Kinvey.User ();

    var promesse = utilisateur.loginAvecMIC (window.location.href);

    [19659076] promise.then ( fonction onSuccess (utilisateur) {

    connexionSuccess ();

    console.log (utilisateur);

    }). 19659069] ( function onErreur (erreur) {

    document.getElementById ( 'erreur' ) .innerHTML = erreur.message;

    });

    });

    [19459048Signalezlecommentaire] loginSuccess () {

    document.getElementById ( 'd'inscription' ). classList.add ( ' fadeout ');

    document.getElementById (' wrapper '). classList.add () 'forme-succès' );

    }

    Bien sûr, d'abord j'initialise le SDK Kinvey en utilisant mes applKey et appSecret. En outre, comme il s'agit d'une application simple qui enregistre uniquement quelqu'un, je la "réinitialise" tout de suite en veillant à ce que tout utilisateur existant soit déjà déconnecté.

    Le code de connexion actuel est juste quelques lignes, nous créons un nouvel utilisateur, puis appelez la méthode loginWithMIC () en passant notre callback (c'est-à-dire l'URL actuelle dans ce cas). Si la connexion est réussie, nous montrons une animation, sinon nous affichons les erreurs renvoyées directement sur la page.

    Voyons comment cela fonctionne en action (puisque vous ne pouvez évidemment pas vous connecter à mon AD, je vais démontrer avec une animation)

     Enterprise-login "title =" Enterprise-login "/> </p>
<h2 id= Étapes suivantes

    Bien que ce soit un exemple simple, les étapes spécifiques répertoriées ici sont spécifiques à Azure Active Directory. Les mêmes principes s'appliquent à toutes les options d'authentification prises en charge Même si votre authentification d'entreprise est un système Active Directory interne, vous pouvez toujours utiliser Mobile Identity Connect pour permettre aux employés de l'entreprise de s'authentifier facilement dans vos applications Web et mobiles. Oui, il peut y avoir certaines règles de pare-feu nécessaires pour autoriser l'accès à Kinvey, mais, tout comme les étapes de configuration de l'exemple ci-dessus, vous pouvez facilement avoir une expérience de connexion unifiée dans toutes vos applications d'entreprise. [19659002]JE Si vous souhaitez en savoir plus sur la façon d'ajouter ces fonctionnalités à votre application mobile d'entreprise à l'aide de NativeScript, consultez ce cours en ligne gratuit .




Source link