Azure AD B2C Custom Policies 4   end to end scenarios

Azure AD B2C Custom Policies 4 end to end scenarios

>>We’ll get started. Welcome to the last technical
session of this conference. Hope you guys have had
a good time so far. Got a chance to learn a lot. Obviously we’re here even
after the conference. So, if you have any questions,
feel free to grab me, grab anybody from our team. You even got Chris,
who’s going to do a lot of the
technical demos that we showed you during launch and kind of deep dive into it today. My name is Parakh, for those who I haven’t met yet. I am going to be basically introducing you to
a few scenarios, and to any scenario,
that Chris hasn’t made. The goal of this session
is for you to get a grasp of what
Azure AD B2C is capable of. It’s more than going into the technical details in terms of what he can do
like line by line, but more about what it
can achieve end-to-end. It’s to give you
the whole sneak picture of what is possible in a scenario that we have created working with Chris and Hussein and
the rest of our team. So, obviously I don’t
need to introduce Chris. He gave a great presentation
during launch. Just a quick agenda. I’m going to talk about
the WingTip Toy scenario, you saw the website, but I’ll just give you
the architecture overview of what we dreamed
up in the story. Chris will take over
at that point and he can give you a walk
through the demo website, maybe give you a few minutes
if you want to try it out. He’ll talk you through
the architecture, the components that we
use to build these sites, just Azure’s functions
SQL and other things. We’ve given you a scenario walk-through during
launch but he’ll go deep, he’ll dive deeper into it. Finally, we’ll conclude with
all the resources that you have available, and how you can leverage
the work Chris has done, our team has done, the work that we’re
presenting today, how you can leverage it
for your proof of concepts, for your sales pitches and for your future deployments
and implementations. So, how does a B2C fit
into a corporate scenario? We’ve created this fun story, that includes this company
called WingTips Toys, and it has two subsidiaries. They both are digital focused, WingTip Games and WingTip music. You saw WingTip Games demonstrated really
well during launch. The other aspect of
it is WingTip Music, which the idea is hey, you have two different
brand names but they’re under
the same corporation. What we’re trying
to show you here is, how can you leverage
multiple aspects of a businesses and share apps and
resources in between them? And how you can kind of build Azure AD B2C to to be
the middle point for the time. In this scenario, we
have about 1.5 million users using WingTip Games
and Music combined. And 1.2 of them, 1.2 million, are for the games, and about 300,000 are for
the WingTip Music site. Now, in addition to this, we have about 200,000 customers, that maybe went to one of
these websites and said, “Hey, I want to buy a game
but I do not want to create a profile for myself.” It might be something
like a guest check out. These are 200,000 users that are a part of
our CRM database, that have not really
engaged with us online. The reason we bring this
up is you could build campaign strategies which Chris will show one of them
being the email invitation, to get them engaged, to get more users for
WingTip’s corporation. When you talk to
the CIO and CMO’s, they may come up with a few challenges
that they’re facing, and some of these
challenges could be, hey we have lots and
lots of digital assets. We’re really worried
that looking at all the news stories about the equal facts and
all these other companies, getting breached, like what
can we do? They’re concerned. And they don’t want that to
happen to them, it’s bad PR, and it’s obviously terrible
for their business. Then they’re also dealing
with a lot of partners but they are just not able
to complete their goals, and their commitments
when they have these partners because their infrastructure might be failing, or it might be aged and there’s some capabilities they can’t do. Another challenge they’re saying is customers are leaving. They don’t know
why but the sign up rates might be
lower than before, or sign in rates or
even worse than before. And obviously scaling is a huge issue as
any company owner knows the one thing
they really want to be is in a high growth phase. But if you can’t scale,
that’s limiting your business. So, they came in and
they’re like, “Hey, how can we use B2C to fix
these challenges and in fact, reach new dimensions
in our business?” Perhaps they have goals
to reduce Science-Fiction, maybe through passwords rules
authentication et cetera. Maybe they want to engage users through
social channels like, Facebook, Google or
even enterprise accounts. I mentioned that 200,000 users maybe they want to
reactivate them. These are other users that have done
business in the past, but they want to get
them to re-engage. They want more
completed registrations, there are more scenarios
that they want to achieve, and they feel B2C
might be able to help. So when you guys
go out and talk to your clients and talk to
your customers, you mean, there are certain conversations
you may want to have, such as, “Hey, what identity providers
are you looking for? Or what languages do
you want?” So these are some of
the requirements that we figured out talking
to the WingTip’s CEO, The WingTip CIO and
CMO, and they say, “Hey, we want Amazon, Facebook and
local identity providers. Facebook, because its very
common and Amazon because, hey, its an e-commerce website. If people are buying online, they are likely to be
using Amazon as well.” They are interested in two
languages, English and French, and they want MFA
for their Sign in, and not for their Sign in
but for Sign in for billing. There’s other things that they want such as
terms of service, social linking and
other migration scenarios. We’ll dive deeper into this when Chris is showing
you all the the code, but effectively these are more requirements that they have mentioned to our team
and we’re saying, “Hey, yes, let me show you how.” I just want to briefly touch
on architectural components, before B2C comes in and how B2C fits into
the greater picture. Again, this is to give
you kind of an overview. I know Chris has
done a great job already presenting some of these things during the launch. But it’s just to
give you an idea of what you might be stepping into when you’re talking
with your next client. So, in this case, when WingTips Toys came out
they’re like, hey, look, we have two application WingTip
Games and WingTip Music, and they both have
a billing service, independent billing services. There is no single sign on capabilities right now
between the two apps. And right now they’re using a SQL database to manage
these users identities. As we all know, it
could be exposed easily, there’s a lot of weak points and it’s
not an identity service. So, moving off SQL is
one of their goals. Another thing they
have is a CRM database. They have all these
actual information about all the users that they have and they
want to maintain it. Lastly, they have an e-mail
service that they’re using, as a way to engage with their customers and
as a way to market. Now, B2C doesn’t replace
these, it compliments them. It adds in and fits
into the picture, to bring in more capabilities. So, as you can see now we’ve split apart
the billing service, to be its own
application that is now shared by WingTip Games
and WingTip Music. Billing can now be a thing that they can
use single Sign on for, as well as between
WingTip Games and WingTip Music. Furthermore, they’ve
added WingTip Toys here, as a new portal that
administrators can manage. If you remember earlier, Chris was showing
you the user screen to show you who’s
migrated and who’s not, that is their
administrative portal. Now, all these services
talk to B2C, and B2C then can talk
to the e-mail service, it can connect with
the email service, it can connect with the CRM, and it can connect with
the Legacy SQL database. The reason it’s pointing to the SQL database is to show you, hey, if the users that are trying to sign in can’t sign in, have not registered and are not in user object
within the B2C tenet, that it will go out, make sure that the user name and password they’ve signed
in with is the same, and basically use
the database as well, in addition when signing in as part of
the migration history. So, quickly running through
built-in and custom, if you’re about to use the site, you could
say, “Hey look, you can use built-in policies to do a very quick proof
of concept, or you can quickly dive
deep into the second phase of showing how you can do so much more with
custom policies.” This is a quick look at what you can achieve
in both scenarios, but we’ll dive deeper after the walk through
that Chris will do. So, take it over.>>Thank you
everyone. Hello again. So, as Parakh mentioned, I’ll just do
a quick walk through, perhaps just to re-emphasize a couple of the flows
that I demonstrated earlier but I don’t want to spend a lot of
time with the web site, I want to spend
a lot of time with the code and the policies and the templates that back those usual journeys I
demonstrated earlier. So, get ready for some data. So, very quickly, if
you missed it at launch, and this is not
my computer such like driving a new car and I feel
a bit lost in the moment, but I’ll just go
to WingTip Games, and one of the very first
journeys I showed you is an invitation
start journey where a new user has heard about WingTip Games from
friends and so on and they want to
claim a free game rental and in order to do so, they have to provide
their e-mail address, to which an invitation
can be sent. Because I can’t access my work account
from this computer, I’m going to send it
to my, start again, live account, personal account. And then I want
just to open that secretly just to check there’s no funny emails in there. And what I’m sending to that email account is,
as you saw earlier, a signed redemption link
for this new invitation. So I’m going to and we will literally just go
blank for a moment. See this, sign in. And the reason I want to
demonstrate this is because this particular invitation
journey contains a number of different kind of tips
and tricks that you might want to use
for yourselves, including how you
can provide claims to a B2C user journey that you have collected from the user prior
to that journey starting. Now in this particular scenario, like I demonstrated earlier, the claim that we want
to use as input to this invitation journey is the email address to which we we’ve sent
the invitation link. So that’s something
as a client we’ve already verified about
the end user that we want to invite and enable
them to sign up. Okay, here we go. I can share games, it’s
not embarrassing after all. So this is the invitation email. When I submitted
the invitation to claim the free game rental we entered, I’ve sent my email address
and I selected an invitation or
a link top of application. There’s two options in that drop-down list,
application and policy. An application by slink is one that said redeemed at the games application itself. As you can see there, the redemption URL is hosted by the game’s
application itself. The difference between
that application by slink and the policy
by slink is that, for policy by slink, the invitation or
the redemption URL is actually a link to the user journey that the user steps through to sign themselves up based
on that invitation. So it’s actually a link to
containing the policy name that I want
to execute for that user to redeem that invitation and sign themselves
up as as a new user. So you might want to experiment
with that for yourself. Go to the WingTip Games site, claim a free game rental and choose one of those two options, application link or a post link, and you’ll see the difference between the two URLs
that they generated. The reason I want to
demonstrate this one is, this is the application link redeemed at
the game site itself, is because that email address prompted there that you can see in the link, email equals
[email protected], is something we want to then pass as an input claim
to a user journey. So that user journey can
use an input claim to control or present the right
information to the user. Now the key part of
this, to ensure that this is secure from end to end, is this invitation link in order to be redeemed at the application end point,
has to be signed. So much like you use with
some older style APIs, while generating a request URL, there are methods
in which you sign that request URL so that
the API endpoint that’s receiving it can then
verify that it is a signed request from a known client or
a known application. And that’s the same technique
I’m using here. I’m effectively generating
the invitation link, computing a signature, and
adding that signature at the end of the URL. This is to show you how
that’s done in code. I’m going to go to the github repo. Which page was it?
This one? Oh, thank you.>>[inaudible]>>Yeah, of course. I’ll show you
the code since that you’re on that invitation
message in a moment but effectively I just basically rendered the whole URL
so when you save it, you can determine
what it includes. Otherwise, you could
click here to sign up.>>[inaudible].>>Yes. In this case that there
was an email service, kind of third party service
that Parakh mentioned in the bottom right corner
that happens to be in the same grid in
this particular example. So I’m creating
the invitation message containing the invitation link
that I’ve signed and we redeem it at
my own endpoint and just sent that via same grid. This is the github repo I
mentioned earlier today. So if you go to demo code, you’ll be redirected to here. We’ll have that link laid
in this deck for you. What I want to show you is, I was just going to
show you the source. We’ll come back to
the structure of this repository a little bit later. So I’m now get to go
into the source folder. And go to the games applications and
it’s a nice speed on web app application. And the control that I’ve implemented to generate
the invitation message is this invitation controller. If I scroll down to
the create action method, that’s just down here, hopefully you can see that. So this is the
create action method and the view model contains the email address that
the user has entered in the dropdown selection
that they’ve chosen, either an application link
or a policy link. And if it’s an application link that they’ve chosen to send to their email address,
and effectively, we’re going to call
a private method of this class to generate that
signed redemption URL. And that redemption URL
was not only signed but had a couple
of other premises including in it
to effectively set a time in which that invitation link will
expire after a day or an hour. You can control
that for yourself. So it effectively generates
the signed redemption URL and then uses
SMTP service that I’ve injected into this class to send the invitation email to the email address that’s
been entered by the end user. And that’s about it. So
to answer your question in the implementation of
that service that creates the email message [inaudible]. Now when the user receives that invitation link
and opens it, so I would just go back to
here and I’ll copy this, and I’ll just
return to this one. So this is now being redeemed at
the application endpoint which there’s no user
interaction for that. Because the signature
has been verified, it’s an active link,
it hasn’t expired. So now the game’s application
that’s handled that invitation redemption
is redirected to a policy called
b2c_1a_invitation, you might get to see in
the address bar up there. Just sign the user app using a local account or a social account they want
to bring in with them. That could do what I want
to demonstrates right here, like I said earlier, if
I choose a local account, then the email address
is effectively locked. It’s already been verified
by the game’s application. We don’t want the user to
change that email address given that’s the one they’ve
invited themselves to. So I just want to walk you through the corner of
the mechanics behind that. Any questions about
that flow generally speaking? Making sense so far? So one not so much you
mean if one asks us. Let me return to the code. I’m going to scroll
down a bit further in this invitation controller, to this action method ‘Redeem’. When I click the link or open
it in the browser window, that redemption was handled by this control action method
and the premise on the invitation link
we’re parsing as these arguments here. The e-mail address,
the invitation link can only be used between
these two times and this is the signature. The first tip I do in
this particular action method is to validate whether
that signed redemption URL has been signed by this games application
and our other application, and also whether it’s
currently active between these two title lines here. If it is valid, then what I do is quickly set up an on and off
authentication challenge, okay? If you’re building high speed on their web applications
you’ve been using our middleware or
even some of, this is actually
or AuthenticationMiddleware, in order to redirect
B2C and execute a user journey by securing
an authentication challenge containing B2C policy
to be executed and any properties that
might want to be parsed as claims to
that user journey. Now, actually two claims
that I want to parse from this web application to
the B2C user journey. One of which is a
PlayerProfileRegistrationMode and the other of which is
the VerifiedEmail is being part of the of
the invitation link, okay? We’ve already preverified
this particular user. In order to parse this to B2C, I create that challenge and
I include those two claims as authentication properties
which I’ll show you how I’m rendering
a little bit later. The reason for the first claim, PlayerProfileRegistrationMode, I mentioned earlier at lunchtime
that what WingTips Toys wanted to do is
to enable tests on that as part of
the registration journeys. As a result of this user
following invitation link, creating a LocalAccount and then creating PlayerProfile
for themselves, WingTips Toys wanted
to provide a one field PlayerProfile kind
of registration step or a multi-field one, okay? Now, I’m controlling
that from my application. Effectively, in all cases that a new user redeems
an invitation link, we’re always going to
show them the basic read PlayerProfileRegistration
not the kind in the multi-field one. If you were to go to the games
site yourself and click the ‘Sign Up Now’ button in the middle of
the kind of a banner, behind that “Sign
Up Now” button, you will basically say, “I’m not going to choose basic or advanced and I’m
going to send one or the other as that input
claim to the Sign up user journey,” okay? That’s Sign up user
journey then has a precondition in it to say, if it’s basic to the
self-assertive technical profile, if it’s advanced to a different self-assertive
technical profile to collect those claims from the end users who
sign themselves up. Does that makes sense? That’s another example
of parsing claims into a B2C user journey is
to control that user journey. Like I said, at this point, we’ve validated
the sign redemption URL with pride in an authentication challenge to redirect to B2C. We have creative a couple of properties or claims
that we want to parse through
this B2C user journey. Let me show you how you parse those claims because this
is a really good tip. Use it all the time
in these samples. In a backup to the application
is the same project, the startup class,
which is where I configure all the
AuthenticationMiddleware, [MUSIC] if I scroll
down a little bit, I have on start up, this application
configures a number of services including
AuthenticationMiddleware. I’ll basically just optimize these one by one
so they’re easy to follow when you’re reading
this for the first time. Now, the one I want to
show you is this one here. This is the policy name that I referred to you from
that controller action, the invitation redemption
controller action. This method called configures the AuthenticationMiddleware
for this particular policy. I’ll show you the internals
of this method in a moment. This is also parsing, is a kind of static claim. Every time that this policy is executed from
this web application, this claim called ‘brand’ will also be parsed as input
to the user journey. Again, because of that, the user journey can
have preconditions in it based on
this “brand” claim and maybe you’ve got
that way for games and that way for music for example. On top of that, we’ve
got some dynamic claims the users entered
for themselves. They verify the e-mail address
and also acclaim the application wants to sit for the
PlayerProfileRegistrationMode, the basic in
this particular case, together we want to
send non-string claims, ‘brand’
PlayerProfileRegistrationMode and verify the e-mail address is input to the B2C user journey and that journey will control
the flow from there, okay? So for now, scroll down and, for this method for you, what it show you how you create those parsers claims input. It’s good for the right place.
Like I stand here. This is where I configure my OpenID Connect
AuthenticationMiddleware or the options rather. In fact, in this
particular example, I create an
AuthenticationMiddleware for each policy I
want to execute so that each of
these options can be tailored to that
particular policy and configured with that middleware. What I want to demonstrate here is how I parse
these claims, right? When this is being used to configure the
AuthenticationMiddleware for the invitation policy that
we’re going to execute, then, just before
the AuthenticationMiddleware redirects to B2C to
execute the user journey, invitation journey in
this particular case, it’s going to build up a set of properties or claims to
parse that user journey. They are actually
quite a few in here, you can set the UILocale
for the user journey, the main hint
maybe it’s going to redirect users to
way an ID provider, they’ve chosen for
themselves and the web app. If you scroll
a bit further down, we’ll see references to PlayerProfileRegistrationMode
and verify the e-mail. I don’t know if
it’s contacting you and Scott. But they’re
off to something. What’s happening here is those the authentication
properties are created in the
controller action, I can then reference here. In and if condition on
line three actually, it’s a little hard to see, but check whether there is an authentication
property called, PlayerProfileRegistrationMode
and if so I’ll create a new claim object containing its claim type and
its claim value, basic or advanced for example. Similarly, if it’s part of
the authentication challenge, there’s an authentication
property called VerifiedEmail, create a new claim object
containing the claim type and the value that we’ve receive from the end user of
our the invitation link. This page here. I had logged upon, Okay? I’m just been adding that to
primer’s claim objects and then adding that to
a list of claims that I want and then basically supply in a signed JWT
that I can then parse through the user journey which can then receive
that verify that signed JWT and use those claims in that signed Jot to
control the user journey. Okay? Is it making sense so far? Who? I got a thumbs up
this time so even better. So, I show you how to
quote that signed Jot. It further down here, just go and find it. There’s this method call here. All the claims I want to parse are in this list
of claims here. I call this method to create
a signed or a self-issued Jot and I’m going to sign it using
the application secret that I’ve created for this game’s application
which will be different, the secret is being created
for the music application and other applications that
are used by WingTips Toys. Okay. A few primers in here that have to
be provided in order to create and then sign the self-issued Jot but
that’s the essence of it. Right? One of these containing some claims and sign up
with the application secret. It’s now into B2C as well. Does that makes sense? Yes? That internally creates self-issued token is just using a JWT security token
handler class to create that security token and then sign up with
that secret. Yes.Yes. Yes. Again, in the
games applications, there’s also in
the music application, our project in that startup
class you find all this. The actual code
for that message is further down here somewhere. I won’t go through
infinite detail but just give you the guide. We’re just here, uses that
to SecurityTokenHandler sign. These are the
SigningCredential or the SigningCredential
that’s used. I am sorry actually
just further down, if you are used to using
JwtSecurityTokenHandler, this will be familiar
to you, okay? It creates that the Jot having been signed and
writes as a token string. We can then parse
to the user journey. That Token string, let’s
scroll all the way back up. How do you parse
that, you might ask. It’s parsed using these two
query string parameters here. So in the redirected B2C, we’re not only add the pre query string parameter bit further up in the code but we add these additional prep
query string parameters. Client assertion type,
which we set to a well-known string which basically says the client
wants to assert something to you as the other name provider
and it’s a JWT. There’s also the second
parameter that we pass as a query
string parameter. Client assertion, which
contains the tokens, the string representation of the signed JOT
we’ve just created, BY dot, dot, dot
whatever that might be. Does that make sense? Cool. That’s what
you have to do on the application side. Now what? Now, the question
is what we have to do on the policy side. So let me back up a couple of folders and we’re going to
go to the policies folder. I was going to read and we just for the application policy for invitation,
up here somewhere. We’ve got invitation. So this is the application
relying party policy for this invitation user journey
that we want to execute. So hopefully much of
this is familiar to you. And we keep retaining that custom policy sessions
last couple of days. In terms of how, to define the claims that we want to receive as
input to this policy, we use a couple of elements that you might
not have seen yet. One of them is InputTokenFormat. So effectively this
is saying we can accept an input token
of format JWT. Then we’re going to know how to verify
the signature of that JWT. So we use these
cryptographic keys element and reference
a client’s secret that I’ve uploaded via
PowerShell or could run these new blade
setting to do this. I’ve effectively added
another cryptographic key that is the secret key
for my games application. So essentially what
this means is it can receive input claims using a JWT and will verify the signature of that JWT
using this client’s secret. Then if that has been verified, these are the input claims I then want to parse
into my user journey. And I’ve created each of those as as an
extension attribute. And these represent the three authentication policy claims
I showed you early. Brand, PlayerProfileRegistrationMode,
VerifiedEmail. So having define those input
claims application policy. I can then open the base policy containing
the user journey itself. The invitation user
journey of 4,714 lines of it I think
it is, 15 lines. And we’re going to
find invitation. And just show you
the basic steps in that user journey. Here’s
the user journey here. Invitation. The first step that
you saw having redeem the invitation link
was I got to choose which account I want
to sign myself up with either a social
one or a local one. So this is boilerplate
claims provider selection. Because in my demos, I showed I want to sign up with a WingTip account
or a local account. That is then handled by
this technical profile, right? And this technical profile is going to present
a registration page, the end user like I showed
you bit earlier with a verified email address
rather than an unverified one which
as you might have seen in a little
built-in policy. You got to enter email address, click at verified button, receive the verification code,
copy and paste it, click the verified, send
code and then verify the code and then we know that you own that
particular e-mail account. Already done that. What’s
in the invitation link. So let me navigate to this technical profile,
here it is here. And this is a self-asserted
technical profile. I might mention the different protocol and handlers earlier. And it uses as an input claim, the VerifiedEmail
which I’ve parsed in as an input claim to
the user journey for my games application. And then the rest of this is your output claims as part of that registration
that first sign-up step. So it includes
the verified email, the password the user
wants to sign up with and the display
name for example. Also the bottom of that page was a terms and conditions checkbox. I’ve set that to required
which means I have to check the box in
order to continue. That’s a way of
collecting consent or agreeing to terms
of use and when the users sign themselves up for the first time. That’s
beside the point. Does that make sense so far.? So the games application
send an invitation link. It’s been signed so
I can be redeemed and verified by
the games application. The invitation link contained an e-mail client to which the invitation
message was sent. That claim in
effect has then been parsed in a signed Jot to
an application policy that executes the user journey and then incoming client
extension_VerifiedEmail can then be used in that user journey to present the end user will control the flow
potentially as well. There’s a lot happening
there, all right? But it’s a good reference if you have a scenario
that is similar to this. The one thing I just
want to point out is is an extra step is this one
here or extra consideration. So if you attend
the last session with Omer, I showed you how you write and you use it to
the Azure Active Directory that backs your B2C tenant. When you write a new user, you want to write
the e-mail address into the signing names. So that user object that has a signing names
probably has the e-mail as a type of e-mail address and the value of what
the users entered. Now, the client that is used to write
that signing name value of type e-mail address is
the e-mail claim not the VerifiedEmail
extension claim that I’ve created for myself. I use this as an input claim, and in fact as an output claim
because I’ve created it, I’ve defined it as
a read-only claim would only ever be presented to the end user in
a read-only text box. I don’t want them to change it because
I’ve already verified it. But in order to write this user
to the directory which is formed by this validation
technical profile down here, I need to effectively, as an input claim
transformation, create the e-mail claim
from the extension claim, the VerifiedEmail
claim that I’ve parsed into the journey itself. It’s a little step that
just happens before the user actually clicks
the sign-up button or is presented with
the sign-up page. In fact to create
that e-mail claim from the one it’s already been verified and parsed into this user journey. So when we write
that new user to the Active Directory store, I can use the same
technical policy I’ve profiled for that. However, I create
the end user either with an unverified email address or in this particular case with a verified one. Yes?>>[inaudible].>>Yes, thank you for asking. I go and find this
up to the very top. Here it is. Here’s the claim
type that I have created. ClaimType Id
extension_VerifiedEmail. Then at the very bottom
there, user input type, Read-Only. Can you see that?
You are looking over someone’s shoulders so
we’ll just go up for you. Line 440, user input
type read-only. So that controls
the presentation of that particular claim in a self-assertive
technical profile. Now the other reason I separated this verified e-mail claim from the e-mail claim is that even if
you present it as a read-only field to end user, it can go and fiddle
with the value for their browser tools. So that’s why I wanted
to create the e-mail from the verified e-mail before it’s presented to the end user. Even if I tamper with it, it won’t affect
the e-mail address that’s actually written to the
Active Directory store itself, the one that I want
them to sign up with. So, that separation
was quite important. Any other questions on that? I’ll wait seven seconds
just to make sure. Now Parack mentioned
another scenario where WingTips Toys have
a lot of idle customers. They’ve registered
with WingTips Toys because maybe they’ve walked
into their store to buy something off the shelf
and they’ve filled in the warranty card or whatever
that process might be, WingTips Toys knows about
them as an existing customer. But those customers
haven’t gone on line to games or music to sign themselves up with
a WingTip account and engaged through that. I think can sign into this. Just let me find
the right browser. Let’s see if I can
sign into this. WingTips Toys. This is the administration site that we have created
for WingTips Toys. I talk to it like it’s
actually a real customer, but it’s not, of course. This is for use by
WingTip Toy staff. And actually in the navigation
bar to the left there, there’s a number of
auditing tools and reporting tools that were using
Azure Active Directory B2C APIs. We’re using those
to pull information about authentication
count summaries, for example, users journey summaries, just basic reporting. As part of the
GitHub repository, there’s also a reports folder
at the root level, that contains
a PowerShell script that downloads the raw data, and a Power BI template that allows you to visualize
that in Power BI desktop, for example, so that we can take this data and
present it in graphs, and so on and so forth. So you might want to
check that as well. The tab I want to show
you is the users one. And the reason I want
to show you this is, at the top of this
there’s a legend bar that we’ve added here that describe all the actions
that you can perform against the users
that are listed below. One of those actions
is Activate. This scenario talks
to the earlier example of where a customer exists in a CRM system but they
haven’t registered on line, so we want to effectively, as part of a marketing campaign,
activate their account. That means sending
in an activation or invitation install
linked to them, because we know
their e-mail address, and if they follow that
they’ll sign up for our similar journey
which I showed you via the invitation link. To actually do this, if I scroll down
and find an account, actually, I can’t
use the same account. But if you want to
try this for yourself, someone in this room must
own some of these accounts because they look
like familiar names. What you have to find is, well first of all, we
can create a new user. I can create a new user and I’ll send it to
my Hotmail address, which I definitely
won’t sign into because that’s my spam account. This is also another scenario where if there’s
profile information about the customer that
you want to migrate to B2C, player tag being an example
one of those, then again, if you know about
the user profile from their customer profile
in the CRM system, you can also migrate that to B2C the same time you
migrate their account. Let’s see if I can create this. Yeah, this is the problem. Let me try one more time, sorry. I think we’ve got to choose
a strong password in here. Sorry about that. What
I want to show you is, let me see if I can find one. I’ll just get back
to the user list. If I scroll down. Actually most of these are
in an activation state. Here’s one here. In order to activate an account, effectively we
want to go through a migration step and
then activate them. So that’s why for some of
these accounts are listed here, such as those that haven’t been migrated like
the one in the middle, I have to migrate them
first so I effectively create a local account for them, with a random password
in this case. And then I can send
them an activation link. So you wouldn’t want to do
this manually, of course, if you have hundreds of
thousands of customers that you want to activate
and migrate, but you could obviously
easily automate this. You read all your
customer records, migrate or create
a local account for them in the B2C directory
by the graph API, particularly migrate them
online and then from that, send them an activation link. The logic behind the Activate
button is similar to what I showed you behind the invitation file that
I showed you earlier, it’s just that you
know the user is not entering
their e-mail address, you’re supplying it in order to send that
activation e-mail to them, which invites them
to sign up and start engaging with
games and music online. That’s another scenario that follows a very similar
pattern that I showed you for invitations.
Any questions on that? If you attended that
the lunchtime demo, what did you see in that demo that you’d like
me to explain to you maybe just as a quick deep dive
into any of that? There must’ve been
something, surely. Please.>>[inaudible].>>Yep. Authy. How many
people use Authy? Every time I meant,
I was thinking, too. Every time I mention,
the people go, who? One? So as I mentioned, Authy is at least
as far as I know, what they claim, let’s go to their website
and see what they say. They claim to be the world’s best two-factor
authentication app, best rated. So the scenario here, is that, there you go,
just right to that, the scenario here is
that as an Authy user, you can download one of
their applications and they have an Android application,
an iOS application. And as I mentioned earlier, Chrome extension, which is what I installed on
my local computer. And, so I downloaded
the application when I opened it for the first time it asked me to sign
myself up to Authy. I got to sign myself up
with an e-mail address and a phone number that they
then verified, okay? And as a result, that Authy app, your authentication app has some tied integrations
into Slack, in a Twitter and a number of
other kind of social sites. That is automatically enabled for you if you then sign up to this site to want to sign in using your Authy
credentials as well. I guess the question is,
how would you integrate this into a B2C scenario? So where do I start with this?
Did everyone see the demo? I got the gist the demo? Try a local account
or particularly using a phone number that I could either
call or text, okay? So I could verify that. And in order to add Authy
to that local account, as long as the
e-mail address that I signed up with from
my local account and the phone number that I provided are the ones that
match my Authy account, then all I have to do
from the B2C journey is calling Authy API to get the Authy identifier
for that particular user. Now to provide that Authy, get that Authy identifier, you have to call
an Authy API and provide both the e-mail address that I
know about the end user and the phone number that I
know about the end user and Authy find
a matching account on that. It returns me
all the B2C journey of the Authy ID for that okay? And then write that
into a cost into an extension attribute
that case against the user object for
that particular user, so I can use it later
to challenge them. Let me just think where
you start with this code. So, let’s start with
some Azure functions code. Go back into the source folder. And you might have seen earlier, it’s not on any kind of kind of projects for the different
web applications. And we’ll quickly kind of
summarize these later for you. But there’s also
an Azure function or set of functions that I’ve created
to implement a number of the, to support some of the validation
technical profiles that Ronnie mentioned
earlier might be to check a player tag or a loyalty number
or whatever else. I’ve got a couple
of functions in here to actually, just write
over the top of it, to create an Authy user,
so to speak, or get their Authy ID based on some claims and
know about the end user. So let me open
that function up for you. Sorry. Not the value but
the code itself. And so as I mentioned, when this function is
called from the B2C journey, I’ll show you how
it’s done in a moment. Well, basically
two improve parameters are required as part of
the HTTP request. On line 17, there’s
an e-mail, claim, parameter and a phone
number claim all parameter. They’re being
passed from the B2C user journey to Azure function. Oh, there’s another trick. I’ll take it
through in a moment. Essentially, what I want
to show you is this. As long as I receive an e-mail, claim, and a phone number claim from the B2C user journey, I’m basically going
to call an Authy API to say create a new user, for this e-mail, and this cell phone
with this country code. And if that’s successful, I basically receive
a response containing from the Authy API containing a user object with
their Authy identifier. Okay. So send Authy, post, e-mail and
phone number to Authy. And if there’s
a matching user account in Authy for that e-mail address
and that phone number, then it returns the Authy ID
for me in this user object. I set that to a parameter
ethically` return values that are returned
from this function with a 200 OK with this response parameter,
this output parameter. This then met with
an output claim, basically B2C user journey
often then write that output claim and persist that into
my Azure Active Directory against the user object. Okay? For the user who wants to add all three
to their account. Kind of makes sense so far? So when I was planning for this, I was kind of looking at how
I could directly integrate a B2C user journey for a technical profile
with the Authy API. I personally found
a little bit easy to use Azure function as the bridge or the proxy between
the technical profile and the Authy API. Okay? Just because
you [inaudible] often leave for me more
than anything else, okay? So this is pretty basic. The only little trick
here is that the Authy API actually requires a phone
number to pass us to request a form parameters, the country code
and the cellphone. So I’m using this rejects
here to basically break down, break the incoming claim, called phone number from
the B2C user journey down into the country code
in the cellphone so I can pass those two parameters
to the Authy API. That’s the only trick
that’s involved there. I’ll return to
the B2C user journey in a moment and show you
what’s happening there. Now, later in the demo, that create Authy function. Didn’t have
any user interaction, it’s just a step in
my user journey that said, okay, the user wants to create or edit an Authy account to
their local account so I’m going to ask Authy
for their account ID. So I can light a persisted
into the directory, okay? The actual interaction that
you saw during my demo was, I’m going to call
out from the B2C user journey to the Authy API, to send a push notification to my Authy app on my computer or on my phone
for me to approve. You remember that? Yup,
we got the approval reject button in the Authy app. That’s all handled by, this is your function, CreateAndWaitForAuthyApprovalRequestWebHook. I can’t think of a shorter name. So, postcode and here. I’ll show you what’s
happening here. When this function is run, as an import
parameter is passed, the Authy ID of the user
who we want to verify. And the e-mail address for them. The reason I included the e-mail addresses is not
actually required to send the push notification but
part of the payload of the push notification
is our e-mail address second week
in the Authy app. You can show that e-mail address
they’re signing in with, with the WingTip logo
and the WingTip name. So they user, kind
of, can double check what they’re actually
signing into, okay? That’s all part of the kind of the push
notification payload. So the B2C user journey
is passed the Authy ID and the e-mail address
of the end user calls a different price to
a different API called One Touch which is really just a part product name for that one touch
signing experience. And when it passes in a message, it’s going to be showed
in that one touch UI sign in with
your WingTip account. With this username,
with this logo. Yes you want to remember that in the Authy app it actually
showed the WingTip games logo. And I’m going to allow, the user going to
have to respond to this one touch request, this sign-in request
in the next 30 seconds. So it can expire after
a certain period of time. So I’ll post that
to the Authy API. And there are two methods
in which the Authy API can respond to that request once the users click
approve or reject. As part of the post request, you can also provide
a callback URL. So after posting it, to the operation is complete. The user will interact with
the Authy application who approve or reject
the sign-in request. And as a result,
the Authy API would call you something else
back that you host. So you can handle the result either an OK or not
OK. That doesn’t really work with the B2C user journey because we actually
had a step we were waiting for the user to respond
to the push notification. We’re going to wait up
to 30 seconds basically. So the non-callback method is effectively this
is your function goes into a long poll
kinda loop. At least for, at
most for 30 seconds. So after posting
the one touch request to Authy, it then every three seconds
just ask Authy has that one touch request been
responded to by the end user. While we’re waiting for it, obviously the result is not yet. Once the user has responded
to it we get a result back to either approved it
or they rejected it. So that’s what the bottom half
of this function does. Scroll down to that.
Scroll even further down. So what this is doing? This is the kind of the
getRequest or the powerRequest to the one touch API. For the request I
posted earlier to you, has the user responded to that? If they have and the result
of that request was approved then effectively further down or return 200 OK for
this is your function, we can proceed with
the user journey. If the users denied it
and now I may kind of made mention of this but we didn’t go to
the detail of it. If you want to
return a custom error message to the users journey to display to the end user
then what you have to return is rather
a 200 and certainly not a 500 return for a
nonresponse, a conflict response. With this little
payload here that contains your user message you want to show
to the end user. That’s the way an external API, Azure function in
this particular case can return a custom error message to user journey and
showed the end user. If your Azure function returns 400 or 500 or
some other bad code, the error message you see the top is the user would
not be able to understand it. So this is how you handle
errors that you want to use a handle for
themselves in some way. So this is essentially
what it does there. Okay we will wrap up, okay. Let me quickly show you very quickly the policy
that handles all that. Let’s go into the base policy. Here is my extension attribute
or user attribute that I used to track the Authy ID
for user object, I will define that. So here is the technical
profile for user to log in with their AuthyCode. In the second part of this demo, I showed you earlier, there is one part to the register the Authy account
with WingTip account. This technical profile allows to log in using their Authy app without having to sign
in using a password. So you might remember, I
enter my e-mail address, look my Authy identifier up, send a push notification to it, that’s to handle
body’s technical profile, the response to that. Let me just quickly
show you the claims provided represents Azure functions. If you are looking through these policies then there
is a claims provided code Azure functions and
each of those functions I showed you in
the source code there’s a technical profile for each. Let’s scroll down here to. The two Authy hooks
that are created, there’s a technical profile for the create Authy user function, this is the URL with
its authentication code and I parse as you
might remember, parse the e-mail
claiming is email and the phone number claiming
is phone number and are defined whether
those using input claims. Now the results of that
create Authy user function was an Authy ID so we
specify as an output claim. It’s returned in the response pile out is this property are then method to this
extension claim that are defined at the top
of this base policy. So when you looking
through this code, the code has number of
functions to send e-mails, to generate secrets for authentication apps
such as Google and Microsoft to verify
one time passcodes to verify Authy
requests. A lot of that has
been encapsulated in Azure functions and
then represented as technical profiles
in the base policy. If you are looking way to
find to get started with us. I can take some
further questions later if you want to.>>I just want to wrap
up, so Chris just walking through our demo say it’s really an enduring project
as we were saying. Again, it tries to give you a complete picture
of how B2C can fit in to a common corporate scenario. The site offers a lot of
things here is some of them. Unified sign in showing
you how to do some of this but again it’s
building every day. We are working with Chris
closely, he is excellent. Any new feature that we
can show and demonstrate, any new scenario we can unlock, we are doing it and we are hoping that you guys
can leverage that work as well
when you are doing your concepts and
implementations. There are a lot of
project artifacts in there. There is Azure functions. There is Web App code. All the basic policies and custom policies in
there, check it out. There is a lot you can
do. Here’s just a list. And you can look
at this deck again. Hopefully you get
a understanding. We have a lot of
slides in the appendix so if you kind of
get an overview like what just happened or how do we go about
doing something, the slides should help once we send up
the deck to you guys. Again, here are
the demo resources. Take a picture,
again you can look it up when we send out the deck or when you look at the video. And just to highlight something, when you guys have questions please post on
the Stack Overflow. I know a lot of
you are active on Yammer but if it’s
something that can help the rest of the community
as well especially something that’s public review or GA that would be fantastic
because then everybody else who can also
leverage from it. I will give it a few seconds, so all the cameras go down. Again, in the demo site here
is and the code is aadb2cdemocode. Sorry for taking so long and thank you
so much for coming. I hope you guys got a lot
out of this conference. We are here for you. We will be here
after this session. If you have any questions
regarding the demo site, you can always reach
out to us with. I’m sure we can put you in
touch with Chris if need be, since he really
helped us out here. Please evaluate the session. It would be great especially once we look forward to
doing it again next year. We will take that feedback into account and improve on it. Thank you so much for coming.>>Thank you.

Daniel Ostrander

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *