JavaScript
The Javascript code of our domain.com/callback page
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>JavaScript Example</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<p id="loading">
loading...
</p>
</div>
<script>
window.onload = function () {
const CONFIG = {
API_URL: "https://xxx.api.com",
CALLBACK_URL: "https://localhost:3000/callback",
};
if (!code) {
const loadingElement = document.querySelector("#loading");
axios
.get(CONFIG.API_URL + "/auth/oidc?redirect_uri=" + CONFIG.CALLBACK_URL)
.then(response => {
window.location.href = response.data.composed_url;
})
.catch(error => {
loadingElement.innerHTML = "Backend'e bağlanılamadı";
});
} else {
const queryString = new URLSearchParams(window.location.href);
const app = document.querySelector("#app");
const loadingElement = document.querySelector("#loading");
const code = queryString.get("code");
axios
.post(CONFIG.API_URL + "/auth/code", {
code: code,
redirect_uri: CONFIG.CALLBACK_URL,
})
.then((response) => {
const userElement = document.createElement("p");
userElement.innerHTML = "Email: " + response.data.user.email;
app.appendChild(userElement);
})
.catch((error) => {
loadingElement.innerHTML = "Giriş yaparken hata.";
});
}
}
</script>
</body>
</html>
info
- This repo contains a Plain Javascript based app that expresses the Implicit flow of OpenID Connect - Plain Javascript - Implicit Flow.