In this tutorial, we'll look at how to customize the Alloy Embedded OAuth experience with your own branding.
By default, when an end user authenticates any Third Party App that uses OAuth (examples include Shopify, Salesforce CRM, etc) via Alloy Embedded they see a prompt saying "Alloy Automation is requesting access to..."
You may wish to have additional customization and control over the authentication experience as seen in the below example.
On the left hand side, we have a Shopify integration that is not using Custom OAuth. As you can see, the Alloy logo is visible. On the right hand side, we've enabled Custom OAuth. As you can see, when an end user authenticates you're able to customize the branding to include your company name and logo.
With Custom OAuth, you can supply your own Client Id and Client Secretand Alloy Embedded will use those credentials to make the appropriate requests on your behalf. The result of this is that when an end user authenticates, they see "Your [App Name] is requesting access...".
The below video shows how an Embedded integration will look when Custom OAuth is enabled.
On every OAuth block you'll see a configuration in the integration Settings as seen below in the Salesforce CRM example.
To configure Custom OAuth, you'll need to provide Alloy Embedded with the necessary information – each app may vary slightly but generally most apps follow the OAuth standard .
Custom OAuth will prompt you to enter the required fields. In the case of Salesforce CRM those are as follows:
- Client Id: The client Id of your Salesforce CRM app
- Client Secret: The client secret for your Salesforce CRM app
- Scope: The scopes (provided by Alloy) Alloy Embedded needs to collect. You may need to request these scopes in your Salesforce CRM OAuth app configuration.
- Redirect URL: The URL (provided by Alloy) where the OAuth app should redirect to. You may need to specify this in your Salesforce CRM OAuth app configuration. This tells Salesforce how to properly handle the redirection request after the OAuth handshake is completed and customers will be routed back to your site upon redirection.
Failure to provide the right scopes may result in errors during workflow executions.
By default, we request all the scopes we need to support every API endpoint supported by Alloy Embedded. If you want to limit that or only need access to a select few, you can configure that via the scope checkboxes as seen below. Note that failure to supply the right scopes may result in workflows erroring. Generally, we recommend ensuring your app has full access to all required scopes.
In this tutorial, we looked at how to set up our own client Id and client secret to whitelabel the end user's OAuth experience. With Custom OAuth, users will see your company's branding on OAuth-enabled apps.
Updated about 2 months ago