invalid_client when using sign in with apple in browser

Hi guys, I'm trying to use sign in with apple in javascript, I followed the guider in the website, and almost find everything I can find in Google, but nothing help, here is my situation:

  1. I create a new App: com.yuhan.test.app
  2. I create a new service ID: com.yuhan.test.service
  3. configure a domain and return url domain: tts.perterpon.com returnURL: https://tts.perterpon.com/login
  4. create a new key for Sign In with Apple.
  5. my html code is here, it's easy, but it always told me invalid_client, I think I have done anything I need to do, can somebody help me? Thank you so much.
  6. you can test my online web site: https://tts.perterpon.com/login.html

`<html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <title>Apple Login</title> </head> <body> <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js%22%3E%3C/script> <div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div> <script type="text/javascript"> AppleID.auth.init({ clientId: 'com.yuhan.test.service', scope: 'name email', redirectURI: 'https://tts.perterpon.com/login.html', usePopup: true });

const buttonElementNew = document.getElementById('appleid-signin');
buttonElementNew.addEventListener('click', async () => {
  try {
    const data = await AppleID.auth.signIn()

    console.log('Try/Catch Data', data.authorization.id_token);
    const formData = new FormData();
    formData.append("token", data.authorization.id_token);
    await fetch("", {
        method: "POST",
        body: formData,
    });          
    // Handle successful response.
  } catch (error) {
    // Handle error.
  }
});
</script>

</body> </html>`

Im experiencing the same issue as well

invalid_client when using sign in with apple in browser
 
 
Q