SharePoint 2013 APP 開發示例 （二）獲取用戶信息

這個示例裏，咱們將演示如何獲取用戶信息：

1. 打開 Visual Studio 2012.
2. 建立一個新的  SharePoint 2013 app: UserProfileTest.
3. 選擇SharePoint-hosted， 點Finish.

4. 打開Default.aspx :
加入knockoutjs和sp.userprofiles.debug.js（包含user profile的信息）：

    <script type="text/javascript" src="../Scripts/knockout-3.0.0.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.debug.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.debug.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.userprofiles.debug.js"></script>

修改title：

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    User Information
</asp:Content>

加入用戶顯示：

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

<h2>Current User Properties</h2>

<table data-bind="with: currentUser">
        <tr>
            <td>title</td>
            <td data-bind="text: get_title()"></td>
        </tr>
        <tr>
            <td>Id</td>
            <td data-bind="text: get_id()"></td>
        </tr>
        <tr>
            <td>loginName</td>
            <td data-bind="text: get_loginName()"></td>
        </tr>
        <tr>
            <td>email</td>
            <td data-bind="text: get_email()"></td>
        </tr>
        <tr>
            <td>isSiteAdmin</td>
            <td data-bind="text: get_isSiteAdmin()"></td>
        </tr>
    </table>

</asp:Content>

5. 打開App.js 修改以下：

前二行引用的js提供了智能感知的功能

/// <reference path="knockout-3.0.0.debug.js" />
/// <reference path="~/_layouts/15/sp.userprofiles.debug.js" />

$(function () {
    ko.applyBindings(new userProfileProps());
});

function userProfileProps() {
    var self = this;
    self._currentUser = null;
    self.currentUser = ko.observable();
   

    self.load = function () {
        var context = SP.ClientContext.get_current();
        self._currentUser = context.get_web().get_currentUser();
        context.load(self._currentUser);

        var pm = new SP.UserProfiles.PeopleManager(context);
        self._props = pm.getMyProperties();
        context.load(self._props);

        context.executeQueryAsync(
            Function.createDelegate(self, self.onSuccess),
            Function.createDelegate(self, self.onFail)
            );
    }

    self.onSuccess = function () {
        self.currentUser(self._currentUser);
    }

    self.onFail = function (sender, args) {
        alert("Unable to access user information: " + args.get_message());
    }

    self.load();
}

6. 保存併發布.
7. APP頁面顯示以下：

對於基本的安全檢查，這些信息足夠了。但爲了實現個性化， 咱們還要用到 user profile.
8. 中止debug.
9. 打開Default.aspx ，加上 user profile:

<br />
    <h2>User Profile Properties</h2>
    <table data-bind="with: currentProps">
        <tr>
            <td>AccountName</td>
            <td data-bind="text: AccountName"></td>
        </tr>
        <tr>
            <td>UserName</td>
            <td data-bind="text: UserName"></td>
        </tr>
        <tr>
            <td>FirstName</td>
            <td data-bind="text: FirstName"></td>
        </tr>
        <tr>
            <td>LastName</td>
            <td data-bind="text: LastName"></td>
        </tr>
        <tr>
            <td>PreferredName</td>
            <td data-bind="text: PreferredName"></td>
        </tr>
        <tr>
            <td>WorkEmail</td>
            <td data-bind="text: WorkEmail"></td>
        </tr>
        <tr>
            <td>WorkPhone</td>
            <td data-bind="text: WorkPhone"></td>
        </tr>
        <tr>
            <td>PictureURL</td>
            <td>
                <img src="#" data-bind="attr: { src: PictureURL }" /></td>
        </tr>
    </table>

10. 打開  App.js ，在這行 var self=this; declaration:後面加上：

self._props = null;
self.userProps = ko.observable();

11. 在這行executeQueryAsync(): 前加上：

var pm = new SP.UserProfiles.PeopleManager(context);
self._props = pm.getMyProperties();
context.load(self._props);

12. 加上這行到 self.onSuccess() function:

self.userProps(self._props.get_userProfileProperties());

13. 打開AppManifest.xml file.
14. 選擇Permissions tab.
15. scope 選擇 User Profiles ， permission 選擇 Read.

16. 發佈.
17. 你將看到一個要你受權的頁面，點 Trust It. 這個頁面應該顯示以下：

在user profile service有不少屬性.你還能夠建立自定義的屬性， self._props.get_userProfileProperties() 建立了一個對象，包含了全部賦予它的 profile 屬性
， 很容易在debug時查看或者bind它的值到html 上。

 

SharePoint 2013 APP 開發示例 系列