User Profile

SharePoint позволяет узнать о пользователе буквально все. Интересы, способности, контактные данные и так далее. Так почему же не воспользоваться этим в нашем приложение.Если хотите узнать как, тогда поехали.



Первое, что нам надо сделать, это конечно создать SharePoint-hosted app. Ну с этим я думаю проблем не возникнет. Свой проект я назвал UserCard. Удаляем все ненужные скрипты( такие, например как JQuery) и стили. Так  как мы используем библиоеку AngularJS (скачать можно на офф. сайте) , добавляем ее в проект, в папку Vendor. И добавляем на страницу ссылку на нее. В папку userCardApp мы будем складывать наши js файлы.
Ну вот, после всех приготовлений проект в Visual Studio должен выглядеть примерно так.

Первая наша задача - поприветствовать текущего пользователя и вывести его email.

Но в начале надо создать angular приложение, не зря же мы добавили эту библиотеку в наше решение. Добавляем к нашему проекту новый js файл и кладем его в папку userCardApp. Файл назовем аналогично. И не забудем добавить ссылку на этот файл в default.aspx.

И пишем в этом файле всего лишь одну строчку

angular.module("userCardApp", []);

После открываем default.aspx и в PlaceHolderMain вставляем следующую разметку

<div ng-app="userCardApp">{{1 + 1}}</div>

Устанавливаем решение на SharePoint. Смотрим результат и видим вместо {{1 + 1}} двойку. Магия AngularJS c нами. Теперь все, что находится в нашем div'е будет обрабатывать AngularJS  Можно наконец-то выполнять нашу первую задачу.
 Первое, что мы сделаем, это изменим разметку.Теперь она будет такая:

<div ng-app="userCardApp" ng-controller ="userCardCtrl">
        <p>
            Приветствую тебя,{{user.name}}. Это твой {{user.email}}.
        </p>
    </div>
 

У div'a появился новый атрибут, содержащий имя контроллера, который отвечает за этот блок. Почитать про  контроллеры можно по этой ссылочке. Ну что же напишем этот контроллер.
Открываем наш userCardApp.js и вставляем следующий код.

 

angular.module("userCardApp").controller("userCardCtrl", ["$scope", function ($scope) {
   "use strict";
    $scope.user = {
       name: "",
       email: "",
    }
    onLoad();
    function onLoad() {
    }
}]);

Мы объявили контроллер и объявили два свойства, которые будем отображать. Теперь нам надо эти свойства инициализировать.
Для этого необходимо сформировать ссылку для запроса.Что нам надо для ссылки?

1. URL сайта, на котором находится наше приложение(AppUrl)
2. Endpoint URI для получения текущего пользователя

AppUrl мы можем получить из QueryString. Напишем простой сервис для этого и добавим его в userCardApp.js . Назовем его context. Больше про сервиcы вы сможете прочитать по этой ссылке.

angular.module("userCardApp").factory("context", [function () {
    "use strict";
    var appQueryKey = "SPAppWebUrl";
    var hostQueryKey = "SPHostUrl";

    function getQueryStringParameter(paramToRetrieve) {
        var params, strParams, queryString;
        queryString = getQueryString();
        if (queryString) {
            params = queryString.split("&");
            strParams = "";
            for (var i = 0; i < params.length; i = i + 1) {
                var singleParam = params[i].split("=");
                if (singleParam[0] === paramToRetrieve)
                    return singleParam[1];
            }
        } else {
            return "";
        }
    }

    function getQueryString() {
        return document.URL.split("?")[1];
    }

    function getValueFromQueryString(key) {
        return decodeURIComponent(getQueryStringParameter(key));
    }

    return {
        appUrl: getValueFromQueryString(appQueryKey),
        hostUrl: getValueFromQueryString(hostQueryKey),
    };

}]); 

Endpoint URI для текущего пользователя - "/_api/web/CurrentUser". Склеиваем эти две строке и получаем валидный REST url для запроса.
Для выполнения запросов к SharePoint создадим еще один сервис requester.

