Hi,
I am trying to integrate with Apple Sign-In on my company's website and before I deploy any code out on the server. I want to first do a quick PoC on my Mac locally, and see how far I can get through this.
Below is a very simple setup I have within my localhost index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Apple Sign-In</title>
<meta http-equiv="Content-Type" content="application/x-www-form-urlencoded" />
</head>
<style>
.signin-button {
width: 400px;
height: 100px;
}
</style>
<body>
<script type="text/javascript" src="//appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/enUS/appleid.auth.js"></script>
<div id="appleid-signin" data-color="black" data-border="true" data-type="sign in" class="signin-button"></div>
<script type="text/javascript">
const randomhexcolorcode = () => {
let n = (Math.random() * 0xfffff * 1000000).toString(16);
return n.slice(0, 6);
};
AppleID.auth.init({
clientId : '7xyzabc123.org.mydomain.mysubdomain.client',
scope : 'name email',
redirectURI : '//example-app.com/redirect',
state : randomhexcolorcode().toString(),
responseType: 'code',
responseForm: 'formpost',
nonce : randomhexcolorcode().toString(),
usePopup : false
});
</script>
</body>
</html>
However, On page load, after I click on the Sign-In CTA, which is the very first step for Apple Authorization and to get the AuthCode.
I always get redirected to the URL below with the InvalidClient error.
https://appleid.apple.com/auth/authorize?client_id=7xyzabc123.org.mydomain.mysubdomain.client'&redirect_uri=https%3A%2F%2Fexample-app.com%2Fredirect&response_type=code%20id_token&state=da9a9e&scope=name%20email&nonce=8bab5e&response_mode=form_post&frame_id=3af8e9dc-52fa-47c3-8659-78c33ac513b4&m=12&v=1.5.3
Is this because of my testing locally and Does Apple require the referrer URL to be from a proper domain and not localhost?
Do I need to deploy this on a Dev or Test server to test this properly? Which would be so much time-consuming.
I have spent quite some hours now trying to hash this out. So any comments or suggestions will be very helpful.
Thank You,
Kunal
Selecting any option will automatically load the page