4D Netkit : Personnalisation de l’interface de connexion OAuth 2.0

Certains d’entre vous peuvent avoir besoin de gérer l’affichage de l’interface de connexion lors d’une connexion OAuth 2.0 pour des raisons de conception ou techniques. Depuis 4D 20 R6, vous pouvez choisir de ne pas ouvrir automatiquement un navigateur web pour afficher l’interface de connexion, mais d’utiliser l’authenticateURI pour l’afficher où vous le souhaitez.

Dans cet article de blog, nous allons voir un exemple d’ouverture de l’interface de connexion Microsoft dans une zone web.

HDI Netkit BrowserAutoOpen false

Exemple

Dans l’exemple ci-dessous, nous allons voir comment ouvrir l’interface de connexion Microsoft dans une zone web. Pour cela, vous devez créer un formulaire avec une zone web appelée « WAConnection »

Tout d’abord, créons une méthode OAuth2GetToken pour gérer l’affichage de l’interface de connexion dans la zone web et attendre la réception du jeton. Comme cette méthode sera appelée dans un worker, nous utilisons la commande CALL FORM pour afficher les informations dans le formulaire courant :

#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())

Il faut donc appeler cette méthode dans un worker avec l’attribut browserAutoOpen à false dans les paramètres de l’identifiant :

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)

Ainsi, si vous ouvrez votre formulaire et que vous exécutez le code ci-dessus, l’interface de connexion sera affichée dans votre espace web, et le serveur web 4D attendra le jeton :

Conclusion

En utilisant cette fonctionnalité, les développeurs peuvent contourner l’ouverture automatique du navigateur web et contrôler la présentation de l’interface de connexion. Cette flexibilité permet une expérience utilisateur plus intégrée et adaptée aux besoins spécifiques de votre application.