Using fetch, we get a GET request on a web API using Azure authentication and passport
node server
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// API endpoint app.get("/hello", passport.authenticate('oauth-bearer', {session: false}), (req, res) => { console.log('User info: ', req.user); console.log('Validated claims: ', req.authInfo); if ('scp' in req.authInfo && req.authInfo['scp'].split(" ").indexOf("demo.read") >= 0) { // Service relies on the name claim. res.status(200).json({'name': req.authInfo['name']}); } else { console.log("Invalid Scope, 403"); res.status(403).json({'error': 'insufficient_scope'}); } } ); |
client
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// helper function to access the resource with the token function callApiWithAccessToken(endpoint, token) { const headers = new Headers(); const bearer = `Bearer ${token}`; headers.append("Authorization", bearer); const options = { method: "GET", headers: headers }; fetch(endpoint, options) .then(response => response.json()) .then(response => { logMessage("Web API returned:\n" + JSON.stringify(response)); }).catch(error => { logMessage("Error calling the Web api:\n" + error); }); } |
Using fetch, we get a POST request on a web API using Azure authentication and passport
node server
|
1 2 3 4 5 6 7 8 |
app.post("/hello", passport.authenticate('oauth-bearer', {session: false}), (req, res) => { console.log(`POST on /hello`); console.log('message: ', req.body); res.status(200).json({'message':`received`}); } ); |
client
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function callApiWithAccessToken(endpoint, token) { const headers = new Headers(); const bearer = `Bearer ${token}`; headers.append("Authorization", bearer); headers.append("Content-Type", "application/json"); headers.append("Accept", "application/json"); let data = { message: 'please call me' }; const options = { method: "POST", headers: headers, body: JSON.stringify(data) }; fetch(endpoint, options) .then(response => response.json()) .then(response => { logMessage("Web API returned:\n" + JSON.stringify(response)); }).catch(error => { logMessage("Error calling the Web api:\n" + error); }); } |
Passing a form data to the Web API with no authentication
client
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<form name='emailForm'> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary" onclick="passEmailToApi(event)">Submit</button> </form> function passEmailToApi(e) { e.preventDefault(); // stop the submission let form = document.getElementsByName('emailForm')[0]; storeEmailData(form[0].value, form[1].value); } function storeEmailData(email) { const headers = new Headers(); headers.append("Content-Type", "application/json"); headers.append("Accept", "application/json"); let data = {message: 'please call me'}; const options = { method: "POST", headers: headers, body: JSON.stringify(data) }; fetch('http://localhost:5000/saveMessage', options) .then(response => response.json()) .then(response => { logMessage("Web API returned:\n" + JSON.stringify(response)); }).catch(error => { logMessage("Error calling the Web api:\n" + error); }); } |