Language: HTML | XAML

快速入門:個人化應用程式 (HTML)

Applies to Windows and Windows Phone

使用 JavaScript 的 Windows 市集應用程式可以使用 Live SDK 從使用者的 Microsoft 帳戶存取資料。

若要這樣做:

  • 請先在 Windows 市集中登錄應用程式以使用 Live Connect
  • 當應用程式執行時,使用者必須使用其 Microsoft 帳戶登入,並同意您的應用程式存取資料。
  • 使用者登入並同意之後,您的應用程式就可以存取使用者的設定檔資料來個人化經驗。

重要  本快速入門僅供說明與示範之用。如果想在要上傳至 Windows 市集的應用程式使用這個功能並提供給客戶,您必須包含登出功能與隱私權聲明,以及登入功能。完成本快速入門後,請閱讀 Microsoft 帳戶登入經驗的指導方針,了解如何新增這些功能。

先決條件

開發使用 JavaScript 的 Windows 市集應用程式 (使用 Live Connect 功能) 前,您必須在開發電腦上安裝必要的軟體。

  • 如果尚未安裝開發 Windows 市集應用程式所需的工具與 SDK,請安裝。這些工具包括 Microsoft Visual Studio 與其他工具。

  • Live SDK

  • 使用 JavaScript 的 Windows 市集應用程式已登錄可使用 Live Connect。

    附註  這個快速入門中顯示的程式碼會新增至 Visual Studio 中 JavaScript 專案的 [空白應用程式] 範本。

將使用者登入,並取得存取其資料的同意

新增可存取 Live Connect 功能的程式碼。

應用程式執行時,可為使用 Microsoft 帳戶登入的使用者顯示 Windows 登入控制項。登入之後,如果使用者尚未同意此應用程式,會提示使用者同意應用程式存取他們的個人檔案資訊。

若要在您的應用程式執行時將使用者登入,請在專案中執行此動作:

  1. 設定 Live SDK 參考如下:
    1. 在 [方案總管] 中,以滑鼠右鍵按一下 [參考] > [加入參考]
    2. 移至 [Windows] > [擴充功能],然後核取 [Live SDK] 旁邊的方塊。如果在清單中沒看見 [Live SDK],請重新安裝 Live SDK,然後重試此程序。
    3. 按一下 [確定] 結束對話方塊。
  2. 將 Live SDK 檔案中的 wl.js 檔案參照新增至應用程式。在 JavaScript 專案的 [空白應用程式] 範本中,這會新增至 Default.html。

    在應用程式主要程式碼檔的 <head> 標記以及 default.js 檔案的連結上方,像這樣新增 <script> 標記。

    
    <script src="///LiveSDKHTML/js/wl.js"></script>
    
    
  3. 在 default.html 的 <body> 標記中,新增程式碼以讓使用者登入其 Microsoft 帳戶,並以使用者資訊更新顯示。

    附註  如果使用者的電腦帳戶與其 Microsoft 帳戶關聯,這不會顯示 Microsoft 帳戶登入控制項。在此情況下,應用程式會自動登入。

    在 <body> 標記中,新增下列程式碼。

    
    <!--This is where the user's info will be written
     after the user has signed in.-->
    <label id="info"></label>
    
    <!--This is the script code that will sign the user in
     and display their name.-->
    <script>
        // Initialize the Live Connect features.
        //  This should be called from each file that 
        //  uses Live Connect features.
        WL.init();
    
        // Sign the user into their Microsoft account or connect 
        //  the app to the Microsoft account the user has associated 
        //  with their computer account.
        WL.login({
                scope: ["wl.signin"]
            }).then(
                function (response) {
                    onLoginComplete();
                },
                function (loginError) {
                    document.getElementById("info").innerText =
                       "Login Error: " + loginError.error + " - " + loginError.error_description;
                }
            );
    
        // If the user is signed in, then get their profile info
        function onLoginComplete() {
            WL.api({
                path: "me",
                method: "get"
            }).then(
                function (response) {
                    // update the display to show the user's name
                    document.getElementById("info").innerText =
                        "Hello " + response.name + "!";
                },
                function (infoError) {
                    document.getElementById("info").innerText =
                        "Data Request Error: " + infoError.error.message;
                }
            );
        }
    </script>
    
    
    

摘要與後續步驟

在這個主題中,您已學會如何開始在您的應用程式中使用 Live Connect,以存取使用者在 Microsoft 雲端服務 (例如 Outlook.com 與 Microsoft OneDrive) 中的資料。

若要繼續深入了解使用 Live Connect 的詳細資訊,請參閱 Microsoft 帳戶登入經驗的指導方針如何在應用程式中使用 Microsoft 服務主題,在這裡您可以了解如何新增登入與登出功能以及隱私權聲明。

如需應用程式如何善用使用者設定檔資料的詳細資訊,請參閱 Live Connect 文件中的取得使用者資料

 

 

顯示:
© 2014 Microsoft