ngx-line-liff

Angular LINE LIFF

Demo: Line OA for demo.

Authentication module for Angular. Supports authentication with LINE-LIFF. Can be extended to other providers also.

Comatibility Matrix

Getting started

Install via npm

npm i ngx-line-liff
npm i @line/liff

Import the module

In your AppModule, import the NgxLineLiffModule

...
import {
  NgxLineLiffModule,
  LineLiffLoginProvider,
  LineLiffServiceConfig
} from 'ngx-line-liff';

const ngxLiffConfig = <LineLiffServiceConfig>{
  autoLogin: false,
  providers: [
    {
      id: LineLiffLoginProvider.PROVIDER_ID,
      provider: new LineLiffLoginProvider('channel_id', { liffId: 'liff_id' })
    }
  ],
  onError: (err: any) => console.log(err)
}

@NgModule({
  declarations: [ ... ],
  imports: [
    ...
    NgxLineLiffModule
  ],
  providers: [
    {
      provide: 'LineLiffServiceConfig',
      useValue: ngxLiffConfig as LineLiffServiceConfig
    }
  ],
  bootstrap: [...]
})
export class AppModule { }

Sign in and out users

...
import { NgxLineLiffService } from 'ngx-line-liff';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {

  constructor(private auth: NgxLineLiffService) { }

  statusLogined(): void {
    this.ngxLineLiff.getLoginStatus();
  }
  authLogin(): void {
    //-- this.ngxLineLiff.signIn();
    this.ngxLineLiff.signIn({ redirectUri: window.location.href });
  }
  authLogout(): void {
    this.ngxLineLiff.signOut();
  }
}

Subscribe to the authentication state

You receive a LineProfile object when the user logs in and a null when the user logs out. LineProfile object contains basic user information such as name, photo URL, etc.

...
import { NgxLineLiffService, LineProfile } from 'ngx-line-liff';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {

  user: LineProfile;
  loggedIn: boolean;

  constructor(private auth: NgxLineLiffService) { }

  ngOnInit() {
    this.auth.authState.subscribe(user => {
      this.user = user;
      this.loggedIn = (user != null);
    });
  }
}

Display the user information

<img src="{{ user.pictureUrl }}">
<div>
  <h4>{{ user.displayName }}</h4>
  <p>{{ user.statusMessage }}</p>
</div>