# Connect to Custom Azure Applications/APIs

{% hint style="info" %}
This guide covers authenticating with custom Azure Applications/APIs. You will need your Azure and PixieBrix Administrator to assist with the instructions in this guide.
{% endhint %}

## Create/Register an Azure Application

{% hint style="info" %}
📚 Azure documentation to [Register an Application](https://learn.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app) and [Register an application with the Microsoft identity platform](https://learn.microsoft.com/en-us/graph/auth-register-app-v2)
{% endhint %}

1. Visit the Enterprise Applications page
2. Click New application<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Fs5yowYR5KBoJyPdAXMjY%2FUntitled%20-%202023-11-01T123744.630.png?alt=media&#x26;token=4acd65d7-0b81-428a-aed9-0086222977d1" alt="" width="464"><figcaption></figcaption></figure>
3. Click Create your own application<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FpMyMCTCU9xDKsKGLaaak%2FUntitled%20-%202023-11-01T123756.024.png?alt=media&#x26;token=e8774e1d-e1c2-4a5f-a595-e54ab4505139" alt="" width="548"><figcaption></figcaption></figure>
4. Provide a name for your application and click “Create”<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FGDqauADPZg94ln01mLpL%2FUntitled%20-%202023-11-01T123809.504.png?alt=media&#x26;token=ed171c81-6ae0-442d-9d0b-cbcaf6e49da7" alt="" width="428"><figcaption></figcaption></figure>

### Assign Users and Groups

1. Assign one or more users/groups to the application for them to access the application<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FW1Gpt9RyAVzr3O9UCW0V%2FUntitled%20-%202023-11-01T123842.950.png?alt=media&#x26;token=543bcfdd-838a-4409-bd52-1cd97bb2a80a" alt=""><figcaption></figcaption></figure>

### Configure the Application Registration

1. Open the Application Registration for your application. To locate it from the Omnibar, search for the name and select the “Application” entry<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2F7YvXmYw4qNolJCsGelqi%2FUntitled%20-%202023-11-01T123855.579.png?alt=media&#x26;token=e47ead91-b2b2-472a-9fce-e29ee512a53f" alt=""><figcaption></figcaption></figure>
2. Open the Authentication settings<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Fhz5MzRpbbk6tlB95o3DN%2FUntitled%20-%202023-11-01T123914.055.png?alt=media&#x26;token=464eca9a-2a3e-4644-a1b8-43e1cf8b1a1f" alt=""><figcaption></figcaption></figure>
3. Click “Add a platform”<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FroQWoZtKZVv54Fo9GA2C%2FUntitled%20-%202023-11-01T123929.591.png?alt=media&#x26;token=d1dd5203-562a-4b26-8ae2-36358ef1015b" alt=""><figcaption></figcaption></figure>
4. Choose Single-page Application<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FT6CmHnGpjmcITlOrKjWU%2FUntitled%20-%202023-11-01T123949.506.png?alt=media&#x26;token=d30251f4-7f8b-4c22-9a50-b2bd344bce63" alt=""><figcaption></figcaption></figure>
5. Provide the following Custom Redirect URL. (The `[chromiumapp.org](<http://chromiumapp.org>)` origin is a special origin that the Chrome Web Browser uses client OAuth2 flow redirects.)

   ```
   <https://mpjjildhmpddojocokjkgmlkkkfjnepo.chromiumapp.org/oauth2>
   ```

### Configure API Permissions

1. Select Manage > API Permissions<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FkXwkxqwJS92CcLkLFxpy%2FUntitled%20-%202023-11-01T124006.391.png?alt=media&#x26;token=9041907d-f824-4528-8861-4e7bf4e78f37" alt=""><figcaption></figcaption></figure>
2. Add some base permissions. To allow sign in, select “Microsoft Graph” and choose the Open ID permissions:<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FbPdWQUmdyyVIetGgpEbm%2FUntitled%20-%202023-11-01T124019.771.png?alt=media&#x26;token=00c4bc28-a9fc-4d51-aff9-e8cf7e1652c9" alt=""><figcaption></figcaption></figure>

### Record the Application and Directory ID

* Return to the Overview page for the application you created<br>

  <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FMTM0QCj1yQFmDFEMDUYY%2FUntitled%20-%202023-11-01T124047.504.png?alt=media&#x26;token=c425de8a-3b2f-4b3f-a2f3-4e328d437eb0" alt=""><figcaption></figcaption></figure>
* Record the Application (client id) and Directory (tenant) ID for use with PixieBrix<br>

  <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FM6N68f748eIz8Db4frEN%2Fimage.png?alt=media&#x26;token=367520a5-c31f-4697-8262-cc56422787c7" alt=""><figcaption></figcaption></figure>

## Configure the PixieBrix Microsoft Azure Integration

{% hint style="info" %}
To complete these steps for your team, you must be an Admin on your PixieBrix team. Alternatively, for development & testing, you may configure the integration in the Extension Console
{% endhint %}

1. From the Integrations section in the Admin or Extension Console, click the + Add Integration button in the top right corner.<br>

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>To set up a cloud integration that your team can access, head to the <a href="https://app.pixiebrix.com/">Admin Console</a>. <em>(If you'd rather set up something locally, use the Extension Console. Learn more about</em> <a data-mention href="../configuring-integrations">configuring-integrations</a>.<em>)</em></p></div>

2. Search for and select the Microsoft Azure integration.

3. Provide the following information for the Application
   * Pushdown (read-only): the integration configuration will be pushed to your team members. They will each authenticate individually with the application
   * Application (client) ID: from the Application Registration Overview
   * Directory (tenant) ID: from the Application Registration Overview
   * Scope:
     * See the individual brick documentation (e.g. xxx and [Lookup Microsoft Workbook Sheets](https://www.pixiebrix.com/marketplace/93ca83df-fb4f-4b0b-9183-47c6d8ffcf26/))
     * You likely also want to set the [offline\_access](https://learn.microsoft.com/en-us/graph/permissions-reference#offline_access) scope, which will fetch a refresh token and reduce the number of times you need to re-authenticate
     * See the [Microsoft Graph permissions reference](https://learn.microsoft.com/en-us/graph/permissions-reference) for all available scope names<br>

       <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Fi7Nc3EJGjHfORQ45oase%2Fimage.png?alt=media&#x26;token=8851ecbf-0fdb-4f3d-af36-888f06d36e66" alt=""><figcaption></figcaption></figure>

## Testing the Integration Configuration in a Mod

1. Create a new Mod in the Page Editor, e.g., a Trigger
2. Add an HTTP Request Brick
3. Configure the brick:
   1. URL: [`https://graph.microsoft.com/v1.0/me`](https://graph.microsoft.com/v1.0/me)
   2. Integration Configuration: select the Integration Configuration you configured in the previous section
   3. Method: get<br>

      <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FqBBFt3ukqmHwL8HKMlX0%2Fimage.png?alt=media&#x26;token=c8d7440b-7a82-4269-9311-71e104c515b3" alt=""><figcaption></figcaption></figure>
4. Run the Mod
5. Your browser will open the OAuth2 authentication flow
6. After you authenticate, the Output Panel will show your user’s profile information:<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FSwNsHl2ld1laVAZl5VcQ%2Fimage.png?alt=media&#x26;token=79f9ab49-59a5-4b34-9bdb-045d3b8f5502" alt=""><figcaption></figcaption></figure>
