Getting Started with Angular and User Authentication
This article was originally published on OKTA Developer Blog. Thank you for supporting the partners who make SitePoint possible.
AngularJS reigned as king of JavaScript MVC frameworks for several years. However, when the Angular team announced they would not provide backwards compatibility for their next version, there was a bit of a stir in its community, giving opportunities for frameworks like React and Vue.js to flourish. Fast forward a few years and both Angular 2 and Angular 4 have been released. Many developers are trying its TypeScript and finding the experience a pleasant one. According to JAXenter, it’s doing a pretty good job, and holding strong as the third most popular UI framework, behind React and HTML5.
In this article, I’ll show you a quick way to get started with Angular, and add user authentication with Okta’s Sign-In Widget. If you’re just getting started with Angular, you might want to read my Angular tutorial. If you’d like to get the source code used in this article, you can find it on GitHub.
Why User Authentication with Okta?
Okta provides an API service that allows developers to create, edit, and securely store user accounts and user account data, and connect them with one or multiple applications. We make user account management easier, more secure, and scalable so you can get to production sooner.
The Okta Sign-in Widget provides an embeddable JavaScript sign-in implementation that can be easily customized. The Sign-in Widget carries the same feature set in the standard Okta sign-in page of every tenant – with the added flexibility to change the look-and-feel. Included in the widget is support for password reset, forgotten password and strong authentication – all of which are driven by policies configured in Okta. Developers don’t have to write a single line of code to trigger these functions from within the widget. For consumer facing sites, social providers are also supported in the widget.
Create an Angular Application
Angular 4 was recently released, as well as Angular CLI 1.0. To see how you might use Okta’s Sign-In Widget in a simple Angular application, create a new application with Angular CLI. First, you’ll need to install Angular CLI.
npm install -g @angular/cli
After this command completes, you can create a new application.
[mraible:~] $ ng new angular-okta-example
create angular-okta-example/README.md (1034 bytes)
create angular-okta-example/.angular-cli.json (1255 bytes)
create angular-okta-example/.editorconfig (245 bytes)
create angular-okta-example/.gitignore (516 bytes)
create angular-okta-example/src/assets/.gitkeep (0 bytes)
create angular-okta-example/src/environments/environment.prod.ts (51 bytes)
create angular-okta-example/src/environments/environment.ts (387 bytes)
create angular-okta-example/src/favicon.ico (5430 bytes)
create angular-okta-example/src/index.html (305 bytes)
create angular-okta-example/src/main.ts (370 bytes)
create angular-okta-example/src/polyfills.ts (2498 bytes)
create angular-okta-example/src/styles.css (80 bytes)
create angular-okta-example/src/test.ts (1085 bytes)
create angular-okta-example/src/tsconfig.app.json (211 bytes)
create angular-okta-example/src/tsconfig.spec.json (304 bytes)
create angular-okta-example/src/typings.d.ts (104 bytes)
create angular-okta-example/e2e/app.e2e-spec.ts (302 bytes)
create angular-okta-example/e2e/app.po.ts (208 bytes)
create angular-okta-example/e2e/tsconfig.e2e.json (235 bytes)
create angular-okta-example/karma.conf.js (923 bytes)
create angular-okta-example/package.json (1325 bytes)
create angular-okta-example/protractor.conf.js (722 bytes)
create angular-okta-example/tsconfig.json (363 bytes)
create angular-okta-example/tslint.json (2968 bytes)
create angular-okta-example/src/app/app.module.ts (314 bytes)
create angular-okta-example/src/app/app.component.css (0 bytes)
create angular-okta-example/src/app/app.component.html (1120 bytes)
create angular-okta-example/src/app/app.component.spec.ts (986 bytes)
create angular-okta-example/src/app/app.component.ts (207 bytes)
You can `ng set --global packageManager=yarn`.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Successfully initialized git.
Project 'angular-okta-example' successfully created.
[mraible:~] 2m6s $
This will create a new angular-okta-example directory and install all the necessary dependencies. To verify everything works, run ng e2e in a terminal window. All tests should pass and you should see results like the following.
Integrate Okta’s Sign-In Widget in Angular
Now we’re going to leverage Okta’s Sign-In Widget for an easily customizable login view. To start, install the Okta Sign-In Widget using npm.
npm install --save @okta/okta-signin-widget
Add the widget’s CSS to src/styles.css:
@import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-sign-in.min.css';
@import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-theme.css';
Create src/app/shared/okta/okta.service.ts and use it to wrap the widget’s configuration and make it an injectable service.
import { Injectable } from '@angular/core';
import * as OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js';
@Injectable()
export class Okta {
widget;
constructor() {
this.widget = new OktaSignIn({
baseUrl: 'https://{yourOktaDomain}.com',
clientId: '{clientId}',
redirectUri: 'http://localhost:4200'
});
}
getWidget() {
return this.widget;
}
}
To make this service available to all components in the application, modify app.module.ts and list Okta as a provider.
import { Okta } from './shared/okta/okta.service';
@NgModule({
...
providers: [Okta],
bootstrap: [AppComponent]
})
Before this will work, you’ll need to create an OpenID Connect (OIDC) application in Okta so you can replace the {yourOktaDomain} and {clientId} references when initializing the widget.
Create an OpenID Connect App in Okta
OpenID Connect is built on top of the OAuth 2.0 protocol. It allows clients to verify the identity of the user and, as well as to obtain their basic profile information. To learn more, see http://openid.net/connect.
Login to your Okta account, or create one if you don’t have one. Navigate to Applications and click on the Add Application button. Select SPA and click Next. On the next page, specify http://localhost:4200 as a Base URI, Login redirect URI, and Logout redirect URI. Click Done and you should see settings like the following.
Show the Sign-In Widget
After making these changes, copy the your Client ID and Platform ID into okta.service.ts. Then modify app.component.ts to use the Okta service and the widget to login/logout.
import { Component, OnInit } from '@angular/core';
import { Okta } from './shared/okta/okta.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app works!';
user;
oktaSignIn;
constructor(private okta: Okta) {
this.oktaSignIn = okta.getWidget();
}
showLogin() {
this.oktaSignIn.renderEl({el: '#okta-login-container'}, (response) => {
if (response.status === 'SUCCESS') {
this.user = response.claims.email;
}
});
}
ngOnInit() {
this.oktaSignIn.session.get((response) => {
if (response.status !== 'INACTIVE') {
this.user = response.login
} else {
this.showLogin();
}
});
}
logout() {
this.oktaSignIn.signOut(() => {
this.showLogin();
this.user = undefined;
});
}
}
And modify app.component.html to have a <div> with id="okta-login-container" and a place to show the logged in user’s email.
Continue reading %Getting Started with Angular and User Authentication%
LEAVE A REPLY
You must be logged in to post a comment.