L'authentification des utilisateurs est une exigence fondamentale dans presque toutes les applications mobiles d'entreprise. Pour les applications mobiles internes telles que celles liées à la paie, à la congé et à la réservation de voyages commerciaux, les organisations souhaitent tirer parti d'un seul signe en authentifiant les utilisateurs contre son serveur LDAP sur site. Et pour les applications ciblées pour mettre fin aux utilisateurs où les données de l'entreprise ne sont pas exposées, par exemple, une application pour les utilisateurs de produits qui leur permet de soulever des demandes de service, permettant aux utilisateurs d'authentifier en utilisant leur connexion sociale telle que la connexion Facebook / la connexion Google serait beaucoup plus facile. Ce modèle de code montre comment les développeurs peuvent tirer parti du service IBM Mobile Foundation pour implémenter les mécanismes d'authentification des utilisateurs suivants:
Lorsque vous aurez terminé ce modèle de code, vous comprendrez:

Le diagramme ci-dessus illustre le flux de connexion (ici décrit avec Google mais également pertinent pour Facebook ou d'autres fournisseurs sociaux). Le diagramme montre que le déclencheur pour appeler les fournisseurs sociaux est lancé par le client.

1. Configuration Ionic et MobileFoundation CLI
2. Créez une base de données Cloudant et remplissez-la avec des exemples de données
3. Créez le service de stockage d'objets IBM Cloud et remplissez-les avec des exemples de données
4. Créer un service de fondation mobile et configurer la CLI MFP
5. Configuration du serveur LDAP et client Secure Gateway
6. Enregistrer l'application Android avec Google et Facebook pour la connexion sociale
7. Téléchargez la source Repo et personnalisez
7.1 Repo de clone
7.2 Mettre à jour l'ID de l'application, le nom et la description
7.3 Spécifiez les informations d'identification Cloudant dans l'adaptateur MobileFoundation
7.4 Spécifiez les informations d'identification de stockage d'objets cloud dans l'adaptateur MobileFoundation
7.5 Spécifiez les informations d'identification LDAP dans l'adaptateur MobileFoundation
7.6 Spécifiez les informations d'identification de connexion Google dans l'adaptateur Moilefoundation
7.7 Spécifiez le Facebook AppID et Google ClientId dans l'application ionique
8. Déployer les adaptateurs de la finition mobile et tester
8.1 Créer et déployer les adaptateurs de finition mobile
8.2 Lancez le tableau de bord mobilefoundation et vérifiez les configurations de l'adaptateur
9. Exécutez l'application sur le téléphone Android
Ce projet s'appuie sur https://github.com/ibm/ionic-mfp-app. Exécutez les étapes suivantes de ce projet de base pour fournir les services backend mobiles nécessaires d'IBM Cloud et les remplir avec des exemples de données, ainsi que pour configurer Ionic et MobileFoundation CLI sur votre machine de développement.
Étape 1. Configuration Ionic et MobileFoundation CLI
Étape 2. Créez une base de données Cloudant et remplissez-la avec des exemples de données
Étape 3. Créez le service de stockage d'objets IBM Cloud et remplissez-le avec des exemples de données
Étape 4. Créez un service de fondation mobile et configurez MobileFoundation CLI
Si vous avez votre configuration et exécution de serveur LDAP Enterprise, vous pouvez ignorer le reste de cette section et passer à la section «Configuration du client Secure Gateway». Si vous n'avez aucune configuration de serveur LDAP, vous pouvez essayer d'installer ApachedS - https://directory.apache.org/apached. Le guide d'installation et de configuration de base pour Apached est disponible sur - https://directory.apache.org/apacheds/basic-user-guide.html (veuillez vous référer à la section 1). Importez les exemples de données disponibles ici en suivant les étapes ici. Ajoutez une nouvelle entrée avec vos coordonnées, par exemple,
Pour pouvoir accéder à votre serveur LDAP sur site à partir du serveur de fondation mobile en cours d'exécution sur IBM Cloud, nous devons d'abord créer une connexion de passerelle sécurisée entre le serveur LDAP sur site et le cloud IBM selon les étapes suivantes:
Connectez-vous à IBM Cloud. Cliquer sur
Catalog > All Categories > Integration > Secure Gateway > Create
À l'intérieur du tableau de bord Secure Gateway Service, cliquez sur Add Gateway . Spécifiez un nom et cliquez sur Add Gateway . Cliquez sur l'icône de la passerelle que vous venez d'ajouter.
Cliquez sur Add Clients . Laissez la sélection par défaut de IBM Installer tel quel. Notez l' Gateway ID et Security Token .
Copiez l'URL de téléchargement pour l'installateur client Secure Gateway pour le système d'exploitation où le serveur LDAP s'exécute.
Connectez-vous à la machine sur site où le serveur LDAP s'exécute. Téléchargez le programme d'installation du client Secure Gateway à l'aide de l'URL de téléchargement obtenu à partir du tableau de bord Secure Gateway. Installez et démarrez le client Secure Gateway en utilisant des instructions disponibles ici.
Ajoutez le serveur LDAP comme destination dans le client Secure Gateway en utilisant les instructions disponibles ici. Si la destination nouvellement ajoutée affiche une main surélevée en couleur rouge avec Access blocked by ACL , assurez-vous que vous avez exécuté acl allow < host >:< port > dans la ligne de commande du client Secure Gateway.
hostname:port de serveur LDAP. 

$ git clone https://github.com/IBM/MFP-Auth-LDAP
$ cd MFP-Auth-LDAP
Mettre à jour IonicMobileApp/config.xml comme ci-dessous. Modifier les détails id , name , de description et author .
<?xml version='1.0' encoding='utf-8'?>
<widget id="org.mycity.myward" version="2.0.0" xmlns="https://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:mfp="http://www.ibm.com/mobilefirst/cordova-plugin-mfp">
<name>MyWard</name>
<description>Get your civic issues resolved by posting through this app.</description>
<author email="[email protected]" href="https://developer.ibm.com/code/author/shivahr/">Shiva Kumar H R</author>
...
Open MobileFoundationAdapters/MyWardData/src/main/adapter-resources/adapter.xml et mettez à jour les propriétés suivantes pour pointer la base de données Cloudant créée à l'étape 2.
key et password avec la touche API Cloudant comme généré à l'étape 2.2.account de propriété, spécifiez la partie URL du tableau de bord Cloudant jusqu'à (et y compris) -Bluemix.cloudant.com comme indiqué dans l'instantané de l'étape 2.2.DBName de propriété, laissez la valeur par défaut de myward tel quel.
<mfp:adapter name="MyWardData" ...>
<property name="account" displayName="Cloudant account" defaultValue=""/>
<property name="key" displayName="Cloudant key" defaultValue=""/>
<property name="password" displayName="Cloudant password" defaultValue=""/>
<property name="DBName" displayName="Cloudant DB name" defaultValue="myward"/>
...
</mfp:adapter>
Ouvrez MobileFoundationAdapters/MyWardData/src/main/adapter-resources/adapter.xml et mettez à jour les propriétés suivantes pour pointer le stockage d'objets cloud créé à l'étape 3.
bucketName comme créé à l'étape 3.1.serviceId et apiKey créés à l'étape 3.2.endpointURL selon la spécification dans https://cloud.ibm.com/docs/services/cloud-object-storage/basics/endpoids.html#select-regions-and-endpoint.
<mfp:adapter name="MyWardData" ...>
...
<property name="endpointURL" displayName="Cloud Object Storage Endpoint Public URL" defaultValue="https://s3-api.us-geo.objectstorage.softlayer.net"/>
<property name="bucketName" displayName="Cloud Object Storage Bucket Name" defaultValue=""/>
<property name="serviceId" displayName="Cloud Object Storage Service ID" defaultValue="" />
<property name="apiKey" displayName="Cloud Object Storage API Key" defaultValue=""/>
</mfp:adapter>
Open MobileFoundationAdapters/LDAPLoginAdapter/src/main/adapter-resources/adapter.xml et mettre à jour les propriétés suivantes pour pointer le client de passerelle sécurisé créé à l'étape 5.2
<property name="ldapUserAttribute" defaultValue="uid" displayName="The LDAP attribute for username"/>
<property name="ldapNameAttribute" defaultValue="cn" displayName="The LDAP attribute for display name"/>
<property name="ldapURL" defaultValue="ldap://caplonsgprd-5.integration.ibmcloud.com:15315" displayName="The LDAP Server URL"/>
<property name="userFilter" defaultValue="(&(uid=%v))" displayName="The LDAP user filter, use %v as placeholder for user"/>
<property name="bindDN" defaultValue="uid=admin,ou=system" displayName="The LDAP bind DN (- for none)"/>
<property name="bindPassword" defaultValue="apacheds" displayName="The LDAP bind password (- for none)" type="string"/>
Open MobileFoundationAdapters/SocialLoginAdapter/src/main/adapter-resources/adapter.xml et mettre à jour le client Google créé à l'étape 6 comme indiqué ci-dessous
<property name="google.clientId"
defaultValue="618106571370-nie902ccc0i3id6sgdu4nc58bslabcde.apps.googleusercontent.com"
displayName="google client Id"
description="OAuth 2.0 client ID that was created for your server. Get it from Google Developers Console
at https://console.developers.google.com/projectselector/apis/credentials"/>
Installez le plugin Cordova et Ionic Facebook et le plugin Googleplus à l'aide des commandes suivantes (Python2 est un pré-requis)
$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="your_appid_from_step6" --variable APP_NAME="your application name"
$ npm install --save @ionic-native/facebook
$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID="reverseclientid_from_step6"
$ npm install --save @ionic-native/google-plus
Une fois les plugins Facebook et Googleplus installés, vérifiez si l'ID d'application Facebook et Google WebClientid obtenus à l'étape 6 sont présents dans le fichier config.xml comme indiqué ci-dessous
<plugin name="cordova-plugin-facebook4" spec="^1.9.1">
<variable name="APP_ID" value="your_appid" />
<variable name="APP_NAME" value="MyWard" />
</plugin>
<plugin name="cordova-plugin-googleplus" spec="^5.3.0">
<variable name="REVERSED_CLIENT_ID" value="your_reverse_clientid" />
</plugin>
Le REVERSED_CLIENT_ID est la forme inverse de Google WebClientId obtenue dans Step6.
Ajoutez également le webClientid dans le fichier auth_handler.ts dans la méthode GooglePluslogin ().
Construisez et déployez l'adaptateur MyWardData comme ci-dessous.
$ cd MobileFoundationAdapters/
$ cd MyWardData
$ mfpdev adapter build
$ mfpdev adapter deploy
Remarque - Si le serveur n'est pas par défaut, veuillez mentionner le nom du serveur «Commande de déploiement de l'adaptateur MFPDEV» dans la commande.
Créer et déployer l'adaptateur LDAPLoginAdapter comme ci-dessous.
$ cd ../LDAPLoginAdapter/
$ mfpdev adapter build
$ mfpdev adapter deploy
Créer et déployer l'adaptateur SocialLoginAdapter comme ci-dessous.
$ cd ../SocialLoginAdapter/
$ mfpdev adapter build
$ mfpdev adapter deploy
Lancez le tableau de bord MobileFoundation comme ci-dessous:
Cloud Foundry Services , cliquez sur le service Mobile Foundation que vous avez créé à l'étape 4. La page de vue d'ensemble du service qui est affiché, aura le tableau de bord MobileFoundation intégré. Vous pouvez également ouvrir le tableau de bord MobileFoundation dans un onglet de navigateur séparé en ajoutant /mfpconsole à l' URL mentionnée à l'étape 4.LDAPLoginAdapter , SocialLoginAdapter et MyWardData .Vérifiez la configuration de l'adaptateur MobileFoundation comme ci-dessous:
MyWardData . Sous l'onglet Configurations , vous devriez voir les différentes propriétés que nous avons spécifiées à l'étape 7.3 et étape 7.4 pour accéder à la base de données Cloudant et au stockage d'objets cloud comme indiqué ci-dessous. Comme alternative à la spécification de ces valeurs de propriété dans MobileFoundationAdapters/MyWardData/src/main/adapter-resources/adapter.xml Comme indiqué précédemment à l'étape 7.3 et à l'étape 7.4, vous pouvez déployer les adaptateurs avec defaultValue vide, et une fois l'adaptateur déployé, modifiez les valeurs sur cette page. 
Resources . Vous devriez voir les différentes API REST exposées par l'adaptateur MyWardData comme indiqué ci-dessous. La colonne Security doit afficher la portée de protection UserLogin contre chaque méthode de repos. 


Suivez les instructions à l'étape 7 du projet de base pour exécuter l'application sur Android Phone. Au lieu d'un userlogin simple, testez le bouton de connexion Google ou le bouton de connexion FB ou le bouton LDAPLogin. Basé sur le bouton choisi, le mécanisme de validation d'authentification de l'utilisateur variera.

La capture d'écran ci-dessous montre les différentes pages de l'application.



Veuillez consulter les instructions de débogage de l'application hybride Android à l'aide d'outils de développeur Chrome ou de guide de dépannage pour les solutions à certains problèmes courants.
Apache 2.0