快速入門：使用帳戶設定飛出視窗窗格 (HTML)

  • 發行項

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]

您的應用程式可利用新的 ApplicationSettings API，以使用應用程式設定飛出視窗來顯示儲存在目前使用者之認證保險箱 (PasswordVault) 中的帳戶清單。如果您的應用程式使用大量的使用者帳戶來存取安全內容，這項功能尤其有用。

本主題將說明如何將 Accounts 命令新增至應用程式設定飛出視窗 (SettingsPane)，還有如何填入啟用該命令時顯示的 [帳戶] 設定窗格 (AccountsSettingsPane)。

先決條件

對 Windows.UI.ApplicationSettings (應用程式設定飛出視窗) 與 Windows.Security.Credentials (認證保險箱) 有基本了解會有幫助。

使用帳戶資料初始化認證保險箱

AccountsSettingsPane 會填入隨目前使用者的認證保險箱儲存的認證。為了示範，我們將建立新的認證保險箱執行個體並填入一些暫存資料，在本主題後面示範我們的 AccountsSettingsPane 時可以顯示該資料。

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }

        // Add dummy data
        var credLocker = new Windows.Security.Credentials.PasswordVault();
        credLocker.add(new Windows.Security.Credentials.PasswordCredential("doug", "user1", "password1"));
        credLocker.add(new Windows.Security.Credentials.PasswordCredential("doug", "user2", "password2"));
        credLocker.add(new Windows.Security.Credentials.PasswordCredential("ryan", "user1", "password1"));

        args.setPromise(WinJS.UI.processAll());
    }
};

實作設定協定與控制項回呼

接著是實作回呼方法 (會在稍後定義)，負責將 AccountsCommand 新增至 SettingsPane 組態，並在此應用程式執行時填入 AccountsSettingsPane。


var settingsPane = Windows.UI.ApplicationSettings.SettingsPane.getForCurrentView();

settingsPane.oncommandsrequested = function (args) {
    args.request.applicationCommands.append(
        Windows.UI.ApplicationSettings.SettingsCommand.accountsCommand);
};


var accountSettingsPane = Windows.UI.ApplicationSettings.AccountsSettingsPane.getForCurrentView();

在設定飛出視窗中包含 Accounts 命令與窗格

為了能對 AccountsSettingsPane 進行 UI 瀏覽，您的應用程式必須要求 AccountsCommand，它才能顯示在 SettingsPane 中。此命令一旦就位後，會在應用程式設定飛出視窗顯示為 Accounts。


accountSettingsPane.onaccountcommandsrequested = function (args) {

    // Called after successfully deleting the credential from the locker.
    // Perform any required cleanup and display Account settings pane to user 
    // to show that the credential has been deleted.
    var credDeleteHandler = function (command) {
        try {
            Windows.UI.ApplicationSettings.AccountsSettingsPane.show();
        }
        catch (e) { 
            // Handle error.
        }

    };

填入帳戶設定窗格

按下 [設定] 飛出視窗上的 Accounts 後，使用者會看到 [帳戶設定] 窗格。

在下列範例中，[帳戶設定] 窗格會填入認證保險箱中現存的帳戶資料 (之前的範例資料)，如果在應用程式工作階段期間將儲存的帳戶認證移到其他位置，便會更新 [帳戶設定] 窗格以反映該項變更。

// Populate the Accounts settings pane with credentials from the credential locker. 
// Provide the "Remove" command for each credential.
protected void OnAccountCommandsRequested(
    Windows.UI.ApplicationSettings.AccountsSettingsPane sender, 
    Windows.UI.ApplicationSettings.AccountsSettingsPaneCommandsRequestedEventArgs e)
{
    // Get the Deferral object if async operations are required.          
    var deferral = e.GetDeferral();


    // Handler for the delete credential command.    
    var credDeletedHandler = new Windows.UI.ApplicationSettings.
        CredentialCommandCredentialDeletedHandler(OnCredentialDeleted);

    // Get credentials to display in the Settings pane.
    var credLocker = new Windows.Security.Credentials.PasswordVault();
    IReadOnlyList<Windows.Security.Credentials.PasswordCredential> credentials = 
        credLocker.RetrieveAll();

    if (credentials.Count == 0)
        e.HeaderText = "No credentials found.";
    else
        e.HeaderText = "User credentials:";

    foreach (var c in credentials)
    {
        try
        {
            var credCommand = new Windows.UI.ApplicationSettings.
                CredentialCommand(c, credDeletedHandler);

            // Delete command is invoked after the system deletes the credential
            e.CredentialCommands.Add(credCommand);
        }
        catch (Exception err) 
        {
            // Handle error.
        }
    }

    // Complete the Deferral.
    deferral.Complete();
}

Windows.UI.ApplicationSettings 命名空間也會定義專門用於關聯命令與 WebAccount 的一組類別，因此可以透過應用程式設定飛出視窗來管理這些帳戶。

摘要

本主題說明如何在應用程式設定飛出視窗中顯示已儲存的使用者帳戶。若要了解如何為認證輸入提供 UI、在本機儲存認證或使用網路上的服務進行驗證，請參閱下列主題：

相關主題

Windows.UI.ApplicationSettings

Windows.Security.Credentials