SPA - Firebase 和 .Net WebApi 2 身份验证

我有一个用 AngularJs 编写的单页应用程序（此时框架无关紧要）该应用程序托管在 IIS 中，它由 index.html 和一堆客户端资产组成。

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

对于客户端身份验证，我使用 Firebase（简单登录）并启用了多个社交网络，例如 Facebook、Twitter 或 Google。

到目前为止，一切都很好。我喜欢使用 firebase 等轻松启用 Twitter 身份验证。

登录社交网络时，我从 firebase 获取 firebaseAuthToken 和提供者 accesstoken。

现在我想使用 firebaseAuthToken 或提供程序访问令牌通过我的 WebApi 进行身份验证。

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

由于我在服务器上部署了复杂的业务逻辑，因此无法选择仅使用 firebase 来存储我的数据并摆脱 Web api。

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

由于缺乏文档、复杂性以及与单页应用程序的集成不良，我没有使用 katana 的内置社交提供商支持。我发现 SPA 的 Visual Studio 模板太 mvc 特定。但这就是我:)

tl;dr - GitHub 上的演示项目

下面的步骤可能看起来很长，但实际上非常简单。我只用了一个小时左右就创建了我的演示项目。

我同意你关于使用 Owin 和 Katana 的观点。我以前经历过这个过程，但这并不是一次很棒的经历。使用 Firebase 就容易多了。

这一切都可以通过 JWT 来完成！

当您通过 Firebase 和任何社交提供商进行身份验证时，您会得到一个 JSON Web 令牌 (JWT) -firebaseAuthToken.

从仪表板获取您的 Firebase 秘密

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

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

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

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

创建操作过滤器以检查授权标头中的 JWT

我们可以通过在授权标头中传递客户端令牌来验证请求是否有效。在服务器上，我们可以存储从 Firebase 仪表板获取的密钥。当 Web API 检查请求时，我们可以使用 JWT 库对 JWT 进行解码（可从 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);
    }

}

创建一个 $http 拦截器，将 firebase AuthToken 添加到每个请求的标头中

在客户端，技巧是每次都必须传递令牌。为了使这更容易，我们需要创建一个$httpInterceptor与 Angular 一起检查firebaseAuthToken on 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);
        }
    };
})

成功登录后将 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通过注册方法，我们可以设置 DecodeJWT 过滤器以应用于所有 ApiController。

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

现在，每当我们向 ApiController 发出请求时，除非存在有效的 JWT，否则它都会拒绝该请求。因此，在用户登录后，如果 ApiController 不存在，我们可以将其数据保存到该 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
    }
}