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
Related
I've setup a custom policy in B2C that combines all 3 main operations: sign in, sign up and reset password. The sign up and reset password pages both support a CANCEL button, which ends the user journey and returns an AAD error code.
[Update] For clarification, the policy starts with asking for login credentials. It also offers "Forgot password" and a "Sign up" link. Both are linked to further orchestration steps to show the relevant screen. Its those that have the CANCEL. And when pressed, I want to go back to the first screen that asks for the credentials.
Is there a way to express within the UserJourney that when a CANCEL occurs, it should go back to OrchestrationStep = 1?
I think the only control available is to skip an orchestration step in a policy. Based on AAD error code. You have two options
Catch the error code generated out of cancellation and redirect to policy again.
Hide B2C's cancellation button, using javascript. Implement a button yourself which will mimic back button behavior.
As #Abhishek Agrawal mentioned, there is no native way (i.e. - an xml policy configuration parameter you can set) to add a restart-flow/login button to the signup page.
If your main aim is to just navigate from '/signup' baack to '/signin', I would recommend adding the following html to your template, which you can then style to your liking:
(Note the call to `history.back()` on the anchor tag)
<body>
<div class="container unified_container">
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-body">
<div id="api"></div>
<div id="signinContainer">
<p>
Already Registered?
<a
id="signinLink"
type="submit"
aria-disabled="false"
aria-label="To Sign in screen"
href="javascript:history.back()"
>Log in</a
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Alternatively, if you know that you will want to go back a specific number of times (for example, back 3 pages), you can use the following instead of the history.back() we saw above:
history.go(-3);
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" />
I'm building some pages in liferay 6.1 GA3, so recently I was in need of embedding liferay web content portlets in an other web content portlet for this I use something like :
<div class="somecontent_stuff">
<runtime-portlet name="56" instance="hj33" queryString=""/>
</div>
<div class="some other content">
<runtime-portlet name="56" instance="ze33" queryString=""/>
</div>
<div id="part_right">
<runtime-portlet name="56" instance="nj33" queryString=""/>
</div>
And this is working perfectly fine, but when I use my web content in multiple page I have the change instance id manually and for every page, which is exhausting and risky (because I have lot of pages like this ).
Is there any way to generate this code automatically ?
Capture the instance id of your embedded portlet using a web form. See this for more info
I am trying to deploy a Promoted links web par to the default.aspx page, following the article from Muawiyah Shannak http://code.msdn.microsoft.com/office/Sharepoint-2013-How-to-add-e2966a24#content
But I cant find out how to set the JSLink url in the markup.
<div>
<WebPartPages:WebPartZone ID="WebPartZone" runat="server" FrameType="None">
<WebPartPages:XsltListViewWebPart
ID="XsltListViewArticlePromotedList"
runat="server"
ListUrl="Lists/MyPromotedLinks"
IsIncluded="True"
NoDefaultStyle="TRUE"
Title="Images used in switcher"
PageType="PAGE_NORMALVIEW"
Default="False"
ViewContentTypeId="0x">
</WebPartPages:XsltListViewWebPart>
</WebPartPages:WebPartZone>
</div>
XsltListWebPart.JSLink property sets CSR file to rendering the List View:
<JSLink>~site/SiteAssets/PromotedLinks.js</JSLink>
where ~site is a URL token.
Please refer URLs and tokens in SharePoint 2013 for a more details.
I would simply like have a link to a different page. But when I use:
<div style="position: absolute; top: 230px; width: 600px;
left: 250px; height: 120px">
<h2>
<a href='cgoogle.html'>
Sign in with your Google Account
</a>
</h2>
</div>
The link does nothing. I read that the solution is geturl, but I have no idea how to implement this. Does anyone have an example?
If what you want is open the link in the default browser (note that this may be not Chrome on the user's system), then add target="_blank" to your link:
<a href='cgoogle.html' target="_blank">
Sign in with your Google Account
</a>
However, it looks like what you're trying to do here is authenticate the user. The proper way to do that is to use the Chrome Identity API. You can read more on Chrome user authentication in general here (the API page also has this link).
If all that seems a little daunting, this app sample should get you off the ground.
Also note that "link does nothing" is not exactly true: it prints an error to the console, in addition mentioning the target="_blank" thingy. When you're developing Chrome apps, using the console is imperative (both the background page and foreground page ones) - it often provides very useful feedback on what's going on.