The Challenge: Integrating a WebDirect Solution with Your Website
You have a WebDirect solution, and you want to integrate it with your current website. You want the users to be able to click a button on your website, authenticate through your chosen identity provider and end up inside your WebDirect file without jumping through many hoops or breaking the branding experience of your website.
The only way you can avoid taking the user to the WebDirect launch center is to create a URL that includes the file name. That will take the user directly to the file’s login page, which comes in two variants depending if you use a home URL or not.
The home URL is where the user will be taken back to when they log out of the WebDirect session.
Without a home URL, the file’s login screen looks like this, with very few customization options.
With a home URL, the file’s login screen is generated from a completely different place and is not at all customizable:
In 19.5, you can make WebDirect hide the FileMaker login fields and just show the OAuth option for which your server is configured. This makes the experience a little less confusing for your users.
But it is not ideal. These login pages do not fit into the visual flow or branding of your own website. Your users must still click the provider’s button (Keycloak in the screenshots), which is an unnecessary extra step: they have already clicked the button on your own website. And you will want to use the home URL functionality so that the user goes back to where you want them instead of back to the WebDirect launch center, which would completely confuse your users.
The Solution: the FileMaker WebDirect OAuth Script
getProviderInfo queries your FileMaker Server to get a list of the configured OAuth providers so that you can render the proper buttons on your page for each one.
getOAuthURL and doAuthLogin are called when the user clicks your button and fetches the URL for the identity provider where the user will need to authenticate and handle the response from the IdP. They either log the user into your WebDirect or refuses access.
Also included in the download is an example HTML file that shows how to call those functions.
How to Implement the FileMaker WebDirect OAuth Script
Let’s walk you through how to implement it into your website. You can download the sample website that we use for the screenshots from GitHub.
In the sample website, you want the button to be in the header. The HTML code for the header is here, and as you can see, there is no button defined.
Line 18 has the name of the FileMaker file that will be opened.
Lines 35-36 add the button to the div element with id inner. You can see that div element in the screenshot above on line 92.
When your users visit your website, the button with the text Member Login (see line 26) will now show:
When your user clicks on the button, the showAuthLogin function will run (see lines 31-32). The code opens a new small window, fetches the login URL from the provider, and initiates the authentication request by going to that URL (line 48).
The user’s experience will be:
- The user clicks the button on your website.
- The login screen for the indentity provider goes up.
- The user provides credentials and authenticates.
- The user ends up on your WebDirect solution.
When the user logs out (through the menu or a scripted action), then the user ends up back on the page where they came from.
And you specify that in our index.html when you call the function.
The utility assumes that your website is running on your FileMaker Server because it makes calls to relative paths:
You will need to update the JS utility to make it call your FileMaker Server if your deployment is different and your website lives on another server. You may have to deal with CORS issues
19.5 and Previous Versions of FileMaker Server!
Although this utility is released with 19.5, this feature is not limited to 19.5. The OAuth flow is the same in previous versions of FileMaker Server and should work with all currently supported versions of FileMaker Server 19.
If you are upgrading from a FileMaker Server version before 19.4.1, beware that the home URL functionality is now off by default, and you have to explicitly turn it on and whitelist the allowed URLs. You can find the instructions in the Claris Knowledge Base.