@pixxle/oauth-ionic/templates/usage-example.ts

Pixxle OAuth authentication module for Ionic Angular applications - Direct implementation that works - Tested and proven

// Exemple d'utilisation avec le nouveau composant standalone

// 1. Configuration (src/oauth.config.ts)
export interface OAuthConfig {
  clientId: string;
  clientSecret: string;
  redirectUri: string;
  authUrl: string;
  tokenUrl: string;
  userInfoUrl: string;
  scope: string;
}

export const PIXXLE_OAUTH_CONFIG: OAuthConfig = {
  clientId: 'VOTRE_CLIENT_ID',
  clientSecret: 'VOTRE_CLIENT_SECRET',
  redirectUri: 'com.pixxle.oauth://callback',
  authUrl: 'https://www.pixxle.me/oauth/v2/authorize',
  tokenUrl: 'https://www.pixxle.me/v2/oauth/token',
  userInfoUrl: 'https://api.pixxle.me/api/access/user',
  scope: 'user.profile'
};

// 2. Configuration principale (main.ts)
import { bootstrapApplication } from '@angular/platform-browser';
import { providePixxleOAuth } from '@pixxle/oauth-ionic';
import { PIXXLE_OAUTH_CONFIG } from './oauth.config';

bootstrapApplication(AppComponent, {
  providers: [
    providePixxleOAuth(PIXXLE_OAUTH_CONFIG)
  ]
});

// 3. Page de connexion (login.page.ts)
import { Component, inject } from '@angular/core';
import { PixxleLoginButtonStandaloneComponent } from '@pixxle/oauth-ionic';
import { PixxleOAuthService } from '@pixxle/oauth-ionic';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  standalone: true,
  imports: [
    PixxleLoginButtonStandaloneComponent
  ]
})
export class LoginPage {
  loading = false;
  private oauthService = inject(PixxleOAuthService);

  async handleLogin() {
    this.loading = true;
    try {
      await this.oauthService.login();
    } catch (error) {
      console.error('Erreur de connexion:', error);
    } finally {
      this.loading = false;
    }
  }
}

// 4. Template de connexion (login.page.html)
// <pixxle-login-button-standalone 
//   [loading]="loading"
//   (click)="handleLogin()">
// </pixxle-login-button-standalone>