4D Netkit: Customizing OAuth 2.0 Connection Interface

Some of you may need to manage the display of the connection interface during an OAuth 2.0 connection for design or technical reasons. From 4D 20 R6, you can choose not to automatically open a web browser to display the connection interface but use the authenticateURI to display it where you like.

In this blog post, we’ll walk through an example of opening the Microsoft login interface within a web area.

HDI Netkit BrowserAutoOpen false

Example

In the example below, we’ll see how to open the Microsoft login interface in a web area. For that, you need to create a form with a web area called “WAConnection”

First, let’s create an OAuth2GetToken method to manage the display of the connection interface in the web area and wait for the token to be received. As this method will be called in a worker, we use the CALL FORM command to display the information in the current form:

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

Then you have to call this method in a worker with browserAutoOpen attribute to false in the credential parameters:

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)

So, if you open your form and execute the code above, the connection interface will be displayed in your web area, and 4D webserver will wait for the token:

Conclusion

By using this feature, developers can bypass the automatic web browser opening and gain control over the presentation of the connection interface. This flexibility allows for a more integrated user experience tailored to the specific needs of your application.