Last active
July 12, 2019 08:01
-
-
Save hampusborgos/f8115db70a2cc61b7910c7cab1cba4d6 to your computer and use it in GitHub Desktop.
An example using adal.js with React.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Set up the ADAL instance, we will use the throughout the app | |
export var adalInstance = new AuthenticationContext({ | |
instance: 'https://login.microsoftonline.com/', | |
// The client ID of the app from the Azure Portal | |
clientId: 'aabbccee-aabb-1122-3344-556677889900', | |
// Where do we want to go after logging out | |
postLogoutRedirectUri: window.location.origin, | |
endpoints: { | |
// The domain of API (requsets are made TO) | |
// And the same client id as above | |
"https://YOURAPIDOMAIN.azurewebsites.net/": "aabbccee-aabb-1122-3344-556677889900" | |
} | |
}) | |
export function authenticateToken() { | |
if (adalInstance.getCachedUser()) { | |
// If we have a cached login, use it | |
return true | |
} | |
if (adalInstance.isCallback(window.location.hash)) { | |
// This happens after the AD login screen, | |
// handleWindowCallback will use the hash to | |
// complete the login | |
adalInstance.handleWindowCallback() | |
return true | |
} | |
// Not logged in | |
return false | |
} | |
export function azureApiRequest(method, resource, body) { | |
var resourceUrl = apiUrl + resource; | |
// Use the client ID of your app for this call, | |
// same as in the configuration earlier | |
var bearerToken = adal.getCachedToken('aabbccee-aabb-1122-3344-556677889900') | |
var opts = { | |
method: method, | |
headers: { | |
'Authorization': 'Bearer ' + bearerToken | |
} | |
} | |
// I'm using JSON for my API, you can change this to your | |
// heart's desire | |
if (body) { | |
opts.body = JSON.stringify(body) | |
opts.headers['Content-Type'] = 'application/json' | |
} | |
return fetch(resourceUrl, opts) | |
.then(response => { | |
return response.json() | |
}).catch(function(error) { | |
console.log("Network problem: " + error) | |
// Inspect the error further to see what is actually wrong | |
} | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import {adalInstance, authenticateToken, azureApiRequest} from './AdalAuthentication'; | |
class App extends React.Component | |
{ | |
constructor() { | |
this.state = { | |
loggedIn: false, | |
appInfo: null | |
} | |
} | |
componentWillMount() { | |
if (authenticateToken()) { | |
this.setState({ | |
loggedIn: true | |
}) | |
azureApiRequest('GET', '/Info').then( | |
appInfo => this.setState({ | |
appInfo: appInfo | |
}) | |
) | |
} | |
else { | |
adalInstance.login() | |
} | |
} | |
handleLogout() { | |
adalInstance.logout() | |
} | |
render() { | |
if (this.state.loggedIn) { | |
if (this.state.appInfo) { | |
return <MyApp appInfo={this.state.appInfo} /> | |
} | |
else { | |
return <h1>Loading ...</h1> | |
} | |
} | |
else { | |
return <h1>Not authenticated</h1> | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Yea, this "example" doesn't work and am wondering if anyone has managed to track down one that does?
Making an attempt to wrap a React app in AAD access via TypeScript and the best I can tell, this is either incomplete, incorrect or out of date? And yes, I have the
@type/react-adal
added to the app.