Authentifizierungsansatz in asp.net zu verwenden Web API und eckig js

Question

Ich erstelle 1 Website mit Web API und eckig js und ich bin so viel verwirrt über die Authentifizierung in meiner Website verwendet werden.

Ich habe eine login.js erstellt, in der es meine Login-Methode geben würde, die meinen Benutzernamen/E-Mail-Adresse und Passwort an meine Web-API sendet und die Methode in Web-API wird diesen Benutzer authentifizieren.

Code:

$scope.Login() 
{ 
    $.post("api/Authentication/Login",Username,Password) 
    { 
    } 
} 

Web api Code:

[Route] 
Public Task<object> Login([FromBody] username,password) 
{ 
    //method to authenticate user from database. 
    //Now the tricky parts comes like after authenticating user should i 
    //just store the user id in my session like this Session["userid]=id or 
    //Should i go for storing whole user object in my cookie as i have read 
    //that storing data in session is very bad idea and disaster too as session is very memory 
    //and so i think i would go for cookie which will be saved on client side. 
    //but what if cookie isnt supported by browser?? 
} 

Sitzung zu verwenden ist Katastrophe wie durch Darin Dimitrov in seiner Antwort und Kommentaren darauf hingewiesen. Also habe ich beschlossen, Cookies zu verwenden, wie pro diese Antwort und eine der E-Commerce-Website, die Nop Commerce verwendet Cookie ist auch zur Zeit zu speichern anmelden Kundenobjekt gemäß dieser Frage und Antwort Question

ich diesen Code von LukeP vorgeschlagen folgende bin in Diese Question für die Authentifizierung Zweck und Aufrechterhaltung der aktuellen Login-Benutzerobjekt über meine gesamte Anwendung.

Ich habe über asp.net Anspruch Identität zu lesen, aber weiß nicht, ob ich es in meinem asp.net Web-api und Winkel js verwenden kann.

So kann jemand mir sagen, was ist der richtige Ansatz für die Authentifizierung in asp.net Web-api und Winkel js zu verwenden und was alle Änderungen in LukeP Code getan werden mit Web-api und Winkel js arbeiten ??

Kann mir jemand über diese Apprain erklären, die ich oben mit einiger Detailbeschreibung und einigen Codes auch gezeigt habe, wie es mir und einigen anderen auch helfen kann, wenn sie nach demselben suchen.

Später werde ich 100 Bounty auf die Antwort anbieten, die alle obigen Bedenken mit einigen Codes adressiert.

Answer 1

Der beste Weg, es zu tun mit Token-Authentifizierung ist. Zusammengefasst funktioniert es wie folgt aus:

