Angular web app with ServiceNow backend
What's this?
Angular 10+ web application developed to replace Service Portal on ServiceNow. It offers several benefits when compared native Service Portal
- Angular is a widely used framework and offers responsive single page applications (SPA)
- No need to wait for ServiceNow to update their instance to Latest Angular version or Bootstrap version
- No need to hack ServicePortal widgets and spend hours on fixing collisions between ServiceNow libraries and your custom CSS and JS libraries.
- Use industry standard OAuth2 protocol for securing the web app
- Use ServiceNow as a REST API backend
Technologies Used
- Angular 10.x
- Bootstrap 4.x
- ServiceNow Madrid
- OAuth2.0
- Others
Configure ServiceNow backend
- Get ServiceNow developer instance if you do not have one
- Follow the instructions from ServiceNow docs to activate the OAuth2.0 plugin
- Once activated, search for
oauth and select Application Registries to create a new OAuth client - Select Create an OAuth API endpoint for external clients and fill the client details. See ServiceNow docs for more information
- Make sure the user has REST API access and assigned
snc_platform_rest_api_access role - Test the created OAuth client with Postman or curl.
$ curl -d "grant_type=password&client_id=<Client Id>&client_secret=<Client secret>&username=<UserId>&password=<Password>" -H "Content-Type: application/x-www-form-urlencoded" https://devxxxxx.service-now.com/oauth_token.do
- If you are using Postman, select No Auth Authorization and body type as x-www-form-urlencoded. Enter the following key-value pairs in body
grant_type=password
client_id=<Client Id>
client_secret=<Client secret>
username=<Username>
password=<Password>
- Response from step 6 or 7 should be the following. Use access_token in subsequent steps to access data
{
"access_token": "z5Ewzj6KRSWXBnljlYRpn-R_5gw3JSQ8y1h71cuCIyVy546I7jwg5k9M2E0ctc2ssJC9S2ER6ZWGXs474Ext4Q",
"refresh_token": "Hek_vW3Q3jA2qM5nurYFCEruWPI5EX6zriI8a92v4FafFOsD5el17fWkrz48ZLlw3kpjZSRJmiK9uTyjPL6rKg",
"scope": "useraccount",
"token_type": "Bearer",
"expires_in": 1799
}
- Go to ServiceNow instance and search for Scripted Rest APIs and select it. Click on New and enter Name and other details then submit it
- Select created Scripted Rest API and create new Resource under resources and enter following info HTTP method: GET Name: Script:
(function process(/*RESTAPIRequest*/ request, /*RESTAPIResponse*/ response)
{
var userSysId=gs.getUserID();
var gr=new GlideRecord('sys_user_has_role');
gr.addQuery('user',userSysId);
gr.query();
var roles=[];
while(gr.next())
{
roles.push({name:gr.role.name,sysID:gr.role,description:gr.role.description});
}
var body=[];
body.push({username:gs.getUserName(),displayName:gs.getUserDisplayName(),sysId:gs.getUserID(),roles:roles});
response.setBody(body);
})(request, response);
- This scripted API will be used in Angular App to access user information and roles
How to Run the Angular App?
- Clone this repository into your local machine and open in WebStorm or VS Code
- Open the file src/app/app.constants.ts and change details based on your OAuth client and Scripted REST API detail
export const SERVER_API_URL = 'https://dev81909.service-now.com/';
export const USER_INFO_URL = 'api/x_19668_halo/user_info';
export const OAUTH2_CLIENT_ID= '3c76622bc581b30082098914f97ee08e';
export const OAUTH2_CLIENT_SECRET= 'password12345';
export const OAUTH2_ACCESS_TOKEN_URI = SERVER_API_URL + 'oauth_token.do';
export const INCIDENT_API_URL = 'api/now/table/x_19668_halo_incident';
- Download the Allow-Control-Allow-Origin extension to prevent Allow-Control-Allow-Origin errors
- Start the Angular web app with the following command
$ ng serve --watch
- Go to http://localhost:4200 and login with your credentials
- Click on Incidents menu to see list of options for incidents
- Select Incidents list to see list of incidents and click on Edit or View to see incident data
- Add new components and modules based on your requirements
- By default Angular app runs on HTTP protocol and data is not encrypted. Use Edge Encryption to encrypt data between ServiceNow instance and Angular WebApp
Note: Uploaded Update set and Angular code to this post
