npm package: @ownid/angular
Description: A library for integrating OwnID into an Angular application. ## Table of Contents * [Installation](#installation) * [Getting Started](#getting-started) * [Alternative Integration Strategies](#alternative-integration-strategies) * [What is OwnID?](#what-is
Latest version: 1.7.3

# OwnID-Angular SDK
A library for integrating OwnID into an Angular application.
## Table of Contents
* [Installation](#installation)
* [Getting Started](#getting-started)
* [Alternative Integration Strategies](#alternative-integration-strategies)
* [What is OwnID?](#what-is-ownid)
* [License](#license)
## Installation
Use the npm CLI to run:
```bash
npm install @ownid/angular
```
## Getting Started
* [Register OwnID Module](#register-ownid-module)
* [Add Register with OwnID to Your Application](#add-register-with-ownid-to-your-application)
* [Add OwnID Login 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](https://console.ownid.com/).
```javascript
...
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.
```angular2html
<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)
```typescript
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](#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.
```typescript
onSubmit(formData) {
  if (window.ownIdData) {
    formData.ownIdData = 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.
```angular2html
  <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](#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:
```typescript
onLogin(data: any) {
    this.authService.setAuth({ token: data.token });
    
    this.router.navigateByUrl('/account');
  }
  ```
## Alternative Integration Strategies
* [Inject Service into Registration Component](#inject-service-into-registration-component)
* [Inject Service into Login 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:
```typescript
  @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](#modify-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:
```typescript
  @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](#define-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.