I'm new to this forum and have been struggling to find a solution for my problem. I am attempting to integrate AppleConnect into my Angular 8 app with the following approach:
I have created an appleService.ts file that dynamically generates the Apple script and appends it to the DOM. Then, I initialize AppleID.auth once the script is loaded.
import {isBrowser} from '../../appModule/platformUtil';
import {KartableConfig} from '../../commonModule/services/kartableConfig';
import {Injectable} from '@angular/core';
import {KartableLogger} from '../../appModule/services/KartableLogger';
import { environment } from '../../environments/environment';
declare let AppleID : any;
@Injectable({
providedIn: 'root',
})
export class AppleService {
applePromise: Promise<void>;
constructor(private config: KartableConfig,
private logger: KartableLogger) {
}
private initApple(redirectUri: string): Promise<void> {
if (!isBrowser()) {
this.logger.error('Apple init called server side');
return null;
}
if (!this.applePromise) {
this.applePromise = new Promise(resolve => {
const appleConnectLoaded = () => {
AppleID.auth.init({
clientId : environment.appleConnectClientId,
scope : 'name email',
redirectURI : redirectUri,
usePopup : true
});
resolve();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s);
js.type = 'text/javascript';
js.id = id;
js.async = true;
js.src = "https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/fr_FR/appleid.auth.js";
fjs.parentNode.insertBefore(js, fjs);
js.onload = appleConnectLoaded();
}(document, 'script', 'apple-connect'));
});
}
return this.applePromise;
}
public login(redirectUri: string): Promise<{ [key: string]: string }> {
return new Promise((resolve: Function, reject: Function) => {
this.initApple(redirectUri).then(() => {
document.addEventListener('AppleIDSignInOnSuccess', (data) => {
resolve(data);
});
document.addEventListener('AppleIDSignInOnFailure', (error) => {
reject('Apple connect failed');
});
});
});
}
}
The first part of the implementation is working correctly, but I am encountering the following error:
ReferenceError: AppleID is not defined at appleConnectLoaded (appleService.ts:34)
Interestingly, when I type AppleID in my browser console, it exists. I feel like I am missing something here but can't quite figure it out...
Any assistance would be greatly appreciated!