isabella232 / onelogin-oidc-angular

OneLogin OpenId Connect Angular

This repo contains a bare bones Angular 4 application that makes use of the OpenId Connect Implicit flow to authenticate a user.

Prerequisites

In order to authenticate a user in this sample you will need to create an OpenId Connect app in your OneLogin Admin portal. You can read more about how to do that here.

If you don't have a OneLogin developer account you can sign up here.

To run the sample you will need Angular CLI installed

npm install -g @angular/cli

Setup

In production you would initialize these variables in your environment configuration but for the same of keeping the sample simple we have hardcoded them in src/app/services/auth.service.ts.

Replace the following with your own values:

• client_id - The Client Id for the OpenId Connect app you created in the OneLogin portal. e.g. 78d1d040-20c9-0336-5146-067351775fae92222

You should also make sure that you have configured http://localhost:4200/auth-callback as a redirect uri on the Configuration tab of your app.

Finally make sure the user you plan on testing with has been assigned to your OpenId Connect app. They will not be able to authenticate unless they have access.

Run

Clone this repo.

git clone https://github.com/onelogin/onelogin-oidc-angular.git

Install dependencies.

cd client && npm install

Start the development server.

ng serve

Browse to http://localhost:4200 and you will see an app with Home and Protected links.

The Protected link requires the user to be authenticated before it will be displayed. Clicking on it will redirect you to OneLogin for authentication.

After successful authentication you will be redirected back to the Protected page.

What can I use these for

OpenId Connect is a great way to add user authentication to your application where you are depending on another party to manage the user identities.

In this case OneLogin can manage the identity of your users making it faster to get up and running.

Single Sign On (SSO)

By implementing OpenId Connect via OneLogin you are creating a OneLogin session which can be used to single sign on from your custom app into other apps that your users may have access to via the OneLogin portal

MFA

If MFA is enabled for a user in OneLogin then they will be prompted to enter a token during the authentication. OneLogin takes care of all of this for you, making strong authentication much easier to implement in your app.

Credits

This project is based off a great walkthrough provided by Scott Brady which is worth checking out if you want a step by step guide on how to create the AuthGuard and AuthService etc.