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.

Scope

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.

Objectives

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.

1. Follow these steps to navigate to the B2C features blade on the Azure portal.

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.

1. Follow these steps to navigate to the B2C features blade on the Azure portal.

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.

1. Follow these steps to navigate to the B2C features blade on the Azure portal.

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.

1. Follow these steps to navigate to the B2C features blade on the Azure portal.

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

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>

<html>

<head>

<title>Loading...</title>

window.staticHost = "https://login.microsoftonline.com/static";

window.targetSlice = "001-000"; window.targetDc = "PNQ";

window.initializationTimeout = 0; window.diagsAlways = false; window.maxTrace = 0;

</script>

var elementUrl = "elements/homerealm/hrealm-1.0.11.min";

</script>

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>

</head>

<body>

</div>

<h3 class="text-center">Sign in with your existing account</h3>

</div>

</body>

</html>

Screen Layout

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:

1. https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-devquickstarts-web-dotnet

2. https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference- policies

3. https://azure.microsoft.com/en-in/resources/samples/active-directory-dotnet-webapp-openidconnect-aspnetcore-b2c/

4. https://auth0.com/docs/connections/enterprise/azure-active-directory

5. https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-oauth-code

6. https://docs.microsoft.com/en-us/azure/active-directory/active-directory-authentication-scenarios

7. https://docs.microsoft.com/en-us/azure/app-service-mobile/app-service-mobile-how-to-configure-facebook-authentication

8. https://docs.microsoft.com/en-us/azure/app-service-mobile/app-service-mobile-how-to-configure-google-authentication

9. https://docs.microsoft.com/en-us/azure/app-service-mobile/app-service-mobile-how-to-configure-microsoft-authentication

10. https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-ui-customization (Customization)

11. https://www.identityblog.com/?p=1575