Getting access token using Auth code flow in Outlook web add-in

Question

After all my research and reading Microsoft docs, am unable to conclude how to generate access token using auth code flow in outlook web add-ins. I can successfully generate access token using implicit grant flow with the help of Dialog API which simply opens up URL and we read access token from address bar.

To be more secured , I am trying to generate access token to graph API/(custom SharePoint sites) using registered app in azure utilizing auth code flow.

Azure app Settings: API permissions added under Microsoft Graph. [User.Read, Sites.Read.All] Redirect Web URI: myapp/Auth_Result Redirect SPA URI: myapp/Auth_Result_SPA

Code in Outlook Web add-in:

Using Dialog API I open myapp/Auth page which redirects to

https://login.microsoftonline.com/<Tenant ID>/oauth2/v2.0/authorize
?client_id=<Client ID>
&response_type=code
&redirect_uri=https%3A%2F%2Flocalhost%3A44333%2FAuth_result.html
&response_mode=query&scope=https%3A%2F%2Fgraph.microsoft.com%2Fuser.read
&state=12345

The above URL generates Authorization code in redirected page myapp/Auth_result which is read.

Code in Auth_Result page

function GetAccessToken(authCode) {
    try {
        var url = 'https://login.microsoftonline.com/<Tenant ID>/oauth2/v2.0/token';
        var params = 'client_id=<Client ID>&scope=https%3A%2F%2Fgraph.microsoft.com%2Fuser.read&code=' + authCode + '&redirect_uri=https://localhost:44333/Auth_Result_SPA.html&grant_type=authorization_code';


        var xhr = new XMLHttpRequest();
        xhr.open('POST', url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function (result) {
            AccessTokenCallback(result);
        }
        xhr.send(params);
    }
    catch{ }
}

The above request fails with

Access to XMLHttpRequest at 'https://login.microsoftonline.com/<Tenant ID>/oauth2/v2.0/token' from origin 'https://localhost:44333' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

MessageRead.js:780 POST https://login.microsoftonline.com/<Tenant ID>/oauth2/v2.0/token net::ERR_FAILED

App domains in Manifest

<AppDomain>https://login.microsoftonline.com/<Tenant ID>/oauth2/v2.0/token</AppDomain>
  <AppDomain>https://login.microsoftonline.com</AppDomain>
  <AppDomain>https://localhost:44333</AppDomain>
  <AppDomain>https://localhost:44333/Auth</AppDomain>
  <AppDomain>https://localhost:44333/Auth_Result</AppDomain>
  <AppDomain>https://localhost:44333/Auth_Result_SPA</AppDomain>
  <AppDomain>https://graph.microsoft.com</AppDomain>

I am not sure what am I missing? Now I am questioning is it even possible to use auth code flow in outlook web add-in?

Guys any suggestions would be helpful.

Thanks

------Edited-------------

I tried above solution with redirect URI as Web platform.

If I use SPA platform redirect URI in azure app Authentication then I get following error:

For some reason image is not coming up. Error Text:

AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption.

[![enter image description here][1]][1]

Answer 1

Looks like the immediate problem is that your Azure AD client needs to be a Single Page App as in step 6 of my post, so that you get past the CORS error.

DESKTOP FLOW?

I believe you are operating within the context of a desktop app (Outlook). If so then the official OAuth option would be to use the following ingredients:

• Authorization Code Flow (PKCE)
• Use the system browser to login
• Listen for the response on a loopback url, such as http://localhost:8000

See my Desktop Tutorial + Code Sample for an example of this

Answer 2

Thanks for your replies, I managed to generate access token using auth code flow. It turned out I wasn't providing code challenge and did not fully understood the flow of authentication particularly for Outlook web add-ins.

The solution is here. Requirement to make this solution work.

1. Replace: <Tenant ID> = your tenant id from Azure App registration
2. Replace: <Client ID> = your client id from Azure App registration
3. Set https://localhost:44300/Auth_Result_SPA as your redirect URI in Authentication-> SPA platform.
4. Set Scope to your requirement, and make sure you add the scope in API permissions after registering you application in Azure.
5. Make sure the app url matches when you load project in visual studio. app url = SSL URL in TestGraphWeb project properties

Refernces:

1. Refer this to generate code challenge and code verifier
2. Refer this for auth code flow information.

This is sample Outlook web add-in with Application Name as "TestGraph". When app is loaded in task pane it will generate access token using Auth code flow silently. This app will pop up dialog if user action is required to generate authentication code. After generating access token it will load page with only button "Refresh Access Token" which will generate new access token and refresh token.