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 will be called for every call to Microsoft Graph. For example, when a component attempts to get a resource, the ProxyProvider will instead call your base API and append 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 this 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. This will set the defined proxy provider as the global provider.

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

Attribute	Description
graph-proxy-url	Base URL for the proxy API.

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",
    };
  }
);

This is useful when you need to pass tokens or other headers to your backend.

If you will be 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;