cancel
Showing results for 
Search instead for 
Did you mean: 

Join the discussion

Most Recent
Jmanriquerios
Super User
Super User

Create your copilot and insert it into your model driven apps

Read more...

Inogic
Solution Specialist
Solution Specialist

As we know, Google's re-CAPTCHA service incorporates various mechanisms, including advanced risk analysis and adaptive challenges, to differentiate between legitimate users and potential bots or malicious actors. By analysing user behaviour and various risk factors, captcha aims to provide a seamless experience for genuine users while effectively blocking automated bots and other abusive activities on websites.

 

This approach helps protect websites from a wide range of abusive behaviours, including spamming contact forms, creating fake accounts, performing fraudulent transactions, and other malicious activities. It enhances the overall security and integrity of online platforms, allowing legitimate users to interact with websites without unnecessary interruptions while thwarting potential threats posed by automated scripts or bots.

 

Recently, we had a client requirement where client had mandated the integration of Google re-CAPTCHA into Power Pages, replacing the Out-of-the-Box (OOB) solution. This shift marks a pivotal moment in ensuring robust protection against malicious activities while streamlining user interactions. This blog outlines the systematic process of integrating Google re-CAPTCHA seamlessly into Power Pages, thereby fortifying the security framework and elevating user engagement.

 

Step 1:

 

Firstly, to integrate the Google re-CAPTCHA, we need the site key. So, to get the site key, we have to register our site using this link. Add the domain name in the highlighted part.

 

Inogic_12-1712058752480.png

 

Once you add the domain, click on the ‘submit’ button, and you will be redirected to the page where you will be able to see the ‘site key’. Refer to the below screenshot.

Inogic_1-1712058655817.png

 

Step 2:

 

Now to add the Google re-CAPTCHA to our portal, we have to write some HTML code.

 

Inogic_2-1712058655820.png

 

In this, we have taken 2 input fields and one div with id – ‘html-element’ in which our Google re-CAPTCHA will be visible.

 

Step 3:

 

Add this link to your HTML.

 

 <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&amp;render=explicit" async=""
  defer=""></script>

 

 

Step 4:

 

Now add the given onload function to the JavaScript file.

 

Inogic_3-1712058655821.png

 

Using this function, your Google Captcha will be visible on your HTML page.

 

Inogic_4-1712058655823.png

Step 5:

 

Now, when we click on “I’m not a robot,” we will get to see this type of puzzle.

 

Inogic_5-1712058655840.png

 

Step 6:

 

This code will create the contact when it gets the response from the captcha. If there is no response from the captcha, then it will throw a pop-up message to fill the captcha.

 

Inogic_6-1712058655844.png

 

 

Inogic_7-1712058655846.png

 

As you can see in the above image, the captcha is not clicked, so it will give an error message in the pop-up.

Note: - This validation pop-up is a custom modal created using HTML, CSS, and JS.

 

Inogic_8-1712058655848.png

 

 

Inogic_9-1712058655849.png

Inogic_10-1712058655852.png

 

Once all the fields are filled out, the contact with the given first and last name will be created.

 recaptcha.png

 

Conclusion:

 

This blog outlines the process of integrating the Google re-CAPTCHA into the Power pages and performing the WebAPI operations according to the captcha response.

EricRegnier
Most Valuable Professional
Most Valuable Professional

Ever wondered if you had the latest and greatest version of the Plugin Registration Tool (PRT) or Configuration Migration Tool (CMT)? And always had to Google Bing Copilot it to find and download the tool? You can now just pac it!

Read more...

Surendran_R
Advocate III
Advocate III

Are you looking to enhance the functionality of your Power Apps Portals and provide users with an intuitive way to view events and schedules? Look no further than leveraging the List Calendar View feature. In this article, we'll walk you through the steps to seamlessly integrate this dynamic calendar view into your portal.

With the List Calendar View in Power Apps Portals, you can transform a standard list of events into an interactive and visually appealing calendar format. Whether you're managing marketing events, training sessions, or project deadlines, this feature offers a streamlined way for users to stay informed and organized.

We'll start by guiding you through the process of creating a list within your Power Apps Portals environment, using the Event entity to store relevant information. From there, we'll demonstrate how to enable the Calendar View feature, allowing you to map essential fields such as Start Date, End Date, and Summary.

Once the calendar view is enabled, we'll show you how to seamlessly integrate it into your portal pages. Whether you're creating a new web page or updating an existing one, adding the calendar view component is a breeze, thanks to the intuitive interface of Power Apps Portals Studio.

But the customization doesn't stop there. We'll also provide tips on how to leverage custom entities to achieve unique calendar views tailored to your specific needs. Whether you're highlighting product releases, tracking customer appointments, or showcasing community events, the possibilities are endless.

By following our step-by-step guide, you'll empower your portal users with an engaging and user-friendly way to navigate events and schedules. From marketing professionals to project managers, everyone can benefit from the convenience and efficiency of the List Calendar View in Power Apps Portals.

So why wait? Unlock the full potential of your Power Apps Portals today and revolutionize the way your users interact with event data. Dive into our article and discover how easy it is to create dynamic calendar views that elevate the user experience and drive engagement.

Read more...