In this #PowerShot, I will show you how to use the white-list IP Address for Canvas Apps PCF to restrict access on canvas apps based on the IP address of the logged in user. Currently Power Apps do not provide with a direct functionality to restrict access based on IP Address white-listing and we will overcome that limitation and secure apps using a custom built PCF.
Let's get Started!
Step 1: In this step, we will look at creating the component. Follow the steps here to create a generic component structure of type field. Once the setup is complete, certain parts of the index.ts and ControlManifest.Input.xml files need to be modified. The same have been updated and present on the GitHub repository as mentioned below.
The source code for this component is on this GitHub repository here.
Note: For canvas app, only field type component is supported. Source
This PCF utilizes a 3rd party API to get the IP address. To use a different source for IP address, you can embed the code in the PCF. The API used in this PCF is here.
The next task is to configure components for canvas apps. This can be done in three easy steps and those have been listed out here.
After following the steps 2, 3, 4 follow the step below to implement the white-list IP address in Canvas Apps component on the canvas app.
Step 5: Add the control and mark it as invisible on the app screen. Configure the "OnStart" property of the app to get the IP address from the control and check with the allowed IP Address range and provide access to the app accordingly.
Implementation
Now let's implement the above created component on the canvas app. We will add the component on a canvas app screen and configure the "OnStart" property of the app to implement the logic.
Expression used on the "OnStart" property of the App is:
Expression: ClearCollect(MyIpRanges,{StartIP:"xyz.abc.138.150",EndIp:"xyz.abc.138.151"}); Set(MyIp,'contoso_contoso.whitelist(00000001-0000-0000-0001-00000000009b)1'.OutPut); If(IsBlank(MyIp) || CountRows(Filter(MyIpRanges,Value(Substitute(MyIp,".","")) >= Value(Substitute(StartIP,".","")) && Value(Substitute(MyIp,".","")) <= Value(Substitute(EndIp,".","")))) = 0, Navigate(RestrictedAccess),Navigate(Screen1))
Explanation: We are first creating a collection "MyIpRanges" where the user can pass a range of allowed IP Addresses for the app. We are then extracting the current logged users IP address from the outputs of the component and storing it in the variable "MyIp". The If condition then checks if the "MyIp" is in the range of the IP Addresses provided in the collection and if yes, then navigates to the data screen and if no, it navigates to an error message screen.
Setup in Action
In this post we saw how we can use the White-list IP Address for Canvas Apps PCF to restrict and secure access to Canvas Apps in Power Apps based on IP Address white-listing. This can be useful when the organizations are building apps that need to be accessed within a particular location, through specific IP Addresses, data privacy, data security and etc.
I hope you found this interesting and it helped you!