Proxy provider

When you use the proxy provider, you can use your backend authentication (such as Auth2.0 On-Behalf-Of flow) to power the Microsoft Graph Toolkit by routing all calls to Microsoft Graph through your own backend.

Your backend service must expose an API that is called for every call to Microsoft Graph. For example, when a component attempts to get a resource, the ProxyProvider instead calls your base API and appends that resource.

https://graph.microsoft.com/v1.0/me => https://myurl.com/api/GraphProxy/v1.0/me

Your API implementation should then call Microsoft Graph on behalf of the user and return the results to the component.

For an implementation example, see the ASP.NET MVC sample.

To learn more about authentication providers, see providers.

Get started

You can initialize the proxy provider in HTML or JavaScript. You should do it only once per page.

Initialize in your HTML page

Initializing the proxy provider in HTML is the simplest way to define your own route for custom server-side authentication. Use the mgt-proxy-provider component to set the graph-proxy-url. It sets the defined proxy provider as the global provider.

<mgt-proxy-provider
  graph-proxy-url="https://myurl.com/api/GraphProxy"
></mgt-proxy-provider>

Initialize in JavaScript

You can provide more options by initializing the provider in JavaScript.

import { Providers } from "@microsoft/mgt-element";
import { ProxyProvider } from "@microsoft/mgt-proxy-provider";

Providers.globalProvider = new ProxyProvider(
  "https://myurl.com/api/GraphProxy"
);

Optionally, you can send additional headers with each request to your proxy api by using an optional function as the second parameter in the constructor.

import { Providers } from "@microsoft/mgt-element";
import { ProxyProvider } from "@microsoft/mgt-proxy-provider";

Providers.globalProvider = new ProxyProvider(
  "https://myurl.com/api/GraphProxy",
  async () => {
    return {
      header: "value",
      header2: "value2",
    };
  }
);

It's useful when you need to pass tokens or other headers to your backend.

If you're using the mgt-login component, you should also specify the login and logout functions for the provider:

import { Providers } from "@microsoft/mgt-element";
import { ProxyProvider } from "@microsoft/mgt-proxy-provider";

let provider = new ProxyProvider("https://myurl.com/api/GraphProxy");
provider.login = () => {
  /* will be called when "Sign In" is clicked */
};
provider.logout = () => {
  /* will be called when "Sign Out" is called */
};

Providers.globalProvider = provider;