Request access token with id_token, ADFS 2016 and react-adal

问题

I've got a client side app which I'm authenticating with ADFS and react-adal and I've got most of it working but can't seem to find a way to request the access token (and therefore refresh token) with the id_token which is all I get in return from ADFS.

At the moment the React app forwards the user to ADFS to sign in, this then authenticates the token and I want to be able to get the userinfo (Name, Surname, roles etc...) from the /adfs/userinfo endpoint but need the bearer token to do so.

Currently my componentWillMount function looks like this

componentWillMount = () => {
    axios.get('/home/AuthenticationContext').then((response) => {
        this.adalAuthentication = new AdalAuthentication(response.data);
        if (this.adalAuthentication.authenticateToken()) { // checks if authenticated with adfs, not app
            var error = this.adalAuthentication.Instance.getLoginError();
            if (error === "") {
                axios({
                    method: 'get',
                    url: '/identity/completeLogin/' + this.adalAuthentication.Instance.getCachedToken(this.adalAuthentication.Instance.config.clientId)
                }).then((response) => { console.log(response) })
                this.setState({
                    loggedIn: true
                });
            }
            else {
                this.setState({
                    error: error
                });
            }
        }
}

The point I'm stuck at is the second axios get method, this hit a controller action on the same origin.

    [HttpGet("completeLogin/{id_token}")]
    public async Task<IActionResult> CompleteLogin(string id_token)
    {
        var client = new HttpClient();
        client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer" + id_token);
        var response = await client.GetAsync("https://adfs.domain/adfs/userinfo");

        return View();
    }

Of course the response returns unauthorised. I can't find any information about how to get an access token from the id_token or any way to get an access token from React in the front end using the Adal.js library, has anyone got past this?

EDIT: the only info I get from the id_token is below.

"userName":"bob@email.com",
"profile": {
    "aud":"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    "auth_time":1544777683,
    "exp":1544793006,
    "iat":1544789406,
    "iss":"https://adfs.domain/adfs",
    "mfa_auth_time":1544777705,
    "nonce":"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    "sid":"x-x-x-xx-xxxxxxxxxx-xxxxxxxx-xxxxxxxxxx-xxxx",
    "sub":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "unique_name":"T1234\\bob",
    "upn":"bob@email.com"
}

回答1:

This seems to be a general problem with the adal.js library.

There is a workaround described here that may be of help.

Essentially, change the GET to a POST.

来源：https://stackoverflow.com/questions/53781131/request-access-token-with-id-token-adfs-2016-and-react-adal

标签

reactjs

adal.js

adfs4.0