Live SDKノート4-SkyDrive Explorer,ASP.NET版

52109 ワード

ASPを試したことがある.NETがLive IDを統合して登録した後、使用者の名前とMSNの頭写真だけを取り戻すのは、どの家の酒を作るのに刺激的ではないような気がします.Live SDKは実用的な機能を持ってきて中毒になるべきです.例えば、SkyDriveファイルとファイルを閲覧します.
Live Connect APIはSkyDrive関連のREST APIを提供し、Access Tokenを取得すれば、APIを通じてSkyDrive下のファイル、写真、映像などのファイルを閲覧、読み取り、変更、削除することができ、MSDNには2つの良い教育文章(入門概念、ファイルアクセスAPI)が手作業前の参考とすることができる.
私の構想は、使用者がLive IDで登録する際に、SkyDriveの読み取りの範囲を増やして要求し、同意した後、プログラムはまず使用者SkyDriveのルートディレクトリを展開し、資料フォルダとファイルをリストすることである.ポイント選択フォルダプロジェクトは、その下のファイルとサブフォルダをリストするフォルダを展開することができます.ファイルの場合は、ポイントを選択してコンテンツをチェックまたはダウンロードします.(ブラウザはファイル名に依存して自分で検視またはダウンロードを決定します.例えば、gif、png、jpg、txt、htmは直接開くことができます.zip、rarはダウンロードして保存します)簡単に言えば、検視にしか使えない超陽春SkyDriveファイルの総管理を実現します.
整理に必要なSkyDrive REST APIは次のとおりです.
httqs://apis.live.net/v5.0/me/skydrive?access_token=ACCESS_TOKEN利用者SkyDriveマスターフォルダを取得するfolderId httqs://apis.live.net/v5.0/folderId/files?access_token=ACCESS_TOKEN指定されたフォルダの下にあるフォルダおよびアーカイブ項目リストをリストする
httqs://apis.live.net/v5.0/fileId/content?access_token=ACCESS_TOKENファイルのプロパティを取得します.locationプロパティは、ファイルを直接ダウンロードできるURLを指します.フォーマットは次のとおりです.httq://storage.live.com/s1pZfcNs...長い、省略...SotQ/Seattle.JPG)は、ファイルの内容を直接ダウンロードすることができます.なお、前述の冗長符号化を含むURLは、いわゆるPreauthenticated URLであり、このリンクを知っていれば、権限チェックは一切行われず、誰もがファイルコンテンツを直接ダウンロードすることができ、アプリケーションの開発時にこの特性に注意し、適切な管理と外流の回避を行うことを意味する.
はい、SkyDriveファイルチェック機能を実現するには、上記の3つのAPIだけでできます.
JavaScriptの操作部分については、jQuery BBQが外挂しているAJAX Hisotry机能と组み合わせ、异なるフォルダを点検する际に异なるstateを指定し、ブラウザで上のページに戻っても上のディレクトリに戻る効果を実现しました.それ以外に、とても単純なjQueryの技巧で、補足は私が注釈の中で書くことを説明して、プログラムのコードは以下の通りです:
レイアウト表示
じゅんもじ

<!DOCTYPE html>

<html>

