Concepteur de logiciels experts
Sélectionner votre langue
Plier/DéplierSalon 'Le Mans connection 2015" - 02/07/2015

Nous avons eu le plaisir de participer à la 4ème édition du salon 'Le Mans Connection' 2015.

Nous remercions tous nos visiteurs pour l'intérêt qu'ils ont porté à nos produits et les organisateurs pour cette très belle occasion qui nous a permis de rencontrer beaucoup de personnes avec des métiers très divers. Merci

Stand de technofactory

ASP.NET Identity sous Visual Studio 2012 - 19/03/2015Montrer le blog

ASP.NET Identity avec Microsoft  Visual Studio 2012 et MVC5

Introduction

Si vous utilisez toujours ‘Visual Studio 2012’ et si vous voulez intégrer une identification dans votre site Internet vous pouvez utiliser ‘ASP.Net identity’ avec ‘EntityFramework’. Contrairement aux versions plus récentes de ‘Visual Studio’, il n’existe pas de modèle de projet par défaut pour ce type de projet.

Nous allons donc montrer comment intégrer manuellement ce ‘Framework’.

Je pars du principe que vous avez des bases sur l'utilisation de ‘VisualStudio’, de ‘C#’, ‘ASP.NET’, ‘MVC’ et de la programmation orienté objet.

Vous pouvez télécharger ce document sous forme de fichier ‘.pdf’  à l’adresse suivante : http://www.technofactory.fr/Blogdocs/ASPNetIdentityVS2012/ASP identity VS2012.pdf

Note : la correction automatique d’orthographe modifie par fois le code source que j’ai mis dans ce document. Il est préférable d’utiliser le code source du projet exemple.

 

Utilisation du projet exemple

Le projet d’exemple ce trouve ici : http://www.technofactory.fr/Blogdocs/ASPNetIdentityVS2012/aspNetIdentityExemple.zip

L’utilisation de l’exemple nécessite que  ‘VS2012’ et ‘Sql Serveur’ soient installés.

Décompressez l’archive sur votre disque, chargez la solution avec ‘Visual Studio’ et modifiez la chaine de connexion  (voir ci-dessous) dans le fichier  ‘Web.Config’.

Installation des prérequis

 

Mise à jour Visual Studio

 

D’abord on va commencer par créer un projet ‘MVC 5’ sous ‘Visual Studio 2012’. Cela nécessite d’installer ‘Web Tools pour VS2012’. Il s’agit d’une mise à jour de ‘Visua lStudio 2012’.

Il peut être installé avec le ‘Web Plateform Installer’ ( Web PI) que vous pouvez obtenir ici : http://www.microsoft.com/web/downloads/platform.aspx.

Note : d’une façon générale, il est utile d’installer le ‘Web Plateform Installer – Web PI’. La page (en anglais) n’est pas très intuitive et pour lancer le téléchargement il faut cliquer sur ‘Free Download’.  Une fois le programme téléchargé, lancez l’installation qui se termine par une liste d’applications que vous pouvez installer.

Cherchez ensuite ‘Web Tools’ et ajoutez ‘ASP.NET and Web Tools 2013.1 for Visual Studio 2012’ et ‘Installer’.

 Texte de remplacement généré par une machine : O Web Platform Installer 5.0
