locked
CredentialPicker style and content options

    Question

  • This is a question related to a previous post:

    http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/2c7b290a-dd84-44a7-b3f4-29abc55fe010

    The question was around how to login control similar to what's shown when adding a Google account in Windows 8's Mail Metro app.  In ec-Updated's screenshot, the CredentialPicker dialog is styled with a black background and a button that says "Connect" instead of "OK".  How is the CredentialPicker styled?  I can't seem to find any documentation or examples of how to change these elements.

    Basically, I would like to my CredentialPicker dialog to look almost exactly like Microsoft's, but with different text and hyperlinks.  Is there a way to use CredentialPicker to do this?

    Thursday, May 03, 2012 12:04 AM

Answers

  • Correct, you are limited to changing the properties you see in the documentation.  Things like target name, caption and message.

    -Jeff


    Jeff Sanders (MSFT)

    Monday, May 07, 2012 6:00 PM
    Moderator

All replies

  • Why don't you use the CredentialPicker?

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, May 03, 2012 12:20 PM
    Moderator
  • Hi Jeff,

    I would love to use CredentialPicker, but I don't see a way, for example, to change the text of the buttons.  Right now it displays two buttons, "OK" and "Cancel".  How can I change "OK" to "Sign In"?

    Also, I would like to add hyperlinks to CredentialPicker, just like it shows in the screenshot above.  Is there an example of how to do this?

    Thursday, May 03, 2012 4:51 PM
  • Hi R,

    Signin is part of OAuth.  Are you using that?  If you do you will get that login dialog.

    If these features are completely necessary to your app (and you don't want the security and functionality of these apis) then you will need to design your own Dialog using standard HTML.  Then you can put this up in place of the built in functionality.

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, May 03, 2012 5:35 PM
    Moderator
  • Hi Jeff,

    CredentialPicker is extremely close to what I need, so I would prefer to use it if I can.  With this code snippet:

        var credentialPickerResults;
    
        function displayCredentialPicker() {
            var credentialPickerOptions = new Windows.Security.Credentials.UI.CredentialPickerOptions();
            credentialPickerOptions.targetName = "My App";
            credentialPickerOptions.caption = "My App";
            credentialPickerOptions.message = "Sign in to My App";
            credentialPickerOptions.authenticationProtocol = Windows.Security.Credentials.UI.AuthenticationProtocol.basic;
            credentialPickerOptions.alwaysDisplayDialog = true;
            var credentialPicker = Windows.Security.Credentials.UI.CredentialPicker;
            credentialPicker.pickAsync(credentialPickerOptions).done(
                function complete(result) {
                    console.log("pickAsync complete: username = " + result.credentialUserName + ", password = " + result.credentialPassword + " errorCode = " + result.errorCode);
                    credentialPickerResults = result;
                },
                function error(e) {
                    console.log("pickAsync error: " + e.message);
                }
            );
        }
    

    I get the following dialog:

    I just want to confirm that something like changing the "OK" button to display "Sign In" is not possible with CredentialPicker?  Or adding any hyperlinks below "Remember my credentials"?

    Thursday, May 03, 2012 11:39 PM
  • Correct, you are limited to changing the properties you see in the documentation.  Things like target name, caption and message.

    -Jeff


    Jeff Sanders (MSFT)

    Monday, May 07, 2012 6:00 PM
    Moderator