angular.module("userCardApp").factory("requester", ["$http", "$q", "$log", function ($http, $q, $log) {
    "use strict";
    function get(requestUrl) {
        var defer = $q.defer();
        if (angular.isString(requestUrl) && requestUrl !== "") {
            $http({
                method: "GET",
                headers: {
                    "accept": "application/json;odata=verbose",
                    "content-type": "application/json;odata=verbose"
                },
                url: requestUrl
            }).success(function (data) {
                if (data.d)
                    data = data.d;
                if (data.results)
                    data = data.results;
                defer.resolve(data);
            }).error(function (errorData) {
                $log.error(errorData);
                defer.reject(errorData.error.message.value);
            });
        } else {
            defer.reject("Request url is empty:(");
        }
        return defer.promise;
    }

    return {
        get: get
    };
}]); 

"$http", "$q", "$log" - это зависимости нашего сервиса, с которыми он работает. Подробнее механизм зависимостей AngularJS читайте по ссылке. Наш сервис выполняет GET запрос по указанному url и возвращает нам данные.
Так как надо держать наш контроллер в чистоте, для выполнения запроса напишем еще один сервис, который будет работать с сервисами context и requester. Назовем его userProfileManager.

angular.module("userCardApp").factory("userProfileManager", ["$q", "context", "requester",
function ($q, context, requester) {
    "use strict";
    function getCurrentUserNameAndEmail() {
        var defer = $q.defer();
        var requestUrl = context.appUrl + "/_api/web/CurrentUser";
        requester.get(requestUrl).then(function (data) {
            defer.resolve({
                name: data.Title,
                email: data.Email
            });
        }, function (error) {
            defer.reject(error);
        });
        return defer.promise;
    }
    return {
        getCurrentUserNameAndEmail: getCurrentUserNameAndEmail,
    };
}]); 

Сервис создает наш REST URL, по которому мы получим данные текущего пользователя и выполняет сам запрос, используя сервис requester.
А теперь изменим наш контроллер, что бы он мог воспользоваться нашими сервисами. Приведем его к такому ввиду

angular.module("userCardApp").controller("userCardCtrl", ["$scope", "userProfileManager", function ($scope, userProfileManager) {
    "use strict";
    $scope.user = {
        name: "",
        email: "",
    }
    onLoad();

    function onLoad() {
        userProfileManager.getCurrentUserNameAndEmail().then(function (data) {
            $scope.user.name = data.name;
            $scope.user.email = data.email;
        });
    }
}]); 
 

Сохраняем все наши изменения и разворачиваем проект на SharePoint. Смотрим результат. Вуаля все работает.

Полный листинг userCardApp.js.(кликабельно)

angular.module("userCardApp", []);

angular.module("userCardApp").controller("userCardCtrl", ["$scope", "userProfileManager", function ($scope, userProfileManager) {
    "use strict";
    $scope.user = {
        name: "",
        email: "",
    }

    onLoad();

    function onLoad() {
        userProfileManager.getCurrentUserNameAndEmail().then(function (data) {
            $scope.user.name = data.name;
            $scope.user.email = data.email;
        });
    }
}]);

angular.module("userCardApp").factory("context", [function () {
    "use strict";
    var appQueryKey = "SPAppWebUrl";
    var hostQueryKey = "SPHostUrl";

    function getQueryStringParameter(paramToRetrieve) {
        var params, strParams, queryString;
        queryString = getQueryString();
        if (queryString) {
            params = queryString.split("&");
            strParams = "";
            for (var i = 0; i < params.length; i = i + 1) {
                var singleParam = params[i].split("=");
                if (singleParam[0] === paramToRetrieve)
                    return singleParam[1];
            }
        } else {
            return "";
        }

    }

    function getQueryString() {
        return document.URL.split("?")[1];
    }

    function getValueFromQueryString(key) {
        return decodeURIComponent(getQueryStringParameter(key));
    }

    return {
        appUrl: getValueFromQueryString(appQueryKey),
        hostUrl: getValueFromQueryString(hostQueryKey),
    };

}]);

angular.module("userCardApp").factory("requester", ["$http", "$q", "$log", function ($http, $q, $log) {
    "use strict";
    function get(requestUrl) {
        var defer = $q.defer();
        if (angular.isString(requestUrl) && requestUrl !== "") {
            $http({
                method: "GET",
                headers: {
                    "accept": "application/json;odata=verbose",
                    "content-type": "application/json;odata=verbose"
                },
                url: requestUrl
            }).success(function (data) {
                if (data.d)
                    data = data.d;
                if (data.results)
                    data = data.results;
                defer.resolve(data);
            }).error(function (errorData) {
                $log.error(errorData);
                defer.reject(errorData.error.message.value);
            });
        } else {
            defer.reject("Request url is empty:(");
        }
        return defer.promise;
    }

    return {
        get: get
    };
}]);

