Sign in with Apple implementation with Angular

Question

I am trying to implement Sign in with Apple in Angular website. The flow of implementation starts with adding

in the index.html file.

Then created a service called apple-login-service.ts using scriptjs.

This is the code for apple button in sign-in-container.html file.

<!-- Apple button -->
            <div class="row">
                <div class="col-md-12 d-flex justify-content-center align-self-center">
                    <div id="appleid-signin" class="signin-button" data-color="black" data-border="true" data-type="sign in"></div>
                </div>
            </div>

sign-in-container.component.ts

/**
     * On Apple button click
     */
    onSocialAppleClick() {
        console.log("inside social app")
        const appleParams = {
            clientId : '////////',
            redirectURI : 'https://ppl-dev--fe--phx2.appspot.com/ajax/redirect',
            scope : 'name email',
            state : 'signin',
            usePopup : true
        };
        this.appleLoginService.signIn();
    }

apple-login.service.ts

import { Injectable } from '@angular/core';
import { AppleParams } from '../models/server-models/apple-params-interface';

declare var require: any
@Injectable({
    providedIn: 'root'
})
export class AppleLoginService {

    private readonly appleScriptUrl: string = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
    private ready: Promise<boolean> = new Promise(resolve => {
        if (typeof window !== 'undefined') {
            const script = require('scriptjs');
            script(this.appleScriptUrl, () => resolve(true));
        } else {
            resolve(false);
        }
    }
);
    /**
     * Error details
     */
    signIn() {
        console.log("inside sign in")
        throw new Error('Method not implemented.');
    }

    constructor() {
        this.ready.then(isReady => {
            if (isReady) {
                this.init();
            }
        });
    }
    /**
     * Call init method
     */
    private init(): void {
        console.log("inside init method")
        window['AppleID'].auth.init({
            clientId: 'com.pizzapizza.web',
            scope: 'name email',
            redirectURI: 'https://ppl-dev--fe--phx2.appspot.com/ajax/redirect',
            state: 'sign in'
        });
        window.addEventListener('AppleIDSignInOnSuccess', (event) => {
            console.log('Got a message: ' + JSON.stringify(event));
        })
    }

}

When I click on the apple button from the html page, it redirects me to the appleid.apple.com

and ask for the appleid and password. After authenticating the credentials apple servers asks to redirect to the redirectURI (https://ppl-dev--fe--phx2.appspot.com/ajax/redirect) provided in the params. But when this gets redirected i can only see the json data APPLE RESPONSE - JSON rather than opening the website with user logged in.

Answer 1

Apple will send a POST request directly to your redirect URI, depending on the response of that request you will be able to redirect the user back to the angular app. From what I'm reading you are listening to an event from that post request but the redirectURI is not emitting an event to the angular app window, thats why you are only able to see a json file