• A POST /api/login Route auf dem Server in einem Benutzername + Passwort nimmt, überprüft, dass sie gegen die Datenbank gültig sind, dann erzeugt und gibt ein refresh token (die nur eine zufällige Zeichenfolge sein kann oder GUID). Die refresh token wird auch in der Datenbank neben den Benutzer gespeichert, das Überschreiben vorherige refresh token
• A GET /api/access-token Route auf dem Server nimmt in einem Benutzername + refresh token, überprüft, dass sie in der Datenbank übereinstimmen, dann erzeugt und gibt ein access token
• Alle anderen /api/* Routen benötigen einen gültigen access token im Header der Anforderung sein, sonst annehmen, dass sie dem Benutzer keine gültige Login hat

die access token ist ein Datenobjekt, das einen geheimen Schlüssel, die verschlüsselt wurde, nur der Server weiß es. Es sollte den Benutzernamen, ein Ablaufdatum (normalerweise ~ 10 Minuten nach der Generierung des Tokens) und alle Berechtigungen oder verschiedene Daten über den Benutzer enthalten. Da es mit einem geheimen Schlüssel verschlüsselt ist, kann es nicht von einem Angreifer gefälscht werden.

Sie müssen diese Routen auf Ihrem Server implementieren.

Wenn Sie OWIN verwenden, hier ist, wie Sie die Microsoft.Owin.Security.OAuth NuGet Paket verwenden können Sie die Verschlüsselung Bit zu tun:

diese Konfiguration in Ihrem Start haben:

using System.Web.Http; 
using Microsoft.Owin; 
using Microsoft.Owin.Security.OAuth; 
using Owin; 

[assembly: OwinStartup(typeof(MyProject.Startup))] 
namespace MyProject 
{ 
    public class Startup 
    { 
     public static OAuthBearerAuthenticationOptions OAuthBearerOptions { get; private set; } 

     public void Configuration(IAppBuilder app) 
     { 
      var config = new HttpConfiguration(); 

      OAuthBearerOptions = new OAuthBearerAuthenticationOptions(); 
      app.UseOAuthBearerAuthentication(OAuthBearerOptions); 

      // Configure Web API to use only bearer token authentication. 
      config.SuppressDefaultHostAuthentication(); 
      config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType)); 

      app.UseWebApi(config); 
     } 
    } 
} 

Dann können Sie erzeugen ein ticket (das ist die unverschlüsselte access token ist) und verschlüsseln es wie folgt aus:

var identity = new ClaimsIdentity(new[] { 
    new Claim(ClaimTypes.Email, "users email"), 
    // other business specific claims e.g. "IsAdmin" 
}); 
var ticket = new AuthenticationTicket(identity, new AuthenticationProperties(
    { 
     ExpiresUtc = DateTime.UtcNow.AddMinutes(10) 
    })); 
var accessToken = MyProject.Startup.OAuthBearerOptions.AccessTokenFormat.Protect(ticket); 

In Angular müssen Sie s etup eine Möglichkeit zur Anmeldung, eine Möglichkeit, eine neue access token zu erhalten, wenn es abläuft, und eine Möglichkeit, die access token in der Kopfzeile jeder API-Anfrage zu übergeben. Ich empfehle, die refresh token und access token im lokalen Speicher (oder Cookie für alte Browser) zu speichern und zu verwenden, um einen Interceptor für jeden Aufruf $http hinzuzufügen.Der Interceptor kann dann den Zugriffstoken an den Header wie folgt hinzu: config.headers['Authorization'] = 'Bearer ' + accessToken;

die Abfangjäger in Winkel definieren:

angular.module('app').service('authenticationInterceptor', ['$q', function($q) { 
    this.request = function(config) { 
     var accessToken = // ... get the access token from local storage/cookie 
     config.headers['Authorization'] = 'Bearer ' + accessToken; 
     return config; 
    }; 
}]); 

es In den $httpProvider:

angular.module('app').config(['$httpProvider', ($httpProvider: ng.IHttpProvider) => { 
    $httpProvider.interceptors.push('authenticationInterceptor'); 
}]); 

Answer 2

Dies ist eine sehr weit gefasste Frage zu beantworten, und es gibt keine Chance, es in einzelner Antwort zu tun.

Was ich Ihnen sagen kann, ist "Token-Authentifizierung" mit Outh2 sollte die Arbeit tun; Das ist der einfachste Weg, um mit Angular und WebAPI zu arbeiten, wenn wir über Sicherheit sprechen. Cookies sind in diesem Fall nicht die richtige Lösung.

Überprüfen Sie this Artikel für weitere Details zum Implementieren einer vollständig funktionierenden Token-basierte Authentifizierung mit ASP.NET Web API 2, Owin und Identität. Dieser Artikel hat mir wirklich sehr geholfen. Schließlich, wenn Sie eine Beispiellösung haben, können Sie zurückkommen und nach mehr "Details" fragen.

BTW, ich lese diesen „Kommentar“ in dir Code:

// nun die heikelen Teile kommt wie nach dem Benutzer zu authentifizieren soll ich // speichere nur die Benutzer-ID in meiner Session wie diese Session [ „Benutzer-ID] = id oder // Soll ich in meinem Cookie ganzes Benutzerobjekts gehe zum Speichern als i

persönlich gelesen habe, denke ich, Sitzung schlecht ist. ich bin nicht die einzige one. Wie auch immer, wenn Sie "Sitzung" in web.api Welt verwenden möchten, ist es nicht kostenlos, Sie müssen es aktivieren. Wenn Sie es aus irgendeinem Grund verwenden müssen, überprüfen Sie this.

Hoffe, es hilft :)

Answer 3

Der beste Weg, json Web-Token (JWT) ...

Satellizer eine große Bibliothek zu verwenden ist, auf Ihre Angular App https://github.com/sahat/satellizer

HTML hinzufügen

<form method="post" ng-submit="login()" name="loginForm"> 
     <div class="form-group has-feedback"> 
     <input class="form-control input-lg" type="text" name="email" ng-model="user.email" placeholder="Email" required autofocus> 
     <span class="ion-at form-control-feedback"></span> 
     </div> 
     <div class="form-group has-feedback"> 
     <input class="form-control input-lg" type="password" name="password" ng-model="user.password" placeholder="Password" required> 
     <span class="ion-key form-control-feedback"></span> 
     </div> 
     <button type="submit" ng-disabled="loginForm.$invalid" class="btn btn-lg btn-block btn-success">Log in</button> 
     <br/> 
     <p class="text-center text-muted"> 
     <small>Don't have an account yet? <a href="/#/signup">Sign up</a></small> 
     </p> 
     <div class="signup-or-separator"> 
     <h6 class="text">or</h6> 
     <hr> 
     </div> 
    </form> 

JS

angular.module('MyApp') 
    .controller('LoginCtrl', function($scope, $auth) { 

    $scope.login = function() { 
     $auth.login($scope.user) 
      .then(function() { 
      toastr.success('You have successfully signed in!'); 
      $location.path('/'); 
      }) 
      .catch(function(error) { 
      toastr.error(error.data.message, error.status); 
      }); 
     };  
    }); 

Server-Seite, sie haben ein C# Beispiel bei https://github.com/sahat/satellizer/tree/master/examples/server/c%23