2016-06-03 5 views
1

Ich weiß, wie Ajax mit GET/POST-Daten wie folgt verwenden, aber ich weiß nicht, wie man es mit Token-Schlüssel verwendet (hat einen Token Schlüssel bekommt)So rufen Sie ASP.NET Web API-Basis auf Ajax mit GET/POST und Token-Schlüssel

$("#read1").click(function() { 
     $.support.cors = true; 
     $.ajax({    
      crossDomain: true, 
      url: 'http://localhost:65370/api/travels', 
      type: 'GET', 
      cache: false, 
      error: function (xhr, status, errorThrow) { 
      }, 
      complete: function (xhr) { 
      }, 
      success: function (data) { 
      } 
     }); 
    }); 

    $("#create1").click(function() { 
     var person = { 
      "travel_id": 4 
     }; 
     $.ajax({ 
      }, 
      type: "post", 
      url: 'http://localhost:65370/api/travels', 
      datatype: "json", 
      contenttype: "application/json; charset=utf-8", 
      data: person, 
      success: function (data) { 
      }, 
      error: function (xhr, status, errorThrow) { 
      } 
     }); 
    }); 

Antwort

1

ich die Methode als Code gefunden habe folgende

//you just need to put it in Ajax content 
    headers:{ 
       'Authorization': 'Bearer ' + token 
      } 

Wenn Sie den Token-Schlüssel bekommen können Sie den Code in den „Header“ hinzufügen.

Voll JavaScript-Code mit Token

<script> 

    $(document).ready(function() 
    { 
     var bearer =""; 
     var user ={ 
      grant_type:'password', 
      username:'a', 
      password:'a' 
     }; 
     $.ajax({ 
      type: "POST", 
      url: "http://localhost:50971/token", 
      data:user, 
      contentType: "application/x-www-form-urlencoded", 
      dataType: "json", 
      success: function (data) { 
       bearer = JSON.parse(JSON.stringify(data)); 
       bearer = bearer.access_token; 
       Authorization(); 
      }, 
      failure: function (response) { 
       alert(response.responseText); 
      }, 
      error: function (response) { 
       alert(response.responseText); 
      } 
     }); 


     function Authorization() { 
      $.ajax({ 
       type: "GET", 
       url: "http://localhost:50971/api/employee/GetEmployees", 
       headers: { 
        'Authorization': 'Bearer ' + bearer 
       }, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (a) { 
        alert(JSON.stringify(a)) 
        //$.each(a, function (x, y) { 
        // alert(x) 
        // alert(y) 
        // $.each(y, function (x, y) { 
        //  alert(x) 
        //  alert(y) 
        // }); 
        //}); 

        //alert("Hello: " + a.Name + ".\nCurrent Date and Time: " + a.address); 
       }, 
       failure: function (response) { 
        alert(response.responseText); 
       }, 
       error: function (response) { 
        alert(response.responseText); 
       } 
      }); 
     } 
    }) 


</script> 
0

zu markieren, wie man Web api mit Basis-Token-Authentifizierung [ref]

Bitte folgen Sie wie unten Schritte
Schritt 1 verwenden Dummy-Datenbank zu erstellen "Test" und zwei Tabellen "Benutzer" bzw. "Mitarbeiter"