Q Résultats de la recherche de web tools
p
4 vsxlslidc
Dl
ni
a
—
[.
Ajouter
.]
ASP.NET and Web Tools 2012.2
Visual Studio Express 2012 for Web with Microsoft Azure SDK - 2.5
Windows PowerShell 3.0
Microsoft Azure SDK - 2.5 for Visual Studio 2015
Microsoft Azure SDK - 2.5 for Visual Studio 2013
SepPortal (Anglais)
Visual Studio community Edition 2013
Windows PowerShell 3.0
Visual Studio Express 2012 for Web with Microsoft Azure SDK - 2.4
Microsoft Azure SDK - 24.1
sen
Dl
I’,
Dl
a
—
29/04/2013
12/11/2014
26/07/2012
12/11/2014
12/11/2014
19/09/2014
12/11/2012
22/08/2013
04/08/2014
05/09/2014
[
Ajouter
]
[
Ajouter
j
[
Ajouter
j
[
Ajouter
ZI
L
Ajouter
ZEI
[
Ajouter
j
[
Ajouter
J
[
Ajouter
]
[
Ajouter
]
[ Quitter
1 Éléments à installer
Options
Installer

 

 

 

 

Création d’une application MVC 5 pour le test

 

Lancez ‘Visual Studio’ et créez un nouveau projet : Fichier->Nouveau->Projet et sélectionnez : Projet vide ASP.NET Mvc5.

Ici le nom du projet et de la solution sont ‘TestIdentityMvc5’.

 

Texte de remplacement généré par une machine : [Nwapja _______ ___
—--
_____________________ _______ ___________ ________ L
P Récent .NET Framework 45 e Trier par: Par défaut ;;  Rechercher Modéles installé (Ctrl+E) P ]
Installé Application Web ASP.NET vide Visual CS Type: Visual CS
A Modèles Projet de création d’une application à
A Visual CS Application Web Forms ASP.NET Visual CS l’aide d’ASP.NET MVC 5
Windows
Cu
! [ Web Application Web ASP.NET MVC 3 Visual CS
P Office
Cloud Application Web ASP.NET MVC 4 Visual CS
NuGet
Reporting Projet vide ASP.NET MVC 5 J- Visual CS
L SharePoint
Silverlight ProjetvideASP.NETWebAPI2 Visual CS
Test
Worlow L.) Application Web Dynamic Data ASP,NET Entities Visual CS
WCF
‚ HDlnsight
LightSwitch Contrôle de serveur ASP.NET AJAX Visual CS
r> Autres langages
I> Autres types de projets Contrôle serveur ASP,NET Visual CS
Projets de modélisation
T A Échantillons Extendeur de contrôle serveur ASP.NET AJAX Visual CS
P Visual C++
L> En ligne
Nom: i&IdcntrLyÑivc5l
Emplacement: D\dev\examples\ __________
[ Parcourir...__1
Nom de solution:   Créer un répertoire pour la solution
fl Ajouter au contrôle de code source
OK , Annuler j

 

Le projet ne contient rien, donc il faut ajouter un contrôleur avec le nom ‘DefaultController’ (clic droit sur le dossier ‘Controllers  -> Ajouter -> Contrôleur’). Sélectionnez ‘Contrôleur MVC 5 – Vide’, puis 'Ajouter'.

Texte de remplacement généré par une machine :

 

Le système vous demandera le nom du contrôleur : spécifiez 'DefaultController', puis 'Ajouter'.

 

Ajoutez une source de données statique pour avoir quelque chose à afficher sur la page: clic droit sur le dossier Models -> Ajouter -> Classe et créez la classe ‘DataItem’.

Pour l’exemple la classe du projet d’exemple ressemble à celle-ci :

namespace TestIdentityMvc5.Models
{
    /// <summary>
    /// Classe contient des données d'exemple
    /// </summary>
    public class DataItem
    {
 
        public static DataItem[] DataItems = { new DataItem("ABCD","42")
                                               ,new DataItem("EFGH","45")
                                               ,new DataItem("IJKLM","25")};
 
        /// <summary>
        /// Obtient le nom de la personne
        /// </summary>
        public string Name { get; private set; }
 
        /// <summary>
        /// Obtient l'âge de la personne
        /// </summary>
        public string Age { get; private set; }
 
        /// <summary>
        /// Constructeur initialise les valeurs de la classe
        /// </summary>
        public DataItem(string name, string age)
        {
            Name = name;
            Age = age;
        }
    }
}

Maintenant on va ajouter une vue pour afficher nos données d’exemple.

Clic droit sur le répertoire  ‘Views/Default’ -> Ajouter Vue. Nom de la vue ‘Index’, choisissez le modèle ‘Empty (sans modèle)’.

Note : le répertoire ‘Default’ a été créé quand vous avez créé le contrôleur.

 

Les fichiers suivants ont été créés : ‘Index.cshtml’ dans le dossier ‘Default’, ‘_Layout.cshtml’ dans le dossier ‘Shared’ and ‘ViewStart.cshtml’ directement sous ‘Views’.

Modifiez ‘Index.cshtml’ pour afficher nos données comme par exemple :

 

@model  IEnumerable<TestIdentityMvc5.Models.DataItem>
@{
    ViewBag.Title = "Index";
}
 
<h2>Index</h2>
 
<table style="width: 100%">
    <caption>Liste de personnes</caption>
    <tr>
        <th>Name</th>
        <th>Age</th>    
    </tr>
    @foreach (var dataitm in Model)
    {
 
        <tr>
            <td>@dataitm.Name</td> 
            <td>@dataitm.Age</td>
        </tr>
    }    
</table> 

 

 

Modifiez ‘Controllers/DefaultController.cs’ pour passer le modèle à la vue :

Ajoutez : using TestIdentityMvc5.Models;  au début du fichier.

 

@using TestIdentityMvc5.Models;
…
public ActionResult Index()
{
   return View(DataItem.DataItems);
}
…

 

Et enfin, ajustez ‘App_Start/RouteConfig.cs ‘ pour ajuster le contrôleur  par défaut.

 

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
    routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Default", action = "Index", id = UrlParameter.Optional }
   );
}
 

 

Enfin, vous pouvez mettre à jour la solution avec les dernières versions de ASP.Net, MVC, de JQuery, etc. :

Mettez à jour l’ensemble des packages : Projet->Gérer les packages NuGet -> Mises à jour -> Tout mettre à jour.

Suite à la mise à jour il faut vérifier le fichier '_Layout.cshtml' dans le répertoire ‘Shared’.

Vérifiez que les liens vers les fichiers '*.js' (en particulier le fichier ‘jquery.js’ qui se trouve à la fin du fichier) pointent vers des fichiers qui se trouvent dans les répertoires (‘Scripts’, ‘Content’, …) de la solution. Sinon il peut y avoir des exceptions à l’exécution.

Malheureusement les versions changent tellement fréquemment qu'on ne peut plus indiquer les versions.

Vous pouvez maintenant essayer l’application. Vous devrez avoir un résultat similaire au suivant :

 

 

 

 

Installation des NuGetPackages

 

Maintenant, nous allons ajouter les ‘NuGet Packages’ nécessaires pour intégrer une authentification. L’authentification se base sur ‘OWin’.

Il y a deux possibilités : soit par la boîte de dialogue (Projet->Gérer les packages NuGet) et vous cherchez les différents packages soit par ligne de commande : Outils -> Gestionnaire de de Package NuGet -> Console du Gestionnaire de package.

Pour installer le package la commande générale est : install-package <nom du package>. Pour spécifier un projet en particulier ajoutez : -Project <le nom de votre projet>

 

  • ‘Microsoft Owin’ (recherchez ‘Owin’) - Version 3.0.0 ce jour-ci.

‘NuGet’ commande: install-package Microsoft.Owin

Texte de remplacement généré par une machine : PM> install-package Microsoft.Owin
Tentative de résolution de la dépendance « Owin ( 1.0) “.
Installation de « Owin 1.0 ».
Installation de « Owin 1.0 » terminée.
Installation de « Microsoft.Owin 3.0.1 ».
Vous téléchargez Microsoft.Owin à partir de Microsoft. le contrat de licence est disponible à l’emplacement http://www.microsoft.com/
webfwebpi/eulafnet_library_eula_enu.htm. Vérifiez si le package contient des dépendances susceptibles de faire l’objet de contrats de
licence supplémentaires. Votre utilisation du package et des dépendances confirment votre acceptation de leurs contrats de licence.
Si vous n’acceptez pas les contrats de licence, supprimez les composants correspondants de votre ordinateur.
Installation de « Microsoft.Owin 3.0.1 “ terminée.
Ajout de « Owin 1.0 » à TestldentityMvc5.
Ajout réussi de « Owin 1.0 » à TestldentityMvc5.
Ajout de « Microsoft.Owin 3.0.1 » à TestldentityMvc5.
Ajout réussi de « Microsoft.Owin 3.0.1 » à TestldentityMvc5. r N /

 

  • ‘Microsoft ASP.NEt Identity Core’ (recherchez : ‘Identity.Core’) .Version 2.2.0 ce jour-ci.

Commande: install-package Microsoft.Aspnet.Identity.Core

Texte de remplacement généré par une machine : PM> install- package Microsoft .Aspnet . Identity. CoreInstallation de « Microsoft.AspNet.Identity.Core 2.2.0 ».Vous téléchargez Microsoft.AspNet.Identity.Core à partir de Microsoft. Le contrat de licence est disponible à l’emplacement http:/!www.microsoft.com/web/webpi/eula/net_library_eula_EMU.htm. Vérifiez si le package contient des dépendances susceptibles de fairel’objet de contrats de licence supplémentaires. Votre utilisation du package et des dépendances confirment votre acceptation de leurscontrats de licence. Si vous n’acceptez pas les contrats de licence, supprimez les composants correspondants de votre ordinateur.Installation de « Microsoft.AspNet.Identity.Core 2.2.0 » terminée.Ajout de « Microsoft.AspNet.Identity.Core 2.2.0 » à TestldentityMvc5.Ajout réussi de « Microsoft.AspNet.Identity.Core 2.2.0 » à TestldentityMvc5.

 

  • Microsoft Asp.net Identity Owin’ package (recherchez ‘Identity.owin’)

Commande: install-package Microsoft.AspNet.Identity.Owin

 

  • ‘Identity EntityFramework’

Commande: install-package Microsoft.AspNet.Identity.EntityFramework