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
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
