O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Solicitar credenciais digitais no WebView

Este guia descreve como solicitar credenciais digitais usando o Credential Manager em um app Android que usa WebView. Use uma ponte JavaScript para facilitar a comunicação entre a página da Web e o app.

Visão geral

As etapas a seguir descrevem a vida útil de uma solicitação de credencial digital de uma WebView:

Geração de solicitação: a página da Web na WebView faz uma solicitação ao servidor do app, que gera um JSON de solicitação OpenID4VP e o envia de volta.
Início da solicitação: a página da Web usa navigator.credentials.get({ digital: ... }) para solicitar credenciais digitais usando o JSON de solicitação.
Interceptação: o bridge.js injetado intercepta essa chamada, extrai o JSON de solicitação OpenID4VP específico e o transmite ao app Android.
Processamento do Android: o app Android recebe a mensagem e chama a API CredentialManager.getCredential.
Seleção do usuário: o Gerenciador de credenciais mostra uma interface que pede ao usuário para compartilhar a credencial. A credencial é retornada ao app Android.
Resposta da ponte: o app Android envia a resposta de volta à página da Web usando a ponte.
Conclusão: a página da Web recebe e processa a resposta.

Pré-requisitos

Antes de implementar a ponte JavaScript para credenciais digitais na WebView, verifique se o projeto atende aos seguintes requisitos:

Compatibilidade com versões do Android: o app precisa ser destinado ao Android 6.0 (nível 23 da API) ou versões mais recentes.
Controle do app host: você precisa controlar o app Android que hospeda o WebView para poder anexar um WebMessageListener antes de carregar a página da Web.
HTTPS e frame de nível superior: a página da Web que solicita a credencial precisa ser exibida por https:// e executada no frame principal (isMainFrame precisa ser true). Subframes e elementos <iframe> incorporados não são compatíveis.
Ativação da API experimental: como a API Digital Credentials é experimental, é necessário anotar classes ou métodos que usam GetDigitalCredentialOption com @OptIn(ExperimentalDigitalCredentialApi::class).

Adicionar dependências

Adicione as dependências do Gerenciador de credenciais e do WebKit do AndroidX ao arquivo build.gradle.kts do módulo do app:

dependencies {
    // Credential Manager dependencies
    implementation("androidx.credentials:credentials:1.7.0-alpha03")
    implementation("androidx.credentials:credentials-play-services-auth:1.7.0-alpha03")

    // AndroidX WebKit (required for WebMessageListener bridge)
    implementation("androidx.webkit:webkit:1.14.0")
}

Implementar credenciais digitais no WebView

Você precisa adicionar JavaScript ao WebView para fazer a solicitação de credencial e interceptá-la com bridge.js.

Criar a solicitação em JavaScript

Para que o JavaScript em execução em uma WebView se comunique com o código Android, injete o código JavaScript na WebView:

// Example digital credential request to request verified email
const request = {
  "providers": [
      {
        "protocol": "openid4vp",
        "request": JSON.stringify({
          "requests": [
            {
              "protocol": "openid4vp-v1-unsigned",
              "data": {
                "response_type": "vp_token",
                "response_mode": "dc_api",
                "nonce": "n-0S6_W_2F", // Generate dynamically
                "dcql_query": {
                  "credentials": [
                    {
                      "id": "user_info_query",
                      "format": "dc+sd-jwt",
                      "meta": {
                        "vct_values": ["UserInfoCredential"]
                      },
                      "claims": [
                        {"path": ["email"]},
                        {"path": ["email_verified"]},
                        {"path": ["name"]}
                      ]
                    }
                  ]
                }
              }
            }
          ]
      })
    }
  ]
};

try {
  const credential = await navigator.credentials.get({
    digital: request
  });

  // Process response
} catch (err) {
  // Handle error
}

Criar a ponte JavaScript

Crie um arquivo chamado bridge.js ou injete esse código usando evaluateJavascript. Esse script substitui navigator.credentials.get para interceptar a solicitação e enviar a string JSON interna do OpenID4VP ao app Android.

