Supporting Power Automate Credentials in Connections

[cdgolmar-msft]

This discussion is a feature request for adding support Credentials connector annotation and Credential picker - used in Power Automate.

The suggested approach is implemented in pull request #3748.

What are Credentials?

The new Credentials page (preview) in Power Automate allows you to create, edit, and share login
credentials using Azure Key Vault and use them in desktop flow connections.

Learn more with the documentation: Use credentials in desktop flow connections (preview).

Screenshots	(v1 designer)
Parameters with options to switch to Credentials
Credential pickerw ith options to switch back to parameters

How Credentials work?

Credentials are stored as Dataverse table records, they reference Environment Variables - as of today: one of type String for the username, one of type Secret (through Azure Key Vault) for the password.
There is a dedicated API in Dataverse to retrieve values for a given Credential record.

Connectors supporting Credentials declare in their schema which connection parameters belong to a credential mapping and how to assign the right credential value to each mapped connection parameter.

Consequently, the availability of the Credential picker in the connection setup is data-driven by the connector definition.

{
    // In connection parameters
    "password": {
        "type": "securestring",
        "uiDefinition": {
            "displayName": "Password",
            "description": "Password credential",
            "tooltip": "Password credential",
            "credentialMapping": { // 🆕 Credential mapping declaration 🆕
                "mappingName": "WindowsCredentials",
                "displayName": "Windows Credential (preview)",
                "tooltip": "Windows Credential",
                "values": [
                    {
                        "type": "UserPassword", // Type of Credential supported (for future extension to other types)
                        "credentialKeyName": "PasswordKey" // How to extract the actual value to store in the connection parameter from the API call.
                    }
                ]
            },
            "constraints": {
                "tabIndex": 3,
                "required": "true"
            }
        }
    },
}

Supporting Credentials in designer

Screenshots
Credential picker in "credentials" mode
Credential picker in "parameters" mode

Dependencies

The Credentials feature has two major dependencies for setting up the connection:

• Connector definition supporting the necessary metadata annotation. This is totally generic, and this parsing can occur directly in the designer.
• Dataverse table and APIs availability for Credential to retrieve the value to store. This part requires an environment that only the Power Automate host can provide when the designer is used.

Proposed approach

The following approach takes into account these principles:

• implement generic code in the designer - support cases rather specific ad-hoc branching
• prefer proper dependency injection to avoid than hacks and implicit dependencies - leverage Services from Power Automate
• be a data-driven UX - leverage new connector definition annotations

Credential connector metadata parsing.
From the connector definition, the connection setup panel (\designer-ui\src\lib\createConnection\) - which renders each connection parameter - identifies if parameters belong to a Credential mapping.

Custom Credential component rendering.
A new method in IConnectionParameterEditorService is called to determine if the host supports Credentials - hence should provide the react component to use

Note: This is optional, not implementing this method or not returning a component keeps the current behavior

If a component is returned, the corresponding parameters are not rendered in favor of rendering tghe provided Credential picker component

This is implemented in pull request #3748.

export interface IConnectionParameterEditorService {
  getConnectionParameterEditor(parameter: IConnectionParameterInfo): undefined | IConnectionParameterEditorOptions;
  // 🆕 New method
  getCredentialMappingEditorOptions?(mappingParams: IConnectionCredentialMappingInfo): undefined | IConnectionCredentialMappingOptions;
}

// 🆕 What the service receives to determine whether a Credential picker component should be returned
export interface IConnectionCredentialMappingInfo {
  connectorId: string; // The connector
  mappingName: string; // The identifier of the mapping
  parameters: {        // The parameters included in the mapping
    [key: string]: ConnectionParameterSetParameter | ConnectionParameter;
  };
}

// 🆕 Props to be passed to the received Credential picker component when rendering it
export interface IConnectionCredentialMappingEditorProps {
  connectorId: string; // The connector
  mappingName: string; // The identifier of the mapping
  parameters: {        // The parameters included in the mapping
    [key: string]: ConnectionParameterSetParameter | ConnectionParameter;
  };
  setParameterValues: React.Dispatch<React.SetStateAction<Record<string, unknown>>>; // Called to set parameter values to be saved
  renderParameter: (key: string, parameter: ConnectionParameterSetParameter | ConnectionParameter) => JSX.Element; // Ability to render the regular connection parameter editor
}

export interface IConnectionCredentialMappingOptions {
  /**
   * The component to render for the Credential Mapping editor.
   */
  EditorComponent: React.FunctionComponent<IConnectionCredentialMappingEditorProps>;
}