examples/clients/auth0/vanilla.html

<html>
<head>
<meta charset="utf-8" />
<script>
var authUrl = 'https://php-crud-api.auth0.com/authorize'; // url of auth0 '/authorize' end-point
var clientId = ''; // client id as defined in auth0
var audience = 'https://your-php-crud-api/api.php'; // api audience as defined in auth0
var url = '/api.php/records/posts?join=categories&join=tags&join=comments&filter=id,eq,1';

function requestAPI() {
    var match = RegExp('[#&]access_token=([^&]*)').exec(window.location.hash);
    var accessToken = match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    if (!accessToken) {
        document.location = authUrl+'?audience='+audience+'&response_type=token&client_id='+clientId+'&redirect_uri='+document.location.href;
    } else {
        document.location.hash = '';
        var req = new XMLHttpRequest();
        req.onreadystatechange = function () {
            if (req.readyState==4) {
                console.log(req.responseText);
                try {
                    document.getElementById('output').innerHTML = JSON.stringify(JSON.parse(req.responseText), undefined, 4);
                } catch (error) {
                    document.getElementById('output').innerHTML = req.responseText;
                }
            }
        }
        req.open("GET", url, true);
        req.setRequestHeader('X-Authorization', 'Bearer '+accessToken);
        req.send();
    }
};

window.onload = function() {
    requestAPI()
    document.getElementById('request-btn').onclick = function(e) {
        e.preventDefault()
        requestAPI()
    }
}
</script>
</head>
<body>
<p>
    <button type="button" id="request-btn">Request API</button>
</p>
<pre id="output"></pre>
</body>
</html>