{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Sample Angular Application","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"sample-angular-application","__idx":0},"children":["Sample Angular Application"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This code sample demonstrates how to obtain an Access ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/cloud-apis/create-first-app/concepts"},"children":["Token"]}," using the SLB Authenticator (SAuth) service for a public client. You will use Authorization Code Flow (ACF) with a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://tools.ietf.org/html/rfc7636"},"children":["Proof Key for Code Exchange (PKCE)"]},", the Angular Library for OpenID Connect, and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/cloud-apis/create-first-app/concepts"},"children":["OAuth2"]}," certified by the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://openid.net/foundation/"},"children":["OpenID foundation"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"code-sample","__idx":1},"children":["Code Sample"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For this sample, use the \"",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Angular Lib for OpenID Connect & OAuth2"]},"\" from ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://github.com/damienbod/angular-auth-oidc-client"},"children":["GitHub"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"pre-requisites","__idx":2},"children":["Pre-requisites"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Access to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.delfi.slb.com/"},"children":["SLB Developer Portal"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["You must be a member of a Team in the SLB Developer Portal."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Install ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://nodejs.org/en/download"},"children":["NodeJS v18.15.0"]}," or later."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"installation","__idx":3},"children":["Installation"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Open your preferred IDE."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Open ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://github.com/damienbod/angular-auth-oidc-client"},"children":["Angular-auth-oidc-client"]},"."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Copy the GitHub link and clone it into a local directory."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"Git clone https://github.com/damienbod/angular-auth-oidc-client.git\n"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Navigate to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["angular-auth-oidc-client-main/projects/sample-code-flow-refresh-tokens/src/app/"]},"."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Edit the configuration file, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["auth-config.module.ts"]}," and make the following changes:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["a.  Set \"Authority\" to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://csi.slb.com/v2"]}," for the SLB Authenticator service."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["b.  Set \"clientId\" to the client ID from your single-page application client. Refer to ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/create-client#create-clients-for-single-page-apps"},"children":["create client for single page apps"]}," to know details on how to create client."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["c.\tMake sure the scope is 'openid' and the responseType is 'code'."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["d.\tSave ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["auth-config.module.ts"]},"."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"run-the-code-sample","__idx":4},"children":["Run the code sample"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the terminal, run the following:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"npm install\n"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"npm run build -lib\n"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"npm start\n"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Browse to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://localhost:4204/"]},"."," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/angularwebpage-login.19cbe887dc56e445f905d8c3691a3f8144d914161b34bbfce888708b7eb2dd1f.ab5388e2.jpeg","alt":"Python-ACF"},"children":[]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Click ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["continue to localhost"]},"."," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/angularwebpage-configuration.ec139c7ac04f977117495b8635f7ba50387fa8cfe3f711fbd8aed0aa088de33d.ab5388e2.jpeg","alt":"Python-ACF"},"children":[]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Click ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Log in"]},"."," ","The window shows your user data and the configuration."," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/angularwebpage-userdata.7ecd6c81b4a6e8e40b481e71c1544810ffdedddadc36e0344a4c17c40ea12d91.ab5388e2.jpeg","alt":"Python-ACF"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"conclusion","__idx":5},"children":["Conclusion"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["With this code sample, you used the angular library to authenticate and generate a token for a public client using ACF with PCKE SLB Authenticator services."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"disclaimer","__idx":6},"children":["Disclaimer"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["These instructions work with Damien Bod's OIDC sample as of April 1st, 2023, but this public sample is constantly being updated. The detailed instructions are provided as a convenience for new web developers and are only to be used as a guide. The documentation in Damien Bod's OIDC client take precedence."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"additional-resources","__idx":7},"children":["Additional resources"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://docs.angularjs.org/misc/started#!"},"children":["Getting started with AngularJS"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"recommended-further-reading","__idx":8},"children":["Recommended further Reading"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/ccm/tutorial/user-context-service"},"children":["User context"]}," in SLB Digital platform."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/sauth/tutorial/secret-management-service"},"children":["Secret management"]}," on SLB Digital platform."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/cloud-apis/references/api-lifecycle"},"children":["API Maturity"]}," of cloud APIs."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Refer to the tutorial of various solutions (such as ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/fdplan/tutorial/about"},"children":["FDPlan"]},", ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/drillplan/docs/tutorials/tutorial"},"children":["DrillPlan"]},", ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/solutions/core-service/tutorial/osdu-core-services-about"},"children":["MPDF"]}," etc.) to learn more about their extensibility and how to integrate with APIs offered by these solutions into your application."]}]}]},"headings":[{"value":"Sample Angular Application","id":"sample-angular-application","depth":1},{"value":"Code Sample","id":"code-sample","depth":2},{"value":"Pre-requisites","id":"pre-requisites","depth":2},{"value":"Installation","id":"installation","depth":2},{"value":"Run the code sample","id":"run-the-code-sample","depth":2},{"value":"Conclusion","id":"conclusion","depth":2},{"value":"Disclaimer","id":"disclaimer","depth":2},{"value":"Additional resources","id":"additional-resources","depth":2},{"value":"Recommended further Reading","id":"recommended-further-reading","depth":2}],"frontmatter":{"seo":{"title":"Sample Angular Application"}},"lastModified":"2025-06-04T23:12:06.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/cloud-apis/create-first-app/angular-webapp-sample","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}