/sign-in-with-apple-for-angular

Sign In with Apple for Angular

Primary LanguageTypeScript

Sign In with Apple for Angular

Sign in with Apple provides a fast, private way to sign into apps and websites, giving people a consistent experience they can trust and the convenience of not having to remember multiple accounts and passwords.

Configuring Your Webpage for Sign in with Apple

1 - Embed Sign in with Apple JS in Your Webpage

<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

2 - Setting the authorization object using the JavaScript APIs and display a Sign in with Apple button

<script type="text/javascript">
    AppleID.auth.init({
        clientId : '[CLIENT_ID]',
        scope : '[SCOPES]',
        redirectURI : '[REDIRECT_URI]',
        state : '[STATE]',
        usePopup : true //or false defaults to false
    });
</script>

3 - Add button, recommend we to follow Apple’s guidelines as they provide a comprehensive documentation on this matter.

<div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>

alt text

4 - Handle the Authorization Response

The HTTP body contains the result parameters with a content-type of application/x-www-form-urlencoded. A successful response contains the following parameters:

code

A single-use authentication code that is valid for five minutes.

id_token

A JSON web token containing the user’s identify information.

state

The state passed by the init function.

user

A JSON string containing the data requested in the scope property. The returned data is in the following format:

{ "name": { "firstName": string, "lastName": string }, "email": string }

To handle the response, add an event listener:

//Listen for authorization success
document.addEventListener('AppleIDSignInOnSuccess', (data) => {
     //handle successful response
});

//Listen for authorization failures
document.addEventListener('AppleIDSignInOnFailure', (error) => {
     //handle error.
});

Font: