4D Netkit: Personalización de la interfaz de conexión OAuth 2.0

Algunos de ustedes pueden necesitar gestionar la visualización de la interfaz de conexión durante una conexión OAuth 2.0 por razones técnicas o de diseño. Desde 4D 20 R6, puede elegir no abrir automáticamente un navegador web para mostrar la interfaz de conexión, sino utilizar el authenticateURI para mostrarla donde desee.

En esta entrada de blog, recorreremos un ejemplo de apertura de la interfaz de conexión de Microsoft dentro de un área web.

HDI Netkit BrowserAutoOpen false

Ejemplo

En el siguiente ejemplo, veremos cómo abrir la interfaz de inicio de sesión de Microsoft en un área web. Para ello, es necesario crear un formulario con un área web llamada «WAConnection».

En primer lugar, vamos a crear un método OAuth2GetToken para gestionar la visualización de la interfaz de conexión en el área web y esperar a que se reciba el token. Como este método será llamado en un worker, usamos el comando CALL FORM para mostrar la información en el formulario actual:

#DECLARE($credential : Object; $CurrentWindows : Integer)

var $OAuth2:=cs.NetKit.OAuth2Provider.new($credential)

// Display the connection page in the web area "WAConnection"
CALL FORM($CurrentWindows; Formula(WA OPEN URL(*; "WAConnection"; $1)); $OAuth2.authenticateURI)

// Wait for the token and save it in the Form.token attribute
CALL FORM($CurrentWindows; Formula(Form.token:=$1); $OAuth2.getToken())

Entonces hay que llamar a este método en un worker con browserAutoOpen con el atributo false en los parámetros de la credencial:

var $credential:={}
$credential.name:="Microsoft"
$credential.permission:="signedIn"
$credential.clientId:="7008ebf5-xxx"
$credential.redirectURI:="http://127.0.0.1:50993/authorize/"
$credential.scope:="https://graph.microsoft.com/.default"
$credential.accessType:="offline"
$credential.prompt:="select_account"
	
// The display of the connection interface is managed by the developer.
// The browser is not automatically opened
$credential.browserAutoOpen:=False
	
// Call of the OAuth2GetToken method
CALL WORKER("OAuth2Worker"; Formula(OAuth2GetToken($1; $2)); $credential; Current form window)

Así, si abres tu formulario y ejecutas el código anterior, la interfaz de conexión se mostrará en tu área web, y el webserver 4D esperará el token:

Conclusión

Usando esta funcionalidad, los desarrolladores pueden evitar la apertura automática del navegador web y ganar control sobre la presentación de la interfaz de conexión. Esta flexibilidad permite una experiencia de usuario más integrada y adaptada a las necesidades específicas de su aplicación.