如何实现带用户名密码认证弹窗的Power BI自定义数据连接器

Hey there! Let's figure out how to add a login UI to your Power BI custom connector so you can capture username and password for your Web API authentication. You mentioned you started with the HelloWorld sample—great foundation, now let's build on that.

We'll cover two approaches: using Power BI's built-in credential prompt (secure and easy) and building a fully custom login dialog (for tailored UI control).

1. Use Power BI's Native Username/Password Prompt (Recommended) #

This method leverages Power BI's built-in secure credential storage and standard login UI, so you don't have to build everything from scratch.

Step 1.1: Define Credential Type in Your Connector #

Update your .pq script to declare that your connector uses username/password authentication:

[DataSource.Kind="YourConnector", Publish="YourConnector.Publish"]
shared YourConnector.Contents = () =>
    let
        // Pull stored credentials from Power BI's secure store
        credentials = Extension.CurrentCredential(),
        username = credentials[Username],
        password = credentials[Password],
        
        // Call your Web API with the captured credentials
        authResponse = Web.Contents("https://your-api-endpoint.com/auth", [
            Headers = [#"Content-Type" = "application/json"],
            Content = Json.FromValue([
                username = username,
                password = password
            ])
        ]),
        parsedResult = Json.Document(authResponse)
    in
        parsedResult;

// Configure the connector's authentication type
YourConnector = [
    Authentication = [
        UsernamePassword = [] // Tells Power BI to show the native login prompt
    ],
    Label = "Your Custom API Connector"
];

Step 1.2: How It Works #

When users first connect, Power BI will automatically pop up its standard username/password dialog. Credentials are stored securely by Power BI, so users won't have to re-enter them every time they refresh the data.

2. Build a Fully Custom Login Dialog (For Tailored UI) #

If you need a branded or customized login experience, you can create a custom HTML/JS dialog that pops up to capture credentials.

Step 2.1: Embed the Custom HTML View #

Add a resource section to your .pq file with your login form:

section Resources;

resource CustomLoginDialog = "
<!DOCTYPE html>
<html>
<head>
    <title>Login to Your API</title>
    <style>
        body { font-family: 'Segoe UI', sans-serif; padding: 2rem; max-width: 350px; margin: 0 auto; }
        .form-field { margin-bottom: 1.5rem; }
        label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
        input { width: 100%; padding: 0.75rem; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
        button { width: 100%; padding: 0.75rem; background: #0078D4; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #005A9E; }
    </style>
</head>
<body>
    <div class='form-field'>
        <label for='username'>Username</label>
        <input type='text' id='username' placeholder='Enter your username' required>
    </div>
    <div class='form-field'>
        <label for='password'>Password</label>
        <input type='password' id='password' placeholder='Enter your password' required>
    </div>
    <button onclick='submitLogin()'>Sign In</button>

    <script>
        function submitLogin() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            // Pass credentials back to the connector and close the dialog
            window.close({ username: username, password: password });
        }
    </script>
</body>
</html>
";

Step 2.2: Integrate the Dialog into Your Connector Logic #

Modify your main connector function to show the custom dialog and use the captured credentials:

section Connector;

[DataSource.Kind="YourConnector", Publish="YourConnector.Publish"]
shared YourConnector.Contents = () =>
    let
        // Show the custom login dialog
        dialogResponse = Dialog.Show(CustomLoginDialog, [Width=400, Height=300, Title="Sign In to Your API"]),
        username = dialogResponse[username],
        password = dialogResponse[password],
        
        // Optional: Validate credentials aren't empty
        validate = if username = "" or password = "" then error "Username and password cannot be blank" else null,
        
        // Call your Web API
        authResponse = Web.Contents("https://your-api-endpoint.com/auth", [
            Headers = [#"Content-Type" = "application/json"],
            Content = Json.FromValue([
                username = username,
                password = password
            ])
        ]),
        parsedResult = Json.Document(authResponse)
    in
        parsedResult;

// Disable built-in auth since we're using a custom dialog
YourConnector = [
    Authentication = [None = []],
    Label = "Your Custom API Connector"
];

Key Notes to Keep in Mind #

• Security: The native prompt method is more secure because Power BI handles credential storage. If you use a custom dialog, you can manually cache credentials with Extension.SetCredential if needed.
• Testing: Use the Power Query SDK to test your connector—when you run it, the login dialog should pop up automatically.
• API Compatibility: If your API uses Basic Auth, you can simplify the call with Web.BasicAuth(username, password) instead of sending credentials in the request body.

内容的提问来源于stack exchange，提问作者mehwish