Contents
1.Overview
2.Scope
3.Objectives
4.Process flow for Sign in and
Sign up
5.Description
6.Identity
7.Policy
8.Claim return values
9.Token Id
10.For sign up parameters
11.For sign in parameters
12.Customization
13.Screen layout
14.Summary of the page
15.Summary of the business rule for Sign up
16.Reference
Overview
Microsoft Azure ->
Microsoft Azure is
a
cloud computing platform and
infrastructure created by
Microsoft for building, deploying, and managing
applications and services through a global network of Microsoft-managed
data centers.
Azure Ad ->
Azure Active
Directory is a
comprehensive identity and access management cloud solution that provides a
robust set of capabilities to manage users and groups. It helps secure access
to on-premises and cloud applications, including Microsoft online services like
Office 365 and many non-Microsoft SaaS applications.
Azure Active
Directory B2C ->
Azure Active Directory B2C is a comprehensive cloud
identity management solution for your consumer-facing web and mobile
applications. It is a highly available global service that scales to hundreds
of millions of consumer identities. Built on an enterprise-grade secure
platform, Azure Active Directory B2C keeps your applications, your business,
and your consumers protected.
In the past, application developers who wanted to sign up
and sign in consumers into their applications would have written their own
code. And they would have used on-premises databases or systems to store
usernames and passwords. Azure Active Directory B2C offers developers a better
way to integrate consumer identity management into their applications with the
help of a secure, standards-based platform and a rich set of extensible
policies.
To build an application that accepts consumer sign up and
sign in, you'll first need to register the application with an Azure Active
Directory B2C tenant. Get your own tenant by using the steps outlined in Create an Azure AD B2C tenant.
Process flow for Sign in and Sign up:
(This
page contains the process flow, return parameters of sign in and sign up
process.)
Description:
·
Configure Facebook, Google+, Microsoft account,
Amazon, and LinkedIn accounts with Azure Portal for use in your consumer facing
applications.
·
Every app that uses Azure AD B2C must be
registered in your B2C directory via the Azure Portal. The app registration
process collects and assigns a few values to our app:
Ø
An Application ID that uniquely identifies our
app.
Ø
A Redirect URI that can be used to direct
responses back to our app.
·
After the app is registered, it communicates
with Azure AD by sending requests to the Azure AD v2.0 endpoint.
·
The app uses the security token to access
protected information or a protected resource.
·
The resource server validates the security token
to verify that access can be granted.
·
The app periodically refreshes the security
token.
·
These steps can differ slightly based on the
type of app you're building. Open source libraries can address the details for
you.
·
This
includes sign-in, sign-up, and profile management. In the Azure AD B2C
implementation of Open ID Connect, your web app initiates these user
experiences by issuing authentication requests to Azure AD. The result of the request is a token id. This security
token represents the user's identity. It also provides information about the
user in the form of claims
// Partial raw id_token
eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6ImtyaU1QZG1Cd...
// Partial content of a decoded
id_token
{
"name":
"John Smith",
"email":
"john.smith@gmail.com",
"oid":
"d9674823-dffc-4e3f-a6eb-62fe4bd48a58"
...
}
·
Validation by using a public signing key that is received from Azure
AD is sufficient to verify the identity of the user. This also sets a session
cookie that can be used to identify the user on subsequent page requests.
·
In addition to facilitating simple sign-in, a
web server app might also need to access a back-end web service.
·
In this case, the web app can perform a slightly
different Open ID Connect flow and acquire tokens by using authorization codes
and refresh tokens. This scenario is depicted in the following Web APIs section.
OAuth
2.0 ->
The OAuth
2.0 authorization code grant can be used in apps that are installed on a device
to gain access to protected resources, such as web APIs. By using the Azure
Active Directory (Azure AD) B2C implementation of OAuth 2.0, you can add
sign-up, sign-in, and other identity management tasks to your mobile and
desktop apps. This guide is language independent. It describes how to send and
receive HTTP messages without using any of our open-source libraries.
Identity->
AAD B2C can be attached to the following Identity
providers:
§
Amazon
§
Google
§
LinkedIn
§
Microsoft
§
Facebook
policy :
https://login.microsoftonline.com/contosob2c.onmicrosoft.com/oauth2/v2.0/authorize?
client_id=2d4d11a2-f814-46a7-890a-274a72a7309e // Your registered Application ID
&redirect_uri=https%3A%2F%2Flocalhost%3A44321%2F // Your registered Reply URL, url encoded
&response_mode=form_post // 'query', 'form_post' or 'fragment'
&response_type=id_token
&scope=openid
&nonce=dummy
&state=12345 // Any value provided by your application
&p=b2c_1_siup // Your sign-up policy
https://login.microsoftonline.com/contosob2c.onmicrosoft.com/oauth2/v2.0/authorize?
client_id=2d4d11a2-f814-46a7-890a-274a72a7309e // Your registered Application ID
&redirect_uri=https%3A%2F%2Flocalhost%3A44321%2F // Your registered Reply URL, url encoded
&response_mode=form_post // 'query', 'form_post' or 'fragment'
&response_type=id_token
&scope=openid
&nonce=dummy
&state=12345 // Any value provided by your application
&p=b2c_1_siin // Your sign-in policy
Create a sign-up policy
To enable sign-up on your application, you will need to create a
sign-up policy. This policy describes the experiences that consumers will go
through during sign-up and the contents of tokens that the application will
receive on successful sign-ups.
2.
Click Sign-up policies.
3.
Click +Add at the top of the blade.
4.
The Name determines the sign-up policy name used by your application. For
example, enter "SiUp".
5.
Click Identity providers and select "Email
signup". Optionally, you can also select social identity providers, if
already configured. Click OK.
6.
Click Sign-up attributes. Here you choose
attributes that you want to collect from the consumer during sign-up. For
example, select "Country/Region", "Display Name" and
"Postal Code". Click OK.
7.
Click Application claims. Here you choose
claims that you want returned in the tokens sent back to your application after
a successful sign-up experience. For example, select "Display Name",
"Identity Provider", "Postal Code", "User is new"
and "User's Object ID".
8.
Click Create. Note that the policy just created appears as "B2C_1_SiUp" (the B2C_1_ fragment is
automatically added) in the Sign-up policies blade.
9.
Open the policy by clicking "B2C_1_SiUp".
10.
Select "Contoso B2C app" in the Applications drop-down and https://localhost:44321/ in the Reply
URL / Redirect URI drop-down.
11.
Click Run now. A new browser tab opens, and you can run through
the consumer experience of signing up for your application.
Create a sign-in policy
To enable sign-in on your application, you will need to create a
sign-in policy. This policy describes the experiences that consumers will go
through during sign-in and the contents of tokens that the application will
receive on successful sign-ins.
2. Click Sign-in policies.
3. Click +Add at the top of the blade.
4. The Name determines the sign-in policy name used by
your application. For example, enter "SiIn".
5. Click Identity providers and select "Local Account SignIn".
Optionally, you can also select social identity providers, if already
configured. Click OK.
6. Click Application claims. Here you choose claims that you want
returned in the tokens sent back to your application after a successful sign-in
experience. For example, select "Display Name", "Identity
Provider", "Postal Code" and "User's Object ID". Click OK.
7. Click Create. Note that the policy just created appears as
"B2C_1_SiIn" (the B2C_1_ fragment is automatically added) in the Sign-in
policies blade.
8. Open the policy by clicking "B2C_1_SiIn".
9. Select "Contoso B2C app" in the Applications drop-down and https://localhost:44321/ in the Reply URL / Redirect URI drop-down.
10.
Click Run now. A new browser tab opens, and you can run through the consumer
experience of signing into your application.
Note
It takes up to a minute for policy creation and updates to take
effect.
Create a sign-up or sign-in policy
This policy handles both consumer sign-up & sign-in
experiences with a single configuration. Consumers are led down the right path
(sign-up or sign-in) depending on the context. It also describes the contents
of tokens that the application will receive upon successful sign-ups or sign-ins.
Click Sign-up or sign-in policies.
1.
Click +Add at the top of the blade.
2.
The Name determines the sign-up policy name
used by your application. For example, enter "SiUpIn".
3.
Click Identity providers and select "Email signup".
Optionally, you can also select social identity providers, if already
configured. Click OK.
4.
Click Sign-up attributes.
Here you choose attributes that you want to collect from the consumer during
sign-up. For example, select "Country/Region", "Display
Name" and "Postal Code". Click OK.
5.
Click Application claims.
Here you choose claims that you want returned in the tokens sent back to your
application after a successful sign-up or sign-in experience. For example,
select "Display Name", "Identity Provider", "Postal
Code", "User is new" and "User's Object ID".
6.
Click Create. Note that the
policy just created appears as "B2C_1_SiUpIn"
(the B2C_1_ fragment is automatically added) in
the Sign-up or sign-in policies blade.
7.
Open the policy by clicking "B2C_1_SiUpIn".
8.
Select "Contoso B2C app" in the Applications drop-down and https://localhost:44321/ in the Reply URL / Redirect URI drop-down.
9. Click Run
now. A new browser tab opens, and you can run through the
sign-up or sign-in consumer experience as configured.
Note
It takes up to a minute for
policy creation and updates to take effect.
Create a profile editing policy
To enable profile editing on your application, you will need to
create a profile editing policy. This policy describes the experiences that
consumers will go through during profile editing and the contents of tokens
that the application will receive on successful completion.
2.
Click Profile
editing policies.
3.
Click +Add at the top of the blade.
4.
The Name determines the profile editing policy name used by your
application. For example, enter "SiPe".
5.
Click Identity
providers and select "Email
address". Optionally, you can also select social identity providers, if
already configured. Click OK.
6.
Click Profile
attributes. Here you choose attributes that the
consumer can view and edit. For example, select "Country/Region",
"Display Name", and "Postal Code". Click OK.
7.
Click Application
claims. Here you choose claims that you want
returned in the tokens sent back to your application after a successful profile
editing experience. For example, select "Display Name" and
"Postal Code".
8.
Click Create. Note that the policy just created appears as "B2C_1_SiPe" (the B2C_1_ fragment is automatically added) in the Profile
editing policies blade.
9.
Open the policy by
clicking "B2C_1_SiPe".
10.
Select "Contoso
B2C app" in the Applications drop-down and https://localhost:44321/ in the Reply URL / Redirect URI drop-down.
11. Click Run now.
A new browser tab opens, and you can run through the profile editing consumer
experience in your application.
Note
It takes up to a minute for
policy creation and updates to take effect.
Create a password reset policy
To enable fine-grained password reset on your application, you
will need to create a password reset policy. Note that the tenant-wide password
reset option specified here is still applicable for sign-in policies. This policy describes
the experiences that the consumers will go through during password reset and
the contents of tokens that the application will receive on successful
completion.
2.
Click Password reset policies.
3.
Click +Add at the top of the blade.
4.
The Name determines the password reset policy
name used by your application. For example, enter "SSPR".
5.
Click Identity providers and select "Reset password using
email address". Click OK.
6.
Click Application claims.
Here you choose claims that you want returned in the tokens sent back to your
application after a successful password reset experience. For example, select
"User's Object ID".
7.
Click Create. Note that the
policy just created appears as "B2C_1_SSPR"
(the B2C_1_ fragment is automatically added) in
the Password reset policies blade.
8.
Open the policy by clicking "B2C_1_SSPR".
9.
Select "Contoso B2C app" in the Applications drop-down and https://localhost:44321/ in the Reply URL / Redirect URI drop-down.
10. Click Run
now. A new browser tab opens, and you can run through the
password reset consumer experience in your application.
Claim Return values:
Return_Type
|
Return_Value
|
Description
|
exp
|
1478936106
|
Defines the time
interval within which a token is valid. The service that validates the token
should verify that the current date is within the token lifetime, else it
should reject the token. The service might allow for up to five minutes beyond
the token lifetime range to account for any differences in clock time
("time skew") between Azure AD and the service.
|
nbf
|
1478932506
|
Same as above
|
ver
|
1
|
This is the version of
the ID token, as defined by Azure AD(Active Directory).
|
iss
|
https://login.microsoftonline.com/e4776719-8934-42cd-ae9e-87bc24540533/v2.0/
|
This claim identifiy
the secuirity token service(STS) that constructs and returns the token. It
also identifies which user was authenticated.
|
aud
|
1152da34-6983-4706-940a-68458aa65af1
|
Azure AD(Active
Directory) B2C application registration ID
|
nonce
|
636145290241380781. ZjQzZTEyYTQtZDk2Ny00M2I3LTk3Yjgt
OWY1OGJhOWI4NTZlZjk4ODY wZTctMWQwNS00YTFmL ThjM2YtMmY3OThmMTdjZGJj
|
A nonce is a strangly
used to migrate token reply attacks. This allows your app to verify the value
against the value it specified on the request, which associates the apps
session with a given ID token. Your app should perfirm this validation during
the ID token validation process.
|
iat
|
1478932506
|
This claim is the time
at which the token was issued, represented in epcoh time.
|
Object id
|
|
This id is unique for
each and every user, this id is fixed .
|
Token ID:
Azure
Active Directory (Azure AD) B2C emits several types of security tokens as it
processes each authentication flow.
Token
will be like this--
eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIyZDRkMTFhMi1mODE0LTQ2YTctODkwYS0yNzRhNzJhNzMwOWUiLCJpc3MiOiJodHRwczovL3N0cy53aW5kb3dzLm5ldC83ZmU4MTQ0Ny1kYTU3LTQzODUtYmVjYi02ZGU1N2YyMTQ3N2UvIiwiaWF0IjoxMzg4NDQwODYzLCJuYmYiOjEzODg0NDA4NjMsImV4cCI6MTM4ODQ0NDc2MywidmVyIjoiMS4wIiwidGlkIjoiN2ZlODE0NDctZGE1Ny00Mzg1LWJlY2ItNmRlNTdmMjE0NzdlIiwib2lkIjoiNjgzODlhZTItNjJmYS00YjE4LTkxZmUtNTNkZDEwOWQ3NGY1IiwidXBuIjoiZnJhbmttQGNvbnRvc28uY29tIiwidW5pcXVlX25hbWUiOiJmcmFua21AY29udG9zby5jb20iLCJzdWIiOiJKV3ZZZENXUGhobHBTMVpzZjd5WVV4U2hVd3RVbTV5elBtd18talgzZkhZIiwiZmFtaWx5X25hbWUiOiJNaWxsZXIiLCJnaXZlbl9uYW1lIjoiRnJhbmsifQ.
Summary of the business rule for Sign up:
Sl.
|
Parameter Name
|
Rule in Detail
|
For Sign Up Parameters
|
1.
|
Email Address
|
User will enter the Email
Address.
|
2.
|
New Password
|
User will type new password.
|
3.
|
Confirm Password
|
User will type new password.
|
4.
|
Country/Region
|
User will type country name.
|
5.
|
Display Name
|
User will type Display name
|
6.
|
State/Province
|
User will type State/Province
|
7.
|
Postal Code
|
User will type Postal
|
8.
|
City
|
User will type City name
|
Customization
For
Customization Select the Policy then go to customization option, then paste the
customize url page. Click on save. (Please see the reference no. 10,13)
In this link you can get css file and image file and
script file.
1.You can change the css style in global.css file
<link
href="https://kenmaster.azurewebsites.net/css/global.css"
rel="stylesheet" />
<link
href="https://kenmaster.azurewebsites.net/css/bootstrap.min.css"
rel="stylesheet" />
2.script fil- <script
src="https://login.microsoftonline.com/static/library/require-2.1.17.min.js"></script>
3. set the tenant and policy name also in between
(<script data-container="true"> …..,…. <script>)
4.Set the div id-Api , next.--
data-name="Unified">
As it is a signup or sign in policy inherit from
“data-name="Unified"
Please check the
code below for detail step by step
process----------------------------------------------------
Code:
<!DOCTYPE html>
<!-- Build: 1.0.0.298 -->
<!-- StateVersion: 2.1.0 -->
<!-- PageModel: 1.0.0 -->
<!-- DeploymentMode: Production -->
<!-- CorrelationId:
e8ec673c-13db-42ff-8258-fd70a6b7206b -->
<html>
<head>
<link
rel="icon" href="data:;base64,iVBORw0KGgo=">
<title>Loading...</title>
<script
src="https://login.microsoftonline.com/static/library/require-2.1.17.min.js"></script>
<script>
window.staticHost =
"https://login.microsoftonline.com/static";
window.targetSlice = "001-000"; window.targetDc =
"PNQ";
window.initializationTimeout = 0; window.diagsAlways = false;
window.maxTrace = 0;
</script>
<script>
var
elementUrl = "elements/homerealm/hrealm-1.0.11.min";
</script>
<script
data-container="true">
define('template.CP', [/** no dependencies. **/], { "list": [{
"id": "SignInWithLogonNameExchange",
"description": "Local Account SignIn" }, { "id":
"LinkedInExchange", "description": "KENLinkedinID"
}, { "id": "FacebookExchange", "description":
"KENFacebookID" }, { "id": "GoogleExchange",
"description": "KENGoogleID" }, { "id":
"MicrosoftAccountExchange", "description":
"KENMircosoftID" }] });
define('language.data', [/** no dependencies. **/], {
"already": "", "cancel_message": "The user
has canceled choosing an identity provider", "alert_no":
"No", "alert_message": "Are you sure that you want to
cancel choosing an identity provider?", "alert_title":
"Cancel Selection", "alert_yes": "Yes",
"button_cancel": "Cancel" });
define('settings.data', [/** no dependencies. **/], {
"remoteResource":
"https://kenmaster.azurewebsites.net/TestPage/CustomSignin.html",
"retryLimit": 3, "api":
"ClaimsProviderSelection", "csrf":
"b0JQMUg2dVRzZW13c1k0b2ZYRW9NMlVBalRMMVI1QlpLNVVYTGZvTkpubVp1cmNKNmFZeXM3SjN4a3FDS04vd0RxRExEZWpZZisvUEswaE9VQWJWVEE9PTsyMDE2LTExLTIxVDEwOjMyOjMwLjAyODk0N1o7MjZQS2RpdzcxcVhpY0ZGQ0x4YmJ5UT09O3siT3JjaGVzdHJhdGlvblN0ZXAiOjF9",
"transId":
"eyJUSUQiOiJlOGVjNjczYy0xM2RiLTQyZmYtODI1OC1mZDcwYTZiNzIwNmIifQ",
"pageMode": 0, "config": { "showCancel":
"False", "showCancelAlert": "False" },
"hosts": { "tenant":
"/kencloudb2c.onmicrosoft.com/B2C_1_KenCloudCustomerSignIn",
"policy": "B2C_1_KenCloudCustomerSignIn",
"static": "https://login.microsoftonline.com/static/" },
"locale": { "lang": "en", "country":
"US" } });
</script>
<link
href="https://kenmaster.azurewebsites.net/css/bootstrap.min.css"
rel="stylesheet" />
<link
href="https://kenmaster.azurewebsites.net/css/global.css"
rel="stylesheet" />
</head>
<body>
<div
class="container unified_container">
<div
class="row">
<div
class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<div class="image-center">
<img alt="Wingtip Toys" class="login-logo"
src="https://kenmaster.azurewebsites.net/Images/Singlelogo.png" />
</div>
<h3 class="text-center">Sign in with your existing
account</h3>
<div id="api" data-name="Unified">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Customize page:
Summary
of the page:
·
This page is sign up form with a nominal information about the
user.
·
If a user is giving his/her email id one verification code will
send to his/her mail id, after putting the verification code the user can set a
new password and other nominal details about him/her.
Reference:
