création d'un formulaire de login jquery mobile avec utilisation d'une bdd sql server , web service asp.net

**saidasahraouiya** · 07/03/2013, 17h35

Bonjour
Je travaille sur un projet de gestion de flottes en ASP .net. Je suis en train de développer une interface de login en jquery mobile et je dois utiliser un web service asp.net (.asmx) et ajax JSON pour le transfert des données.
voilà mon code jquery
fichier login.htm

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<!DOCTYPE html >
<html>
	<head>
		<title>Login</title>
 
		<meta name="viewport" content="width=device width,initial-scale=1"/>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
	        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	        <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
                <script type="text/javascript">
                    $.document.ready(function () {
                    });
 
			function callservice(){
				$.Ajax({
					type:"Post",
					contentType: "application/json; charset=utf-8",
					url: "../authentification.asmx/Authentifier",
					//data:"{email:"+$('#email').val()+", password:"+$('#password').val()+"}",
                    data:"{}",
					datatype:"JSON",
					Success:OnSuccessCall(),
                    erreur:OnErreurCall()
				        });
                   }
                   function OnSuccessCall(response) {
                   $("#divResponse").text(response.d);
 
 
               }
               function OnErreurCall(response) {
                   $("#divResponse").text(response.status+"  "+response.statustext);
 
 
               }
 
     		</script>
	</head>
	<body>
		<div data-role="page" id="login" data-theme="b">
			<div data-role="header">
        			<h1>Login</h1>
    			</div>
				 <!-- start content -->
			<div data-role="content" data-inset="true">	
 
        			<form name="loginform" id="formulaire" >
					<fieldset >
            				<label for="email">Email:</label>
            				<input type="email" name="email" id="email" value=""  />
					<label for="password">Password:</label>
            				<input type="password" name="password" id="password" value="" />
					        <input type="button" id="btnLogin"  value="Login"  onclick="callservice();"/>
 
					</fieldset>
 
        			</form>
 
 
			</div>
				<!-- end content -->
    			<div data-role="footer">
 
        			<h4>Page Footer</h4>
    			</div>
		</div>
    		<div data-role="page" id="divResponse"data-title="test">
		</div>	
        </div>
	</body>
</html>

et voilà le cose de mon web service

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Security;
using System.Data.SqlClient;
 
namespace Test
{
    /// <summary>
    /// Description résumée de authentification
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // Pour autoriser l'appel de ce service Web depuis un script à l'aide d'ASP.NET AJAX, supprimez les marques de commentaire de la ligne suivante. 
    [System.Web.Script.Services.ScriptService]
    public class authentification : System.Web.Services.WebService
    {
        [WebMethod]
        public string Authentifier()
        {
 
            password = FormsAuthentication.HashPasswordForStoringInConfigFile(password, "MD5");
            SqlConnection oConnexion = new SqlConnection("data source=./SQLDBExpress;Integrated Security=SSPI;Initial Catalog=Ahm");
            SqlCommand oCommand = new SqlCommand("SELECT * FROM authentification WHERE Login='" + Login + "'", oConnexion);
            oConnexion.Open();
            SqlDataReader reader = oCommand.ExecuteReader();
            while (reader.Read())
            {
                if (reader["Login"].ToString() != Login && reader["password"] != password)
 
                    return "Nom utilisateur ou mot de passe invalide";
                else
                {
                    if (reader["Login"].ToString() == Login && reader["password"] == password)
                    {
 
                        return "OK";
                    }
                }
            }
            oConnexion.Close();
 
            return "";
 
        } 
 
    }
}

bon normalement ne fois le login et le password tapé, si on clique sur le bouton login la webmethod Authentifier doit être appeler, cependant rien ne se passe !! et j'arrive pas à cerner le problème;Merci de me donner un coup de main

**pvcLunacy** · 09/03/2013, 14h45

Bonjour,

Alors ya plusieurs petites choses qui ne vont pas :

tu dois entourer les valeurs que tu transmet au webservice par des quotes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

data:"{email:'"+$('#email').val()+"', password:'"+$('#password').val()+"'}",

ensuite, le paramètre de fonction que tu apelle en cas de success, c'est success pas Success (et ajax, pas Ajax) le javascript est sensible à ces petits détails.
Tu dois ensuite donner le nom de la fonction a appeler, pas l’appeler directement, et l'erreur c'est error

:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$.ajax({
  type: "POST",
  contentType: "application/json; charset=utf-8",
  url: "../authentification.asmx/Authentifier",
  data:"{ email : '"+$('#email').val()+"', password : '"+$('#password').val()+"' }",
  datatype: "JSON",
  success: onSuccessCall,
  error: onErreurCall
});

Pense a remettre les variables email et password dans la webmethod et ça devrait fonctionner

Par contre ton divResponse est invisible chez moi sous chrome à l'endroit où il est, en général pour débugger les appels ajax, plutot que du div, je met des alert dans les success et error pour vérifier que j'ai bien le retour du webservice.

A+

**saidasahraouiya** · 09/03/2013, 17h15

J'ai fait ce que vous m'avez dit mais rien n'a marché
pouvez-vous m'indiquer la syntaxe des alertes que je doit mettre à la place des div.
Merci beaucoup pour vos réponces

**pvcLunacy** · 09/03/2013, 17h50

Ha

Commence par faire une webmethod toute simple qui prend tes 2 paramètres, on va déjà s'assurer que ton appel au webservice fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    [WebMethod]
    public string Authentifier(string email, string password)
    {
        return email + " " + password;
    }

Ca va simplement retourner une chaine de caractère contenant email et password.

Ensuite, voici le code des fonctions :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function callservice() {
	$.ajax({
		type: "POST",
		contentType: "application/json; charset=utf-8",
		url: "../authentification.asmx/Authentifier",
		data:"{email:'"+$('#email').val()+"', password:'"+$('#password').val()+"'}",
		datatype: "JSON",
		success: OnSuccessCall,
		error: OnErreurCall
	});
}
function OnSuccessCall(response) {
	alert(response.d);
}
function OnErreurCall(response) {
	alert(response.status + "  " + response.statustext);
}

Si tout va bien en remplissant login et password de ton formulaire, tu va recevoir une alerte de la page avec le login que tu a fourni et le password, si déjà ce point fonctionne, ton appel au webservice est fonctionnel, tu peux alors l'étendre pour faire l'authentification complète.

(Edit : tu n'a pas besoin de toucher à la structure du body html actuel de ta page pour ces points)

**saidasahraouiya** · 09/03/2013, 18h09

Je viens de crééer cette fonction simple, ça me donne comme résultat: Internal Server Error

**saidasahraouiya** · 09/03/2013, 18h13

et si je travaille avec les alertes à la place des div ça donne une alerte avec :"500 undefined"

**pvcLunacy** · 09/03/2013, 19h00

Tu a forcément un problème quelque part,

L'appel au webservice fonctionne bien, c'est lui qui te renvoie l'erreur 500 undefined.

Vérifie que tu a bien écrit les variables de la même façon partout (email et password dans le data du .ajax et dans la déclaration de la webmethod), il suffit que tu ai une majuscule dans l'un des deux (Email au lieu de email par exemple) pour que le webservice passe en erreur sur une variable "undefined"

**saidasahraouiya** · 09/03/2013, 19h00

quant je tapes des entiers ça marche mais pour les lettres ça marche pas

**saidasahraouiya** · 09/03/2013, 19h06

C'est bon ! ça marche j'avais un problème de quotes
Merciii bcq

**saidasahraouiya** · 09/03/2013, 20h12

Hi!
Maintenant la méthode de vérification du login et du password marche très bien
j'ai besoin d'ajouter un identifiant de session ou un timeout !! Merci de me donner une piste pour commencer

**saidasahraouiya** · 11/03/2013, 00h13

je veux quand le login et le password sont valides , ça redirige vers une autre page .html , Merci de me donner une idée

**pvcLunacy** · 13/03/2013, 00h55

Bonjour/soir

pour ta question sur la session, il faut que tu permette au webservice de gérer les sessions, regarde du côté des options de webmethod.

Pour ta redirection, il faut que tu redirige l'utilisateur après que ton ajax t'ai renvoyé un success, c'est du javascript de base la redirection

création d'un formulaire de login jquery mobile avec utilisation d'une bdd sql server , web service asp.net

Développement Web avec .NET

Discussions similaires

Partager

Partager