I tried to connect CloudFlare Access to Apple Sign, because as Apple user I would like to use Apple-IDs for Single-Sign-On for all my web application and SSH boxes.
So I configured in the generic OIDC Apple Sign parameters and I discovered that Apple does not support correctly OIDC from the frontend.
So I build a proxy bridge with Workers to proxy the “state” parameter to Apple Sign.
However, when Apple callback makes a POST request to CloudFlare Access, I get an error 400 back. I discovered, that CloudFlare prefers to be callback called by a GET request where the “state” and “code” parameter is included in the URL. Then it seem to work, but CloudFlare gets an internal error, because it probably tries to fetch a token from my Workers proxy bridge.
Finally, I gave up, as it would be better if CloudFlare would include directly the Apple Sign Button inside CloudFlare Access.
@CloudFlare: Could you please include Apple-Sign?
It works nearby: I get a response of Apple Sign In and I transform their POST request into a GET request:
Unfortunately, CloudFlare Access seems to have a problem to fetch the Apple token, but I can do it manually with Postman. Is there anyway to debug at CloudFlare Access side, why it can’t fetch the token at Apple?
Here is a nearby proof of concept video:
Here is the source code of my worker:
async function handleRequest(request) {
const { searchParams } = new URL(request.url)
let redirect_uri = searchParams.get('redirect_uri')
let state = searchParams.get('state')
console.log(redirect_uri)
console.log(state)
var html = `<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Aionda GmbH">
<meta name="appleid-signin-client-id" content="com.aionda.access">
<meta name="appleid-signin-scope" content="name email">
<meta name="appleid-signin-redirect-uri" content="https://id.aionda.com/access/callback">
<meta name="appleid-signin-state" content="` + state +`">
<meta name="appleid-signin-use-popup" content="false"> <!-- or false defaults to false -->
<title>Aionda Single Sign On</title>
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
<!-- Custom styles for this template -->
</head>
<body>
<div class="container">
<main>
<div class="py-5">
<h2>Anmeldung über Apple-ID</h2>
<div class="col-md-12">
<div id="appleid-signin" class="signin-button" data-color="black" data-border="true" data-type="sign in"></div>
</div>
</div>
</main>
</div>
</body>
</html>`
return new Response(html, {
headers: {
"content-type": "text/html;charset=UTF-8",
},
})
}
async function handleRequestCallback(request) {
const formData = await request.formData()
const body = {}
for (const entry of formData.entries()) {
body[entry[0]] = entry[1]
}
var html = `<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<body>
Redirect to CloudFlare
<script>
window.location = ` + '"https://aionda.cloudflareaccess.com/cdn-cgi/access/callback?state=' + body['state'] + "&code=" + body['code'] + '";' + `
</script>
</body>
</html>`;
return new Response(html, {
headers: {
"content-type": "text/html",
}
})
}
addEventListener("fetch", event => {
if (event.request.method === "POST") {
return event.respondWith(handleRequestCallback(event.request))
}
return event.respondWith(handleRequest(event.request))
})
Hi @ferraro,
You may want to open a Product Request for this here:
That allows users to vote on it and may bring it to the attention of the product teams better.
Seems a bit “interesting” to me that Coudflare’s own Dashboard only allows Apple ID as the only other 3rd party signin, but they don’t allow their customers to offer this method with Access (yet they allow 13 other signin methods)???
Surely when they were developing the logic into their own dashboard, it would have been a good time to also hook it up to Access.
They absolutely do. It’s just subject to an SSO tax.
In case you are wondering how it triggers:
You must enroll your organization domain to the SSO (no @gmail.com, @hotmail.com, @outlook.com, any personal email domain) so that the email address input field can detect and change the function of the button.
It’s been over 2 years at this point and there is still no Apple identity provider for Access. Has there been any change with the OIDC provider to work properly with Sign In with Apple?