Our blog contains the activity stream of Orchard Dojo: general news, new resources or tutorials are announced here.

Featured tags

IIS
API
All tags >

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! If you are interested in more news about Orchard and the details of the topics above, don't forget to check out the recording of this Orchard meeting!

This week in Orchard - 06/14/2019

In our post you could read a demo about the GraphiQL explorer improvements. But first, check the other new features of the admin site of Orchard Core and the new docs too! Check out our post for more! On Orchard Core Add Codemirror Liquid editor to Autoroute Pattern setting Now when you edit the AutoroutePart using the admin site you have a liquid editor to provide the pattern used to render the custom URL of the content type. Fix content picker width with breakpoint and making the content items reorderable If you edit a content type that has a content picker, you will see that now the picker has a correct width when displaying the screen in different sizes. You can also reorder the picked items by using a simple drag-and-drop. Furthermore, if you hover your mouse over the picked items, you will see the changes of the cursor. Extend Facebook Documentation The OrchardCore.Facebook module has finally been merged to the dev branch! It's also got updated documentation about the Facebook Social Plugin Widgets and about what are the available settings when you would like to register a Facebook App with your Orchard Core site. If you are interested in this module, we have written about it a few weeks ago! Add documentation for overriding Views New documentation has been added to the ReadTheDocs page of Orchard Core about how to override existing views that come from modules in your theme. Add View button to media library items Now when you navigate to the Assets and select or hover over a media library item, you will see a new view button under each item in order to preview the file and easily copy the URL. Demos GraphiQL and GraphiQL explorer improvements Last week we showed the new GraphiQL explorer. Since then, the explorer has got some new features. First of all, it now allows filtering and returning of the localization part data. Until now we don't currently have a way to expose a list of all the media assets stored in the media library so please welcome the new mediaAssets query to return the available assets. This is useful when using Orchard as a headless CMS with for example Gatsby to statically compile images into the website. In the screen above you can see a query to list every item from a folder called Backgrounds. You will notice a new property of every content type, called Render. If you check the box near render and run the query you will get the following result. The render property of the blog post, in this case, will show you how will a blog post be rendered. This is a full HTML of the page with a title and everything. This is exactly like you would have if you look at the source code of the page in the browser when opening the given blog post. Let's see how does it work! The assumption was that it should be very easy to render a shape and the way it was done was more complex than necessary. The render property rendering the shape from build display of the content item with any display types. You just need to call the displayHelper.ShapeExecuteAsync! That's all you need to do from a shape to render it. In GraphQL this works in the following way: using (var sw = new StringWriter()){ var htmlContent = await displayHelper.ShapeExecuteAsync(model); htmlContent.WriteTo(sw, HtmlEncoder.Default); return sw.ToString();} So just call displayHelper.ShapeExecuteAsync and pass a shape to it to get the IHtmlContent which can be written to a TextWriter! On Lombiq Orchard Dojo Newsletter Now we have 72 subscribers of the Lombiq's Orchard Dojo Newsletter! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail every time when a new post published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here! If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this week's Orchard meeting!

This week in Orchard - 04/26/2019

