I'm trying to customize the page UI on Azure AD B2C unified sign in/sign up page.
I was able to create my template and upload all the assets i.e. html page, images and css to my Azure Blob Storage container with the right CORS settings.
When I pull up the page, however, it looks absolutely HORRIBLE! It doesn't seem to support Bootstrap. I read somewhere that no JavaScript is allowed. Is that the reason for this?
Once I upload my custom HTML page, Azure AD B2C seems to be stripping off a lot of the design elements necessary for my customization such as id and style in my body tag -- see below:
<!-- Omitted for brevity -->
<body id="my-login-class" style="url: ('https://myazurestorage.blob.core.windows.net/my-container/my-bg-image.jpg')">
<div id="some-important-id" class="my-important-class">
<div class="col-xs-8">
<div>Some important message</div>
<div>
<div class="col-xs-4">
<div id="api">
</div>
</div>
</div>
</body>
When I inspect the page source once my custom page is rendered, I see that all my classes and Id's are removed along with Bootstrap references e.g. css and js.
Am I getting this right? No Bootstrap which means Azure AD B2C only supports customization of the most basic kind?
Your HTML template can include any external, head, or inline styles but it can't include scripts.
An example of a customized page can be found at the WoodGrove sign-up or sign-in page.
The HTML template for this customized page can be found in the WoodGrove GitHub repository.
This HTML template includes Bootstrap's Reboot styles as well as the WoodGrove's specific styles.
Azure AD B2C creates the head and body elements and then copies the child elements for each of these head and body elements from your HTML template to its HTML document.
Therefore, you shouldn't add attributes to the body element in your HTML template, because they aren't copied.
You can import the bootstrap references. Please see this document: https://learn.microsoft.com/en-us/dynamics365/customer-engagement/portals/azure-ad-b2c
See also: https://github.com/Azure-Samples/active-directory-b2c-php-webapp-openidconnect
It looks horrible for a reason. No styling is applied to the page so that it can be fully customizable. You can reference Bootstrap for CSS; however, I have run in to issues when using bootstrap.js for modals since it appears the Azure B2C API uses bootstrap for modals...In my experience, it is best to rely on Vanilla JS and to leave off any references to third-party JS.
It is possible to use JavaScript if you are using your own custom policies. There are some limitations to JavaScript and the best approach is to try to accomplish anything using the policy first.
To enable JavaScript use the following as guide:
<RelyingParty>
<DefaultUserJourney ReferenceId="SignUpOrSignIn" />
<UserJourneyBehaviors>
<ScriptExecution>Allow</ScriptExecution>
</UserJourneyBehaviors>
...
</RelyingParty>
When referencing external CSS/JS files, the URL must be absolute. This is true for the head section of HTML files as well as any references within JavaScript. Relative URL's can only be referenced within a CSS file.
Incorrect:
<link href="./css/assets.css" rel="stylesheet" type="text/css" />
Correct:
<link href="https://your-storage-account.blob.core.windows.net/your-container/css/assets.css" rel="stylesheet" type="text/css" />
Related
We are intergrating an external JavaScript application into Acumatica and we have a need to be able to access the logged in users authorization / user access roles. Our thought is that if we can write the logged in users access roles to the page source as global scope variables our JavaScript app can handle the rest, but we are a bit challenged in figuring out how to do that. We know we can write the roles to the trace screen, but that doesn't help as we need it literally in the page source for this to work (ideally the page source and not the DOM - but we can look into if the DOM could work too).
Any help would be much appreciated.
The page source in ASP.Net is a ASPX.CS file that resides on the server, I doubt your JavaScript can hook into that. The communication from the server to the UI layer is a template engine.
You define the fields in the ASPX file and these template fields are populated with the DataViews current record. The minified JavaScript that is in the page runs that templating engine.
You can't simply generate dynamic HTML or access the JavaScript side of things from the server. So having fields values in the DOM is probably your best bet. You can make the controls invisible if required.
Example to read UI control values using JavaScript:
<%# MasterType VirtualPath="~/MasterPages/FormDetail.master" %>
<asp:content id="cont1" contentplaceholderid="phDS" runat="Server">
<script language="javascript" type="text/javascript">
window.addEventListener('load', function () {
// Fetch a value from UI control
var control = px_alls["edControlID"];
var value = control.getValue();
});
</script>
[...]
</asp:content>
While trying to customise the unified (Sign In & Sign Up page), I have this simple HTML in my unified.html template (fragment):
<div class="col-4 login-box gradient-background">
<div>
<h1>WELCOME TO<br/>SuperFancyProductName<sup>®</sup></h1>
</div>
<div id="api" data-name="Unified"></div>
</div>
However, when Azure AD B2C renders the Sign In page, the element is stripped of from inside the h1 element, with this result (fragment):
<div>
<h1>WELCOME TO<br>SuperFancyProductName®</h1>
</div>
In our case, this does not allow us to properly align the ® symbol.
Is there any documentation on what tags are allowed in the template html and how this template transformation actually works?
There is a subset of HTML that is allowed but is not documented.
It looks like the superscript tag is not allowed here. For reference, see this Github issue.
The docs team is still working on an update to show what's allowed.
You can upvote some of the requests in User Voice or create your own request: https://feedback.azure.com/forums/169401-azure-active-directory/suggestions/31173091-improve-the-tag-filtering-on-the-b2c-custom-ui-tem
We have a Kentico project where we're using Azure Blob Storage for our media storage. When selecting a media file in a page, it stores the URL like this: www.ourhost.net/blobcontainer/kenticosite/media/medialibrary/picture.jpg
We are also using ImageProcessor.org. This only works when the image is requested through the host itself, so we need the media library selector to store the absolute URL like this: /blobcontainer/kenticosite/media/medialibrary/picture.jpg
How can this be done?
Thanks in advance. Nicolas.
I assume you are talking about Media selection form control, is that correct?
In this case the solution is for you to remove the protocol/domain from the absolute URL which is stored by the form control. You can do this by creating Custom macro since you are using Portal engine macros.
The purpose of the macro will simply be to take the absolute URL and make it a relative URL.
Instead of using this:
<img src="{% CurrentDocument["HeaderImage"] #%}" alt="{% CurrentDocument["Title"] #%}" />
You would call it like:
<img src="{% MyMacros.GetRelativeUrl(CurrentDocument["HeaderImage"]) #%}" alt="{% CurrentDocument["Title"] #%}" />
As you can see I'm using "MyMacros" namespace which is a best practise as it will enable you to keep all your macros organized. You can create custom namespaces as per this article
I am using Orchard v.1.9.1.0.
I have my custom theme with a layout page that starts off like this:
#using Orchard.UI.Resources;
#{
Script.Require("ShapesBase");
// css
Style.Include("//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css");
Style.Include("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css");
}
Using Script.Include, I thought loading the CDN reference would work, but when building the project and viewing it locally, the reference is not there and instead renders like this:
<link href="/Themes/HotToddy5K/Styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
Why does Orchard do this? I can't seem to find where in the base/core it's applying this. I tried to delete that bootstrap.min.css file in that "scripts" folder, hoping it would then fall back to my CDN reference, but no luck.
Any ideas?
You can easily do this on your ResourceManifest.cs.
Actually it is better, because you can provide fallbacks as for debugging files. you can manage this feature from the Settings section in the Admin.
Where is says "Resource Mode", in 1.9x you can trigger the CDN too.
I use Script/Style.Require instead of Include as it gives me more control. it also maintains your script/style dependencies.
I am creating a node.js web application where I am using Yeoman angular scaffolding for client side.
I have an index.html which has all the javascript files included to load.
What i want to do is have a header file that will contain users name using model binding. These need to be included in all pages.
How can i achieve this?
You need to use ng-include directive to include partials.
Your index page would be structure something like
<body>
<div id='header' ng-include='/partials/header'/>
<div ng-view />
</body>