CREATE DATABASE TEST GO  

    USE TEST GO  

    CREATE TABLE Users(Id INT IDENTITY(1,1) PRIMARY KEY, Name varchar(255) NOT NULL, UserName varchar(50), Password varchar(50)) INSERT INTO [TEST].[dbo].[Users](Name, UserName, Password) VALUES('Mukesh Kumar', 'Mukesh', AAAAAA');  


    CREATE TABLE Employees(Id INT IDENTITY(1,1) PRIMARY KEY, Name varchar(255) NOT NULL, Address varchar(500))   
INSERT INTO Employees (Name, Address) VALUES('Mukesh Kumar', 'New Delhi') 
INSERT INTO Employees (Name, Address) VALUES('John Right', 'England')  
INSERT INTO Employees (Name, Address) VALUES('Chris Roy', 'France')  
INSERT INTO Employees (Name, Address) VALUES('Anand Mahajan', 'Canada')  
INSERT INTO Employees (Name, Address) VALUES('Prince Singh', 'India') 

Schritt 2. Zu einem neuen ASP.NET-Projekt mit WebAPI (keine Authentifizierung) und finden Sie in NuGet klicken Sie auf zu installieren; Nach der Installation werden diese Pakete in Referenzen verfügbar sein.

1.Microsoft.Owin
2.Microsoft.Owin.Host.SystemWeb
3.Microsoft.Owin.Security.OAuth
4.Microsoft.Owin.Security
5.Microsoft.AspNet. Identity.Owin
6.Microsoft.AspNet.WebApi.Cors

Schritt 3. Global.asax entfernen und neue Klasse „Startup.cs“ an der gleichen Stelle der Global.asax-Datei hinzufügen und folgenden Code hinzu. (Keine Sorge über Fehlermeldung)

using EmployeeService.Provider; 
using Microsoft.Owin; 
using Microsoft.Owin.Security.OAuth; 
using Owin; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Http; 

[assembly: OwinStartup(typeof(EmployeeService.Startup))] 
namespace EmployeeService 
{ 
    public class Startup 
    { 
     public void ConfigureAuth(IAppBuilder app) 
     { 

      var OAuthOptions = new OAuthAuthorizationServerOptions 
      { 
       AllowInsecureHttp = true, 
       TokenEndpointPath = new PathString("/token"), 
       AccessTokenExpireTimeSpan = TimeSpan.FromMinutes(20), 
       Provider = new SimpleAuthorizationServerProvider() 
      }; 

      app.UseOAuthBearerTokens(OAuthOptions); 
      app.UseOAuthAuthorizationServer(OAuthOptions); 
      app.UseOAuthBearerAuthentication(new OAuthBearerAuthenticationOptions()); 

      HttpConfiguration config = new HttpConfiguration(); 
      WebApiConfig.Register(config); 
     } 

     public void Configuration(IAppBuilder app) 
     { 
      ConfigureAuth(app); 
      GlobalConfiguration.Configure(WebApiConfig.Register); 
     } 
    } 
} 

Schritt 4. Um Neues Element hinzufügen und Ado.Net Entity Model (Name: EmployeeModel) wählen
enter image description here enter image description here enter image description here

Schritt 5. Um einen neuen Controller als EmployeeController hinzuzufügen und den folgenden Code hinzuzufügen.

using System.Collections.Generic; 
using System.Linq; 
using System.Web.Http; 

namespace EmployeeService.Controllers 
{ 
    public class EmployeeController : ApiController 
    { 
     [HttpGet] 
     [Authorize] 
     public List<Employee> GetEmployees() 
     { 
      using (var db = new TESTEntities()) 
      { 
       var employees = db.Employees.ToList(); 
       return employees; 
      } 
     } 
    } 
} 

Schritt 6. Um Klassennamen "SimpleAuthorizationServerProvider.cs" im Verzeichnis der Provider hinzufügen, und fügen Sie folgenden Code

using Microsoft.Owin.Security; 
using Microsoft.Owin.Security.OAuth; 
using System.Collections.Generic; 
using System.Linq; 
using System.Security.Claims; 
using System.Threading.Tasks; 
using System.Web.Http.Cors; 

namespace EmployeeService.Provider 
{ 
    [EnableCors(origins: "*", headers: "*", methods: "*")] 
    public class SimpleAuthorizationServerProvider : OAuthAuthorizationServerProvider 
    { 
     public override async Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context) 
     { 
      context.Validated(); // 
     } 

     public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context) 
     { 
      var identity = new ClaimsIdentity(context.Options.AuthenticationType); 
      context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" }); 

      using (var db = new TESTEntities()) 
      { 
       if (db != null) 
       { 
        var empl = db.Employees.ToList(); 
        var user = db.Users.ToList(); 
        if (user != null) 
        { 
         if (!string.IsNullOrEmpty(user.Where(u => u.UserName == context.UserName && u.Password == context.Password).FirstOrDefault().Name)) 
         { 
          identity.AddClaim(new Claim("Age", "16")); 

          var props = new AuthenticationProperties(new Dictionary<string, string> 
          { 
           { 
            "userdisplayname", context.UserName 
           }, 
           { 
            "role", "admin" 
           } 
          }); 

          var ticket = new AuthenticationTicket(identity, props); 
          context.Validated(ticket); 
         } 
         else 
         { 
          context.SetError("invalid_grant", "Provided username and password is incorrect"); 
          context.Rejected(); 
         } 
        } 
       } 
       else 
       { 
        context.SetError("invalid_grant", "Provided username and password is incorrect"); 
        context.Rejected(); 
       } 
       return; 
      } 
     } 
    } 
} 

Schritt 7. Sie müssen nur Aktivieren Sie CORS in WebAPIConfig.cs im Ordner app_Start.

using Newtonsoft.Json.Serialization; 
using System.Linq; 
using System.Net.Http.Formatting; 
using System.Web.Http; 
using System.Web.Http.Cors; 

namespace EmployeeService 
{ 
    public class WebApiConfig 
    { 
     public static void Register(HttpConfiguration config) 
     { 
      // Web API configuration and services 

      EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*"); 
      config.EnableCors(cors); 

      // Web API routes 
      config.MapHttpAttributeRoutes(); 

      config.Routes.MapHttpRoute( 
       name: "DefaultApi", 
       routeTemplate: "api/{controller}/{id}", 
       defaults: new { id = RouteParameter.Optional } 
      ); 

      var jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First(); 
      jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver(); 
     } 
    } 
} 

mit Server-Seite Fertig

Seite Client- Sie Postbote oder Fiedler Server-Code zu testen, in Ordnung verwenden können, ist enter image description here enter image description here

Weitere Einzelheiten können Sie überprüfen, [ref1] [ref2]