<head>

    <title>SkyDrive Test</title>

    <script type='text/javascript'

     src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js'></script>

    <script src="jquery.ba-bbq.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //  Access Token，        null

            function getAccessToken() {

                var session = WL.getSession();

                if (session != null && !session.error)

                    return session.access_token;

                return null;

            //AJAX History  ，state

            window.lastId = null;

            $(window).bind("hashchange", function (e) {

                var f = e.getState("f");

                if (f) listFiles(f);

});

            var goUpper = "   ";

            var frmViewer = document.getElementById("frmViewer");

//

            function listFiles(folderId) {

                if (!getAccessToken()) return;

                //REST folderId/files

                WL.api({

                    path: folderId + "/files"

                }, function (res) {

                    var $ul = $("<ul class='f-item' />");

                    //folderId  "."    ，

                    //    "   "

                    if (folderId.split('.').length > 2)

                        $ul.append(

                        "<li><img src='images/parent.png' class='icon' />" +

                            goUpper + "</li>");

                    //            li

                    for (var i = 0; i < res.data.length; i++) {

                        var item = res.data[i];

                        var $li = $("<li />", {

                            "data-id": item.id,

                            "data-count": item.count,

                            "data-name": item.name,

                            "data-parent-id": item.parent_id,

                            "data-link": item.link

});

                        //id  folder****，

                        var isFolder = item.id.indexOf("folder") == 0;

                        $li.html(

                            "<img class='icon' src='images/" +

                        //      Icon

                            (isFolder ? "folder" : "save") + ".png' />" +

                            "<span class='item-name'></span>")

                        .find(".item-name").text(

                             item.name +

                        //    ，

                            (isFolder ? "(" + item.count + ")" : "")

);

                        $ul.append($li);

                    $("#dFolder").empty().append($ul);

                    frmViewer.src = "";

});

//

            function downloadFile(id, name) {

                //REST fileId/content

                WL.api({

                    path: id + "/content"

                }, function (res) {

                    if (res.error)

                        alert(res.error.message);

                    else {

                        //res.location

                        //    IFrame.src，

                        //          (          )

                        frmViewer.src = res.location;

});

//

            $("#dFolder").on("click", "li", function () {

                var $li = $(this);

                //     ，

                if ($li.text() == goUpper) {

                    $.bbq.pushState({ f: lastId });

                    return;

                var id = $li.data("id");

                if (id.indexOf("file") == 0)

                    downloadFile(id);

                else {

                    //     folderId

                    lastId = $.bbq.getState("f");

                    $.bbq.pushState({ f: id });

});

            $("#bList").click(function () {

                if (!getAccessToken()) return;

});

});

    </script>

    <style>

        table { width: 400px; }

        td { border: 1px solid gray; }

        div { margin: 2px; }

        #dFolder li { color: white; text-decoration: underline; cursor: pointer; }

        .bw-style { background-color: Black; color: White; }

        .bw-style .icon { width: 16px; height: 16px; vertical-align: middle; }

    </style>

</head>

<body>

<h1>SkyDrive Test</h1>

<table>

<tr><td style="width: 120px; vertical-align: top;">

<div id="signin"></div>

<div id="meName" class="Name"></div>

<div id="meImg"></div>

</td><td style="vertical-align: top;" class='bw-style'>

<div id="dFolder">

</div>

</td></tr>

<tr><td colspan="2">

<iframe style="width: 100%; height: 400px;" id="frmViewer"></iframe>

</td></tr>

</table>

<script src="wl.debug.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function () {

        WL.Event.subscribe("auth.login", function () {

            var session = WL.getSession();

            if (session.error)

                alert("Error:" + session.error);

            else {

                var token = session != null ? session.access_token : null;

                if (token != null) {

                    var url = "https://apis.live.net/v5.0/me/picture?access_token="

                    + escape(token);

                    $("#meImg").html("<img src='" + url + "' />");

                    WL.api({ path: "me", method: "get" }, function (response) {

                        if (!response.error) {

                            $("#meName").html(response.name);

});

                    //  SkyDrive Id，  AJAX History

                    $.bbq.pushState({ f: "" });

                    WL.api({

                        path: "me/skydrive"

                    }, function (prop) {

                        $.bbq.pushState({ f: prop.id });

});

});

        WL.Event.subscribe("auth.logout", function () {

            $("#meImg,#meName").html("");

});

        WL.init({

            client_id: "0000000048076EE5",

            redirect_uri: "http://www.darkthread.net/LiveSDK/callback.aspx",

            scope: ["wl.signin", "wl.basic", "wl.offline_access", "wl.skydrive" ],

            response_type: "code"

});

        WL.ui({

            name: "signin",

            element: "signin"

});

});

</script>

</body>

</html>

プログラムが実行される様子は下図のようで、右側はファイルリストで、下にIframeが置かれています.ポイント選択フォルダ(前方図はフォルダ)では、リストはそのフォルダが展開された項目になります.ファイルリストのファイル項目(前方Iconが小磁気ディスク)を選択すると、Iframe.srcはこのファイルのダウンロードサイトを指し、ドキュメントが直接表示され、他のZIPファイルなどがあれば、新しいファイルを保存することができる.(ただし、新しいファイルを保存する場合、SkyDriveサーバーがコンテンツに返信してもファイル名が提供されず、プリセットURLの臭いや長さが乱数の符号化プリセットがファイル名として扱われるため、手動で別途名前を付けてアーカイブする必要がある点は、Download Proxy ASPXを別途書くことで解決できるが、焦げを避けるためにサンプルには含まれていない)
もう一つ注目すべき点は、前回のLive IDの登録例に比べて、今回はwlを追加しました.skydrive読み取り範囲(Scope、前文参照)なので、同意ページ(Consent Page)にSkyDriveのヒント(下図赤枠)が表示されます.
また、上の図の中国語版の登録と同意のホームページを作るには、ファイルによると、私たちはhttp://js.live.net/v5.0/zh-tw/wl.js本体中国語版のJavaScript Libraryを取得しましたが、現在このバージョンの一番下にwl_が設定されていますapp._locale = "en";,その中のメッセージも英語です.したがって、Liveアカウントを呼び出してウィンドウに登録すると、英語のインタフェースが表示されます.一時解法はwl.jsは1部保存されwl_に変更されましたapp._locale="zh-tw";,ウェブページはこの修正版を使って中国語版の登録と同意の画面を得ることができます!しかし、将来的にはwl.js改版,修正版wl.jsは自動的に更新されないので、近いうちにマイクロソフトRDが本当にwlを実行するのを待つと思います.js多国語系化すれば、悩まなくてもいいです.
プログラムの実行後、ForAppsフォルダを開くと、その下のフォルダ構造が表示され、2つのドキュメントがあり、ドキュメントもその内容をチェックすることができます.
SkyDriveのウェブページの閲覧結果と比較して、私たちが調べた結果はForAppsのディレクトリの下のファイルの項目と内容と一致して、1つの陽春版SkyDriveのファイルの検査ツールはたとえ大功が成し遂げても!!

Asp.Net excelファイルを読み込むときのエラーメッセージ:外部テーブルが予想されるフォーマットではありません

探索ASP.NET MVCフレームワークのコントローラの検索とアクティブ化メカニズム