Single Page Web App

A Single-page application (SPA), also known as a single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience.

Find the below procedure to create App:

1. Go to Administrator dashboard -> Apps -> “App Settings”.

2. Click “Create New App” button.

3. Enter app name and click “Single Page Web App”

4. Click “Create App” button, the app details screen displays

App Details

This is where all the basic information about your application such as app name, app type, redirect URLs, allowed logout URLs, website, logo, company details, etc. are entered.

5. Enter App name, for example: Books - Angular, jQuery, react-js (your business name).

6. Enter App logo URL, for example:This logo will appear in several areas, including the list of applications in the Dashboard, as well as things like customized consent forms.

7. Administrator can change the App type from Android Mobile App, to any other app type (IOS Mobile App, Windows Mobile App and Single Page WebApp).

8. Select scope from drop down, cidaas provides Default Scopes To define new scopes, refer Scope Management.

9. Click on the hyperlink to Import scopes from scope groups, as in the below screen, for more information click Scope Groups.

Reference Link What is Scope

10 . Select hosted page group from the drop down. By default, cidaas provides Hosted Pages.

11 . Enter the redirect URL: The URL of the landing page. Once the user is successfully authenticated, and redirected to this URL. User can specify multiple valid URLs here, separated by whitespace (typically to handle different environments such as QA or testing).

12 . Enter the Allowed Logout URL User can specify multiple valid URLs here.

Reference Link What is Redirect URL?

Company Details

Enter details of company here.

13. Company Name: Enter details here to store the company name which is to be displayed while using this app.

14. Company Address: Enter company address that is to be displayed while using this app.

15. Website URL: Provide the business site URL.

16. Terms and Conditions URL: This link will be rendered automatically in login/registration pages, if the Terms URL is configured.

17. Privacy Policy URL: This link will be rendered automatically in login / registration pages, if the privacy policy URL is configured.

Advanced Settings

In addition to above, cidaas allows you to configure few options for OAuth, Token payloads, social login providers.

OAuth Settings

These settings should be configured to define OAuth response types and origins

1 . Click on the “Show Advanced Settings” to view a similar screen

2 . From the drop down select response types checkbox (multiple checkbox can be selected)

3 . From the drop down select grant types checkbox (multiple checkbox can be selected)

4 . Enter allowed origins and allowed web origins.

Token Settings

5 . From the drop down select Additional Access Token Fields checkbox (multiple checkbox can be selected)

Note You can configure expiry time for Access Tokens and ID Tokens as needed. The default value set is 86400 seconds (one day).

You can upload or define your content policy, that you would like to show to your end user. There may be multiple policies that you want to show based on context.

Cidaas provided you a Consent Management framework that allows for this, including feature to maintain multiple versions of same policy.

By default, cidaas has a standard template that is displayed to your end users.

6 . From the drop down select created consent group, as in the below screen

Miscellaneous Settings

You can manage security settings such as allowed providers, required fields and configuring for 2FA settings here.

7 . From the drop down select allowed providers checkbox (multiple checkbox can be selected)

8 . From the drop down select required fields checkbox (multiple checkbox can be selected)

9. Always ask for 2FA:When this option is enabled at the app level, the end-users will be required to verify their identity using the 2nd authentication factor.

For more information refer Always ask for 2FA

10 . Click “Save” button.

Find the below advanced settings table for reference:

Fields Description
OAuth Settings
Response Types Response Type:Response Type: The response type specifies the Response Type you want to use. This can be either code or token or ID token. The client constructs the request URI by adding the following parameters to the query component of the authorization endpoint URI: https://sampleeshop.cidaas.de/authz-srv/authz/?client_id=4d5e6e20-9347-4255-9790-5b7196843103&redirect_uri= https://sampleeshop.cidaas.de/user-profile/editprofile&view_type=login&response_type=token cidaas provides the following default Response Types, while creating the App:
Code: The Authorization Code grant type is used by confidential and public clients to exchange an authorization code for an access token. After the user returns to the client via the redirect URL, the application will get the authorization code from the URL and use it to request an access token.
Token: When the response type is specified as "token", the access token is directly issued.
Id_token: Id Token is issued only when the App has OpenID scope. The id_token issued is in the format of JWT token (JSON Web Token) - which is a compact, URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is used as the payload of a JSON Web Signature (JWS) structure or as the plaintext of a JSON Web Encryption (JWE) structure, enabling the claims to be digitally signed or integrity protected with a Message. .
Grant Types **Grant Type** is the mechanism in which an application can get access token. Cidaas supports several Grant Types of OAuth 2.0 protocol. These are available for use while creating different type of apps (Andriod / iOS / Windows mobile / Web / Client). cidaas provides the following default Grant Types, while creating the App: Implicit/ Authorization Code/ Password/ Refresh Token.
Implicit Grant: Implicit Flow is typically for Single Page App. The implicit grant type is used to obtain access tokens for public clients known to operate using a redirection URI. These clients are typically implemented in a browser using a scripting language such as JavaScript. Typical flow is with an application opening a browser to show authorization server. When user approves request from app, they are rediregted back to application with access token.
Authorization Code: When you use this option, the application gets back an authorization code from resource owner, which in turn is used by application to get an Access Token from cidaas authorization server. Typical use cases are for browser based applications, mobile applications and apps on a web server.
Password: You can use this grant type if your application wants to use a classical login style, where end user has registered a username and password with cidaas. Login page will be cidaas app login screen. The password is used directly as an authorization grant to obtain an access token.
Refresh Token: Refresh tokens are credentials used to obtain access tokens. Refresh tokens are issued to the client by the authorization server and are used to obtain a new access token when the current access token becomes invalid or expires, or to obtain additional access tokens with identical or narrower scope.
Client Credentials: It is used as a grant type when an application wants to access its own resources (like icons, user statistics or web url) and not particular resource of a user.
Allowed Web Origins Use this when you want to embed cidaas login in your web app using iframe. You can enter all the various URLs from where a cidaas login page is shown in an iframe. User can specify multiple valid URLs here, separated by whitespace. By default all domains mentioned in “Redirect URLs” (attribute entered in App settings) is allowed.
Allowed Origins Typically, the same-origin policy in web browsers prevents JavaScript from making requests across domain boundaries. To work properly, many web apps need a mechanism for implementing cross-domain requests. For example, to call your own Web APIs and Cidaas APIs without same-origin policy errors, CORS introduces a standard mechanism that can be used. The CORS spec defines a set of headers that allow the browser and web server to communicate about which requests are allowed. This field here maps to CORS Header Field ‘Access-Control-Allow-Origin’. User can specify multiple valid URLs, separated by whitespace.
Token Settings
Additional Access Token Fields Admin user can specify the additional fields (defined in the Registration setup) that will be appended to the access token. For more information refer Access Token Payload
Misc. Settings
Allowed Providers Having popular social providers such as Facebook or Google, makes it convenient for end users to use their existing social accounts during login/registration. For more information refer Social Providers
Required Fields The fields defined in the Registration Setup are listed, and the Admin can select the fields that need to be made mandatory at the app level. For more information refer Registration Setup
Allowed Groups

11 . Select appropriate roles from the drop down.

12 . Select appropriate cidaas Administrator role from the drop down.

13 . Select appropriate groups from the drop down, as in the below screen,

14 . Click "Save" button, a message window pop ups "Apps Saved Successfully".

Encryption Settings

The JWE (JSON Web Encryption) specification standardizes the way to represent an encrypted content in a JSON-based data structure.

Reference Link JWE

15 . Enable JWE and click “Save” button

Certificates

Json Web Tokens (JWT) are used to secure the information exchange between the users and the application. To provide more security to the access token the public and private key are defined.

Using a RSA asymmetric key pair, the JWT is signed with the private key and verified with the public.

Public Key: Which is in the form of encrypted.

Private Key: Which decode the encrypted token.

16 . Once the appropriate App is created, the certificates (Public and Private keys) gets displayed as in the below screen.

App Custom Fields

User can define the custom fields (multiple fields can be defined).

17 . Click "Save" button, a message window pop ups "Apps Saved Successfully".

18 . Once all the mandatory fields are filled, user get the Client ID and Client Secret, as in the below screen

19 . To reveal client secret id, click on the view icon .

20 . To reset client secret id, click on the reset icon , which provides a different client secret id.

21 . The created app gets displayed in “Your Apps”

22 . Cancel button redirects to app types screen.

Getting Started – Single Page Web App

Note Since we are following the OpenID connect 2 and oAuth2 standard, we are using the OIDC client library which supports for client-side and browser-based JavaScript client applications.

How to use silent login

  • If the user is login to a browser, then is not necessary to login again. When user tries to login again, it redirects to the specified redirect URL.

  • We are using OIDC client js library which is the standard library that follows oAuth2 standard and OpenID connect 2.

To use OpenID, connect with cidaas in JavaScript SDK, following the below steps:

How to use OIDC client

First import the OIDC client js.

or

Use the below CDN: https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.4.1/oidc-client.js

Getting Started

1 . Go to cidaas Administrator dashboard->Apps-> “App Settings”

2 . Select your app from the Administrator, get the OpenID configuration information and click on the link to know more about the configuration and functionalities of OIDC client library.

3 . In OIDC client, first construct the properties. The properties must have authority which is your domain name, your app id and other URLs

var settings = {
authority: 'https://sampleeshop.com',
client_id: 'c74131d6-c037-47e9-bcc2-9cb8a4ce55fc',
redirect_uri: 'https://sampleeshop.com/resume-callback.html',
post_logout_redirect_uri: 'https://sampleeshop.com',
popup_post_logout_redirect_uri: 'https://sampleeshop.com/logout-callback.html',
silent_redirect_uri: 'https://sampleeshop.com/resume-callback.html',
response_type: 'id_token token',
scope: 'openid email roles profile',
mode: 'redirect'
};

In the above properties, silent_redirect_uri is mandatory and the mode should be ‘silent’.

User Manager

Once the properties are configured, initialize the UserManager class with that properties. The User Manager Class of OIDC client library provides a high-level API for signing a user in, signing out, managing the user’s claims returned from the OIDC provider, and managing an access token returned from the OIDC/OAuth2 provider.

var usermanager = new UserManager(settings);

Silent Login

To perform silent login: call signinSilent () by passing the state as parameter.

this.usermanager.signinSilent({
state: 'state'
}). then(function () {
console.log("signed in");
window.location = "/";
});

If you are already logged in, you will be redirected directly to your specified callback URL.

Silent Login callback

complete the sign in process call the signinSilentCallback() from your callback URL.

this.usermanager.signinSilentCallback();

Silent Logout

There is no separate logout for silentSignOut, you may use either redirect_signout or popup_signout

this.usermanager.signoutRedirect({
state: 'state'
}).then(resp => {
console.log('signed out', resp);
window.location = "/";
});



results matching ""

    No results matching ""