angular.module("userCardApp").factory("userProfileManager", ["$q", "context", "requester",
function ($q, context, requester) {
    "use strict";
    function getCurrentUserNameAndEmail() {
        var defer = $q.defer();
        var requestUrl = context.appUrl + "/_api/web/CurrentUser";
        requester.get(requestUrl).then(function (data) {
            
            defer.resolve({
                name: data.Title,
                email: data.Email
            });
        }, function (error) {
            defer.reject(error);
        });
        return defer.promise;
    }

    return {
        getCurrentUserNameAndEmail: getCurrentUserNameAndEmail,
    };
}]);

Теперь внимательно посмотрим, что же нам возвращает SharePoint. Перейдем по  Rest url, который сформировали, в браузере.

 

Что не очень много информации вернул нам SharePoint. Где же более подробная информация о пользователе? Ответ в заголовке поста:) Полная информация о пользователе находится в его профиле.

Задача вторая - получить профиль текущего пользователя.  

Для этого нашему приложению понадобиться больше прав. Необходимо в манифесте приложения указать, что нам требуется права на чтения профилей пользователей. Открываем наше приложение в Visual Studio, открываем AppMainifest.xml и переходим на вкладку Permissions. Выбираем необходимые права.

 Endpoint URI для получения профиля текущего пользователя - "/_api/SP.UserProfiles.PeopleManager/GetMyProperties". Посмотрим, что вернет SP по это урлу.

Использую этот Endpoint URI мы можем получить все информацию о пользователе, которая есть в SharePoint. Массив UserProfileProperties включает в себя около 100 стандартных полей, от интересов пользователя до номера телефона.
Мы же просто попробуем получить аватар пользователя.
Для этого добавим в в сервис userProfileManager еще один метод getCurrentUserPhoto. Обновленный userProfileManager.

angular.module("userCardApp").factory("userProfileManager", ["$q", "context", "requester",
function ($q, context, requester) {
    "use strict";
    function getCurrentUserNameAndEmail() {
        var defer = $q.defer();
        var requestUrl = context.appUrl + "/_api/web/CurrentUser";
        requester.get(requestUrl).then(function (data) {
            defer.resolve({
                name: data.Title,
                email: data.Email
            });
        }, function (error) {
            defer.reject(error);
        });
        return defer.promise;
    }

    function getCurrentUserPhoto() {
        var defer = $q.defer();
        var requestUrl = context.appUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties?$select=PictureUrl";
        requester.get(requestUrl).then(function (data) {
            defer.resolve(data.PictureUrl);
        }, function (error) {
            defer.reject(error);
        });
        return defer.promise;
    }
    return {
        getCurrentUserNameAndEmail: getCurrentUserNameAndEmail,
        getCurrentUserPhoto: getCurrentUserPhoto
    };
}]); 

Обновленный контроллер

 angular.module("userCardApp").controller("userCardCtrl", ["$scope", "userProfileManager", function ($scope, userProfileManager) {
    "use strict";
    $scope.user = {
        name: "",
        email: "",
        imageUrl: ""
    }
    onLoad();

    function onLoad() {
        userProfileManager.getCurrentUserNameAndEmail().then(function (data) {
            $scope.user.name = data.name;
            $scope.user.email = data.email;
        });

        userProfileManager.getCurrentUserPhoto().then(function (imgUrl) {
            $scope.user.imageUrl = imgUrl;
        })
    }
}]);

и разметка

     <div ng-app="userCardApp" ng-controller ="userCardCtrl">
        <img ng-src="{{user.imageUrl}}" />
        <p>
            Приветствую тебя,{{user.name}}. Это твой {{user.email}}.
        </p>
       
    </div>

Запускаем и проверяем результат.

И напоследок.. заметили, что картинка совсем небольшая? Есть простой способ ее увеличить.
Название картинки заканчивается MThumb.jpg. Достаточно заменить символ "M" на "L" и вы получите картинку большего размера. Ну или наоборот замените на "S",но вы вряд ли что-то разглядите!
На этом все)