There was no Orchard Podcast this week, but we have lots of news around Orchard Core and new PRs that will be added to Orchard Core soon! On Orchard Core The Arabic translation for Orchard Core is ready A few weeks ago Hisham Bin Ateya and Abdullah Salem have started to work on the Arabic translation for Orchard Core. Thanks to their hard work, the Arabic translation is now ready! This is the second language that has been completed after the French language, which is the main language for many of the core team. Now it's time to test those translations! Order TimeZone list by name When you would like to set the default time zone for your site under Configuration -> Settings -> General you had to select the preferred timezone from a list that wasn't ordered. Now thanks to this PR you can set the value of the time zone using a list that contains ordered values. New user created event and assign user to role task to workflows Soon you can use two brand new activities when constructing your workflows in Orchard Core. The first one called User created, which is surprisingly fired when a user created. The second one is about assigning a role to a user. Let's say we attached this task after the user created event. In this case, when you edit this task, you can say that assign the Authenticated role for the user that has been created just now. In the following workflow, we do the following and show success or failed notification just for demonstration purposes. GitHub authentication Thanks to Michael Petrinolis when this PR will be merge, you can authenticate yourself in Orchard Core using GitHub, by adding this provider to the list of supported external providers soon. Let's see how this feature will work! First, you need to create a new GitHub App. To do that, head to the GitHub Apps page in the Developer settings and hit New GitHub App. Here you need to provide the name of your GitHub app, the full URL to your GitHub App's website and a user authorization callback URL. Don't forget to generate a private key. After you will get a Client ID and a Client secret. You will need them in the next step. Now you can navigate to Orchard Core admin site and enable the Github Authentication feature. After that, you can notice the Github Authentication option under Github in the menubar. Copy your values here and hit save. Now let's open a new incognito window and navigate to the admin page. Here you can see the GitHub, as another service to log in. Provide the username and the password of a GitHub account to sign in. Now Orchard Core asks you to create a new account based on the user information you have just provided in the previous step. If you click on Register your user account will be created in Orchard Core and you will be able to log in using your newly created account. For note, let's see what happens if a user tries to login with an external provider, and registration is enabled: If the external provider provides an email claim, we search for an existing account with that email. If not found, a new OC Account is created based on the username, email, and password provided by the user. If found, we request the password of the OC Account in order to link the external login. There is a PR that takes into consideration the email must confirmed parameter, if we request a password in order to create a local Account from external login, and also uses the ReCaptcha. There is a front page (OrchardCore.Users/Account/ExternalLogins) where you can link/unlink OC account with external providers. Of course, is not complete, we must decide how this is integrated with profile/account info in admin/front end. Regarding the GitHub, you must select to use your email in public and select which one of the verified emails will be included in the claims. External Login registration without password As you noticed in the previous section when you create a new account using an external login provider you have to provide a password to create the user account in Orchard Core. There is a PR to add a setting to register external users without requesting a local password. In this PR, Michael Petrinolis also implements the way to generate a username instead of parsing claims from external login info and to integrate ReCaptcha in External Login Registration. Facebook module OrchardCore.Facebook provides the following features: Core Components Facebook Login First, you need to enable the Users Registrations module and put a tick in the Users can create new accounts on the site checkbox under Configuration -> Settings -> Registration, because we will create a new user account based on the details provided in the Facebook log in page. To register the Facebook App with the site you need to provide the following settings: AppId: Facebook application id. AppSecret: The application secret. Both settings are available in the Facebook for developers application's page, under Basic Settings. Now enable the Facebook Login module and add these values to Orchard Core. The configuration can be set through the Configuration -> Facebook -> Application menu in the admin dashboard. Now you can log in in your site using a Facebook account, where you can get a familiar screen. After that, you can create your new account in Orchard Core that you can use to log in to Orchard. But the PR is not just about authenticating users from Facebook. If you head to the modules, you will find a feature called Facebook Social Plugins Widgets. Let's enable it! Let's say you installed your site using the Blog recipe. In this case, you have a Page content type with a FlowPart attached to it. Create a new Page and hit on the Add Widget button. Here you will see several new widgets that you can attach to your content type that has a FlowPart attached, like Facebook Comments, Facebook Share, Facebook Like and many more. If you publish or preview your page you will see that the widgets are displayed in your page. On Lombiq Orchard Dojo Newsletter Now we have 57 subscribers of the Lombiq's Orchard Dojo Newsletter! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail every time when a new post published to Orchard Dojo, including This week in Orchard of course. Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!

Last lesson: viewers' requests - Dojo Course

UPDATE (2017-11-22): Dojo Course 2 is released with new, updated videos! In the last lesson of the Dojo Course, we look into a few topics asked by you! Let's see Facebook Suite, Antispam and C# scripting! Facebook suite: installation and usage of the several widgets that bring Facebook features into your website! Antispam: Orchard offers a few solutions out of the box to fight spam! They are: JavaScriptAntiSpamPart, ReCaptcha, Akismet and Typepad. C# scripting: how to add C# code on the frontend which can be integrated with other features, e.g. content validation and Workflows! Thank you for your attention in this 3 months and have a very good year filled with awesome Orchard stuff! Remember: if you have any questions don't hesitate to ask them by creating a new issue in the Orchard issue tracker with the "discussion" label. Make sure to prefix your thread's title with "Dojo Course - "! We keep an eye on these issues. Also follow us on Twitter to get notified about the latest Dojo Course news, including when a new tutorial is posted. Do you have some feedback about the course? Please send it in.