使用OAuth打造webapi認證服務供本身的客戶端使用（二）

在上一篇」使用OAuth打造webapi認證服務供本身的客戶端使用「的文章中咱們實現了一個採用了OAuth流程3-密碼模式（resource owner password credentials）的WebApi服務端。今天咱們來實現一個js+html版本的客戶端。

1、angular客戶端

angular版本的客戶端代碼來自於http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/，接下來咱們作個簡單的梳理，方便你們在項目中使用。

一、新建一個angular module，咱們使用ngRoute來實現一個單頁面程序，LocalStorageModule用來在本地存放token信息，angular-loading-bar是一個頁面加載用的進度條。

var app = angular.module('AngularAuthApp', ['ngRoute', 'LocalStorageModule', 'angular-loading-bar']);

二、新建一個constant，angular中的constant能夠注入到任意service和factory中，是存儲全局變量的好幫手。

app.constant('ngAuthSettings', {
    apiServiceBaseUri: 'http://localhost:56646/',
    clientId: 'ngAuthApp'
});

地址:http://localhost:56646/就是咱們本身的webApi地址。

三、authService中定義了登陸和登出邏輯，登陸邏輯就是咱們使用OAuth2.0中的流程3獲取token的過程，一旦得到到token也就意味着咱們登陸成功了。

var _login = function (loginData) {

        var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password;

        var deferred = $q.defer();

        $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) {

            if (loginData.useRefreshTokens) {
                localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName, refreshToken: response.refresh_token, useRefreshTokens: true });
            }
            else {
                localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName, refreshToken: "", useRefreshTokens: false });
            }
            _authentication.isAuth = true;
            _authentication.userName = loginData.userName;
            _authentication.useRefreshTokens = loginData.useRefreshTokens;

            deferred.resolve(response);

        }).error(function (err, status) {
            _logOut();
            deferred.reject(err);
        });


        return deferred.promise;

    };

咱們按照OAuth2.0中的流程3來Post數據，拿到token信息後保存在localStorageService。

三、啓動AngularClient.Web項目嘗試一下登陸

因爲同源策略的緣由，咱們須要在WebApi服務端啓用cors，打開Startup類配置cors:

四、一旦登陸成功意味着咱們拿到了token，因此能夠憑token訪問受限的資源，例如http://localhost:56646/api/orders。只須要在每一個請求頭中加入Authorization:Bearer {{token}}便可。

咱們能夠使用angular的攔截功能，只須要在$http服務中攔截每一個請求，在請求頭中加入token便可。

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('authInterceptorService');
});

angular中的provider是能夠配置的，正如上面的代碼咱們添加了一個authInterceptorService攔截服務。

攔截邏輯也很簡單：若是在localStorageService中讀到token，就添加一個header。

var _request = function (config) {

        config.headers = config.headers || {};
       
        var authData = localStorageService.get('authorizationData');
        if (authData) {
            config.headers.Authorization = 'Bearer ' + authData.token;
        }

        return config;
    }

五、再次登陸，當登陸成功後成功調用到了http://localhost:56646/api/orders服務

2、JQuery客戶端

JQuery客戶端的實現思路也差很少，首先發一個post請求獲取token:

var apiServiceBaseUri = 'http://localhost:56646/';
        $('#login').click(function () {
            var data = {
                'grant_type': 'password',
                'username': $('#userName').val(),
                'password': $('#password').val()
            };
            $.ajax({
                url: apiServiceBaseUri + 'token',
                type: "POST",
                data: data,
                dataType: 'json',
                success: function (data) {
                    $.cookie("token", data.access_token);
                    getOrders();
                },
                error: function (xmlHttpRequest) {
                    $("#message").html(xmlHttpRequest.responseJSON.error_description);
                    $("#message").show();
                }
            });

token一旦獲取成功就保存在cookie中。接下來拿token去訪問受限的服務：

var getOrders = function () {
            $.ajax({
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + $.cookie("token"));
                },
                url: apiServiceBaseUri + 'api/orders',
                type: "GET",
                dataType: 'json',
                success: function (data) {
                    showOrderTable(data);
                }
            });
        }

經過xhr.setRequestHeader('Authorization', 'Bearer ' + $.cookie("token")); 的方式將token添加到請求頭，相對angular的攔截方案，此方案就顯得比較繁瑣了，每一個http請求都得有添加此行代碼。

全部代碼同步更新在 https://git.oschina.net/richieyangs/OAuthPractice.git