SSO SignIn page rendering with Email input element at top of page - azure

When attempting to the load the default SSO SignIn page in Azure, the Email Address element is selected by default and in focus as follows;
When the page is zoomed the Email Address input is rendered at the top of the page on load, this causes tablets and smaller devices to be presented with a page that is already scrolled.
I have attempted to add a new input on a custom page and given it a tabindex of 0 (as a hack) as the default for all element contained inside the "api" div is 1.
I have also given the input element the autofocus attribute but it seems to strip both on render.
https://www.realmadrid.com/en/login is using a similar SignIn page and appear to have this function turned off, having gone through all the source that I could find it isn't directly apparent how they are achieving this.
Obviously this would be easy if it were possible to use JavaScript on custom pages in Azure B2C SSO but as this is not yet possible, does anyone know of a possible workaround or fix for this issue?
Update:
It's a little hard to illustrate using a screenshot, but if you select 'run now' on a new default 'SIGN-UP OR SIGN-IN POLICY' policy, set responsive as per screenshot, scroll to the top of the page and press F5, you'll be able to see the stated behavior.
We are using heavily custom policies, I'm aware of how to do this, I'm using a default example for ease of replication.

This is no longer an issue due to MS allowing front end JS https://learn.microsoft.com/en-us/azure/active-directory-b2c/javascript-samples

Related

How to make Powerapps work with Param function in Web Part

I am trying to create a powerapps web part that will open a specific screen from a canvas app using parameters. I have added the web part and added the power apps web link to it. When I enter &parametername=parameter nothing shows up. I can enter the web link and parameters directly into a browser window (tried in Chrome and Edge) and the app will display properly. I can also created a button in a web part and added the link to it and it will also display the app when the button is clicked. The app is working properly with no errors, it will just not show up in the web part when the parameters are added to the link (If no parameters are added to the link, everything will display fine).
I am trying to create a powerapps web part that will open a specific screen from a canvas app using parameters. I have added the web part and added the power apps web link to it. When I enter &parametername=parameter nothing shows up. I can enter the web link and parameters directly into a browser window (tried in Chrome and Edge) and the app will display properly. I can also created a button in a web part and added the link to it and it will also display the app when the button is clicked. The app is working properly with no errors, it will just not show up in the web part when the parameters are added to the link (If no parameters are added to the link, everything will display fine).
I was struggling with this myself; just figured it out.
You need to put the full URL with parameters in to the "App web link or ID" property for the PowerApp web part. Be careful because the first parameter needs to be prepended with ? not &. The ampersand is used for additional, following parameters after the first parameter.
Note that I have omitted my TLD from this screenshot, however you will want to substitute your own here.
The example URL syntax given by Microsoft is https://apps.powerapps.com/play/{App ID}?{Query}. For me that URL looks something like this:
https://apps.powerapps.com/play/f813580f-3182-90b0-b3a9-781cfb288808?linkId=checkIn
I have one URL for checkIn and another for checkOut that I can use to display different forms.
My primary mistake was that I was only pasting my appID into the "App web link or ID" field rather than the entire URL. Remember, you can edit your Canvas Form, click on "Share" and get the Web Link from this page. This contains the full URL, minus your custom parameters. Play around with the full URL plus parameters until you get something that the web part will accept.

Should I select a `Page Layout Version` when using `Custom page content` of Azure AD B2C User flows?

I'm trying to customize the Multifactor authentication page of a B2C User flows.
If I just modify the layout by adding my CSS & HTML then whether I should select a Page Layout Version or not? Because my CSS is based on the css-class or element-id (that is generated by Azure-AD-B2C). So, I'm afraid that those css-class / element-id can be changed in the future.
If I don't select the Page Layout Version, then whether the MFA behavior may be changed in the future?
The css-class or element-id generated by Azure-AD-B2C will generally not change. If it changes, you also need to change your custom CSS and HTML code, regardless of whether you choose the page layout version.
There are some behaviors changed about MFA page (multifactor) in page layout version 1.1.0. See details here.
'Confirm Code' button removed
The input field for the code now only takes input up to six (6)
characters
The page will automatically attempt to verify the code entered when a
6-digit code is entered, without any button having to be clicked
If the code is wrong, the input field is automatically cleared
After three (3) attempts with an incorrect code, B2C sends an error
back to the relying party
Accessibility fixes
Default CSS removed
If you don't select 1.1.0, the behaviors will keep on as 1.0.0.

