SendGrid anchor <a> tag is not working properly in Outlook - node.js

I used Sendgrid api for email template and in one of email has some confirmation functionality and for that I used an anchor tag which is redirecting to backend server and then backend api did all stuff. It is working fine, but some of outlook clients are complaining that they are not redirecting to the correct address.
I got the link from the client (outlook) which is something below:
https://owa.nexus.ox.ac.uk/owa/redir.aspx?SURL=u16WQnU.......
but above link is wrong and in sendgrid the link should be something like below:
https://u3550765.ct.sendgrid.net/wf/click?upn=hj8lklPLwDMw.......
Can anyone help me and suggest me either it is sendgrid issue in Outlook or it is something related to Outlook setting ?
Below is the email template:
<div style="width: 500px;margin: auto;margin-top: 37px;">
<div class="rest-btn" style="display: inline-block;margin: 10px;width: 200px;color: #fff;height: 40px;border: none;border-radius: 5px;line-height: 2.9;text-align: center;border: 1px solid #ccc;padding: 0px;background-color: #4dbc39;">
ACCEPT
</div>
<div class="rest-btn" style="display: inline-block;margin: 10px;width: 200px;height: 40px;border: none;border-radius: 5px;color:#ffffff;line-height: 2.9;text-align: center;padding: 0px;border: 1px solid #ccc;padding: 0px;background-color: #4dbc39;">
DECLINE
</div>
</div>

I suspect the issue is you're using Outlook specific HTML (VML) to generate buttons. SendGrid doesn't wrap those links, which is why that isn't working.
It would be helpful if you could post a sample of the HTML you sent. Then we could confirm if that's the issue.

Related

How to: Restart Azure AD B2C UserJourney when user cancels signup

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);

Azure AD B2C strips html tags from Custom UI template

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

Implementing Oauth Server with Authorization Code grant

A bit naive question. I am implementing OAuth server 2.0 with grant type = Authorization code grant. Here's what I have done
1) Created 2 endpoints as /login and /token
2) Created a login page with html as
<html>
<form action=\"/login\" method=\"post\">
<div class=\"textcontainer\">
<label><b>Sign in</b></label>
</div>
<div class=\"emailcontainer\">
<input type=\"text\" placeholder=\"Enter email\"
name=\"uname\" required>
</div>
<div class=\"passwordcontainer\">
<input type=\"text\" placeholder=\"Enter Password\"
name=\"psw\" required>
</div>
<div class=\"signincontainer\">
<button type=\"submit\">Sign in</button>
<input type=\"checkbox\" checked=\"checked\"> Remember me
</div>
<div class=\"container\" style=\"background-color:#f1f1f1\">
<span class=\"psw\">Forgot password?</span>
</div>
</form>
3) The above page will be displayed when client sends
GET
/login?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&state=STATE_STRING&scope=REQUESTED_SCOPES&response_type=code
4) I will save the state and redirect URI and the html page is displayed.
5) When user enters email and password and clicks submit button, then a POST will be issued to my server as POST /login and I will fetch the email and password from the request and verify.
Now the problem is I am not able to figure out a way to know if this POST has come from the same client who has called the previous GET.
Is there any way/html trick I can do to resend the state again in my submit button post? Is saving client IP the only way?
I understand the POST /token so that part is clear.
Thanks
Sammy
You can generate a unique identifier (GUID) on the server, before sending the form.
Then put it into the form inside a hidden input :
<form>
... your code
<input type="hidden" value= "<%= <your identifier> %>">
</form>
Then this unique value will be returned to you in the POST.
the way you insert the identifier depends on your programming language, I used C# an the above example.

Embed (Private Account) Instagram Videos on Tumblr

I keep my Instagram account set to private but I'd like to share my videos to my Tumblr account too. I know if I turn off account privacy and make my account public the videos will show up automatically but I'd like to keep some of the stuff hidden from public eyes.
What's odd is the pictures show up just fine but not the videos. They show up as content not available. Here is the code.
<div class="entry-content video-iframe">
<iframe src="//instagram.com/p/8IzraHmXG0xDUmux5PwmB17OTTmuR8Ir3jVIQ0/embed/" width="700" height="812" frameborder="0" scrolling="no" allowtransparency="true" kwframeid="2"></iframe>
<div class="caption">
<p>Pastor Myron gets it in. (at Bridge Church Omaha)</p>
</div>
</div>
Any suggestions?

Linking to HTML files in chrome App

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.

Resources