ASP.NET Forms Authentication Safari/Chrome sur IOS

Contexte

Je développe actuellement une Webapp HTML5 communiquant avec des services WCF. Pour les sécuriser, j'ai implémenté l'authentification ASP.NET par formulaire.
Certaines fois, sur iOS 6,  l'appel au webservice sécurisé était refusé. Sur ipad, je l'ai généralement rencontré en Webview, quand on ajoute la webapp sur le Homescreen.

Lors de la connexion de l'utilisateur à la Web App, on réalise le code ci-dessous :

1. FormsAuthentication.SetAuthCookie(userName, true /*createPersistentCookie*/);

La configuration de Web.config est la suivante :

1. <authentication mode="Forms" >
2. <forms loginUrl="../Login.html" timeout="2880" />
3. </authentication>

Solution

En analysant la réponse du serveur je me suis aperçu que finalement je n'étais pas authentifié. Alors que le web service d'authentification l'avait bien confirmé.
Certaines fois le cookie d'authentification n'est pas bien obtenu par le navigateur, notamment sur Safari et Chrome. Après beaucoup de recherches, j'ai finalement trouvé une solution.

Plusieurs étapes sont à réaliser :

1. Dans le Web.config, il faut ajouter la clé suivante, qui permet de forcer l'utilisation des cookies par le navigateur. Par défaut c'est UseDefault :
1. <authentication mode="Forms" >
2.        <forms loginUrl="../Login.html" timeout="2880" cookieless="UseCookies" />
3. </authentication>
2. Ensuite il peut aussi être utile de rajouter une MachineKey dans le Web.Config, pour éviter un problème dans le cryptage/décryptage du cookie d'authentification.
1. <system.web> 
2.       <machineKey validationKey='myKey' decryptionKey='myDecryptKey' validation='SHA1'/>
3. </system.web>

Pour générer une machineKey, vous pouvez aller directement sur ce site : Générateur de machineKey

Source : http://www.bloggersworld.com/index.php/2012/08/19/asp-net-forms-authentication-iphone-cookies/

(function ($) { }(jQuery)); vs $(function () {});

(function ($) {  }(jQuery)); vs $(function () {});

Un petit retour d'expérience, après être resté bloquer pendant quelques heures, sur une erreur liée à la librairie JqueryMobile. L'erreur est : $.mobile.loader of 'undefined' .

Contexte de l'erreur

• dans la fonction (function($) {} (jQuery)); je crée un model Backbone, une view Backbone et un routeur Backbone.
• dans cette même fonction j'instancie mon routeur et Backbone.history.start();

Lorsque je charge la page, je réalise un appel Ajax async pour obtenir une collection d'éléments. Pendant cette appel Ajax, j'utilise la "loading bar" de JQuery Mobile comme ci-dessous :

1. CollectionModel.fetch({
2.             beforeSend:function ()
3.             { $.mobile.loading('show');
4.             },
5.             complete: function () {
6.                 $.mobile.loading('hide');
7.             }, 
8.             success: callback
9.         });

Lors de cette appel, la méthode $mobile.loading n'est pas définit car la librairie JQueryMobile n'est pas encore ready.

Solution

Pour résoudre le problème, il faut tout simplement réaliser l'instanciation du Router et lancé Backbone.history.start() n'ont pas dans (function($) {}(jQuery)) mais plutôt dans $(function() {}); car dans ce cas, on est sur que la librairie $.mobile est chargée et disponible.

La fonction anonyme (function($) {}(jQuery) signifie que le DOM JQuery est ready mais il faut bien dissocier le DOM JQuery et le DOM du Document qui est représenté par la fonction suivante : 

1. $(function() {});

Récapitulatif

La déclaration des Models, des Views et des Routers Backbonejs doivent être placée dans la fonction anonyme :

1.  (function($) {} (jQuery)); 

Par contre l’instanciation du router doit être de préférence réalisé dans la fonction :

1. $(function() {});