Azure AD B2C Password reset flow custom layout password validation not working properly

I've created a custom layout for the "Password reset" user flow.
The password entry validation does not work properly, it does not always detect entries and when it does the information it provides is incorrect.
My layout has no custom CSS or JavaScript, it is just a plain HTML document with the div containing the value api in the id attribute inside the body.
I worked around this issue. I extracted CSS from the default layout provided by Microsoft.
One or some of those CSS classes did the trick, although I am not sure which of those is necessary. I wasn't able to find any information on the custom layout documentation page and that's the actual issue I have.
Generally to avoid this issue, we recommend starting with the templates, and adding your customisation on top. The templates contain a lot of the JS/CSS to control the default controls and error messaging that is part of the page.
https://learn.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-ui-customization#customize-the-default-azure-ad-b2c-pages

Netsuite: How do you edit the email preferences page?

I am using Site Builder, and there is currently a less than ideal looking email preferences page.
The url of the page is: https://forms.netsuite.com/app/crm/marketing/campaignlistener.nl?...
Is there a way to edit it somewhere?
There is no way to edit this directly.
Your best option is to inspect the classes and markup used and inject css and scripts (via a tab level tag override) to fix the page.
The other option is to replace the page entirely with a page of your own creation. The problem with that is once you do that you should only allow soft-opt-out because while you can set a hard opt-out with a script you cannot change from a hard opt-out with script.
This is a pain. I think what I may have done in the past was to insert some code on the My Account page that creates an iframe. Then you grab the Subscription Center link and replace it with a Suitelet URL that has the escaped Subscription Center url as a parameter and change its target to the iframe(same domain - forms.netsuite.com))
When the Suitelet opens it uses a postMessage to make the My Account let it take over and then creates another iFrame and makes the source of that iFrame the original Subscription Center iFrame. the Suitelet detects (on open) that the center is open an then because you are in the same domain you can inject CSS. When the subscription center goes away (a new onOpen function sourced from the Suitelet page) you can again use postMessage to "return" to my account.
I think this breaks in Safari but it's such a hack that I have steered away from this sort of thing and these days would tend to roll my own and manage hard opt-outs with the email from the Netsuite GUI.

Prevent direct access to some page in JSF

I want to restrict direct access to certain page in my application. Those pages can only be accessible if the user is redirected to those pages by the application.
All the redirections are done via ExternalContext#redirect(url) method.
User can use back and forward button, also can refresh the page by pressing F5 or via browser's refresh button. What I want is user cannot save, or bookmark URLs of some page, also cannot copy those redistricted URL and paste and go via address bar of the browser.
Followings are the cases:
Say, I have Page-A and Page-B.
Redirection is done to Page-B from Page-A.
User can go back to Page-A and can come again to Page-B by using browser's back and forward button.
User can refresh Page-B and he/she will stay in Page-B.
User CANNOT copy the URL of Page-B and access it later time (in new tab or by bookmarking).
Is it feasible? Any pointer would be very helpful to me.
I don't think you can do all that from JSF.
Your obvious alternative is to use Javascript.
I never herd a concept of disabling Bookmark option in Browser using Javascript. However you can always disable the address field if you open the page in new Window.
You can solve it with
JSF Navigation Handler - set a session attribute from some previous page and expire the value after some time with a timer. From the Handler impl check the value of the attribute and restrict access e.g. redirect to some other page in case the value is not present.
You can achieve similar behaviour with web frameworks. Enforcing controlled navigation is a basic feature in most WEB FXs e.g. JBoss Seam conversations or Spring Web Flow controlled navigation implementations.

Resources