New Meta Pixel feature, Enhance the two-factor authentication process - This week in Orchard (14/07/2023)
New Meta Pixel feature, in progress indicator for the Attached Media field, and a demo about enhancing the two-factor authentication process and making the UI extensible. Check out our post for the details!
Orchard Core updates
New Meta Pixel feature
We have multiple integrations with Meta. But we do not have a way to enable Meta Pixel like we do for Google Analytics. But what is Meta Pixel? The Meta pixel is a piece of code for your website that lets you measure, optimize and build audiences for your ad campaigns. You can think of this as an analytics tool that allows you to measure the effectiveness of your advertising by understanding the actions people take on your website.
So, from now on a new feature called Meta Pixel was added to allow you to easily enable Meta Pixel tracking into your website. Due to Facebook's recent rebranding, all of the Facebook features have been renamed to Meta. This only concerns UI labels and documentation, but technical identifiers remain, so you shouldn't expect anything breaking like classes and project names still say Facebook to prevent breaking change.
But how can you use this new feature? First of all, navigate to the admin UI of your site and enable the Meta Pixel feature under Configuration -> Features. This will show you a new option under Configuration -> Settings, called Meta Pixel, where you can provide the Pixel ID found on the Meta Data Sources portal.
In progress indicator to the Attached Media field
When you add a file to an attached media field, it uploads the file once you select it, but it does not indicate that it is uploading, so if you have a large file like audio or video that takes some time to upload, it looks like it just didn't add the file.
This change introduces a progress bar showing you the current progress of the file, that you would like to upload. This PR also fixes an error about messages not showing in this editor, like the "This file exceeds the maximum upload size".
To try out this feature, we just simply modified the content definition of the built-in Blog Post content type by adding a new Media Field to it. After we set the editor type of this field to Attached, instead of Standard. Finally, we edited the predefined blog post content item and tried to upload a file utilizing the newly added Media Field.
Demos
Enhance the two-factor authentication process and make the UI extensible
A few weeks ago, we showed you a demo about adding the two-factor authentication feature to Orchard Core. This time we will see some improvements related to the 2FA feature. The first issue was the UI was not extensible, and we only have an authenticator app to use as a 2FA. Sometimes you might not want to use the authenticator app, you might want to authenticate users with other methods like email or SMS. From now on, we have a way to extend the 2FA in a way where we can say I want to enable the app authenticator, I want to enable an email authenticator, but you can implement your own authenticator, whatever the case might be. Let's see this in action!
After you set up your site, head to Configuration -> Features and search for the two-factor keyword. This will list 3 features related to 2FA.
- Two-Factor Authentication Services: Provides Two-factor core services.
- Two-Factor Authenticator App Method: Provides users with a two-factor authentication method through any Authentication App.
- Two-Factor Email Method: Provides users with a two-factor authentication method through an Email service.
For this demo, we will enable all of these features. Now, let's create another user in the system with the Contributor role for example. When we login with that user, we can navigate to the Security page (which you can reach under the /TwoFactor URL or by clicking on the Security option using the drop-down, which you can see if you click on the user icon on the top-right corner.
Here you can see the site says two-factor authentication is not enabled yet, in order to enable it, you have to add a two-factor method. You can allow email authentication by clicking on the Verify Email button. You see this button here because this user hasn't verified their email address yet. If you click on this button you have to request a code, and this user will get a code via email, which they can paste here.
After verification, the email address of this user has been confirmed, and the site displays the recovery codes to log in with. If you go back under the same screen under Security, you will see that the email is verified and 2FA is enabled because we have just enabled it.
Let's quickly add a second method, which is the authenticator app. If you do that, you will have two authentication methods, and using the Preferred Two-Factor Method drop-down, you can select your preferred method. Let's select the Email one, for example.
Now, let's log off and try to log in again to see what will happen. The first thing that you can see here is it's asking to authenticate via email. If for some reason, we don't have access to that email, there is a new option here called Sign in another way. You can also log in with your recovery codes if you have them. If you click on the Sign in another way link, it's prompting me to use the other method, which is the (non-default) app authenticator. The reason why we can use both methods is that we enabled the Two-Factor Authenticator App Method and Two-Factor Email Method features. And as we mentioned, from now on, you can implement your own method (SMS, for example) and can extend the list of the two-factor methods.
And that's not nearly all of the improvements! If you want to know more about this feature, head to YouTube for a recording!
News from the community
Orchard Dojo Newsletter
Lombiq's Orchard Dojo Newsletter has 474 subscribers! We have started this newsletter to inform the community around Orchard of the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post is published to Orchard Dojo, including This week in Orchard of course.
Do you know of other Orchard enthusiasts who would like to read our weekly articles? Tell them to subscribe here!