I have followed this tutorial 'https://github.com/azure-ad-b2c/samples/tree/master/policies/embedded-password-reset'. Everything worked well. However when I try to add custom UI page to style whole change password wizard, 'continue' button disabled after email verified. Also I couldn't find a way to remove change email button in change password workflow.
Only change that I made was adding custom page to style change password pages.
<ContentDefinition Id="api.localaccountpasswordreset">
<LoadUri>https://xxx.blob.core.windows.net/yyy/selfasserted.html</LoadUri>
<Metadata>
<Item Key="DisplayName">Local account change password page</Item>
</Metadata>
</ContentDefinition>
Custom html page
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
// Remove the provided password reset link
$("#forgotPassword").remove();
// Move the new password reset button to the right position
$("#PasswordResetUsingEmailAddressExchange").detach().appendTo("label[for='password']");
// Set the style of the password reset button to look like a link
$("#PasswordResetUsingEmailAddressExchange").attr("style",
"background: none!important; color:#2872DD; border:none; padding:0!important; font-size: .75em; height: auto; width: auto; margin-left: 5px");
});
</script>
</head>
<body>
<div id="api"></div>
</body>
</html>
The Azure AD B2C guidelines for use of JavaScript indicate you must include a different version of jQuery; otherwise, this causes issues in the page UI.
Remove your jQuery script tag. Azure B2C uses a specific version of jQuery. Adding another version of jQuery can cause errors. You can still jQuery in your code, but you do not need to include the script tag for jQuery since it already loads via the azure API. To change the version of jQuery, you can update the DataUri in your policy. enter link description here
Related
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 dont get it, they say to Set the value:
(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=1
But where do I set it, if i have ad like this:
<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Ad code for non-personalized ads :
<html>
<head>
<title>Your site title</title>
</head>
<body>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=1;</script>
// The line above makes sure you are requesting non-personalized ads. It needs to come before you use <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> and it suffices to have one such line per page.
<!-- One test unit for GDPR -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:250px"
data-ad-client="ca-pubxxx"
data-ad-slot="slot_id">
</ins>
<!-- Another test unit for GDPR -->
<ins class="adsbygoogle" style="display:inline-block;width:250px;height:250px"
data-ad-client="ca-pubxxx"
data-ad-slot="slot_id">
</ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
// This triggers the ad request.
</body>
</html>
See https://support.google.com/adsense/answer/9042142?hl=en
I'm not sure how you can add this to the code you posted and whether it works or not, but here is a short guide to do this from your Google account:
To opt out of showing user-based ads:
Sign in to your AdSense account.
In the left navigation panel, click Allow & block ads > All my sites > Ad serving.
Under 'Personalised ads', use the control (switch) to opt out of user-based ads.
Source: https://support.google.com/adsense/answer/142293?hl=en-GB
Like #Minister said, you can turn off personalized ads for your whole account.
However, it will not disable Remarketing ads ... so if you went to Sears, you will see ads from sears..
Unfortunately u can't turn of personal ads on site or ad unit level... its only for the whole account
I have created a Web App bot (Node.js) in Microsoft Azure and am able to deploy successfully. But I can't find any css file or scss file in the code provided or even in the online code editor.
Does anyone have any experience in this?
Thank you
What are you trying to style exactly?
Azure Bots work by connecting them to existing channels like Skype, Facebook Messenger, SMS, etc or making REST calls from a custom application. The bot itself doesn't have an interface to style.
The simplest way to embed chat frame into a static page that you can style is to add:
<iframe src="https://webchat.botframework.com/embed/YOUR_BOT_ID?t=YOUR_TOKEN_HERE"></iframe>
See this documentation for more information. However, do note that this method will expose your secret key in the source of your HTML and allow other developers to embed your bot on their pages as well.
I am using iframe to include the bot on my website. But I wanted to customize the colors and other such things.
As you are using iframe in your website, which means it will load the site https://webchat.botframework.com/ and the stylesheet file is also loaded in the botframework server site, but yours.
IF you need to customise the style, the easy way is to follow the guide https://github.com/Microsoft/BotFramework-WebChat#easy-in-your-non-react-website-run-web-chat-inline, customise your own stylesheet, and leverage botframework-webchat js lib to build bot application in your website.
If your website is built up by React, you can follow https://github.com/Microsoft/BotFramework-WebChat#medium-in-your-react-website-incorporate-the-web-chat-react-component to customise UI components of bot application.
Try this
<!DOCTYPE html>
<html>
<head>
<script
crossorigin="anonymous"
src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"
></script>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
}
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: 'YOUR_DIRECT_LINE_TOKEN'
}),
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
locale: 'en-US',
botAvatarInitials: 'WC',
userAvatarInitials: 'WW'
},
document.getElementById('webchat')
);
</script>
</body>
</html>
I am trying to build a Support page for my website which should have Acumatica New Case Screen for customers to create a new Case. I tried using iFrame but when logged in, Selectors and dropdown don't respond. Any Suggestions how do I get New Case screen for my Support page just like in Acumatica Partner's portal.
This is working for me:
1) Create an acumatica portal web site; Make sure sp203000 page is accessible and works fine.
2) Create a simple html page and assign iframe src to be sp203000 screen url:
<!DOCTYPE html>
<html>
<body>
<style>
iframe {height:800px; width:1200px;}
</style>
<iframe src="http://localhost/AcuPortal/pages/sp/sp203000.aspx?CaseCD=null&CaseClassID=BILLING">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
And it works fine:
New Case form embedded into frame
First time you will see the login screen in the frame. If you want users to see the form without logging in you need to think about some SSO solution for your site and acumatica.
I have recently made a chat bot and am seeking to further edit the components of the interface by adding a minimizing button and an anchor so that the Chatbot is statically secured to the bottom right of the page (which is the most common area). This is made with the Azure QnA framework, so I'm not sure how much I can really edit..
Is there any way that I can access the code so that I can minimize the chat bot or add a button?
I will show a photo to make things more clear: minimizing image
The webchat interface that you are using is coming from Microsoft GitHub's project named BotFramework-WebChat available here.
If you look at the documentation provided on GitHub's main page, you will see that you have several ways of implementing your webchat on your website, from the easiest iframe inclusion to more detailed solutions.
If you want to customize your interface, I would suggest an implementation like the following in your hosting page code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
Here you are declaring the chat and using js and css files from the CDN.
All the code for the webchat component is in the js, so you should get it, make your customization and host it on your side to have what you want.
From the CDN it is minified, but you can rebuild the file using the process described here: https://github.com/Microsoft/BotFramework-WebChat#building-web-chat
For example an interface that we made from those sources:
For this example, we have customized the header in js to :
add 1 button to maximize
add 1 button to close
Then the image of the buttons is made with CSS