javascript – SPA – Firebase和.Net WebApi 2身份验证

前端之家收集整理的这篇文章主要介绍了javascript – SPA – Firebase和.Net WebApi 2身份验证前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个用AngularJs编写的单页面应用程序(此时框架是无关紧要的)应用程序托管在IIS中,它由index.html和一堆客户端资产组成.

在后端我有WebApi 2,也作为单独的应用程序在IIS中托管.

对于客户端身份验证,我使用Firebase(简单登录),启用了几个社交网络,如Facebook,Twitter或Google.

到现在为止还挺好.我喜欢用firebase启用twitter身份验证是多么容易.

在使用社交网络登录时,我从firebase返回,firebaseAuthToken和提供者accessstoken.

现在我想使用firebaseAuthToken或提供者访问令牌来验证我的WebApi.

问题是:在给定条件下使用WebApi进行身份验证的最佳方法是什么?

因为我在服务器上安装了复杂的业务逻辑,所以没有选项只使用firebase来存储我的数据并摆脱web api.

到目前为止,我有一个愚蠢的想法是将社交提供者访问令牌传递给服务器,针对提供者验证令牌,然后使用Owin -Katana发出安全令牌.

由于缺乏文档,复杂性以及与单页应用程序的错误集成,我没有使用katana构建社交提供程序支持.我发现SPA的视觉工作室模板太具体了.但那是我:)

解决方法

tl; dr – Demo Project on GitHub

下面的步骤可能看起来很长,但实际上很容易.我在一个小时左右的时间里创建了我的演示项目.

我同意你关于使用Owin和Katana的看法.我以前经历过这个过程,并不是一个很棒的经历.使用Firebase非常容易.

这一切都可以通过JWT完成!

当您通过Firebase和任何社交提供程序进行身份验证时,您将获得JSON Web令牌(JWT) – firebaseAuthToken.

从仪表板中获取Firebase Secret

JWT的工作方式是我们有一个秘密令牌和一个客户端令牌.客户端令牌是我们登录后收到的firebaseAuthToken.在Firebase仪表板中为我们生成了密钥令牌.

将Firebase Secret存储在Web.config的appSettings部分中

我们需要将此密钥存储在Web.config中,以便以后更容易访问.

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

创建一个Action Filter以从Authorization Header中检查JWT

我们可以通过在Authorization标头中传递客户端令牌来验证请求是否有效.在服务器上,我们可以存储从Firebase仪表板获取的密钥.当Web API检查请求时,我们可以使用JWT库解码JWT(available from NuGet).如果解码成功,那么我们可以检查令牌以确保它没有过期.

  1. public class DecodeJWT: ActionFilterAttribute
  2. {
  3.  
  4. public override void OnActionExecuting(System.Web.Http.Controllers.HttpActionContext actionContext)
  5. {
  6. string firebaseAuthToken = string.Empty;
  7. if (actionContext.Request.Headers.Authorization != null) {
  8. firebaseAuthToken = actionContext.Request.Headers.Authorization.Scheme;
  9. } else {
  10. throw new HttpException((int) HttpStatusCode.Unauthorized,"Unauthorized");
  11. }
  12.  
  13. string secretKey = WebConfigurationManager.AppSettings["FirebaseSecret"];
  14. try {
  15. string jsonPayload = JWT.JsonWebToken.Decode(firebaseAuthToken,secretKey);
  16. DecodedToken decodedToken = JsonConvert.DeserializeObject < DecodedToken > (jsonPayload);
  17. // TODO: Check expiry of decoded token
  18. } catch (JWT.SignatureVerificationException jwtEx) {
  19. throw new HttpException((int) HttpStatusCode.Unauthorized,"Unauthorized");
  20. } catch (Exception ex) {
  21. throw new HttpException((int) HttpStatusCode.Unauthorized,"Unauthorized");
  22. }
  23.  
  24. base.OnActionExecuting(actionContext);
  25. }
  26.  
  27. }

创建$httpInterceptor将firebaseAuthToken添加到每个请求的标头中

在客户端,诀窍是每次都必须传递令牌.为了使这更容易,我们需要使用Angular创建一个$httpInterceptor,以检查sessionStorage上的firebaseAuthToken.

  1. .factory('authInterceptor',function ($rootScope,$q,$window) {
  2. return {
  3. request: function (config) {
  4. config.headers = config.headers || {};
  5. if ($window.sessionStorage.firebaseAuthToken) {
  6. config.headers.Authorization = $window.sessionStorage.firebaseAuthToken;
  7. }
  8. return config;
  9. },response: function (response) {
  10. if (response.status === 401) {
  11. // TODO: User is not authed
  12. }
  13. return response || $q.when(response);
  14. }
  15. };
  16. })

成功登录后,将firebaseAuthToken设置为sessionStorage

每当用户登录时,我们都可以将值设置为sessionStorage.

  1. $rootScope.$on('$firebaseSimpleLogin:login',function (e,user) {
  2.  
  3. // add a cookie for the auth token
  4. if (user) {
  5. $window.sessionStorage.firebaseAuthToken = user.firebaseAuthToken;
  6. }
  7.  
  8. cb(e,user);
  9. });

全局注册DecodeJWT过滤器

在WebApiConfig.cs Register方法的内部,我们可以设置DecodeJWT过滤器以应用于我们所有的ApiControllers.

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

现在每当我们向ApiController发出请求时,它都会拒绝它,除非有一个有效的JWT.因此,在用户登录后,如果它已经不存在,我们可以将它们的数据保存到ApiController.

  1. // globally uses DecodeJWT
  2. public class UsersController: ApiController
  3. {
  4. // POST api/users
  5. public void Post([FromBody] FbUser user) // See GitHub for this Model
  6. {
  7. // Save user if we do not already have it
  8. }
  9. }

猜你在找的JavaScript相关文章