我有一个用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中,以便以后更容易访问.

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

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

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

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);
    }

}

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

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

.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);
        }
    };
})

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

每当用户登录时,我们都可以将值设置为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);
    });

全局注册DecodeJWT过滤器

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

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

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

// 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
    }
}

javascript – SPA – Firebase和.Net WebApi 2身份验证的更多相关文章

  1. 浅谈移动端网页图片预加载方案

    这篇文章主要介绍了浅谈移动端网页图片预加载方案 的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. html5录音功能实战示例

    这篇文章主要介绍了html5录音功能实战示例的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. 基于 HTML5 WebGL 实现的医疗物流系统

    物联网( IoT ),简单的理解就是物体之间通过互联网进行链接。这篇文章给大家介绍基于 HTML5 WebGL 实现的医疗物流系统,感兴趣的朋友跟随小编一起看看吧

  4. HTML5页面无缝闪开的问题及解决方案

    这篇文章主要介绍了HTML5页面无缝闪开方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. HTML5跳转小程序wx-open-launch-weapp的示例代码

    这篇文章主要介绍了HTML5跳转小程序wx-open-launch-weapp的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 如何使用Firebase在iOS上验证用户的电子邮件地址?

    我坚持使用firebase进行电子邮件验证.我四处寻找指导但没有帮助.在用户验证他的电子邮件后,我的代码仍然打印出用户尚未验证.我还在尝试习惯firebase的语法.这是我的代码:这是我注册部分的代码:解决方法您在签名之前检查了用户电子邮件是否已经过验证.这对我有用.

  7. ios – 1天后firebase crashlytics报告中没有数据

    解决方法对于那些仍然有问题的人.检查您的podfile中是否还有pod’Firebase/Crash’.当我删除旧的Firebase崩溃报告时,我的问题已修复.

  8. ios – Swift Firebase安全无法正常工作

    正如@M_G建议的那样,我从父母和.read中取出了.write.所以我的规则现在是:我现在得到这个输出:解决方法Firebase文档错误(暂时).在Firebase控制台中,打开规则模拟器.目前没有“密码”选项,我认为这是一个错误.如果您没有使用多个身份验证或多个身份验证在您的项目中无关紧要,请不要在您的规则中使用提供程序.否则,您可以测试此规则以进行密码验证:

  9. ios – Firebase:我应该将GoogleService-Info.plist添加到.gitignore吗?

    我正在将Firebase用于我想要开源的iOS项目.我上传之前是否应该将GoogleService-Info.plist添加到.gitignore我在Github上共享项目?我知道它包含我的API密钥,客户端ID等,这可能不安全公开?

  10. ios – Firebase动态链接中的customURLScheme是什么?

    在documentation中它说要将以下行添加到我的AppDelegate.swift:根据我的理解,这应该是您在info.plist中添加的相同链接.但是,我很困惑为什么在quickstart-iosrepo他们决定将其等同于“dlscheme”.任何人都可以帮我理解这个方案究竟是什么?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部