Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe

Mettre en place l’authentification avec Visual Studio 2013 partie I

Poster un commentaire

Pendant des années l’authentification dans .Net a été un fleuve assez tranquille. On avait juste à connaître IPrincipal et IIdentity.

L’arrivée des claims, des solutions de SSO, de l’authentification double facteur et du cloud bouleversent la donne, sans compter l’influence d’OWIN.

Visual Studio a fait évoluer ses templates et des possibilités nouvelles sont offertes aux développeurs.

 

Beaucoup de nouveautés assez techniques, il y a facilement de quoi se sentir perdu d’où cet article qui tente de faire un point du point de vue développeur. Donc orienté utilisation pratique!

Il y a d’ailleurs tellement de choses que je vais le rédiger en plusieurs parties. La deuxième se trouve ici:

https://amethyste16.wordpress.com/2014/08/23/mettre-en-place-lauthentification-avec-visual-studio-2013-partie-ii/

 

Configuration

Cet article a été écrit à la lumière de VS 2013. Si vous êtes en 2012 les écrans et les menus sont différents, l’intégration n’est pas aussi poussée également.

Avec VS 2013 il faudra tout de même installer:

http://www.microsoft.com/fr-fr/download/details.aspx?id=42666

 

Présentation des templates

Visual Studio 2013 propose plusieurs templates Web pour créer rapidement des applications dotées de diverses caractéristiques prédéfinies et en particulier l’authentification.

Vous avez probablement remarqué ce bouton:

2014-07-03_22-14-57Qui ouvre cet écran:

2014-07-03_22-16-37

On a donc 4 modèle d’authentification supportés out of the box actuellement:

  1. No authentication
  2. Individual User Accounts
  3. Organizational Accounts
  4. Windows Authentication

Le premier ne pose pas trop de problème: on ne met pas en place d’authentification. Nous allons détailler les autres options.

Notez tout de suite que dès qu’un modèle d’authentification est sélectionné on voit ceci apparaître dans l’application:

2014-07-03_23-01-57

  • Register permettra de créer un compte
  • Log in permettra de se connecter

Une fois logué:

2014-07-03_23-18-29

Le click sur l’identifiant amène vers le formulaire de changement de mot de passe.

 

Revenons à notre écran. Remarquez tout d’abord la présence du lien Learn More présent pour chacune des options qui amène vers une page d’aide extraite de cet article:

http://www.asp.net/visual-studio/overview/2013/creating-web-projects-in-visual-studio

C’est une bonne idée je trouve.

 Individual User Accounts

 Formulaire d’authentification par défaut

Cette option correspond à l’ancien ASP.NET membership. Il permet de s’enregistrer à un compte via un logon/mot de passe (option par défaut) ou via Facebook, Google, Microsoft Account ou Twitter.

Le code produit par le Template Visual Studio 2013 est différent de celui de Visual Studio 2012:

  • Le Framework d’authentification est un Framework OWIN (j’ai fais une série d’article sur OWIN dans les précédents blogs)
    Le projet héberge une classe Startup.cs
  • La base est gérée en mode Entity Framework Code First. Cela signifie qu’il est possible de personnaliser cette base simplement en ajoutant de nouvelles propriétés dans les entités.

Le modèle Individual User Account est un bon choix lorsque vos utilisateurs sont essentiellement des utilisateurs extérieurs, c’est à dire qu’ils n’appartiennent pas à votre AD.

 

Par défaut les identités sont stockées dans une base SQL Server LocalDB.

2014-07-03_23-14-50

Activer Https

Pour se connecter vers des providers externes on a besoin d’activer Https. C’est important car une fois logué un cookie de sécurité sera placé dans vos requêtes. Sans SSL il sera lisible en clair..

Dans les propriétés du projet, mettez à true SSL Enabled:

2014-07-03_23-25-23

  • Copiez l’url Https
  • allez dans les propriétés du projet puis l’onglet Web

2014-07-03_23-29-41

 

  • Copier l’url dans Project Url

 

On complète le contrôleur avec l’attribut RequireHttps:

[RequireHttps]
public class HomeController : Controller
{
  •  Lancer l’application. A moins que vous ayez déjà un certificat cette fenêtre s’affiche:

2014-07-03_23-36-47

  • Faire Yes.

2014-07-03_23-38-13

  • Un formulaire proposant de créer un certificat s’affiche. Faire Oui

L’application démarre. Dans le magasin des certificats Windows ceci devrait apparaître:

2014-07-03_23-40-37

 

Fournisseurs externe

Le fournisseur Google

  • Aller dans le Google Developers Console

https://console.developers.google.com/project

  • Cliquer sur le bouton CREATE PROJECT

2014-07-03_23-44-57

  • Saisir un nom de projet, un ID (ou laisser celui par défaut) et faire CREATE
    Laisser Google faire son boulot. Le tableau de bord du projet apparaît, on est dans le cloud Google!

2014-07-03_23-47-08

  • Aller dans API  AUTH/ Credentials

2014-07-03_23-50-58

  • Cliquer sur Create New Client Id

2014-07-04_00-07-53

  • Laisser Web Application
    dans Authorized Javascript Origins entrer l’url Https déjà utilisée
    Remplacer la méthode de redirection par: signin-google
  • Faire create

2014-07-03_23-56-18

  • Copier Client id et Client Secret

On est dans OWIN, la suite se trouve donc dans Startup.cs.

  • Repérer l’appel à ConfigureAuth et ouvrez le code de cette méthode
  • Vers la fin on devrait voir ceci:

2014-07-04_00-02-42

  • Dé-commenter la partie Google et remplissez les paramètres avec ceux qui ont été copiés

Si vous allez dans le formulaire de login, une nouvelle option apparaît:

2014-07-04_00-05-15

Il ne reste plus qu’à la tester!

Microsoft Account provider

Facebook

Le Dashboard est ici:

https://developers.facebook.com/apps

LinkedLn et Yahoo

http://www.beabigrockstar.com/blog/introducing-the-yahoo-linkedin-oauth-security-providers-for-owin/

Twitter

https://dev.twitter.com/

 

Personnaliser les profils

Les informations sur le compte sont stockées dans la base locale. On peut la consulter depuis l’explorateur de serveur:

2014-07-04_10-55-50

  • On se rend dans Data Connections puis DefaultConnection.
  • On sélectionne la table AspNetUser
  • Clic droit
  • Sélectionner Show Data

 

Même si on utilise un fournisseur d’identité externe, les comptes sont enregistrés dans la base de données ce qui permet de gérer des informations sur les comptes et en particulier ses droits.

La nouvelle interface d’authentification exploite EF en mode code first. il est donc très facile de personnaliser les choses avec une migration. Par exemple on peut vouloir demander le nom complet de l’utilisateur, une photo, un numéro de téléphone…

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s