SPA: authentication de Firebase y .Net WebApi 2

Tengo una aplicación de una sola página escrita en AngularJs (el marco es irrelevante en este momento). La aplicación está alojada en IIS y está compuesta por index.html más un set de activos de los clientes.

En back-end tengo WebApi 2, hospedado también en IIS como una aplicación separada.

Para la authentication en el cliente, estoy usando Firebase (inicio de session simple) con varios networkinges networkinges sociales habilitados, como Facebook, Twitter o Google.

Hasta aquí todo bien. Me gusta lo fácil que es habilitar la authentication de Twitter, por ejemplo, con firebase.

Al iniciar session con la networking social, vuelvo de firebase, firebaseAuthToken y el proveedor de acceso a la count.

Ahora quiero usar firebaseAuthToken o token de acceso de proveedor para autenticarse con mi WebApi.

La pregunta es: ¿Cuál es la mejor manera de autenticarse con WebApi en determinadas condiciones?

No existe una opción para usar solo Firebase para almacenar mis datos y deshacerme de la API web, ya que tengo una lógica empresarial compleja en el server.

Una tonta idea que tengo hasta ahora es pasar el token de acceso del proveedor social al server, validar el token contra el proveedor y luego emitir un token de security usando Owin -Katana.

No estoy usando la compilation en soporte de proveedores sociales de katana debido a la falta de documentation, complejidad y mala integración con aplicaciones de una sola página. Encontré la plantilla de estudio visual para SPA también mvc específico. Pero ese soy yo 🙂

One Solution collect form web for “SPA: authentication de Firebase y .Net WebApi 2”

tl; dr – Proyecto de demostración en GitHub

Los pasos a continuación pueden parecer largos, pero en realidad son realmente fáciles. Creé mi proyecto de demostración en solo una hora más o less.


Estoy de acuerdo contigo sobre el uso de Owin y Katana. He pasado por ese process antes y realmente no fue una gran experiencia. Usar Firebase fue muchísimo más fácil.

¡Todo esto se puede hacer con JWT!

Cuando te autenticas a través de Firebase y del proveedor social, obtienes un JSON Web Token (JWT) – firebaseAuthToken .

Toma tu Firebase Secret del Tablero

La forma en que funcionan los JWT es que tenemos un token secreto y un token de cliente. El token de cliente es firebaseAuthToken que recibimos después de iniciar session. El token secreto se genera para nosotros en Firebase Dashboard.

Panel de instrumentos de Firebase JWTs

Almacene su Firebase Secret en la sección appSettings de su Web.config

Necesitamos almacenar esta key secreta en Web.config para que sea más fácil acceder más tarde.

 <add key="FirebaseSecret" value="<Firebase-Secret-Token-Goes-Here" /> 

Crear un filter de acción para verificar el JWT desde el encabezado de autorización

Podemos verificar que la request sea válida pasando el token del cliente en el encabezado de Autorización. En el server podemos almacenar nuestra key secreta que obtenemos de nuestro Firebase Dashboard. Cuando la API Web comtesting la request, podemos decodificar el JWT utilizando una biblioteca JWT ( disponible en NuGet ). Si la desencoding es exitosa, podemos verificar el token para asegurarnos de que no haya expirado.

 public class DecodeJWT: ActionFilterAttribute { public override void OnActionExecuting(System.Web.Http.Controllers.HttpActionContext actionContext) { string firebaseAuthToken = string.Empty; if (actionContext.Request.Headers.Authorization != null) { firebaseAuthToken = actionContext.Request.Headers.Authorization.Scheme; } else { throw new HttpException((int) HttpStatusCode.Unauthorized, "Unauthorized"); } string secretKey = WebConfigurationManager.AppSettings["FirebaseSecret"]; try { string jsonPayload = JWT.JsonWebToken.Decode(firebaseAuthToken, secretKey); DecodedToken decodedToken = JsonConvert.DeserializeObject < DecodedToken > (jsonPayload); // TODO: Check expiry of decoded token } catch (JWT.SignatureVerificationException jwtEx) { throw new HttpException((int) HttpStatusCode.Unauthorized, "Unauthorized"); } catch (Exception ex) { throw new HttpException((int) HttpStatusCode.Unauthorized, "Unauthorized"); } base.OnActionExecuting(actionContext); } } 

Crea un $ httpInterceptor agrega firebaseAuthToken al encabezado para cada request

En el cliente, el truco es que el token debe pasarse todo el time. Para facilitar esto, necesitamos crear un $httpInterceptor con Angular que verifique firebaseAuthToken en sessionStorage .

 .factory('authInterceptor', function ($rootScope, $q, $window) { return { request: function (config) { config.headers = config.headers || {}; if ($window.sessionStorage.firebaseAuthToken) { config.headers.Authorization = $window.sessionStorage.firebaseAuthToken; } return config; }, response: function (response) { if (response.status === 401) { // TODO: User is not authed } return response || $q.when(response); } }; }) 

Establezca firebaseAuthToken en sessionStorage en un inicio de session exitoso

Cada vez que un usuario inicia session, podemos establecer el valor en sessionStorage .

 $rootScope.$on('$firebaseSimpleLogin:login', function (e, user) { // add a cookie for the auth token if (user) { $window.sessionStorage.firebaseAuthToken = user.firebaseAuthToken; } cb(e, user); }); 

Registre el filter DecodeJWT globalmente

Dentro del método de logging WebApiConfig.cs , podemos configurar el filter DecodeJWT para que se aplique a todos nuestros ApiControllers.

 config.Filters.Add(new DecodeJWT()); 

Ahora, cada vez que hacemos una request a un ApiController, la rechazará a less que haya un JWT válido. Entonces, después de que un usuario inicia session, podemos save sus datos en un ApiController si ya no existe.

 // globally uses DecodeJWT public class UsersController: ApiController { // POST api/users public void Post([FromBody] FbUser user) // See GitHub for this Model { // Save user if we do not already have it } } 
  • Cuando se llama a jGrowl, la caja gruesa deja de funcionar correctamente (usando UpdatePanel)
  • System.Windows.Forms.WebBrowser no ejecuta Javascript
  • Conversión de una matriz de cadenas C # en una matriz Javascript
  • Crear classs de error personalizadas desde el código C ++ en V8
  • ¿Características de JavaScript que los desarrolladores de C no pueden aprovechar?
  • Asp.Net Identity: invalid_request al networkingirigir al llamar a la function REST GetExternalLogin
  • Error de JavaScript en Internet Explorer 11
  • La optimization del código Javascript para Find ()
  • Seleccione una fila RadGrid (lado del cliente) dentro de RadWindows
  • ASP.NET mvc detectar cambios en el cliente
  • Permitir que JavaScript se ejecute en un browser web de Windows
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.