Screenshots

Supervisor listing all the Agents:

Supervisor adding a new Agent:

Supervisor viewing the Audit Events

Agent logging in:

What

This is a Flex Plugin that allows the Supervisors of your Contact Center to add/remove Agents by their own without the need of having a SaaS Identity Provider (IdP) of the market to manage your Agents.

Of course, if you already have an IdP - especially the ones we support on our SSO configuration Page - it makes no sense to use this Plugin.

This plugin is meant for those companies who do not have an IdP and want to have Flex running as soon as possible!

Disclaimer: Ask your Developers to validate this Plugin, this is not production-ready code!

How it works

This Plugin uses 100% of the Twilio Products and, therefore, makes it easy to have it running quickly!

• It uses Twilio Functions to orchestrate the SSO validation;
• It uses Twilio Sync for storing the Agents;
• It uses Twilio Verify to validate the authenticity of the Agents logging into Flex;
• It uses the new Twilio Paste - which is the base for all future Flex Plugins;

Oh, before installing it:

You need to enable Flex UI 2.0, the newest version of Flex!

How to install

We have to install 2 assets:

• The Twilio Functions (back-end)
• The Flex Plugin (front-end)

To install the Twilio Functions:

1. clone this repo;

2. execute cd ./serverless-sso to go to the Twilio Functions folder.

3. npm install to install the packages into your computer.

4. rename .env-example from this folder to .env and follow the instructions in the .env file.

5. you have to generate the public/private pair keys for the SSO. Go to ./serverless-sso/src/assets folder and execute the two commands below:

   openssl genrsa -out privatekey.private.cer 1024
   
   openssl req -new -x509 -key privatekey.private.cer -out publickey.private.cer -days 900
   

6. You should now have two new files in the assets folder: privatekey.private.cer and publickey.private.cer. You know the rules, don't send this private key to anyone.

7. npm run deploy to deploy the functions to your Twilio environment.

8. Quick test to see if you have done it correctly until here. Open Chrome and check if you can visit your https://xxxxxx.twil.io/sso/saml - Change the xxxxxx to your environment that was displayed in your Terminal from step 7 above. You should see an error ERR_REDIRECT_FLOW_BAD_ARGS. For now, this means: Success until here!

9. Now go to Flex SSO configuration to configure the SSO you just deployed with Flex. Configure with the values below:

   • X.509 Certificate: Put the content of ./src/assets/publickey.private.cer there.

   • Single sign-on URL: https://xxxxxx.twil.io/sso/saml

   • Will you be hosting your own domain: Leave it unchecked.

   • Trusted Domains: (it is disabled)

   • Default redirect URL: (it is disabled)

   • Login using Popup - On: Leave it unchecked.

   • Hit Save button

10. Final test: On this same Flex SSO configuration page, there is a link saying Login with SSO: Open this link in Incognito on your Browser, that is the link your agents will use to login on Flex. If everything goes right, you should see the Login page (like this one) - You can even try to log in, you should receive an error saying "Agent not found" - This is fine for now.

To install the Flex Plugin:

1. execute cd ./flex-plugin-sso to go to the Plugin folder.
2. npm install to install the packages into your computer.
3. rename .env-example from this folder to .env and follow the instructions in the .env file.
4. You need to have the Twilio CLI. Type twilio in your terminal to see if you have it, if not, install it now.
5. You need the Flex Plugins CLI . Type twilio plugins to make sure you have it, if not, install it.
6. You need to create a new profile for your Twilio CLI, type twilio profiles:list to check if you are using it correctly. If not, add a new profile with the cmd twilio profiles:add.
7. npm run deploy -- --changelog "first deployment!" to deploy this Plugin.
8. Once step 8 is finished, it will show the next steps, you will have to run the command mentioned there (something like twilio flex:plugins:release ... etc etc)
9. We are done! Go to https://flex.twilio.com - You should see a new icon on the left-hand side. From there you can add/remove your Agents and ask them to visit the link mentioned on step 10 to log in on Flex.

Roadmap

• [Feature] multi-BPOs concept: in RealTime Queue Dashboard, add the possibility to filter out only the queues from the BPO... Hiding the queues from others.

• [Feature] multi-BPOs concept: in the Flex Insights, add the possibility to have reports of their own BPO, using custom embedded dashboards.