Azure AD B2C - Angularjs sample (Web and Mobile) app
- This sample demonstrates the use of AD B2C for securing an AngularJS based web and mobile app.
Azure AD B2C
- Azure AD B2C is a cloud identity management solution for your web and mobile applications. It is a highly available global service that scales to hundreds of millions of identities.
Web app - Hello.js
- Web app implementation uses Hello.js that performs identity management with Azure AD B2C . Hello.js is a client-side JavaScript SDK for authenticating with OAuth2 web services and querying REST APIs.
Mobile app - ADAL plugin
Mobile app implementation uses ADAL Cordova Plugin Patch For B2C. This is a chopped version of Active Directory Authentication Library (ADAL) plugin for Apache Cordova apps, cordova-plugin-ms-adal that works with Azure AD B2C. The original cordova-plugin-ms-adal plugin provides easy to use authentication functionality for your Apache Cordova apps by taking advantage of Active Directory.
Decode JWT
jwtHelper of angular-jwt will take care of helping you decode the token (JWT) and check its expiration date. JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.
1. Project set up:
- Clone or download this repository
git clone https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample.gitclick below button to copy the code. By azure tutorial team
- Install dependencies
npm install
bower installclick below button to copy the code. By azure tutorial team
2. AD set up:
ADAL-B2C configuration
- Create an Azure AD B2C Directory
- Note the Domain name, it'll be used as the tenantName.
- Register your application Follow the instructions to create an application and enable both Web App and Native client. Refer Register a web application and Register a mobile/native application
- Enter the Reply URL as http://localhost:8100 or any port from wher you'll be serving your app.
- In Application Claims, select Email Addresses too.
- Note the Application ID . It'll be used as the clientId.
- Create a sign-up or sign-in policy
- Note the name of the policy. It'll be used as policy.
- Create a password reset policy
- Note the name of the policy. It'll be used as the password-reset-policy
3. AD settings:
- In settings.value.js, enter the following values
- tenantName: Domain name from step 2.1
- clientId: Application ID from step 2.2
- policy: policy name from step 2.3
4. Run this sample:
- Web App:
- From your shell or command line run
ionic serveclick below button to copy the code. By azure tutorial team
- Mobile App:
- Add platforms
cordova platform add android
cordova platform add iosclick below button to copy the code. By azure tutorial team
- Generate icon and splash screen resources
ionic cordova resourcesclick below button to copy the code. By azure tutorial team
- Build the App
cordova buildclick below button to copy the code. By azure tutorial team
For more details on building the apps refer the Cordova documentions, Android Platform Guide and iOS Platform Guide
5. Customize the Azure AD B2C user interface
- The Azure AD B2C login screen can be customized to suit our branding. Refer Customizing the UI
- In this sample we have two customized UI screens,
- AD B2C Sign in ansd Sign up page: adCustomPages/unified.html
- AD B2C Password reset page: adCustomPages/resetpassword.html
- In adCustomPages/unified.html, at line 442 and 445, enter your tenantName, password-reset-policy and clientId
- The pages should be uploaded in a blob and their url should be referred in the Azure AD B2C policies.
- Create a storage account as mentioned in Upload the sample content to Azure Blob Storage
- Upload the sample AD Pages in the container and note down their url.
- For the created Blob service Storage account create a CORS rule with '*' as ALLOWED ORIGINS. Select all in ALLOWED METHODS. Enter * for ALLOWED HEADERS and EXPOSED HEADERS as well.
- Customize your policy
Now in your application you can see the customized UI.
Implementation:
If you have to build an application based on this sample remember to install the required dependencies.
- Web App
- Dependencies:
bower install ng-hello --save
bower install angular-jwt --saveclick below button to copy the code. By azure tutorial team
- refer hello.service.js
- Mobile App
- Dependencies:
cordova plugin add https://github.com/jospete/azure-activedirectory-library-for-cordova --save
bower install angular-jwt --saveclick below button to copy the code. By azure tutorial team
- refer adal.service.js
Related documents:
- Azure AD
- Help secure AngularJS single-page apps by using Azure AD https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-devquickstarts-angular
- Azure AD B2C:
- Single-page app sign-in by using OAuth 2.0 implicit flow https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-spa