Authentication and authorization setup

Authentication/Authorization set-up guide

What is this document?

This short guide is intended to describe all the steps that were involved in the integration between the time-tracker app, the Google ID provider, and the Azure AD B2C.

What is not this document?

This is not a architecture-related document containing details about how the authentication/authorization flow works.

Who should read this document?

Infrastructure people are the target of this document due to this document describe the required steps to set-up the auth-related infrastructure where the time-tracker app is going to rely on.

Prerequisites

• A Google account.
• An Azure account.

Authentication/Authorization set-up guide

The set-up process mainly involves these steps:

• Azure AD B2C directory creation.
• Create a new google application.
• Configure Google as Identity provider for Azure AD B2C.
• Creating a new app into Azure AD B2C.
• Create Sign up and sign in (Recommended) grant flow in Azure AD B2C.

Azure AD B2C directory creation

1. Sign in to the Azure portal. Sign in with an Azure account that's been assigned at least the Contributor role within the subscription or a resource group within the subscription.
2. Select the directory that contains your subscription, and go to resource group which contains the time-tracker app resources (eys-training-api).
3. On the Resource group view select Add.
4. Search for Azure Active Directory B2C, and then select Create.
5. Select Create a new Azure AD B2C Tenant.
6. Enter an Organization name and Initial domain name. Select the Country or region (it can't be changed later), and then select Create.

Organization name: ioetec

Initial domain name: ioetec

Country or region: United States

The domain name is used as part of your full tenant domain name. For iet, the tenant name is ioetec.onmicrosoft.com

7. Once the tenant creation is complete, select the Create new B2C Tenant or Link to existing Tenant link at the top of the tenant creation page.
8. Select Link an existing Azure AD B2C Tenant to my Azure subscription.
9. Select the Azure AD B2C Tenant that you created, then select your Subscription, and finally the resource group.

You can link multiple Azure AD B2C tenants to a single Azure subscription for billing purposes.

10. Select your B2C tenant directory. To start using your new Azure AD B2C tenant, you need to switch to the directory that contains the tenant.

Select the Directory + subscription filter in the top menu of the Azure portal, then select the directory that contains your Azure AD B2C tenant.

If at first you don't see your new Azure B2C tenant in the list, refresh your browser window, then select the Directory + subscription filter again in the top menu.

• Reference : https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant

Create a new Google application

To use a Google account as an identity provider in Azure Active Directory B2C (Azure AD B2C), you need to create an application in your Google Developers Console. If you don't already have a Google account you can sign up here.

1. Sign in to the Google Developers Console with your Google account credentials.
2. In the upper-left corner of the page, select the project list, and then select New Project.
3. Enter a Project Name, select Create.
4. Make sure you are using the new project by selecting the project drop-down in the top-left of the screen, select your project by name, then select Open.
5. Select OAuth consent screen in the left menu, select External, and then select Create. Enter a Name for your application. Enter b2clogin.com in the Authorized domains section and select Save.
6. Select Credentials in the left menu, and then select Create credentials > Oauth client ID.
7. Under Application type, select Web application.
8. Enter a Name for your application, enter https://organization-name.b2clogin.com in Authorized JavaScript origins, and https://organization-name.b2clogin.com/ioetec.onmicrosoft.com/oauth2/authresp in Authorized redirect URIs.

Replace organization-name with the name provided in step 6 of the previous section. You need to use all lowercase letters when entering your tenant name even if the tenant is defined with uppercase letters in Azure AD B2C.

9. Click Create.
10. Copy the values of Client ID and Client secret. You will need both of them to configure Google as an identity provider in your tenant. Client secret is an important security credential.

• This section was configured by Roland Alden, so is he who has the Client ID and Client secret
• Reference : https://docs.microsoft.com/en-us/azure/active-directory-b2c/identity-provider-google

Configure Google as Identity provider for Azure AD B2C

1. Sign in to the Azure portal.
2. Make sure you're using the directory that contains your Azure AD B2C tenant by selecting the Directory + subscription filter in the top menu and choosing the directory that contains your tenant.

3. Choose All services in the top-left corner of the Azure portal, search for and select Azure AD B2C.

4. Select Identity providers, then select Google.

5. Enter a Name. For example, ioet-google-idp.

6. For the Client ID, enter the Client ID of the Google application that you created earlier.

7. For the Client secret, enter the Client Secret that you recorded. Select Save.

• Reference : https://docs.microsoft.com/en-us/azure/active-directory-b2c/identity-provider-google

Creating a new app into Azure AD B2C

1. Sign in to the Azure portal.

2. Select the Directory + Subscription icon in the portal toolbar, and then select the directory that contains your Azure AD B2C tenant.

3. Choose All services in the top-left corner of the Azure portal, search for and select Azure AD B2C.

4. Select App registrations (Preview), and then select New registration.

5. Enter a Name for the application. For example, time-tracker.

6. Select Accounts in any organizational directory or any identity provider. For authenticating users with Azure AD B2C.

7. Under Redirect URI, select Web, and then enter https://time-tracker-ui.azurewebsites.net/login in the URL text box.

The redirect URI is the endpoint to which the user is sent by the authorization server (Azure AD B2C, in this case) after completing its interaction with the user, and to which an access token or authorization code is sent upon successful authorization. In a production application, it's typically a publicly accessible endpoint where your app is running, like https://myapp.com/auth-response. During app development, you might add the endpoint where your application listens locally, like https://localhost:4200/login. You can add and modify redirect URIs in your registered applications at any time.

The following restrictions apply to redirect URIs:

• The reply URL must begin with the scheme https.
• The reply URL is case-sensitive. Its case must match the case of the URL path of your running application. For example, if your application includes as part of its path .../abc/response-oidc, do not specify .../ABC/response-oidc in the reply URL. Because the web browser treats paths as case-sensitive, cookies associated with .../abc/response-oidc may be excluded if redirected to the case-mismatched .../ABC/response-oidc URL.

8. Under Permissions, select the Grant admin consent to openid and offline_access permissions check box.

9. Select Register.

Create Sign up and sign in Recommended grant flow in Azure AD B2C

1. Sign in to the Azure portal.
2. Select the Directory + Subscription icon in the portal toolbar, and then select the directory that contains your Azure AD B2C tenant.

3. Choose All services in the top-left corner of the Azure portal, search for and select Azure AD B2C.

4. Under Policies, select User flows, and then select New user flow.

5. On the Recommended tab, select the Sign up and sign in user flow.

6. Enter a Name for the user flow. For example, signup_login_recommended.

7. For Local accounts, select None.

8. For Identity providers, select Google.

9. For User attributes and claims, choose the claims and attributes that you want to collect and send from the user during sign-up. For example, select Show more, and then choose Return claims for Given name , Identity Provider, Identity Provider Access Token, Surname, User is new, and User's Object ID.

10. Click OK

11. Click Create to add the user flow. A prefix of B2C_1 is automatically appended to the name.

12. Then go to Home>Azure AD B2C in the API Connectors section.

And create an API Connectors

Enter a Display name for the API Connectors. For example, sign_up_validation. The next fields Endpoint URL, Username and Password are obtained from Sign up Validation Azure Function

Then go to the users flow again, select the user flow that was recently created.

Go to API Connectors section of the user flow and select the API Conector created in the previous step.

And Save the changes.

1. Select the Directory + Subscription icon in the portal toolbar, and then select the directory that contains your Azure AD B2C tenant.

13. Choose All services in the top-left corner of the Azure portal, search for and select Azure AD B2C.

14. Select App registrations (Preview), and then select the time-tracker app that was created in Creating a new app into Azure AD B2C.

15. Go to the Authentication section.

16. Go to the Implicit grant section and mark Access token and ID tokens as enabled.

17. Save changes

• Reference: https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-user-flows

Improvements

It is a well-known fact that the DevOps culture encourages teams to define every infrastructure resource as code, so by the time this app is the mature-enough and able to be used for any other company besides ioet, we will need to consider create all of these resources using a infrastructure as code approach.