(function() {
  if (!navigator.credentials) {
    navigator.credentials = {};
  }

  const originalGet = navigator.credentials.get;

  // Overrides navigator.credentials.get() to intercept W3C Digital Credential requests.
  navigator.credentials.get = async function(options) {

    if (options && options.digital) {
      if (window.DigitalCredentialBridge) {
        return new Promise((resolve, reject) => {
          const digital = options.digital;

          if (digital.providers && digital.providers.length > 0) {
            const provider = digital.providers[0];

            if (provider.protocol === "openid4vp") {
              const requestJson = provider.request;

              const message = {
                type: "get",
                request: requestJson
              };

              console.log("Sending message to native bridge:", JSON.stringify(message));
              // Send the request string to native Android code
              window.DigitalCredentialBridge.postMessage(JSON.stringify(message));

              // Receive the response sent from native code using replyProxy.postMessage()
              window.DigitalCredentialBridge.onmessage = function(event) {
                console.log("Received response from native bridge:", event.data);
                try {
                  const response = JSON.parse(event.data);
                  if (response.error) {
                    reject(new Error(response.error));
                  } else {
                    resolve(response);
                  }
                } catch (e) {
                  // If it's not JSON, just resolve with the raw data
                  resolve(event.data);
                }
              };
            } else {
              reject(new Error("Unsupported protocol: " + provider.protocol));
            }
          } else {
            reject(new Error("No providers specified in digital credential request"));
          }
        });
      } else {
        console.warn("DigitalCredentialBridge not found, falling back to original");
      }
    }

    if (originalGet) {
      return originalGet.call(navigator.credentials, options);
    } else {
      throw new Error("navigator.credentials.get is not supported and no bridge available");
    }
  };
})();

Implementar credenciais digitais no Android

Configure o app Android para processar solicitações de credenciais enviadas de bridge.js.

Criar o listener do Android

Configure uma classe DigitalCredentialWebListener que implemente WebViewCompat.WebMessageListener. Essa classe processa mensagens bidirecionais entre o JavaScript e o código nativo do Android, aplicando verificações de segurança em isMainFrame e sourceOrigin e evitando solicitações sobrepostas.

Implementar o gerenciador do Credential Manager

Chame getCredential para solicitar credenciais digitais do dispositivo.

@OptIn(ExperimentalDigitalCredentialApi::class)
class CredentialManagerHandler(private val context: Context) {
  private val credentialManager = CredentialManager.create(context)

  suspend fun getDigitalCredential(requestJson: String): String {
    val digitalCredentialOption = GetDigitalCredentialOption(requestJson)
    val getCredRequest = GetCredentialRequest(listOf(digitalCredentialOption))

    return try {
      val result = credentialManager.getCredential(context, getCredRequest)
      val credential = result.credential
      if (credential is DigitalCredential) {
        credential.credentialJson
      } else {
        "{\"error\": \"Unexpected credential type\"}"
      }
    } catch (e: GetCredentialException) {
      "{\"error\": \"${e.message}\"}"
    } catch (e: Exception) {
      "{\"error\": \"Unknown exception\"}"
    }
  }

  companion object {
    private const val TAG = "CredManHandler"
  }
}

Aplicar o framework à sua atividade

No Activity ou View, registre o WebMessageListener e as funções associadas.

// Inside your Activity or View setup
AndroidView(
  factory = { context ->
    val handler = CredentialManagerHandler(context)
    WebView(context).apply {
      settings.javaScriptEnabled = true

      // Register the bridge before loading URL
      if (WebViewFeature.isFeatureSupported(WebViewFeature.WEB_MESSAGE_LISTENER)) {
                val listener = DigitalCredentialWebListener(coroutineScope, credentialManagerHandler)
                WebViewCompat.addWebMessageListener(
                    webView,
                    INTERFACE_NAME,
                    setOf("*"),
                    listener
                )


      loadUrl("https://your-secure-domain.com/login")
    }
  },
)

Testando o fluxo

Teste o fluxo para confirmar a comunicação entre o WebView e o app Android. O seletor de credenciais aparece no WebView durante o processo, e a credencial selecionada retorna ao WebView após a conclusão.

Solicitar credenciais digitais no WebView Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.