Login with Apple front

src/app/pages/login/login.page.html

@@ -61,7 +61,7 @@
                     </ion-buttons>
 
                     <ion-buttons>
-                        <ion-button>
+                        <ion-button (click) ="onLoginApple()" >
                             <ion-icon name="logo-apple"></ion-icon>
                         </ion-button>
                     </ion-buttons>

src/app/pages/login/login.page.ts

@@ -6,6 +6,13 @@ import { BlogDataService } from 'src/app/store/blog-data.service';
 import { environment} from "../../../environments/environment";
 import { AlertController } from '@ionic/angular';
 import { Preferences  } from '@capacitor/preferences';
+import { Capacitor } from '@capacitor/core';
+import { shajs } from 'sha.js';
+import {
+  SignInWithApple,
+  SignInWithAppleResponse,
+  SignInWithAppleOptions,
+} from '@capacitor-community/apple-sign-in';
 
 @Component({
   selector: 'app-login',
@@ -18,6 +25,9 @@ export class LoginPage implements OnInit {
   loginResult: any;
   blogResult:any;
   showSocial:boolean = true;
+  appleSignInAbortController: any;
+  appleSignInWindow: any;
+  state: any;
 
   constructor(
     private router: Router,
@@ -95,6 +105,97 @@ getBlogData(){
     this.router.navigate(['register']);
   }
 
+  onLoginApple() {
+
+    // -> 'web', 'ios' or 'android'
+    if (Capacitor.getPlatform() === 'web') {
+      this.appleSignInAbortController = new AbortController();
+      this.appleSignInWindow = window.open(
+        'https://appleid.apple.com/auth/authorize?' +
+          'client_id=com.wrenchboard.users&'+
+          'redirect_uri='+environment.appleRedirectUri+'&' +
+          'response_type=code id_token&' +
+          'scope=name email&' +
+          'response_mode=web_message',
+        '_blank'
+      );
+      window.addEventListener(
+        'message',
+        (e) => {this.appleTokenReceived(e);},
+        {signal: this.appleSignInAbortController.signal}
+      );
+      return;
+    }
+    console.log("Capacitor platfor: " + Capacitor.getPlatform());
+    const rawNonce = (Math.random() + 1).toString(36);
+    //const nonce = shajs('sha256').update(rawNonce).digest('hex');
+    const nonce = rawNonce;   
+    this.state = (Math.random() + 1).toString(36);
+
+    let options: SignInWithAppleOptions = {
+      clientId: 'com.wrenchboard.users',
+      redirectURI: environment.appleRedirectUri,
+      scopes: 'email name',
+      state: '12345', /* this.state, */
+      nonce: nonce,
+    };
+
+    SignInWithApple.authorize(options)
+    .then((result: SignInWithAppleResponse) => {
+      // Handle user information
+      console.log("response", result.response);
+      // result.response.user
+      // result.response.identityToken
+      // result.response.email: null
+      // result.response.givenName: null
+      // result.response.familyName: null
+
+      // Validate token with server and create new session
+      this.showAlert("Error", "Token validation handling is not implemented!");
+
+      // this.sendOauthConnectRequest(OauthProvider.apple, result.response.identityToken).subscribe();
+    })
+    .catch(error => {
+      // Handle error
+      this.showAlert("Error", error);
+    });
+    console.log("onLoginApple() out");
+  }
+  /*
+  {"identityToken":"eyJraWQiOiJZdXlYb1kiLCJhbGciOiJSUzI1NiJ9.eyJpc3MiOiJodHRwczovL2FwcGxlaWQuYXBwbGUuY29tIiwiYXVkIjoiY29tLndyZW5jaGJvYXJkLnVzZXJzIiwiZXhwIjoxNjk0MzkzMzE3LCJpYXQiOjE2OTQzMDY5MTcsInN1YiI6IjAwMTgxMC4yMGU3NTAyOGQ0OWM0MmQ4YjQzMGI0MmQxZDc0ODdmMy4xMTU3Iiwibm9uY2UiOiIxLnB1ZmJwZGFhMzYiLCJjX2hhc2giOiJQRE1PNXNGa2pjOEtPclNNZDRjUGZnIiwiZW1haWwiOiJhY2lkdW1pcmFlQGdtYWlsLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjoidHJ1ZSIsImF1dGhfdGltZSI6MTY5NDMwNjkxNywibm9uY2Vfc3VwcG9ydGVkIjp0cnVlLCJyZWFsX3VzZXJfc3RhdHVzIjoyfQ.fEnzaVgB2JaOZbQm2fkpC_J8if5tIIfAphQptZ9Bxp2wrjnDsGvN1b0gvB3KBswv7d6n4A1U46GpaGpShJDhN-e2lKw_lzgFJlRi9-1B-Fudp_gzK61r6W8JzzbPiD0GZgfp_ITPDdxdC7hzixVx4TW8djrV4TIXYjus0b5XnzqRVz2t3ed4Et55s_SZ53SVhM9qnDruVB-KgeGrvDVUks71iM1etuP2vO3xsSFoiKfMEcankX3JUJaCNRSdvVVeUBqH9TfhvmHrCopjnlJ8N2B8o8RDhbnt99OAJtE_dw_Qt5YAAg2ITYQVLBb2dniJ5FBsOBBwbiA0-W1hPJ3RpQ","authorizationCode":"ce0061e5858a34e468a373c3ea7344cdb.0.rryrq.rK6JjdqlVVi6S9coEcTgVQ","email":null,"givenName":null,"familyName":null,
+  "user":"001810.20e75028d49c42d8b430b42d1d7487f3.1157"}
+  */
+  appleTokenReceived(event: any) {
+    console.log(event);
+    this.appleSignInAbortController.abort();
+    this.appleSignInWindow.close();
+    if (!(event instanceof MessageEvent)) {
+      return;
+    }
+    const data = JSON.parse(event.data);
+    if (typeof data !== 'object' || data === null) {
+      return;
+    }
+    if (data.data.hasOwnProperty('error')) {
+      return;
+    }
+    let postData: any = {
+      token: data.data.authorization.id_token,
+      device_id: 'device UUID', /** NOT IMPLEMENTED! */
+    };
+    if (
+      data.data.hasOwnProperty('user') &&
+      data.data.user.hasOwnProperty('name') &&
+      data.data.user.name.hasOwnProperty('firstName') &&
+      data.data.user.name.hasOwnProperty('lastName')
+    ) {
+      //this is only filled after the first login of the user
+      postData.name = data.data.user.name.lastName + ' ' + data.data.user.name.firstName;
+    }
+    //this.http.post(environment.appleRedirectUri + '/api/auth/loginWithApple', postData).subscribe(//Do whatever you need with the data);
+    this.showAlert("Error", "appleTokenReceived is not implemented!");
+  }
+
   onClick() {
     this.router.navigate(['slider']);
   }

src/environments/environment.prod.ts

@@ -3,5 +3,6 @@ export const environment = {
   apiKey: '', // <-- Enter your own key here!' PROD
   baseUrl: 'https://apigate.nebula.g1.wrenchboard.com/svs/user',
   images: 'https://apigate.nebula.g1.wrenchboard.com/svs/user',
+  appleRedirectUri: '',
   loginSocial: false
 };

src/environments/environment.ts

@@ -3,6 +3,7 @@ export const environment = {
   apiKey: '', // <-- Enter your own key here!' TEST
   baseUrl: 'https://apigate.nebula.g1.wrenchboard.com/en/wrench/api/v1',
   images: 'https://apigate.nebula.g1.wrenchboard.com/en/wrench/api/v1/',
-  loginSocial: false
+  appleRedirectUri: 'https://dev-users.wrenchboard.com/loginWithApple',
+  loginSocial: true
 };