OwnID-Angular SDK

A library for integrating OwnID into an Angular application.

Table of Contents

• Installation
• Getting Started
• Alternative Integration Strategies
• What is OwnID?
• License

Installation

Use the npm CLI to run:

npm install @ownid/angular

Getting Started

• Register OwnID Module
• Add Register with OwnID to Your Application
• Add OwnID Login to Your Application

Register OwnID Module

Import OwnidAngularModule and configure it with the appId of the website's OwnID application. To obtain the OwnID application's id, open the application in the OwnID Console.

...
import { OwnidAngularModule } from '@ownid/angular';
...
@NgModule({
  ...
  imports: [
    ...
    OwnidAngularModule.forRoot({ appId: '<your application id>' }),
    ...
  ]})

Add Register with OwnID to Your Application

Add the ownid component to the HTML template of the registration page.

<input #email type="email">
<input #password type="password">
<input #confirmPassword type="password">
<ownid type="register"
       (onError)="onError($event)"
       (onRegister)="onRegister($event)"
       [loginIdField]="email"
       [passwordField]="password"
       [confirmPasswordContainer]="confirmPassword"
></ownid>

Then add onRegister callback to the TS file of the registration page. Store ownIdData in your app storage. (global variable at window object just an example. It's not recommended using it in that way)

onRegister(ownIdData) {
  window.ownIdData = ownIdData;
}

To add OwnID to your application using an Angular service instead of the HTML template, see Inject Service into Registration Component.

Modify Existing Registration Method

Now, edit your existing registration logic. This function adds the OwnID payload to the form data before calling your existing registraion method.

onSubmit(formData) {
  if (window.ownIdData) {
    formData.ownIdData = btoa(JSON.stringify([window.ownIdData]));
  }
  
  //Call your existing registration logic in the backend
  return register(formData);
}

Add OwnID Login to Your Application

Add the ownid component to the HTML template of the login page.

  <input #email type="email">
  <input #password type="password">
  <ownid type="login"
         [loginIdField]="email"
         [passwordField]="password"
         (onLogin)="onLogin($event)"
         (onError)="onError($event)"
  ></ownid>
  <button type="submit" #submitBtn>Log In</button>

To add OwnID to your application using an Angular service instead of the HTML template, see Inject Service into Login Component.

Define onLogin Function

Now, define the onLogin function that is executed when the user logs in with OwnID. This function must set the user session and execute post-login actions like triggering an event or navigating to an authorized page. For example, the onLogin method might look like:

onLogin(data: any) {
    this.authService.setAuth({ token: data.token });
    
    this.router.navigateByUrl('/account');
  }

Alternative Integration Strategies

• Inject Service into Registration Component
• Inject Service into Login Component

Inject Service into Registration Component

As an alternative to incorporating the OwnID component into an HTML template, inject the ownidAngularService service into the component of the registration page:

  @ViewChild('email') emailField: ElementRef<HTMLInputElement>;
  @ViewChild('password') passwordField: ElementRef<HTMLInputElement>;
  @ViewChild('confirmPassword') confirmPassword: ElementRef<HTMLElement>;
  ...
  constructor(private ownidAngularService: OwnidAngularService) {}
  ...
  ngAfterViewInit(): void {
    this.ownidAngularService.register({
      onError: (errorMsg: string) => this.onError(errorMsg),
      onRegister: (ownIdData) => this.onRegister(ownIdData),
      loginIdField: this.emailField.nativeElement,
      passwordField: this.passwordField.nativeElement,
      confirmPasswordContainer: this.confirmPassword.nativeElement,
    });
  }

Now, you need to modify your existing registration method.

Inject Service into Login Component

As an alternative to incorporating the OwnID component into an HTML template, inject the ownidAngularService service into the component of the login page:

  @ViewChild('email') emailField: ElementRef<HTMLInputElement>;
  @ViewChild('password') passwordField: ElementRef<HTMLInputElement>;
  ...
  constructor(private ownidAngularService: OwnidAngularService) {}
  ...
  ngAfterViewInit(): void {
    this.ownidAngularService.login({
      onError: (error: string) => this.onError(error),
      onLogin: (ownIdData) => this.onLogin(ownIdData),
      loginIdField: this.emailField.nativeElement,
      passwordField: this.passwordField.nativeElement,
    });
  }

Now, you need to define the onLogin function.

What is OwnID?

OwnID offers a passwordless login alternative to a website by using cryptographic keys to replace the traditional password. The public part of a key is stored in the website's identity platform while the private part is stored on the mobile device. With OwnID, the user’s phone becomes their method of login. When a user registers for an account on their phone, selecting Skip Password is all that is needed to store the private key on the phone. As a result, as long as they are logging in on their phone, selecting Skip Password logs the user into the site automatically. If the user accesses the website on a desktop, they register and log in by using their mobile device to scan a QR code. Enhanced security is available by incorporating biometrics or other multi-factor authentication methods into the registration and login process.

License

This project is licensed under the Apache License 2.0. See the LICENSE file for more information.