FEED Validator

for Atom and RSS and KML

Sorry

This feed does not validate.

line 1, column 1006: Invalid email address: Elio Struyf (15 occurrences) [help]

... 23:02 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf ...
                                             ^

In addition, interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

line 1, column 774: Self reference doesn't match document location [help]

...  rel="self" type="application/rss+xml"/><item><title>Fix admin consent f ...
                                             ^

line 1, column 1015: An item should not include both author and dc:creator (15 occurrences) [help]

... 00</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:crea ...
                                             ^

line 17, column 0: content:encoded should not contain data-lang attribute (58 occurrences) [help]
```
&lt;div class="highlight" title="Token retrieval error" wrap="true"&gt;&lt;p ...
```
line 47, column 0: content:encoded should not contain data-lqip attribute (37 occurrences) [help]
```
&lt;img data-lqip="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAY ...
```
line 2959, column 0: content:encoded should not contain controls attribute [help]
```
&lt;video width="100%" controls&gt;
```

Source: http://feeds.feedburner.com/estruyf

<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:georss="http://www.georss.org/georss" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" version="2.0"><channel><title>Elio Struyf</title><link>https://www.eliostruyf.com/</link><description>SharePoint Branding & Development Blog</description><generator>Hugo</generator><language>en-us</language><lastBuildDate>Mon, 22 Apr 2024 11:23:02 +0000</lastBuildDate><atom:link href="https://www.eliostruyf.com/feed.xml" rel="self" type="application/rss+xml"/><item><title>Fix admin consent for SP token retrieval flows in SPFx</title><link>https://www.eliostruyf.com/fix-admin-consent-sp-token-retrieval-flows-spfx/</link><pubDate>Mon, 22 Apr 2024 11:23:02 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/fix-admin-consent-sp-token-retrieval-flows-spfx/</guid><description>There have been a couple of changes in SharePoint recently related to retrieving access tokens for your SharePoint Framework solutions. One of the changes is that MSAL V3 now uses the /_api/Microsoft.SharePoint.Internal.ClientSideComponent.Token.AcquireOBOToken API to retrieve the access token. Typically, this API was only used when loading your solution from Microsoft Teams, but it will now also be used when loading your solution from SharePoint.</description><content:encoded>There have been a couple of changes in SharePoint recently related to retrieving access tokens for your SharePoint Framework solutions. One of the changes is that MSAL V3 now uses the <code>/_api/Microsoft.SharePoint.Internal.ClientSideComponent.Token.AcquireOBOToken</code> API to retrieve the access token. Typically, this API was only used when loading your solution from Microsoft Teams, but it will now also be used when loading your solution from SharePoint.
Due to this change, one customer started to experience issues with their SPFx solution. The solution used the <code>@pnp/graph</code> library to retrieve the access token and call the Microsoft Graph API. They noticed the solution was no longer working and were redirected to the <code>/_forms/spfxsinglesignon.aspx</code> page.
The <code>/_forms/spfxsinglesignon.aspx</code> page is used to overcome an issue with third-party cookies or when something goes wrong with token retrieval.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

You can read more about it in the <a href="https://www.eliostruyf.com/browser-refreshing-sharepoint-page/">Help my browser keeps refreshing my SharePoint page</a> article.

</blockquote>
<h2 id="the-issue">The issue</h2>
When looking into the issue, I saw failing calls to <code>/_api/Microsoft.SharePoint.Internal.ClientSideComponent.Token.AcquireOBOToken?resource=&quot;https://graph.microsoft.com&quot;&amp;clientId=&quot;72b90cbc-8519-4213-8c4a-1f3527b9f5f8&quot;</code>.
The error message that was returned was the following:
<figure class="codeblock_titled codeblock_wrapped">
<figcaption class="codeblock_titled__header">Token retrieval error</figcaption>
<div class="highlight" title="Token retrieval error" wrap="true"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json">{
 &#34;odata.error&#34;: {
 &#34;code&#34;: &#34;10001&#34;,
 &#34;message&#34;: {
 &#34;lang&#34;: &#34;en-US&#34;,
&#34;value&#34;: &#34;AADSTS65001: The user or administrator has not consented to use the application with ID &#39;00000003-0000-0ff1-ce00-000000000000&#39; named &#39;Office 365 SharePoint Online&#39;. Send an interactive authorization request for this user and resource. Trace ID: 322f4528-fb10-4407-89e4-9de76da38900 Correlation ID: 827721a1-4047-8000-9395-cd41d1d50a48 Timestamp: 2024-04-22 10:12:52Z&#34;
 }
 }
}</code></pre></div>
</figure>
<blockquote class='info'>
<div class='mb-2'>
info
</div>

The <code>72b90cbc-8519-4213-8c4a-1f3527b9f5f8</code> client ID, is the <code>SharePoint Online Client Extensibility Web Application Principal</code> Entra app in my tenant, and this app is used by SharePoint Framework solutions to retrieve the access token.

</blockquote>
What was weird is that the error message mentioned the <code>00000003-0000-0ff1-ce00-000000000000</code> or <code>Office 365 SharePoint Online</code> application ID, as this trust should be automatically set.
When the page got redirected to the <code>/_forms/spfxsinglesignon.aspx</code> page, the following message was returned in the query string:
<figure class="codeblock_titled codeblock_wrapped">
<figcaption class="codeblock_titled__header">Token retrieval error</figcaption>
<div class="highlight" title="Token retrieval error" wrap="true"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text">AADSTS650057 Invalid resource. The client has requested access to a resource that is not listed in the requested permissions in the client&#39;s application registration. Client app ID 08e18876-6177-487e-b8b5-cf950c1e598c (SharePoint Online Web Client Extensibility). Resource value from request 72b90cbc-8519-4213-8c4a-1f3527b9f5f8.</code></pre></div>
</figure>
<h2 id="the-solution">The solution</h2>
The issue was that the <code>SharePoint Online Client Extensibility Web Application Principal</code> Entra app was missing the Authorized client applications for the <code>SharePoint Online Web Client Extensibility</code> app and <code>Office 365 SharePoint Online</code>.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/04/missing-authorized-client-apps.webp" title="Show image">
Show image
<img data-lqip="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk&#43;M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" src="https://www.eliostruyf.com/uploads/2024/04/missing-authorized-client-apps.webp" alt="Missing authorized client apps" style="width: auto;" class="lazyload" />
</a>
<figcaption class="caption__text">Missing authorized client apps</figcaption>
</figure>
</div>
To fix this issue, you need to add the following client IDs to the Authorized client applications of the <code>SharePoint Online Client Extensibility Web Application Principal</code> app:
<ul>
<li><code>08e18876-6177-487e-b8b5-cf950c1e598c</code> (SharePoint Online Web Client Extensibility)</li>
<li><code>00000003-0000-0ff1-ce00-000000000000</code> (Office 365 SharePoint Online)</li>
<li><code>1fec8e78-bce4-4aaf-ab1b-5451cc387264</code> (Microsoft Teams)</li>
<li><code>5e3ce6c0-2b1f-4285-8d4b-75ee78787346</code> (Microsoft Teams Web Client)</li>
</ul>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/04/authorized-client-apps.webp" title="Show image">
Show image
<img data-lqip="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk&#43;M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" src="https://www.eliostruyf.com/uploads/2024/04/authorized-client-apps.webp" alt="Authorized client apps" style="width: auto;" class="lazyload" />
</a>
<figcaption class="caption__text">Authorized client apps</figcaption>
</figure>
</div>
I do not know why those apps were missing from the configuration. They should normally be automatically added when accessing the SharePoint admin API access page. The solution started to work again once the first two client IDs were added.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/04/succesfull-token-retrieval.webp" title="Show image">
Show image
<img data-lqip="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk&#43;M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" src="https://www.eliostruyf.com/uploads/2024/04/succesfull-token-retrieval.webp" alt="Successful token retrieval" style="width: auto;" class="lazyload" />
</a>
<figcaption class="caption__text">Successful token retrieval</figcaption>
</figure>
</div></content:encoded></item><item><title>Use Playwright with Microsoft Dev Proxy on GitHub Actions</title><link>https://www.eliostruyf.com/playwright-microsoft-dev-proxy-github-actions/</link><pubDate>Fri, 29 Mar 2024 09:50:00 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/playwright-microsoft-dev-proxy-github-actions/</guid><description>Part of the process of testing the Microsoft Dev Proxy on GitHub Actions, was to use it in combination with Playwright. The advantage of this combination is that you can use the same mocked API responses which you use during development to test your solutions.
info That way you do not have to write additional code to mock your APIs in Playwright like I explained in the Test the unexpected API results with Playwright mocking article.</description><content:encoded>Part of the process of testing the <a href="https://learn.microsoft.com/en-us/microsoft-cloud/dev/dev-proxy/overview">Microsoft Dev Proxy</a> on GitHub Actions, was to use it in combination with <a href="https://playwright.dev/">Playwright</a>. The advantage of this combination is that you can use the same mocked API responses which you use during development to test your solutions.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

That way you do not have to write additional code to mock your APIs in Playwright like I explained in the <a href="https://www.eliostruyf.com/test-unexpected-api-results-playwright-mocking/">Test the unexpected API results with Playwright mocking</a> article.

</blockquote>
In this blog post, I will show you how to use Playwright in combination with the Microsoft Dev Proxy in your GitHub Actions workflow.
<blockquote class='important'>
<div class='mb-2'>
important
</div>

Before you can continue, make sure you followed the <a href="https://playwright.dev/docs/intro">Playwright - Getting started</a> instructions.

</blockquote>
<h2 id="things-to-know-before-you-start">Things to know before you start</h2>
When creating tests, your goal is to aim to a desired outcome. The Dev Proxy can be used in various ways to simulate different scenarios. One of those is to simulate random errors (by using the <code>GenericRandomErrorPlugin</code> plugin), which can be useful during local development, but not when you want to run your end-to-end tests.
Best practice is to use the Dev Proxy for mocking APIs or simulating specific scenarios during end-to-end tests. This way, you can ensure that your tests are predictable and reliable.
<h2 id="setting-up-playwright">Setting up Playwright</h2>
When you followed the <a href="https://playwright.dev/docs/intro">Playwright getting started</a> guide, you should have a basic setup in place. When you want to use Playwright with the Dev Proxy, you can add the proxy configuration to the configuration. You can do this in your <code>playwright.config.ts</code> file by adding the following code:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">playwright.config.ts</figcaption>
<div class="highlight" title="playwright.config.ts"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
3
4
5
6
7
8
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">import { defineConfig } from &#39;@playwright/test&#39;;
export default defineConfig({
 use: {
 proxy: {
 server: &#39;http://localhost:8000&#39;
 }
 }
});</code></pre></td></tr></table>
</div>
</div>
</figure>
<h2 id="configuring-the-github-actions-workflow">Configuring the GitHub Actions workflow</h2>
Once the configuration is in place, you can start configuring your GitHub Actions workflow.
<h3 id="using-a-macos-runner">Using a macOS runner</h3>
When using the macOS runner, you can start with the configuration found in the <a href="https://www.eliostruyf.com/dev-proxy-github-actions-workflow-macos/">Using Microsoft Dev Proxy in your GitHub Actions workflow on a macOS hosted VM</a> article. The only thing you need to add is the dependency installation steps.
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">GitHub Actions workflow - macOS runner</figcaption>
<div class="highlight" title="GitHub Actions workflow - macOS runner"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">name: macOS Dev Proxy with Playwright

on:
 push:
 branches:
 - main
 - dev
 workflow_dispatch:

jobs:
 test:
 timeout-minutes: 60
 runs-on: macos-latest
 steps:
 - uses: actions/checkout@v4

 - uses: actions/setup-node@v4
 with:
 cache: &#34;npm&#34;

 - name: Install dependencies
 run: npm ci

 #################################
 # Cache + install of Playwright #
 #################################
 - name: Store Playwright&#39;s Version
 run: |
 PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed &#39;s/.*@//&#39;)
 echo &#34;Playwright&#39;s Version: $PLAYWRIGHT_VERSION&#34;
 echo &#34;PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION&#34; &gt;&gt; $GITHUB_ENV

 - name: Cache Playwright Browsers for Playwright&#39;s Version
 id: cache-playwright
 uses: actions/cache@v4
 with:
 path: ~/Library/Caches/ms-playwright
 key: playwright-${{ env.PLAYWRIGHT_VERSION }}

 - name: Install Playwright Browsers
 if: steps.cache-playwright.outputs.cache-hit != &#39;true&#39;
 run: npx playwright install --with-deps

 ################################
 # Cache + install of Dev Proxy #
 ################################
 - name: Store Dev Proxy&#39;s Version
 run: |
 DEVPROXY_VERSION=$(curl -s https://api.github.com/repos/microsoft/dev-proxy/releases/latest | jq .tag_name -r)
 echo &#34;Dev Proxy&#39;s Version: $DEVPROXY_VERSION&#34;
 echo &#34;DEVPROXY_VERSION=$DEVPROXY_VERSION&#34; &gt;&gt; $GITHUB_ENV

 - name: Cache Dev Proxy
 id: cache-devproxy
 uses: actions/cache@v4
 with:
 path: ./devproxy
 key: devproxy-${{ env.DEVPROXY_VERSION }}

 - name: Install Dev Proxy
 if: steps.cache-devproxy.outputs.cache-hit != &#39;true&#39;
 run: bash -c &#34;$(curl -sL https://aka.ms/devproxy/setup.sh)&#34;

 #######################
 # Configure Dev Proxy #
 #######################
 - name: Run Dev Proxy
 run: ./devproxy/devproxy &amp;

 - name: Install the Dev Proxy&#39;s certificate
 timeout-minutes: 1
 run: |
 echo &#34;Finding certificate...&#34;
 security find-certificate -c &#34;Dev Proxy CA&#34; -a -p &gt; dev-proxy-ca.pem

 echo &#34;Trusting certificate...&#34;
 sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain dev-proxy-ca.pem
 echo &#34;Certificate trusted.&#34;

 ##########################
 # Start Playwright tests #
 ##########################
 - name: Run Playwright tests
 run: npx playwright test</code></pre></td></tr></table>
</div>
</div>
</figure>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/playwright-with-devproxy-macos.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRmgAAABXRUJQVlA4WAoAAAAQAAAACQAAAgAAQUxQSB4AAAABHyCQTfxNWxLXiIiQoSYAAca69c9A4Yj&#43;x1ciXwFWUDggJAAAAHABAJ0BKgoAAwABQCYlnAJ0AUAAAP79BJovp&#43;v8O9LqoVgAAA==" src="https://www.eliostruyf.com/uploads/2024/03/playwright-with-devproxy-macos.webp" alt="Playwright outcome with Dev Proxy on a macOS runner" style="width: 2084px;" class="lazyload" />
</a>
<figcaption class="caption__text">Playwright outcome with Dev Proxy on a macOS runner</figcaption>
</figure>
</div>
<h3 id="using-an-ubuntu-runner">Using an Ubuntu runner</h3>
Things are a bit more complicated when you want to use the Dev Proxy with Playwright on an Ubuntu virtual machine/runner. The reason is the way browsers manage certificates on Linux. On macOS, all browsers use the certificates wich are trusted in the Keychain, but on Linux, each browser has its own certificate store which complicates things.
Chromium uses the <a href="https://chromium.googlesource.com/chromium/src/+/master/docs/linux/cert_management.md">NSS Shared DB</a> to manage certificates.
Firefox does not have a central location where it looks for certificates. It will use the current profile or you can assign a <a href="https://mozilla.github.io/policy-templates/">policy template</a> to manage certificates.
When using Firefox with Playwright, it creates an in-memory profile, so you cannot add the certificate to the profile before starting the browser. The policy approach is not yet supported by Playwright <a href="https://github.com/microsoft/playwright/issues/28967">Playwright issue #28967</a>. So, in case of using Firefox, you will have to ignore the HTTPS errors.
<h4 id="ignoring-https-errors-the-simple-approach">Ignoring HTTPS errors (the simple approach)</h4>
The simple approach is to ignore HTTPS errors by setting the <code>ignoreHTTPSErrors</code> to <code>true</code> in your Playwright configuration. You can do this for all browsers or for specific browsers. Here is an example of how you can do this:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">playwright.config.ts</figcaption>
<div class="highlight" title="playwright.config.ts"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">import { defineConfig } from &#39;@playwright/test&#39;;

export default defineConfig({
 use: {
 proxy: {
 server: &#39;http://localhost:8000&#39;
 },
 // Ignore all for all browsers
 ignoreHTTPSErrors: true
 },
 projects: [
 {
 name: &#34;firefox&#34;,
 use: {
 ...devices[&#34;Firefox Desktop&#34;],
 // Ignore HTTPS errors for Firefox only
 ignoreHTTPSErrors: true
 },
 },
 ],
});</code></pre></td></tr></table>
</div>
</div>
</figure>
<h4 id="adding-the-certificate-to-the-nss-shared-db">Adding the certificate to the NSS Shared DB</h4>
If you are only using Chromium in your tests, you can add the certificate to the Chromium <a href="https://chromium.googlesource.com/chromium/src/+/master/docs/linux/cert_management.md">NSS Shared DB</a>.
To add the certificate to the NSS Shared DB, you can use the following steps:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Add certificate to NSS Shared DB - GitHub Actions steps</figcaption>
<div class="highlight" title="Add certificate to NSS Shared DB - GitHub Actions steps"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">- name: Install the Dev Proxy certificate for Chromium
 timeout-minutes: 1
 run: |
 echo &#34;Export the Dev Proxy&#39;s Root Certificate&#34;
 openssl pkcs12 -in ~/.config/dev-proxy/rootCert.pfx -clcerts -nokeys -out dev-proxy-ca.crt -passin pass:&#34;&#34;

 # echo &#34;Installing certutil&#34;
 sudo apt install libnss3-tools

 # echo &#34;Adding certificate to the NSS database for Chromium&#34;
 mkdir -p $HOME/.pki/nssdb
 certutil --empty-password -d $HOME/.pki/nssdb -N
 certutil -d sql:$HOME/.pki/nssdb -A -t &#34;CT,,&#34; -n dev-proxy-ca.crt -i dev-proxy-ca.crt
 echo &#34;Certificate trusted.&#34; </code></pre></td></tr></table>
</div>
</div>
</figure>
The highlighted line in the code snippet above shows how you can add the <code>dev-proxy-ca.crt</code> certificate to the NSS Shared DB of Chromium. The <code>CT,,</code> trust arguments add the trusted for SSL client authentication.
Here is the complete GitHub Actions workflow for Ubuntu:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">GitHub Actions workflow - Ubuntu runner</figcaption>
<div class="highlight" title="GitHub Actions workflow - Ubuntu runner"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">name: ubuntu Dev Proxy

on:
 push:
 branches:
 - main
 - dev
 workflow_dispatch:

jobs:
 test:
 timeout-minutes: 60
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4

 - uses: actions/setup-node@v4
 with:
 cache: &#34;npm&#34;

 - name: Install dependencies
 run: npm ci

 #################################
 # Cache + install of Playwright #
 #################################
 - name: Store Playwright&#39;s Version
 run: |
 PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed &#39;s/.*@//&#39;)
 echo &#34;Playwright&#39;s Version: $PLAYWRIGHT_VERSION&#34;
 echo &#34;PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION&#34; &gt;&gt; $GITHUB_ENV

 - name: Cache Playwright Browsers for Playwright&#39;s Version
 id: cache-playwright
 uses: actions/cache@v4
 with:
 path: ~/.cache/ms-playwright
 key: playwright-ubuntu-${{ env.PLAYWRIGHT_VERSION }}

 - name: Install Playwright Browsers
 if: steps.cache-playwright.outputs.cache-hit != &#39;true&#39;
 run: npx playwright install --with-deps

 ################################
 # Cache + install of Dev Proxy #
 ################################
 - name: Store Dev Proxy&#39;s Version
 run: |
 DEVPROXY_VERSION=$(curl -s https://api.github.com/repos/microsoft/dev-proxy/releases/latest | jq .tag_name -r)
 echo &#34;Dev Proxy&#39;s Version: $DEVPROXY_VERSION&#34;
 echo &#34;DEVPROXY_VERSION=$DEVPROXY_VERSION&#34; &gt;&gt; $GITHUB_ENV

 - name: Cache Dev Proxy
 id: cache-devproxy
 uses: actions/cache@v4
 with:
 path: ./devproxy
 key: devproxy-ubuntu-${{ env.DEVPROXY_VERSION }}

 - name: Install Dev Proxy
 if: steps.cache-devproxy.outputs.cache-hit != &#39;true&#39;
 run: bash -c &#34;$(curl -sL https://aka.ms/devproxy/setup.sh)&#34;

 #######################
 # Configure Dev Proxy #
 #######################
 - name: Run Dev Proxy
 run: ./devproxy/devproxy &amp;

 - name: Install the Dev Proxy certificate for Chromium
 timeout-minutes: 1
 run: |
 echo &#34;Export the Dev Proxy&#39;s Root Certificate&#34;
 openssl pkcs12 -in ~/.config/dev-proxy/rootCert.pfx -clcerts -nokeys -out dev-proxy-ca.crt -passin pass:&#34;&#34;

 # echo &#34;Installing certutil&#34;
 sudo apt install libnss3-tools

 # echo &#34;Adding certificate to the NSS database for Chromium&#34;
 mkdir -p $HOME/.pki/nssdb
 certutil --empty-password -d $HOME/.pki/nssdb -N
 certutil -d sql:$HOME/.pki/nssdb -A -t &#34;CT,,&#34; -n dev-proxy-ca.crt -i dev-proxy-ca.crt
 echo &#34;Certificate trusted.&#34;

 ##########################
 # Start Playwright tests #
 ##########################
 - name: Run Playwright tests
 run: npx playwright test</code></pre></td></tr></table>
</div>
</div>
</figure>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/playwright-with-devproxy-ubuntu.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRmgAAABXRUJQVlA4WAoAAAAQAAAACQAAAgAAQUxQSB4AAAABHyCQTfxNWxLXiIiQoSYAAca69c9A4Yj&#43;x1ciXwFWUDggJAAAAHABAJ0BKgoAAwABQCYlnAJ0AUAAAP79BJovp&#43;v8O9LqoVgAAA==" src="https://www.eliostruyf.com/uploads/2024/03/playwright-with-devproxy-ubuntu.webp" alt="Playwright outcome with Dev Proxy on an Ubuntu runner" style="width: 2084px;" class="lazyload" />
</a>
<figcaption class="caption__text">Playwright outcome with Dev Proxy on an Ubuntu runner</figcaption>
</figure>
</div>
<h2 id="conclusion">Conclusion</h2>
Using Playwright in combination with the Microsoft Dev Proxy on GitHub Actions is possible, but as you can see it requires some additional steps when using an Ubuntu runner. The macOS runner is more straightforward to configure. Hopefully these configuration differences will change in the future, but for now I hope you can get started with the provided examples.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

Templates are available on the following <a href="https://github.com/estruyf/devproxy-github-actions-templates">GitHub repository</a>.

</blockquote></content:encoded></item><item><title>Developing custom plugins for the Microsoft's Dev Proxy</title><link>https://www.eliostruyf.com/developing-custom-plugins-microsoft-dev-proxy/</link><pubDate>Thu, 28 Mar 2024 10:13:29 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/developing-custom-plugins-microsoft-dev-proxy/</guid><description>For a training project I was working on, I needed to be able to intercept some API calls for some audit logging. To do this, I decided to use Microsoft&rsquo;s Dev Proxy tool, which you use to simulate, mock, and test APIs.
As the Dev Proxy did not have the functionality I needed out of the box, I decided to develop a custom plugin with the help of Waldek Mastykarz.</description><content:encoded>For a training project I was working on, I needed to be able to intercept some API calls for some audit logging. To do this, I decided to use <a href="https://learn.microsoft.com/en-us/microsoft-cloud/dev/dev-proxy/overview">Microsoft&rsquo;s Dev Proxy</a> tool, which you use to simulate, mock, and test APIs.
As the Dev Proxy did not have the functionality I needed out of the box, I decided to develop a custom plugin with the help of <a href="https://blog.mastykarz.nl/">Waldek Mastykarz</a>.
In this blog post, I will show you how you can develop custom plugins for the Dev Proxy.
<h2 id="things-you-need-to-get-started">Things you need to get started</h2>
Before you can start developing custom plugins for the Dev Proxy, you need to have the following tools installed:
<ul>
<li><a href="https://dotnet.microsoft.com/download">.NET Core SDK</a></li>
<li><a href="https://code.visualstudio.com/">Visual Studio Code</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit">C# Dev Kit Extension</a></li>
<li>The Dev Proxy Abstractions DLL</li>
</ul>
<blockquote class='important'>
<div class='mb-2'>
important
</div>

The Dev Proxy Abstractions DLL is available on the <a href="https://github.com/microsoft/dev-proxy/releases">Microsoft&rsquo;s Dev Proxy GitHub releases</a> page.

</blockquote>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/devproxy-abstractions.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRnQAAABXRUJQVlA4WAoAAAAQAAAACQAAAwAAQUxQSCEAAAABH0AgadM/6PaXOK8REXFWqAlAgLFu/TNQOKL/8ZUIka8AVlA4ICwAAABwAQCdASoKAAQAAUAmJZwCdAFAAAD&#43;/FN68yIkZuMmDyv3&#43;4IuZgJk0eAAAA==" src="https://www.eliostruyf.com/uploads/2024/03/devproxy-abstractions.webp" alt="Dev Proxy Abstractions DLL" style="width: 1896px;" class="lazyload" />
</a>
<figcaption class="caption__text">Dev Proxy Abstractions DLL</figcaption>
</figure>
</div>
<h2 id="setting-up-the-project">Setting up the project</h2>
Once you install all the prerequisites, you can start setting up the project.
<ul>
<li>Start creating the new project by running the following command in your terminal:</li>
</ul>
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Create a new class library project</figcaption>
<div class="highlight" title="Create a new class library project"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">dotnet new classlib -n DevProxyCustomPlugin</code></pre></td></tr></table>
</div>
</div>
</figure>
<ul>
<li>Next, navigate to the newly created project folder:</li>
</ul>
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Open the project folder</figcaption>
<div class="highlight" title="Open the project folder"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">cd DevProxyCustomPlugin</code></pre></td></tr></table>
</div>
</div>
</figure>
<ul>
<li>Open the project in Visual Studio Code</li>
<li>Add the Dev Proxy Abstractions DLL to the project</li>
<li>Open the <code>DevProxyCustomPlugin.csproj</code> file and add the following lines in the project group:</li>
</ul>
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Add the Dev Proxy Abstractions DLL reference for the project</figcaption>
<div class="highlight" title="Add the Dev Proxy Abstractions DLL reference for the project"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
3
4
5
6
7
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml">&lt;ItemGroup&gt;
 &lt;Reference Include=&#34;dev-proxy-abstractions&#34;&gt;
 &lt;HintPath&gt;.\dev-proxy-abstractions.dll&lt;/HintPath&gt;
 &lt;Private&gt;false&lt;/Private&gt;
 &lt;ExcludeAssets&gt;runtime&lt;/ExcludeAssets&gt;
 &lt;/Reference&gt;
&lt;/ItemGroup&gt;</code></pre></td></tr></table>
</div>
</div>
</figure>
<blockquote class='important'>
<div class='mb-2'>
important
</div>

Make sure to exclude the DLL as it is not requires for the plugin. You can do this by setting the <code>ExcludeAssets</code> to <code>runtime</code>.

</blockquote>
<ul>
<li>Add the required packages:</li>
</ul>
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Add the required packages</figcaption>
<div class="highlight" title="Add the required packages"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
3
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">dotnet add package Microsoft.Extensions.Configuration
dotnet add package Microsoft.Extensions.Configuration.Binder
dotnet add package Titanium.Web.Proxy</code></pre></td></tr></table>
</div>
</div>
</figure>
<ul>
<li>Similar to the <code>dev-proxy-abstractions.dll</code> configuration, make sure to exclude the new packages&rsquo; assets by adding the <code>ExcludeAssets</code> property to the <code>PackageReference</code> element in the <code>DevProxyCustomPlugin.csproj</code> file:</li>
</ul>
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Exclude the assets for the new packages</figcaption>
<div class="highlight" title="Exclude the assets for the new packages"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
3
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml">&lt;PackageReference Include=&#34;Microsoft.Extensions.Configuration&#34; Version=&#34;6.0.0&#34;&gt;
 &lt;ExcludeAssets&gt;runtime&lt;/ExcludeAssets&gt;
&lt;/PackageReference&gt;</code></pre></td></tr></table>
</div>
</div>
</figure>
<ul>
<li>Update the <code>Class1.cs</code> file with the name of your plugin class:</li>
</ul>
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Starter code for the plugin class</figcaption>
<div class="highlight" title="Starter code for the plugin class"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-csharp" data-lang="csharp">using Microsoft.DevProxy.Abstractions;
using Microsoft.Extensions.Configuration;

namespace DevProxyCustomPlugin;

public class RedirectCalls : BaseProxyPlugin
{
 public override string Name =&gt; nameof(RedirectCalls);

 public override void Register(IPluginEvents pluginEvents,
 IProxyContext context,
 ISet&lt;UrlToWatch&gt; urlsToWatch,
 IConfigurationSection? configSection = null)
 {
base.Register(pluginEvents, context, urlsToWatch, configSection);
 }
}</code></pre></td></tr></table>
</div>
</div>
</figure>
<blockquote class='info'>
<div class='mb-2'>
info
</div>

For this sample, I created a plugin which you can use to redirect API calls to your local API, which is useful when locally developing a project.

</blockquote>
With this in place, you can start developing your custom plugin for the Dev Proxy.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/devproxy-custom-plugin.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRn4AAABXRUJQVlA4WAoAAAAQAAAACQAABQAAQUxQSCMAAAABH0AgadM/5vbXOK8REXFWqAmAhGF40z8D9DRDRP9jDXHPGgBWUDggNAAAABACAJ0BKgoABgABQCYllAJ0AQ8CbxdjOAAA/v54dZUFPTnTrXaLpCju2Z8uQZbbQ0OIAAA=" src="https://www.eliostruyf.com/uploads/2024/03/devproxy-custom-plugin.webp" alt="Start developing your custom plugin" style="width: 1626px;" class="lazyload" />
</a>
<figcaption class="caption__text">Start developing your custom plugin</figcaption>
</figure>
</div>
<h2 id="adding-a-before-request-event-handler">Adding a before-request event handler</h2>
You can add a before-request event handler to the plugin to intercept the API calls. In the <code>Register</code> method, you can add the following code:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Add a before request event handler</figcaption>
<div class="highlight" title="Add a before request event handler"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
3
4
5
6
7
8
9
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-csharp" data-lang="csharp">public override void Register(IPluginEvents pluginEvents,
 IProxyContext context,
 ISet&lt;UrlToWatch&gt; urlsToWatch,
 IConfigurationSection? configSection = null)
{
base.Register(pluginEvents, context, urlsToWatch, configSection);

 pluginEvents.BeforeRequest += OnBeforeRequest;
}</code></pre></td></tr></table>
</div>
</div>
</figure>
Create a new method, <code>OnBeforeRequest</code> to handle the event:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Add the OnBeforeRequest method</figcaption>
<div class="highlight" title="Add the OnBeforeRequest method"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-csharp" data-lang="csharp">private void OnBeforeRequest(object sender, BeforeRequestEventArgs e)
{
 if (_urlsToWatch is null ||
 !e.HasRequestUrlMatch(_urlsToWatch))
 {
 // No match for the URL, so we don&#39;t need to do anything
 return Task.CompletedTask;
 }

 // Replace the following lines with your custom logic
if (e.Session.HttpClient.Request.RequestUri.AbsoluteUri.Contains(&#34;https://frontmatter.codes&#34;))
 {
var url = e.Session.HttpClient.Request.RequestUri.AbsoluteUri;
e.Session.HttpClient.Request.RequestUri = new Uri(url.Replace(&#34;https://frontmatter.codes&#34;, &#34;http://localhost:3000&#34;));
 }

 return Task.CompletedTask;
}</code></pre></td></tr></table>
</div>
</div>
</figure>
In this example, the <code>OnBeforeRequest</code> method checks if the request URL contains <code>https://frontmatter.codes</code>. If it does, it replaces the URL with <code>http://localhost:3000</code>. That way, I can test the API calls locally while developing the project.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

Change the code in the <code>OnBeforeRequest</code> method to fit your needs.

</blockquote>
Once you have added the <code>OnBeforeRequest</code> method&rsquo;s code, you can build the plugin by running the following command in the terminal:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Build the plugin</figcaption>
<div class="highlight" title="Build the plugin"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">dotnet build</code></pre></td></tr></table>
</div>
</div>
</figure>
<h2 id="testing-the-plugin">Testing the plugin</h2>
To test the plugin, add it to the Dev Proxy configuration. You can do this by adding the following lines to the <code>devproxyrc.json</code> file:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Add the plugin to the Dev Proxy configuration</figcaption>
<div class="highlight" title="Add the plugin to the Dev Proxy configuration"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-json" data-lang="json">{
 &#34;$schema&#34;: &#34;https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.16.0/rc.schema.json&#34;,
 &#34;plugins&#34;: [{
 &#34;name&#34;: &#34;RedirectCalls&#34;,
 &#34;enabled&#34;: true,
 &#34;pluginPath&#34;: &#34;./bin/Debug/net8.0/DevProxyCustomPlugin.dll&#34;
 }],
 &#34;githubCopilotListener&#34;: {
 &#34;logPath&#34;: &#34;./logs&#34;
 },
 &#34;urlsToWatch&#34;: [
 &#34;https://frontmatter.codes/api/*&#34;
 ],
 &#34;labelMode&#34;: &#34;text&#34;,
 &#34;logLevel&#34;: &#34;debug&#34;,
 &#34;newVersionNotification&#34;: &#34;stable&#34;
}</code></pre></td></tr></table>
</div>
</div>
</figure>
Start the Dev Proxy by running the following command in the terminal:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Start the Dev Proxy</figcaption>
<div class="highlight" title="Start the Dev Proxy"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">devproxy</code></pre></td></tr></table>
</div>
</div>
</figure>
Now, you can test the plugin by requesting the URL specified in the <code>urlsToWatch</code> configuration. In my example, when I call the <code>https://frontmatter.codes/api/stars</code> API, the request gets redirected to <code>http://localhost:5000/api/stars</code>, and I can see the response from my local API.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/devproxy-redirect.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRmQAAABXRUJQVlA4WAoAAAAQAAAACQAAAQAAQUxQSBMAAAABD0CQbeOvuO3niojgWIGI/ocCAFZQOCAqAAAA0AEAnQEqCgACAAFAJiWUAnQBDv4DyAAA/v1Xo4i0ByPhQySESbaqZwAA" src="https://www.eliostruyf.com/uploads/2024/03/devproxy-redirect.webp" alt="Test the plugin by making a request" style="width: 1302px;" class="lazyload" />
</a>
<figcaption class="caption__text">Test the plugin by making a request</figcaption>
</figure>
</div>
<h2 id="adding-some-plugin-configuration">Adding some plugin configuration</h2>
To make the plugin more flexible, you can add some configuration options. For instance, you can define the root URL and the local URL to redirect the API calls to.
To do this, you can add the following configuration to the <code>devproxyrc.json</code> file:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Add the plugin configuration to the Dev Proxy configuration</figcaption>
<div class="highlight" title="Add the plugin configuration to the Dev Proxy configuration"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-json" data-lang="json">{
 &#34;$schema&#34;: &#34;https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.15.0/rc.schema.json&#34;,
 &#34;plugins&#34;: [{
 &#34;name&#34;: &#34;RedirectCalls&#34;,
 &#34;enabled&#34;: true,
 &#34;pluginPath&#34;: &#34;./bin/Debug/net8.0/DevProxyCustomPlugin.dll&#34;,
 &#34;configSection&#34;: &#34;redirectCalls&#34;
 }],
 &#34;redirectCalls&#34;: {
 &#34;fromUrl&#34;: &#34;https://frontmatter.codes&#34;,
 &#34;toUrl&#34;: &#34;http://localhost:3000&#34;
 },
 &#34;urlsToWatch&#34;: [
 &#34;https://frontmatter.codes/api/*&#34;
 ],
 &#34;labelMode&#34;: &#34;text&#34;,
 &#34;logLevel&#34;: &#34;debug&#34;,
 &#34;newVersionNotification&#34;: &#34;stable&#34;
}</code></pre></td></tr></table>
</div>
</div>
</figure>
In the <code>RedirectCalls</code> plugin sections, I added a <code>configSection</code> property with the value <code>redirectCalls</code>. This configuration allows me to access the plugin&rsquo;s configuration.
In the <code>redirectCalls</code> section, I added the <code>fromUrl</code> and <code>toUrl</code> properties, which define the root URL and the local URL to which the API calls should be redirected.
To access the configuration in the plugin, you need to bind the configuration. The whole code for the plugin class should look like this:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Redirect Calls plugin class with configuration</figcaption>
<div class="highlight" title="Redirect Calls plugin class with configuration"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-csharp" data-lang="csharp">using Microsoft.DevProxy.Abstractions;
using Microsoft.Extensions.Configuration;

namespace DevProxyCustomPlugin;

public class RedirectCallsConfiguration
{
 public string? FromUrl { get; set; }
 public string? ToUrl { get; set; }
}

public class RedirectCalls : BaseProxyPlugin
{
 public override string Name =&gt; nameof(RedirectCalls);
 private readonly RedirectCallsConfiguration _configuration = new();

 public override void Register(IPluginEvents pluginEvents,
 IProxyContext context,
 ISet&lt;UrlToWatch&gt; urlsToWatch,
 IConfigurationSection? configSection = null)
 {
base.Register(pluginEvents, context, urlsToWatch, configSection);

 configSection?.Bind(_configuration);

 pluginEvents.BeforeRequest += OnBeforeRequest;
 }

 private Task OnBeforeRequest(object sender, ProxyRequestArgs e)
 {
 if (_urlsToWatch is null ||
 !e.HasRequestUrlMatch(_urlsToWatch))
 {
 // No match for the URL, so we don&#39;t need to do anything
 return Task.CompletedTask;
 }

var fromUrl = _configuration?.FromUrl ?? string.Empty;
var toUrl = _configuration?.ToUrl ?? string.Empty;

if (string.IsNullOrEmpty(fromUrl) || string.IsNullOrEmpty(toUrl))
 {
 return Task.CompletedTask;
 }

if (e.Session.HttpClient.Request.RequestUri.AbsoluteUri.Contains(fromUrl))
 {
var url = e.Session.HttpClient.Request.RequestUri.AbsoluteUri;
e.Session.HttpClient.Request.RequestUri = new Uri(url.Replace(fromUrl, toUrl));
 }

 return Task.CompletedTask;
 }
}</code></pre></td></tr></table>
</div>
</div>
</figure>
With this configuration in place, you can test the plugin with the new configuration options.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/devproxy-redirect-configuration.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRm4AAABXRUJQVlA4WAoAAAAQAAAACQAABAAAQUxQSCEAAAABFyCQTfxJvyjSiIhYUNC2DdP9DWDLH8xARPQ/xDPkFw8AVlA4ICYAAACwAQCdASoKAAUAAUAmJZwAAxZiFubAAP7&#43;KWvPnWVn4MttPgAAAA==" src="https://www.eliostruyf.com/uploads/2024/03/devproxy-redirect-configuration.webp" alt="Test the plugin with the new configuration options" style="width: 2040px;" class="lazyload" />
</a>
<figcaption class="caption__text">Test the plugin with the new configuration options</figcaption>
</figure>
</div>
The example above is available on my <a href="https://github.com/estruyf/devproxy-redirect-plugin">GitHub devproxy-redirect-plugin repository</a>.
<h2 id="conclusion">Conclusion</h2>
Developing custom plugins for Microsoft&rsquo;s Dev Proxy is a great way to extend the tool&rsquo;s functionality. With the help of the Dev Proxy Abstractions DLL, you can easily create custom plugins that can intercept API calls, modify requests and responses, and much more.</content:encoded></item><item><title>Caching Dev Proxy in your GitHub Actions workflows</title><link>https://www.eliostruyf.com/caching-dev-proxy-github-actions-workflows/</link><pubDate>Thu, 28 Mar 2024 07:16:59 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/caching-dev-proxy-github-actions-workflows/</guid><description>In the previous posts, I explained using the Microsoft&rsquo;s Dev Proxy in a GitHub Actions workflow on a macOS and Ubuntu virtual machine. One thing I noticed is that the Dev Proxy installation fails in some runs.
Show image Failed to install the Dev Proxy A way to solve this issue is by caching the Dev Proxy, and another benefit is that it speeds up your workflow.</description><content:encoded>In the previous posts, I explained using the <a href="https://learn.microsoft.com/en-us/microsoft-cloud/dev/dev-proxy/overview">Microsoft&rsquo;s Dev Proxy</a> in a GitHub Actions workflow on a macOS and Ubuntu virtual machine. One thing I noticed is that the Dev Proxy installation fails in some runs.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/failed-installing-devproxy.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRmwAAABXRUJQVlA4WAoAAAAQAAAACQAABQAAQUxQSCQAAAABHyAUQPylgunHkEZExBIUtW0DVX11F7yq/MkMQ0T/Iz5CT3xWUDggIgAAALABAJ0BKgoABgABQCYlpAAC6NtvXKAA/v7o1BGKauyXgAA=" src="https://www.eliostruyf.com/uploads/2024/03/failed-installing-devproxy.webp" alt="Failed to install the Dev Proxy" style="width: 900px;" class="lazyload" />
</a>
<figcaption class="caption__text">Failed to install the Dev Proxy</figcaption>
</figure>
</div>
A way to solve this issue is by caching the Dev Proxy, and another benefit is that it speeds up your workflow.
This blog post shows how to cache the Dev Proxy in your GitHub Actions workflows. By caching it, it uses the cached version if it is available, and if not, it will download and install it.
<h2 id="retrieving-the-latest-dev-proxy-version-number">Retrieving the latest Dev Proxy version number</h2>
We must first fetch the latest version number to cache the Dev Proxy. That way, we only retrieve the latest version if it is not cached. For this, we can use the GitHub release API:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Get the latest Dev Proxy released version number</figcaption>
<div class="highlight" title="Get the latest Dev Proxy released version number"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
3
4
5
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">- name: Store Dev Proxy&#39;s Version
 run: |
 DEVPROXY_VERSION=$(curl -s https://api.github.com/repos/microsoft/dev-proxy/releases/latest | jq .tag_name -r)
 echo &#34;Dev Proxy&#39;s Version: $DEVPROXY_VERSION&#34;
 echo &#34;DEVPROXY_VERSION=$DEVPROXY_VERSION&#34; &gt;&gt; $GITHUB_ENV</code></pre></td></tr></table>
</div>
</div>
</figure>
In the above step, we use <code>curl</code> to fetch the latest release information from the Dev Proxy repository. We use <code>jq</code> to extract the <code>tag_name</code> from the JSON response. The version number gets stored in the <code>DEVPROXY_VERSION</code> environment variable.
<h2 id="caching-the-dev-proxy">Caching the Dev Proxy</h2>
Next, we use the <a href="https://github.com/marketplace/actions/cache">actions/cache</a> action to cache the Dev Proxy. We can use the following step to cache the Dev Proxy:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Cache Dev Proxy - GitHub Actions step</figcaption>
<div class="highlight" title="Cache Dev Proxy - GitHub Actions step"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
3
4
5
6
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">- name: Cache Dev Proxy
 id: cache-devproxy
 uses: actions/cache@v4
 with:
 path: ./devproxy
 key: devproxy-${{ env.DEVPROXY_VERSION }}</code></pre></td></tr></table>
</div>
</div>
</figure>
In the above step, we use the <code>actions/cache</code> action to cache the <code>devproxy</code> folder. We use the <code>DEVPROXY_VERSION</code> environment variable as the key for the cache so that when a new version is released, the latest version will be installed and cached.
The cache action outputs a <code>cache-hit</code> boolean to indicate whether the Dev Proxy version was cached. The next steps will use that output to determine whether the Dev Proxy needs to be installed.
<h2 id="installing-the-dev-proxy">Installing the Dev Proxy</h2>
After the cache action, we can use the following step to install the Dev Proxy only when needed:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Install Dev Proxy - GitHub Actions step</figcaption>
<div class="highlight" title="Install Dev Proxy - GitHub Actions step"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
3
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">- name: Install Dev Proxy
 if: steps.cache-devproxy.outputs.cache-hit != &#39;true&#39;
 run: bash -c &#34;$(curl -sL https://aka.ms/devproxy/setup.sh)&#34;</code></pre></td></tr></table>
</div>
</div>
</figure>
In the above step, we use the <code>if</code> condition to check if the Dev Proxy version was available from the cache. Notice the <code>cache-devproxy</code> and <code>cache-hit</code> references. The <code>cache-devproxy</code> is the ID of the cache action, and <code>cache-hit</code> is the output of the cache action.
Using this approach, you can cache the Dev Proxy in your GitHub Actions workflows and speed up your workflow.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/using-cached-devproxy.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRm4AAABXRUJQVlA4WAoAAAAQAAAACQAABQAAQUxQSCoAAAABJ0CQbTOASU76OteIiOBLGASYJoVucIcMmr/UDxHR/wnQLZCxvU&#43;B6AJWUDggHgAAADABAJ0BKgoABgABQCYlpAADcAD&#43;/RsYm5efeOAAAA==" src="https://www.eliostruyf.com/uploads/2024/03/using-cached-devproxy.webp" alt="Using the cached Dev Proxy" style="width: 1568px;" class="lazyload" />
</a>
<figcaption class="caption__text">Using the cached Dev Proxy</figcaption>
</figure>
</div>
<h2 id="the-complete-github-actions-workflow">The complete GitHub Actions workflow</h2>
Here is the complete GitHub Actions workflow that caches the Dev Proxy:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Complete GitHub Actions workflow</figcaption>
<div class="highlight" title="Complete GitHub Actions workflow"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">name: ubuntu Dev Proxy

on:
 push:
 branches:
 - main
 - dev
 workflow_dispatch:

jobs:
 test:
 timeout-minutes: 60
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4

 - name: Store Dev Proxy&#39;s Version
 run: |
 DEVPROXY_VERSION=$(curl -s https://api.github.com/repos/microsoft/dev-proxy/releases/latest | jq .tag_name -r)
 echo &#34;Dev Proxy&#39;s Version: $DEVPROXY_VERSION&#34;
 echo &#34;DEVPROXY_VERSION=$DEVPROXY_VERSION&#34; &gt;&gt; $GITHUB_ENV

 - name: Cache Dev Proxy
 id: cache-devproxy
 uses: actions/cache@v4
 with:
 path: ./devproxy
 key: devproxy-${{ env.DEVPROXY_VERSION }}

 - name: Install Dev Proxy
 if: steps.cache-devproxy.outputs.cache-hit != &#39;true&#39;
 run: bash -c &#34;$(curl -sL https://aka.ms/devproxy/setup.sh)&#34;

 - name: Run Dev Proxy
 run: ./devproxy/devproxy &amp;

 # Include all the other steps to start using the Dev Proxy</code></pre></td></tr></table>
</div>
</div>
</figure>
In the above workflow, we first store the Dev Proxy&rsquo;s version number. We then cache the Dev Proxy using the <code>actions/cache</code> action. If the Dev Proxy version was not cached, we install it using the <code>curl</code> command. Finally, we run the Dev Proxy using the <code>./devproxy/devproxy</code> command.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

Templates are available on the following <a href="https://github.com/estruyf/devproxy-github-actions-templates">GitHub repository</a>.

</blockquote></content:encoded></item><item><title>Using Dev Proxy in your GitHub Actions workflow on Ubuntu</title><link>https://www.eliostruyf.com/dev-proxy-github-actions-workflow-ubuntu/</link><pubDate>Wed, 27 Mar 2024 08:25:54 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/dev-proxy-github-actions-workflow-ubuntu/</guid><description>In my previous blog post, I explained how you could use the Microsoft&rsquo;s Dev Proxy in a GitHub Actions workflow on a macOS runner. In this blog post, I will show you how to use the Dev Proxy in your GitHub Actions workflow on an Ubuntu runner.
info You can read how to configure it on a macOS runner in the Using Dev Proxy in your GitHub Actions workflow on a macOS runner article.</description><content:encoded>In my previous blog post, I explained how you could use the <a href="https://learn.microsoft.com/en-us/microsoft-cloud/dev/dev-proxy/overview">Microsoft&rsquo;s Dev Proxy</a> in a GitHub Actions workflow on a macOS runner. In this blog post, I will show you how to use the Dev Proxy in your GitHub Actions workflow on an Ubuntu runner.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

You can read how to configure it on a macOS runner in the <a href="https://www.eliostruyf.com/dev-proxy-github-actions-workflow-macos/">Using Dev Proxy in your GitHub Actions workflow on a macOS runner</a> article.

</blockquote>
Most of the steps are the same, except how you trust the root certificate.
<h2 id="installing-and-running-the-dev-proxy">Installing and running the Dev Proxy</h2>
Like the macOS runner, you can install the bash script provided in the Dev Proxy documentation on the Ubuntu runner. To include this into your GitHub Actions workflow, you can use the following step:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Install and run the Dev Proxy - GitHub Actions steps</figcaption>
<div class="highlight" title="Install and run the Dev Proxy - GitHub Actions steps"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
3
4
5
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">- name: Install Dev Proxy
 run: bash -c &#34;$(curl -sL https://aka.ms/devproxy/setup.sh)&#34;

- name: Run Dev Proxy
 run: ./devproxy/devproxy &amp;</code></pre></td></tr></table>
</div>
</div>
</figure>
<blockquote class='info'>
<div class='mb-2'>
info
</div>

The Dev Proxy commands is using an ampersand <code>&amp;</code> to run it as a background service. You can read more about it in the <a href="https://www.eliostruyf.com/devhack-running-background-service-github-actions/">#DevHack: Running a background service on GitHub Actions</a> article.

</blockquote>
Once the Dev Proxy is installed, you can run it, but you cannot yet intercept HTTPS traffic. That is where the next step comes in. You need to trust the root certificate.
<h2 id="trust-the-root-certificate">Trust the root certificate</h2>
Similar to the macOS configuration, we must trust the self-signed certificate the Dev Proxy created. Here are the steps to achieve the certificate trust on an Ubuntu runner:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Run Dev Proxy - GitHub Actions step</figcaption>
<div class="highlight" title="Run Dev Proxy - GitHub Actions step"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">- name: Install the Dev Proxy&#39;s certificate
 timeout-minutes: 1
 run: |
 echo &#34;Export the Dev Proxy&#39;s Root Certificate&#34;
 openssl pkcs12 -in ~/.config/dev-proxy/rootCert.pfx -clcerts -nokeys -out dev-proxy-ca.crt -passin pass:&#34;&#34;

 echo &#34;Installing the Dev Proxy&#39;s Root Certificate&#34;
 sudo cp dev-proxy-ca.crt /usr/local/share/ca-certificates/

 echo &#34;Updating the CA certificates&#34;
 sudo update-ca-certificates
 echo &#34;Certificate trusted.&#34;

 # Set the system proxy settings (optional)
 echo &#34;http_proxy=http://127.0.0.1:8000&#34; &gt;&gt; $GITHUB_ENV
 echo &#34;https_proxy=http://127.0.0.1:8000&#34; &gt;&gt; $GITHUB_ENV </code></pre></td></tr></table>
</div>
</div>
</figure>
<blockquote class='info'>
<div class='mb-2'>
info
</div>

The commands used in the above GitHub Actions step are very similar to how it is configured on a Docker container. You can find the official documentation for the Docker container in <a href="https://learn.microsoft.com/en-gb/microsoft-cloud/dev/dev-proxy/how-to/use-dev-proxy-with-dotnet-docker?pivots=client-operating-system-windows#configure-dev-proxy-certificate-in-your-docker-container">Configure Dev Proxy certificate in your Docker container</a> documentation section.

</blockquote>
After running this step, you can start intercepting HTTPS traffic with the Dev Proxy.
<h2 id="the-complete-github-actions-workflow">The complete GitHub Actions workflow</h2>
Below, you can find the complete GitHub Actions workflow file, which includes the installation of the Dev Proxy and the trust of the root certificate.
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Complete GitHub Actions workflow</figcaption>
<div class="highlight" title="Complete GitHub Actions workflow"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">name: Ubuntu Dev Proxy

on:
 push:
 branches:
 - main
 - dev
 workflow_dispatch:

jobs:
 test:
 timeout-minutes: 60
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4

 - uses: actions/setup-node@v4

 - name: Install Dev Proxy
 run: bash -c &#34;$(curl -sL https://aka.ms/devproxy/setup.sh)&#34;

 - name: Run Dev Proxy
 run: ./devproxy/devproxy &amp;

 - name: Install the Dev Proxy&#39;s certificate
 timeout-minutes: 1
 run: |
 echo &#34;Export the Dev Proxy&#39;s Root Certificate&#34;
 openssl pkcs12 -in ~/.config/dev-proxy/rootCert.pfx -clcerts -nokeys -out dev-proxy-ca.crt -passin pass:&#34;&#34;

 echo &#34;Installing the Dev Proxy&#39;s Root Certificate&#34;
 sudo cp dev-proxy-ca.crt /usr/local/share/ca-certificates/

 echo &#34;Updating the CA certificates&#34;
 sudo update-ca-certificates
 echo &#34;Certificate trusted.&#34;

 # Set the system proxy settings (optional)
 echo &#34;http_proxy=http://127.0.0.1:8000&#34; &gt;&gt; $GITHUB_ENV
 echo &#34;https_proxy=http://127.0.0.1:8000&#34; &gt;&gt; $GITHUB_ENV

 # Include the additional steps you want to run after the Dev Proxy started
 - name: Test the Dev Proxy
 run: |
 curl -ix http://127.0.0.1:8000 https://jsonplaceholder.typicode.com/posts
 # When you used the system proxy settings, you don&#39;t need to specify the proxy in the curl command
 curl -i https://jsonplaceholder.typicode.com/posts </code></pre></td></tr></table>
</div>
</div>
</figure>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/devproxy-with-trusted-root-certificate.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRnQAAABXRUJQVlA4WAoAAAAQAAAACQAABgAAQUxQSCQAAAABH6CQbQTIn3L3eNxpREScFWoCIGEY3vTPAD3NENH/WEPcvwZWUDggKgAAAPABAJ0BKgoABwABQCYlnALsAQN9qaGwgAD&#43;/tQofIXyVWeusWS/egAAAA==" src="https://www.eliostruyf.com/uploads/2024/03/devproxy-with-trusted-root-certificate.webp" alt="Test Dev Proxy on GitHub Actions" style="width: 900px;" class="lazyload" />
</a>
<figcaption class="caption__text">Test Dev Proxy on GitHub Actions</figcaption>
</figure>
</div>
With this setup, you can use the Dev Proxy in your GitHub Actions workflow on a Ubuntu runner.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

Templates are available on the following <a href="https://github.com/estruyf/devproxy-github-actions-templates">GitHub repository</a>.

</blockquote></content:encoded></item><item><title>Using Dev Proxy in your GitHub Actions workflow on macOS</title><link>https://www.eliostruyf.com/dev-proxy-github-actions-workflow-macos/</link><pubDate>Tue, 26 Mar 2024 08:15:17 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/dev-proxy-github-actions-workflow-macos/</guid><description>Lately, I have been working with the Microsoft&rsquo;s Dev Proxy, a tool for API simulation, mocking, and testing. One of the things I wanted to try was to use the Dev Proxy in a GitHub Actions workflow so that I could use it in combination with Playwright to test my solutions with mocked APIs.</description><content:encoded>Lately, I have been working with the <a href="https://learn.microsoft.com/en-us/microsoft-cloud/dev/dev-proxy/overview">Microsoft&rsquo;s Dev Proxy</a>, a tool for API simulation, mocking, and testing. One of the things I wanted to try was to use the Dev Proxy in a GitHub Actions workflow so that I could use it in combination with Playwright to test my solutions with mocked APIs.
The Dev Proxy is a .NET Core application that can run on any platform that supports .NET Core, so it works on Windows, Linux, and macOS. I chose to use a macOS virtual machine/runner because, at the time of writing, the Dev Proxy cannot automatically trust the root certificate.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

Currently there is an issue open on the Dev Proxy GitHub repository to add support for trusting the root certificate on macOS - <a href="https://github.com/microsoft/dev-proxy/issues/601">Dev Proxy #601</a>.

</blockquote>
In this blog post, I will show you how to use the Dev Proxy in your GitHub Actions workflow on a macOS virtual machine.
<blockquote class='important'>
<div class='mb-2'>
important
</div>

Be aware of that jobs running on Windows and macOS runners that GitHub hosts consume minutes at 2 and 10 times the rate that jobs on Linux runners consume. You can read more about it in the <a href="https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions#minute-multipliers">GitHub Actions - Minute multipliers for hosted runners</a> documentation section.

</blockquote>
<h2 id="installing-the-dev-proxy">Installing the Dev Proxy</h2>
Let us start with installing the Dev Proxy on the macOS virtual machine. We can use the bash script provided in the Dev Proxy documentation for this. To include this into your GitHub Actions workflow, you can use the following step:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Install Dev Proxy - GitHub Actions step</figcaption>
<div class="highlight" title="Install Dev Proxy - GitHub Actions step"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">- name: Install Dev Proxy
 run: bash -c &#34;$(curl -sL https://aka.ms/devproxy/setup.sh)&#34;</code></pre></td></tr></table>
</div>
</div>
</figure>
<h2 id="running-the-dev-proxy-as-a-background-service">Running the Dev Proxy as a background service</h2>
Once installed, you can run the Dev Proxy as a background service by adding an ampersand <code>&amp;</code> at the end of the command.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

You can read more about it in the <a href="https://www.eliostruyf.com/devhack-running-background-service-github-actions/">#DevHack: Running a background service on GitHub Actions</a> article.

</blockquote>
Here is what the GitHub Actions step looks like:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Start Dev Proxy - GitHub Actions step</figcaption>
<div class="highlight" title="Start Dev Proxy - GitHub Actions step"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">- name: Run Dev Proxy
 run: ./devproxy/devproxy &amp;</code></pre></td></tr></table>
</div>
</div>
</figure>
<h2 id="what-about-https-endpoints">What about HTTPS endpoints?</h2>
When you start using the Dev Proxy like this on GitHub Actions, you will encounter issues when calling HTTPS endpoints. In my case, I got the following error when testing it with Playwright:
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">Error: page.goto: net::ERR_PROXY_CONNECTION_FAILED at https://frontmatter.codes/</code></pre></td></tr></table>
</div>
</div>
These issues are normal because to intercept HTTPS traffic, you must trust the root certificate which gets created by the Dev Proxy. When you run the Dev Proxy on your local machine for the first time, it will prompt you to trust the root certificate.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/devproxy-certificate.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRoIAAABXRUJQVlA4WAoAAAAQAAAACQAABQAAQUxQSC4AAAABL6AWAAI26NDVuSCCKSJiQnkoZGCF2mIIoJ1DAD&#43;D9vxxUojof9Tu&#43;knKNwADVlA4IC4AAADQAQCdASoKAAYAAUAmJZwAAu1/gr4MAAD&#43;/r6vjpqRUZMmuwgpLIV87IcJAAAA" src="https://www.eliostruyf.com/uploads/2024/03/devproxy-certificate.webp" alt="Trust the self-signed certificate" style="width: 900px;" class="lazyload" />
</a>
<figcaption class="caption__text">Trust the self-signed certificate</figcaption>
</figure>
</div>
As it runs in a non-interactive mode in GitHub Actions, you cannot trust the certificate that way. To solve this, we will have to include a couple of extra steps in our workflow to trust the root certificate and be able to intercept the HTTPS traffic.
<h2 id="trusting-the-root-certificate">Trusting the root certificate</h2>
When the Dev Proxy asks you to trust the root certificate, and you accept it, it uses the <a href="https://github.com/microsoft/dev-proxy/blob/main/dev-proxy/trust-cert.sh">trust-cert.sh</a> script to find the certificate and trust it.
My first attempt was to run the <code>trust-cert.sh</code> script in my GitHub Actions workflow. Unfortunately, this did not work because the <code>security add-trusted-cert</code> command requires a password to add the certificate to the login keychain.
After some research, I found an article about <a href="https://twocanoes.com/trusting-certificates-in-system-keychain-without-prompting/">Trusting Certificates in System Keychain without Prompting</a>. The article explains that you will not be prompted for a password when you add a certificate to the system keychain, and this will be our solution to make it work in our GitHub Actions workflow.
The script to trust the certificate in the system keychain looks as follows:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Trust certificate - GitHub Actions steps</figcaption>
<div class="highlight" title="Trust certificate - GitHub Actions steps"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">- name: Install the Dev Proxy&#39;s certificate
 timeout-minutes: 1
 run: |
 echo &#34;Finding certificate...&#34;
 security find-certificate -c &#34;Dev Proxy CA&#34; -a -p &gt; dev-proxy-ca.pem

 echo &#34;Trusting certificate...&#34;
 sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain dev-proxy-ca.pem
 echo &#34;Certificate trusted.&#34;

 # Set the system proxy settings (optional)
 echo &#34;http_proxy=http://127.0.0.1:8000&#34; &gt;&gt; $GITHUB_ENV
 echo &#34;https_proxy=http://127.0.0.1:8000&#34; &gt;&gt; $GITHUB_ENV

 # Required to test CURL with the Dev Proxy (optional)
 echo &#34;SSL_CERT_FILE=$GITHUB_WORKSPACE/dev-proxy-ca.pem&#34; &gt;&gt; $GITHUB_ENV </code></pre></td></tr></table>
</div>
</div>
</figure>
This script is similar to the <a href="https://github.com/microsoft/dev-proxy/blob/main/dev-proxy/trust-cert.sh">trust-cert.sh</a> script, but instead of adding it to the login keychain, the certificate gets added to the system keychain.
At the end of the script there are three exports which are all optional.
<ul>
<li>The <code>http_proxy</code> and <code>https_proxy</code> environment variables can be used to set the system proxy settings on the macOS virtual machine.</li>
<li>The <code>SSL_CERT_FILE</code> environment variable is required on macOS to make the <code>curl</code> commands work with the Dev Proxy.</li>
</ul>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/devproxy-trust-certificate.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRlYAAABXRUJQVlA4WAoAAAAQAAAACQAAAQAAQUxQSA0AAAABD3Bx8oiIsAIR/Q8FAFZQOCAiAAAAsAEAnQEqCgACAAFAJiWcAnQBDvbEyAD&#43;/uSR3Uvp2shmAA==" src="https://www.eliostruyf.com/uploads/2024/03/devproxy-trust-certificate.webp" alt="Trust the self-signed certificate on the macOS virtual machine" style="width: 900px;" class="lazyload" />
</a>
<figcaption class="caption__text">Trust the self-signed certificate on the macOS virtual machine</figcaption>
</figure>
</div>
<h2 id="the-complete-github-actions-workflow">The complete GitHub Actions workflow</h2>
Now that we have the certificate trust figured out, we can combine all the steps into a complete GitHub Actions workflow.
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Complete GitHub Actions workflow</figcaption>
<div class="highlight" title="Complete GitHub Actions workflow"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">name: macOS Dev Proxy

on:
 push:
 branches:
 - main
 - dev
 workflow_dispatch:

jobs:
 test:
 timeout-minutes: 60
 runs-on: macos-latest
 steps:
 - uses: actions/checkout@v4

 - uses: actions/setup-node@v4

 - name: Install Dev Proxy
 run: bash -c &#34;$(curl -sL https://aka.ms/devproxy/setup.sh)&#34;

 - name: Run Dev Proxy
 run: ./devproxy/devproxy &amp;

 - name: Install the Dev Proxy&#39;s certificate
 timeout-minutes: 1
 run: |
 echo &#34;Finding certificate...&#34;
 security find-certificate -c &#34;Dev Proxy CA&#34; -a -p &gt; dev-proxy-ca.pem

 echo &#34;Trusting certificate...&#34;
 sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain dev-proxy-ca.pem
 echo &#34;Certificate trusted.&#34;

 # Set the system proxy settings (optional)
 echo &#34;http_proxy=http://127.0.0.1:8000&#34; &gt;&gt; $GITHUB_ENV
 echo &#34;https_proxy=http://127.0.0.1:8000&#34; &gt;&gt; $GITHUB_ENV

 # Required to test CURL with the Dev Proxy (optional)
 echo &#34;SSL_CERT_FILE=$GITHUB_WORKSPACE/dev-proxy-ca.pem&#34; &gt;&gt; $GITHUB_ENV

 # Include the additional steps you want to run after the Dev Proxy started
 - name: Test Dev Proxy
 run: |
 curl -ix http://127.0.0.1:8000 https://jsonplaceholder.typicode.com/posts
 # When you used the system proxy settings, you don&#39;t need to specify the proxy in the curl command
 curl -i https://jsonplaceholder.typicode.com/posts </code></pre></td></tr></table>
</div>
</div>
</figure>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/devproxy-with-trusted-root-certificate.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRnQAAABXRUJQVlA4WAoAAAAQAAAACQAABgAAQUxQSCQAAAABH6CQbQTIn3L3eNxpREScFWoCIGEY3vTPAD3NENH/WEPcvwZWUDggKgAAAPABAJ0BKgoABwABQCYlnALsAQN9qaGwgAD&#43;/tQofIXyVWeusWS/egAAAA==" src="https://www.eliostruyf.com/uploads/2024/03/devproxy-with-trusted-root-certificate.webp" alt="Test Dev Proxy on GitHub Actions" style="width: 900px;" class="lazyload" />
</a>
<figcaption class="caption__text">Test Dev Proxy on GitHub Actions</figcaption>
</figure>
</div>
With this setup, you can use the Dev Proxy in your GitHub Actions workflow on a macOS virtual machine. This allows you to use the Dev Proxy in combination with Playwright or any other tool for testing your solutions.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

Templates are available on the following <a href="https://github.com/estruyf/devproxy-github-actions-templates">GitHub repository</a>.

</blockquote></content:encoded></item><item><title>#DevHack: Running a background service on GitHub Actions</title><link>https://www.eliostruyf.com/devhack-running-background-service-github-actions/</link><pubDate>Mon, 25 Mar 2024 09:05:07 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/devhack-running-background-service-github-actions/</guid><description>Running background services on GitHub Actions can be helpful when you want to run some tests. For instance, start up the local server before running the tests. In my case, I was testing out Dev Proxy on GitHub Actions to see if I could use it in combination with Playwright to provide my mocks for my tests.</description><content:encoded>Running background services on GitHub Actions can be helpful when you want to run some tests. For instance, start up the local server before running the tests. In my case, I was testing out <a href="https://learn.microsoft.com/en-us/microsoft-cloud/dev/dev-proxy/overview">Dev Proxy</a> on GitHub Actions to see if I could use it in combination with Playwright to provide my mocks for my tests. Unfortunately, GitHub Actions does not support running multiple steps in parallel, so I had to find a workaround.
When searching for ways to run background processes on Linux environments, I found a solution to using an ampersand <code>&amp;</code> at the end of the command.
Using the ampersand starts the service in the background and allows you to continue with the following command.
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Start a process in the background</figcaption>
<div class="highlight" title="Start a process in the background"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">npm start &amp;</code></pre></td></tr></table>
</div>
</div>
</figure>
<blockquote class='info'>
<div class='mb-2'>
info
</div>

Thanks <a href="https://michaelheap.com/">Michael Heap</a> for confirming that this is the right approach.

</blockquote>
<h2 id="starting-a-background-service-in-your-github-actions-workflow">Starting a background service in your GitHub Actions workflow</h2>
The same approach can be used in GitHub Actions. When you use the ampersand <code>&amp;</code> in your step, it starts up the service and continues to the next step in your workflow.
Here is an example of how to start a service in the background and then run your tests.
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">GitHub Actions Workflow</figcaption>
<div class="highlight" title="GitHub Actions Workflow"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml">name: Run tests

on:
 push:
 branches:
 - main
 - dev

jobs:
 testing:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4

 - uses: actions/setup-node@v4

 - name: Install dependencies
 run: npm ci

 - name: Start service
 run: npm start &amp;

 - name: Run tests
 run: npm test</code></pre></td></tr></table>
</div>
</div>
</figure>
In the above example, the <code>npm start &amp;</code> command starts the local server in the background and continues to the next step: running the tests.
I hope this helps you when running a background service on GitHub Actions.</content:encoded></item><item><title>#DevHack: use the synchronous Azure translation API in Node</title><link>https://www.eliostruyf.com/devhack-synchronous-azure-translation-api-node/</link><pubDate>Thu, 21 Mar 2024 16:59:07 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/devhack-synchronous-azure-translation-api-node/</guid><description>The Azure AI Translator service has a new synchronous API in preview. The nice thing about this API is that it does not require any Azure Storage account to be set up to which you typically need to upload the files to be translated. Instead, you can just send the document to be translated directly to the API and you will get the translated document back.</description><content:encoded>The Azure AI Translator service has a new synchronous API in preview. The nice thing about this API is that it does not require any Azure Storage account to be set up to which you typically need to upload the files to be translated. Instead, you can just send the document to be translated directly to the API and you will get the translated document back.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

You can read more information about the synchronous API on the <a href="https://learn.microsoft.com/en-us/azure/ai-services/translator/document-translation/quickstarts/synchronous-rest-api">Get started with synchronous translation</a> article.

</blockquote>
In this post, I will show you how to use the synchronous Azure translation API in Node.js.
<h2 id="calling-the-synchronous-azure-translation-api">Calling the synchronous Azure translation API</h2>
To call the synchronous Azure translation API, you need to send a POST request to the <code>https://{your-instance}.cognitiveservices.azure.com/translator/document:translate</code> endpoint with form data containing the document to be translated.
Here is an example of how you can call the synchronous Azure translation API in Node.js:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Example of calling the synchronous Azure translation API</figcaption>
<div class="highlight" title="Example of calling the synchronous Azure translation API"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">import { readFile } from &#39;node:fs/promises&#39;;
import { blob } from &#39;node:stream/consumers&#39;;

const sourceLanguage = &#34;en&#34;;
const targetLanguage = &#34;nl&#34;;

const api = &#34;https://{your-instance}.cognitiveservices.azure.com/translator/document:translate?sourceLanguage={sourceLanguage}&amp;targetLanguage={targetLanguage}&amp;api-version=2023-11-01-preview&#34;;

const response = await fetch(api, {
 method: &#39;POST&#39;,
 headers: {
 &#39;Ocp-Apim-Subscription-Key&#39;: &#39;{your-subscription-key}&#39;,
 },
 body: formData
});

if (!response.ok) {
console.log(`Error: ${response.status} ${response.statusText}`);
 console.log(await response.text());
} else {
 const data = await response.text();
 console.log(data);
}</code></pre></td></tr></table>
</div>
</div>
</figure>
That&rsquo;s it! You have now successfully called the synchronous Azure translation API in Node.js.</content:encoded></item><item><title>Locally verifying GitHub Actions Job Summaries</title><link>https://www.eliostruyf.com/locally-verifying-github-actions-job-summaries/</link><pubDate>Mon, 11 Mar 2024 09:46:31 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/locally-verifying-github-actions-job-summaries/</guid><description>GitHub Actions Job Summaries are a great way to provide more information on your job&rsquo;s output. This summary is shown in the Actions tab of your repository.
Show image GitHub Actions reporter for Playwright with details markup info You can read more about it on Supercharging GitHub Actions with Job Summaries In this post, I&rsquo;ll explain how you can locally develop and test your GitHub Actions Job Summary outputs using the @actions/core dependency.</description><content:encoded>GitHub Actions Job Summaries are a great way to provide more information on your job&rsquo;s output. This summary is shown in the Actions tab of your repository.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2023/08/example-with-details.png" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAADCAYAAACqPZ51AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAbklEQVR4nGMwNrObrWtsdVXX2Pq0uo7JWUU1nbNK6npgrKyhd1pJXe&#43;akrruNAZ9C6uDRpaO/7X0zf&#43;qaBn&#43;V9U2QsKGf9R1Tf6raBvtZtA0NpunbWJ5U8fQ4ryyhv5FJXU9ZHxeUU3vlqKa3kwArS4odypGMBsAAAAASUVORK5CYII=" src="https://www.eliostruyf.com/uploads/2023/08/example-with-details.png" alt="GitHub Actions reporter for Playwright with details markup" style="width: 1287px;" class="lazyload" />
</a>
<figcaption class="caption__text">GitHub Actions reporter for Playwright with details markup</figcaption>
</figure>
</div>
<blockquote class='info'>
<div class='mb-2'>
info
</div>

You can read more about it on <a href="https://github.blog/2022-05-09-supercharging-github-actions-with-job-summaries/">Supercharging GitHub Actions with Job Summaries</a>

</blockquote>
In this post, I&rsquo;ll explain how you can locally develop and test your GitHub Actions Job Summary outputs using the <a href="https://www.npmjs.com/package/@actions/core">@actions/core</a> dependency.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

Testing your summary locally will save you some time, as you don&rsquo;t have to push your changes to GitHub to see if your summary output is working as expected.

</blockquote>
In my case, I used this approach to develop the <a href="https://www.npmjs.com/package/@estruyf/github-actions-reporter">GitHub Actions Reporter for Playwright</a>. This npm package generates a summary output for your Playwright tests.
<h2 id="how-to-write-a-summary-output">How to write a summary output</h2>
The easiest way to write a GitHub Actions summary is to use the <a href="https://www.npmjs.com/package/@actions/core">@actions/core</a> dependency. The <code>@actions/core</code> dependency provides functions for inputs, outputs, logging, and more.
You can write the job summary using the <code>core.summary</code> methods. Once completed, you can call the <code>core.summary.write()</code> method to write the buffer to the Job Summary output on GitHub Actions.
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">generateSummary.mjs | Summary sample</figcaption>
<div class="highlight" title="generateSummary.mjs | Summary sample"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">import * as core from &#39;@actions/core&#39;;

const summary = core.summary;

summary.addHeading(&#34;My job summary heading&#34;, 1);
summary.addSeparator();

summary.addList([&#39;item1&#39;,&#39;item2&#39;,&#39;item3&#39;], true);

await summary.write();</code></pre></td></tr></table>
</div>
</div>
</figure>
The downside of this approach is that you have to push your changes to GitHub to see if your summary output is working as expected. When you try to run it locally, it will throw an error saying it is unable to find the <code>GITHUB_STEP_SUMMARY</code> environment variable.
<h2 id="testing-your-summary-locally">Testing your summary locally</h2>
To test your summary locally, you must set the <code>GITHUB_STEP_SUMMARY</code> environment variable. This variable defines the file path where the summary output should be written. Locally, we can pass a local file path to this environment variable.
Here is an example of how to set the <code>GITHUB_STEP_SUMMARY</code> environment variable when running your script locally.
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">generateSummary.mjs | Local job summary testing</figcaption>
<div class="highlight" title="generateSummary.mjs | Local job summary testing"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">import * as core from &#39;@actions/core&#39;;
import { join } from &#34;path&#34;;
import { existsSync, unlinkSync, writeFileSync } from &#34;fs&#34;;

const __dirname = import.meta.dirname;

if (process.env.NODE_ENV === &#34;development&#34;) {
 const summaryFile = join(__dirname, &#34;summary.html&#34;);
 if (existsSync(summaryFile)) {
 unlinkSync(summaryFile);
 }
 writeFileSync(summaryFile, &#34;&#34;, &#34;utf-8&#34;);
 process.env.GITHUB_STEP_SUMMARY = summaryFile;
 process.env.GITHUB_ACTIONS = &#34;true&#34;;
}

const summary = core.summary;

summary.addHeading(&#34;My job summary heading&#34;, 1);
summary.addSeparator();

summary.addList([&#39;item1&#39;,&#39;item2&#39;,&#39;item3&#39;], true);

await summary.write();</code></pre></td></tr></table>
</div>
</div>
</figure>
When you run your script locally, you will see that the <code>summary.html</code> file is created with the content of your summary output. The generated file contents look like this:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">summary.html</figcaption>
<div class="highlight" title="summary.html"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
3
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">&lt;h1&gt;My job summary heading&lt;/h1&gt;
&lt;hr&gt;
&lt;ol&gt;&lt;li&gt;item1&lt;/li&gt;&lt;li&gt;item2&lt;/li&gt;&lt;li&gt;item3&lt;/li&gt;&lt;/ol&gt;</code></pre></td></tr></table>
</div>
</div>
</figure></content:encoded></item><item><title>Using CLI for Microsoft 365 in TypeScript Azure Functions</title><link>https://www.eliostruyf.com/cli-microsoft-365-typescript-azure-functions/</link><pubDate>Thu, 07 Mar 2024 09:11:17 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/cli-microsoft-365-typescript-azure-functions/</guid><description>The CLI for Microsoft 365 allows you to manage your Microsoft 365 tenant settings and data. It provides a powerful and flexible way to automate tasks for Microsoft 365, and lately, I have been using it in my Azure Functions to automate a couple of tasks.
In this article, I will show you how to use the CLI for Microsoft 365 in TypeScript Azure Functions by explaining the following:</description><content:encoded>The CLI for Microsoft 365 allows you to manage your Microsoft 365 tenant settings and data. It provides a powerful and flexible way to automate tasks for Microsoft 365, and lately, I have been using it in my Azure Functions to automate a couple of tasks.
In this article, I will show you how to use the CLI for Microsoft 365 in TypeScript Azure Functions by explaining the following:
<ul>
<li>Configuring certificate-based authentication</li>
<li>Using the certificate logging in the Azure Function for CLI for Microsoft 365</li>
<li>Using CLI for Microsoft 365 in TypeScript Azure Functions</li>
</ul>
<h2 id="prerequisites">Prerequisites</h2>
To follow along with this article, you will need the following:
<h3 id="local-development-environment">Local development environment</h3>
<ul>
<li>Node.js</li>
<li><a href="https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local?pivots=programming-language-typescript">Azure Functions Core Tools</a></li>
<li><a href="https://learn.microsoft.com/en-us/cli/azure/install-azure-cli">Azure CLI</a>: The Azure CLI is used to authenticate with the Azure Key Vault locally</li>
</ul>
<h3 id="microsoft-365-tenant-and-azure-subscription">Microsoft 365 tenant and Azure subscription</h3>
<ul>
<li>Azure subscription
<ul>
<li>Azure Key Vault</li>
</ul>
</li>
<li>Microsoft 365 tenant</li>
</ul>
<h3 id="useful-visual-studio-code-extensions">Useful Visual Studio Code extensions</h3>
<ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureresourcegroups">Azure Resource</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions">Azure Functions</a></li>
</ul>
<h2 id="configuring-certificate-based-authentication">Configuring certificate-based authentication</h2>
I chose to use certificate-based authentication for the authentication, as it is a secure way to authenticate with Microsoft 365 services and because my Azure subscription is not linked to my Microsoft 365 tenant. Certificate-based authentication can also be used for multi-tenant applications.
First, you must create a certificate instead of generating this locally, as I used the Azure Key Vault. We can use the Azure Key Vault to generate a self-signed certificate, so we do not have to create it locally and upload the certificate.
<h3 id="create-a-self-signed-certificate-in-azure-key-vault">Create a self-signed certificate in Azure Key Vault</h3>
On your Azure portal, navigate to your Azure Key Vault (or create one if you do not have one). Then, follow the steps below to make a self-signed certificate:
<ul>
<li>Click on the <code>Certificates</code> in the left menu</li>
<li>Click on <code>Generate/Import</code> in the top menu</li>
<li>Fill in the form with the following details:
<ul>
<li>Method: <code>Generate</code></li>
<li>Certificate Name: <code>cli-m365-cert</code> (or any name you prefer)</li>
<li>Type: <code>Self-signed certificate</code></li>
<li>Subject: <code>CN=cli-m365-cert</code> (or any name you prefer)</li>
<li>Validity: <code>12 months</code> (or any duration you prefer)</li>
<li>Key type: <code>PKCS #12</code></li>
</ul>
</li>
</ul>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/create-certificate.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRnIAAABXRUJQVlA4WAoAAAAQAAAACQAABgAAQUxQSCIAAAABH0AgQPF/ZzGDGxERZ4WaAEgYhjf9M0BPM0T0P9YQ968BVlA4ICoAAACQAQCdASoKAAcAAUAmJaQAAudZfggA/v6FqOAmYW&#43;OZDncWPHTK2SZAAA=" src="https://www.eliostruyf.com/uploads/2024/03/create-certificate.webp" alt="Create a self-signed certificate" style="width: 1772px;" class="lazyload" />
</a>
<figcaption class="caption__text">Create a self-signed certificate</figcaption>
</figure>
</div>
<ul>
<li>Click on <code>Create</code></li>
</ul>
Please give it a couple of seconds to generate the certificate. Once the certificate is generated, click on the certificate name and follow the steps to download the certificate:
<ul>
<li>Click on the certificate under the <code>current version</code> column</li>
<li>Click on <code>Download in CER format</code> in the top menu</li>
</ul>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/download-cer.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRlwAAABXRUJQVlA4WAoAAAAQAAAACQAAAQAAQUxQSA0AAAABD3Bu74iIsAIR/Q8FAFZQOCAoAAAAsAEAnQEqCgACAAFAJiWkAuwA3RhbgAD&#43;/Ddtnerr4n56hRi7i&#43;3gAA==" src="https://www.eliostruyf.com/uploads/2024/03/download-cer.webp" alt="Download in CER format" style="width: 1300px;" class="lazyload" />
</a>
<figcaption class="caption__text">Download in CER format</figcaption>
</figure>
</div>
<ul>
<li>Keep the downloaded file safe, as we will use it in one of the upcoming steps</li>
</ul>
<h3 id="create-a-microsoft-entra-id---app-registration">Create a Microsoft Entra ID - App registration</h3>
Next, we need to create an app registration for the Azure portal. The App registration will be used to authenticate with the CLI for Microsoft 365 to your tenant.
<blockquote class='important'>
<div class='mb-2'>
important
</div>

Make sure you create the new app registration on the tenant linked to your Micorosft 365 environment

</blockquote>
On the CLI for Microsoft 365 documentation, you can follow the <a href="https://pnp.github.io/cli-microsoft365/user-guide/using-own-identity">Use your own Microsoft 365 Entra ID identity</a> steps to create a new App registration.
<blockquote class='important'>
<div class='mb-2'>
important
</div>

Follow it until you have to assign the permissions to the App registration.

</blockquote>
When you followed the steps on the documentation, you should have done the following:
<ul>
<li>Created a new App registration</li>
<li>Configured the authentication for console applications</li>
<li>Enabled the public client flows</li>
</ul>
You did have to stop at the permissions because we will assign the permissions in the next step ourselves. The permissions in the documentation are for user-based (delegate) permissions, but we will use application-based permissions.
<h4 id="assign-the-permissions-to-the-app-registration">Assign the permissions to the App registration</h4>
For this example, I will use the minimum permissions required to read the sites in the Microsoft 365 tenant:
<ul>
<li>Microsoft Graph: <code>Sites.Read.All</code></li>
<li>SharePoint: <code>Sites.Read.All</code></li>
</ul>
<blockquote class='important'>
<div class='mb-2'>
important
</div>

Make sure you have the required permissions to assign the permissions to the App registration

</blockquote>
To assign the permissions to the App registration, follow the steps below:
<ul>
<li>Navigate to the App registration you created</li>
<li>Click on <code>API permissions</code> in the left menu</li>
<li>Click on <code>Add a permission</code> in the top menu</li>
<li>Click on <code>Microsoft Graph</code> in the list</li>
<li>Click on <code>Application permissions</code></li>
<li>Search for <code>Sites</code> and select the <code>Sites.Read.All</code> permission</li>
<li>Click on <code>Add permissions</code></li>
<li>Click on <code>Add a permission</code> in the top menu</li>
<li>Click on <code>SharePoint</code> in the list</li>
<li>Click on <code>Application permissions</code></li>
<li>Search for <code>Sites</code> and select the <code>Sites.Read.All</code> permission</li>
<li>Click on <code>Add permissions</code></li>
</ul>
Once you have added the permissions, you need to grant admin consent to the permissions. To do this, click on <code>Grant admin consent for &lt;your tenant&gt;</code> in the top menu.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/application-permissions.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRnYAAABXRUJQVlA4WAoAAAAQAAAACQAAAwAAQUxQSCAAAAABHyAWTPzd&#43;sOZRkSEDMUNyMBR8aLHeCKi/9E8IULNA1ZQOCAwAAAA0AEAnQEqCgAEAAFAJiWcAAL3hXg8nVgA/vvXhv8Da2KCvPq1xgXArACULNh5AAAA" src="https://www.eliostruyf.com/uploads/2024/03/application-permissions.webp" alt="Configured the application permissions" style="width: 1924px;" class="lazyload" />
</a>
<figcaption class="caption__text">Configured the application permissions</figcaption>
</figure>
</div>
<h4 id="configure-the-certificate-in-the-app-registration">Configure the certificate in the App registration</h4>
Now that we have the app registration and the permissions configured, we need to configure the certificate for the app registration. By adding the previously created certificate to the App registration, we can use it to authenticate with the CLI for Microsoft 365. Follow the next steps to configure the certificate:
<ul>
<li>Navigate to the App registration you created</li>
<li>Click on <code>Certificates &amp; secrets</code> in the left menu</li>
<li>Click on <code>Upload certificate</code> in the top menu</li>
<li>Click on <code>Choose file</code> and select the downloaded CER file</li>
<li>Click on <code>Add</code></li>
</ul>
Once you have uploaded the certificate, you will see the certificate in the list.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/upload-certificate.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRlYAAABXRUJQVlA4WAoAAAAQAAAACQAAAQAAQUxQSAwAAAABD1D1iAisQET/QwFWUDggJAAAALABAJ0BKgoAAgABQCYlpAAC6NzWBcAA/v3UyCwg&#43;Lq24AAAAA==" src="https://www.eliostruyf.com/uploads/2024/03/upload-certificate.webp" alt="Uploaded certificate to your app registration" style="width: 2122px;" class="lazyload" />
</a>
<figcaption class="caption__text">Uploaded certificate to your app registration</figcaption>
</figure>
</div>
<h2 id="creating-the-azure-functions-project">Creating the Azure Functions project</h2>
The previous configuration was required to start building our Azure Functions project. We will use the Azure Functions Core Tools to create the Azure Functions project.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

If you do not have the Azure Functions Core Tools installed, you can install it by following the <a href="https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local?pivots=programming-language-typescript">official documentation</a>.

</blockquote>
<h3 id="initialize-the-azure-functions-project">Initialize the Azure Functions project</h3>
I created a new Azure Functions project using the following command:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Initialize the Azure Functions project</figcaption>
<div class="highlight" title="Initialize the Azure Functions project"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">func init cli-m365-azurefunctions-sample --typescript</code></pre></td></tr></table>
</div>
</div>
</figure>
<h3 id="install-the-required-packages">Install the required packages</h3>
Next, navigate to the created project and install the required packages:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Install dependencies</figcaption>
<div class="highlight" title="Install dependencies"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">npm i @azure/identity @azure/keyvault-secrets @pnp/cli-microsoft365</code></pre></td></tr></table>
</div>
</div>
</figure>
We installed the <code>@pnp/cli-microsoft365</code> package to the Azure Functions project instead of globally installing it.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

The <code>@azure/identity</code> and <code>@azure/keyvault-secrets</code> packages are used to authenticate with the Azure Key Vault.

</blockquote>
<h3 id="configure-the-required-settings">Configure the required settings</h3>
Open the project in Visual Studio Code and navigate to the <code>local.settings.json</code> file. Add the following settings to the file:
<ul>
<li><code>KeyVaultUrl</code>: The URL of the Azure Key Vault</li>
<li><code>CertificateName</code>: The name of the certificate in the Azure Key Vault</li>
<li><code>TenantId</code>: The ID of your Microsoft 365 tenant. You can find the Tenant ID on the Microsoft Entra ID overview page.</li>
<li><code>ClientId</code>: The Application (client) ID of the App registration you created</li>
</ul>
The settings should look similar to this:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">local.settings.json</figcaption>
<div class="highlight" title="local.settings.json"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-json" data-lang="json">{
 &#34;IsEncrypted&#34;: false,
 &#34;Values&#34;: {
 &#34;FUNCTIONS_WORKER_RUNTIME&#34;: &#34;node&#34;,
 &#34;AzureWebJobsFeatureFlags&#34;: &#34;EnableWorkerIndexing&#34;,
 &#34;AzureWebJobsStorage&#34;: &#34;&#34;,
 &#34;KeyVaultUrl&#34;: &#34;https://&lt;key vault name&gt;.vault.azure.net/&#34;,
 &#34;CertificateName&#34;: &#34;cli-m365-cert&#34;,
 &#34;TenantId&#34;: &#34;&lt;tenant-id&gt;&#34;,
 &#34;ClientId&#34;: &#34;&lt;client-id&gt;&#34;,
 }
}</code></pre></td></tr></table>
</div>
</div>
</figure>
<blockquote class='important'>
<div class='mb-2'>
important
</div>

Make sure you replace the placeholders with your values

</blockquote>
<h4 id="why-not-use-the-azure-key-vault-references">Why not use the Azure Key Vault references?</h4>
In the settings, we use the Azure Key Vault URL and certificate&rsquo;s name to retrieve the certificate. Another way would be using key vault references like: <code>@Microsoft.KeyVault(SecretUri=&lt;certificate identifier&gt;)</code>.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/key-vault-reference.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRmQAAABXRUJQVlA4WAoAAAAQAAAACQAAAQAAQUxQSBMAAAABD6AQQADEX7XxiYgYrEBE/0MBAFZQOCAqAAAAsAEAnQEqCgACAAFAJiWkAALc/0uw0AD&#43;/g7gGLRH5gPqkU34zSGgAAAA" src="https://www.eliostruyf.com/uploads/2024/03/key-vault-reference.webp" alt="Using the Azure Key Vault reference" style="width: 2228px;" class="lazyload" />
</a>
<figcaption class="caption__text">Using the Azure Key Vault reference</figcaption>
</figure>
</div>
The downside of this approach is that you have to store the certificate value in the <code>local.settings.json</code> file, which is not recommended. By using the certificate name, we control everything in the Azure Key Vault.
<h3 id="using-esm-modules-in-azure-functions">Using ESM modules in Azure Functions</h3>
As the latest version of CLI for Microsoft 365 uses ESM modules, we need to configure the Azure Functions project to use ESM modules.
In the <code>package.json</code> file, add the following line:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">package.json</figcaption>
<div class="highlight" title="package.json"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
3
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-json" data-lang="json">{
 &#34;type&#34;: &#34;module&#34;
}</code></pre></td></tr></table>
</div>
</div>
</figure>
Update the <code>tsconfig.json</code> file to the following:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">tsconfig.json</figcaption>
<div class="highlight" title="tsconfig.json"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-json" data-lang="json">{
 &#34;compilerOptions&#34;: {
 &#34;module&#34;: &#34;ESNext&#34;,
 &#34;target&#34;: &#34;ESNext&#34;,
 &#34;moduleResolution&#34;: &#34;Node&#34;,
 &#34;outDir&#34;: &#34;dist&#34;,
 &#34;rootDir&#34;: &#34;.&#34;,
 &#34;sourceMap&#34;: true,
 &#34;strict&#34;: false
 }
}</code></pre></td></tr></table>
</div>
</div>
</figure>
<h3 id="create-a-new-azure-function">Create a new Azure Function</h3>
I created a new Azure Function using the following command:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Create a new Azure Function</figcaption>
<div class="highlight" title="Create a new Azure Function"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">func new --name getSiteTitle --template &#34;HTTP trigger&#34;</code></pre></td></tr></table>
</div>
</div>
</figure>
<h3 id="implement-the-azure-function">Implement the Azure Function</h3>
Open the <code>./src/functions/getSiteTitle.ts</code> file and replace the content with the following code:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">./src/functions/getSiteTitle.ts</figcaption>
<div class="highlight" title="./src/functions/getSiteTitle.ts"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">import { app, HttpRequest, HttpResponseInit, InvocationContext } from &#34;@azure/functions&#34;;
import { AzureCliCredential, ChainedTokenCredential, DefaultAzureCredential, TokenCredential } from &#34;@azure/identity&#34;;
import { SecretClient } from &#34;@azure/keyvault-secrets&#34;;
import { executeCommand } from &#34;@pnp/cli-microsoft365&#34;;

export async function getSiteTitle(_: HttpRequest, __: InvocationContext): Promise&lt;HttpResponseInit&gt; {
 const keyVaultUrl = process.env.KeyVaultUrl;
 const certificateName = process.env.CertificateName;
 const tenantId = process.env.TenantId;
 const clientId = process.env.ClientId;

if (!keyVaultUrl || !certificateName || !tenantId || !clientId) {
 return {
 status: 500,
 body: &#34;Missing environment variables&#34;,
 };
 }

 const creds: TokenCredential[] = [
 new DefaultAzureCredential(),
 new AzureCliCredential()
 ];
 const credentialChain = new ChainedTokenCredential(...creds);

 const client = new SecretClient(keyVaultUrl, credentialChain);
 const certificate = await client.getSecret(certificateName);

if (!certificate || !certificate.value) {
 return {
 status: 500,
 body: &#34;Certificate not found&#34;,
 };
 }

 const login = await executeCommand(&#34;login&#34;, {
 interactive: false,
 authType: &#34;certificate&#34;,
 tenant: tenantId,
 appId: clientId,
 certificateBase64Encoded: certificate.value,
 });

 if (login.error) {
 return {
 status: 500,
body: `Error logging in: ${login.error.message}`,
 };
 }

 const site = await executeCommand(&#34;spo web get&#34;, {
 url: &#34;https://struyfconsultingdev.sharepoint.com&#34;,
 });
const siteInfo = JSON.parse(site.stdout);

 return {
 status: 200,
 jsonBody: siteInfo.Title,
 };
}

app.http(&#34;getSiteTitle&#34;, {
 methods: [&#34;GET&#34;, &#34;POST&#34;],
 authLevel: &#34;anonymous&#34;,
 handler: getSiteTitle,
});</code></pre></td></tr></table>
</div>
</div>
</figure>
The Azure Function will authenticate with the CLI for Microsoft 365 using the certificate-based authentication and retrieve the title of the specified site.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

In the code, we make use of <code>executeCommand</code> from CLI for Microsoft 365. This allows us to call any of the CLI commands. You can read more on the <a href="https://pnp.github.io/cli-microsoft365/user-guide/use-cli-api">use CLI for Microsoft 365 programmatically</a> documentation.

</blockquote>
<h3 id="locally-running-the-azure-function">Locally running the Azure Function</h3>
To run the Azure Function, we need to be able to authenticate with the Azure Key Vault to fetch the certificate. On Azure, we will use a managed identity, but locally, we can use the Azure CLI authentication. The great thing about the <code>@azure/identity</code> package is that you can chain credentials, which allows you to use multiple authentication methods. The first one that succeeds will be used.
In the above sample, you can see the following credentials:
<ul>
<li><code>DefaultAzureCredential</code>: This credential will be used for the managed identity on Azure</li>
<li><code>AzureCliCredential</code>: This credential will be used for the Azure CLI authentication</li>
</ul>
To run the Azure Function locally, you first have to sign in to the Azure CLI:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Sign in to the Azure CLI</figcaption>
<div class="highlight" title="Sign in to the Azure CLI"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">az login</code></pre></td></tr></table>
</div>
</div>
</figure>
<blockquote class='important'>
<div class='mb-2'>
important
</div>

Be sure to login into the Azure environment where you configured the Azure Key vault.

</blockquote>
Once logged in, you can run the Azure Function using the following command or press <code>F5</code> in Visual Studio Code:
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Build and run the Azure Function</figcaption>
<div class="highlight" title="Build and run the Azure Function"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">npm run build &amp;&amp; func start</code></pre></td></tr></table>
</div>
</div>
</figure>
The Azure Function will start, and you can navigate to <code>http://localhost:7071/api/getSiteTitle</code> to see the result.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/azure-function-outcome.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRoAAAABXRUJQVlA4WAoAAAAQAAAACQAAAgAAQUxQSB8AAAAAe7i4uLi4uLi4e7L//////////7J7uLi4uLi4uLh7AFZQOCA6AAAAUAIAnQEqCgADAAFAJiWUAnRrgLf/A9EKHlsAAP7773KiPgS4E0HjCvTtdfBnXFys/GxOsskGtV&#43;gAA==" src="https://www.eliostruyf.com/uploads/2024/03/azure-function-outcome.webp" alt="The title of the site as a result of executing the Azure Function" style="width: 660px;" class="lazyload" />
</a>
<figcaption class="caption__text">The title of the site as a result of executing the Azure Function</figcaption>
</figure>
</div>
<h3 id="running-the-azure-function-on-azure">Running the Azure Function on Azure</h3>
<blockquote class='important'>
<div class='mb-2'>
important
</div>

I will not go into detail on how to deploy the Azure Function to Azure.

</blockquote>
Assuming you have published the code to your Azure Functions, you must perform some configuration steps to make the function work.
<h4 id="managed-identity">Managed Identity</h4>
First, you must configure the managed identity for the Azure Function. This managed identity will be used to authenticate with the Azure Key Vault and retrieve the certificate.
Open the Azure Function in the Azure portal and follow the steps below:
<ul>
<li>Navigate to the <code>Identity</code> tab</li>
<li>Enable the <code>System assigned</code> identity</li>
</ul>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/enable-system-assigned.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRnIAAABXRUJQVlA4WAoAAAAQAAAACQAAAwAAQUxQSCAAAAABH0CQbePvuf0Y04iIiA41AQgw1q1/BgpH9D&#43;&#43;EiHyFVZQOCAsAAAAsAEAnQEqCgAEAAFAJiWkAALnYdvXgAD&#43;/ZYh3RD5ZN7DPocsyZrgC/kAAAA=" src="https://www.eliostruyf.com/uploads/2024/03/enable-system-assigned.webp" alt="Enable the system assigned managed identity" style="width: 1852px;" class="lazyload" />
</a>
<figcaption class="caption__text">Enable the system assigned managed identity</figcaption>
</figure>
</div>
<blockquote class='info'>
<div class='mb-2'>
info
</div>

You can also use <code>user assigned</code>, but for this kind of Managed Identity, you first need to create a User Managed Identity and make use of the <code>ManagedIdentityCredential</code> credential from the Azure Identity dependency.

</blockquote>
<h4 id="key-vault-access-policy">Key Vault access policy</h4>
Next, you must configure the access policy for the managed identity on the Azure Key Vault. Follow the steps below:
<ul>
<li>Navigate to the Azure Key Vault</li>
<li>Click on <code>Access policies</code> in the left menu</li>
<li>Click on <code>Create</code> in the top menu</li>
<li>Select the following permissions:
<ul>
<li><code>Get</code> for <code>Secret permissions</code></li>
<li><code>Get</code> for <code>Certificate permissions</code></li>
</ul>
</li>
<li>Click on <code>next</code></li>
<li>Search for your Azure Function by its name or use the object ID</li>
<li>Click on <code>next</code> and <code>create</code></li>
</ul>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/key-vault-access-policy.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRl4AAABXRUJQVlA4WAoAAAAQAAAACQAAAQAAQUxQSBQAAAABD6AgbQPGv8x2R1NEBMcKRPQ/FFZQOCAkAAAAsAEAnQEqCgACAAFAJiWkAAMX/EKdQAD&#43;/PzJOKVu31MAAAAA" src="https://www.eliostruyf.com/uploads/2024/03/key-vault-access-policy.webp" alt="Assigned the Azure Function - Managed Identity to the Azure Key Vault" style="width: 1792px;" class="lazyload" />
</a>
<figcaption class="caption__text">Assigned the Azure Function - Managed Identity to the Azure Key Vault</figcaption>
</figure>
</div>
<h4 id="azure-function-configuration">Azure Function configuration</h4>
Finally, you will need to configure the Azure Functions settings. Follow the steps below:
<ul>
<li>Navigate to the Azure Function</li>
<li>Click on <code>Configuration</code> in the left menu</li>
<li>Add the following settings:
<ul>
<li><code>KeyVaultUrl</code>: The URL of the Azure Key Vault</li>
<li><code>CertificateName</code>: The name of the certificate in the Azure Key Vault</li>
<li><code>TenantId</code>: The ID of your Microsoft 365 tenant. The tenant ID can be found on the Microsoft Entra ID overview page.</li>
<li><code>ClientId</code>: The Application (client) ID of the App registration you created</li>
</ul>
</li>
</ul>
When you save the settings, the Azure Function can authenticate with the Azure Key Vault and retrieve the certificate.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/03/azure-function-api.png" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAYAAABhYU3QAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAVElEQVR4nGOYG2GxYmqQ4ZOpAfq3pgUb35kaaHAHRE8LMrwzLdgIJPZsir/eYgZPI83VtvoaL611Ve9ZaKs80JOXfKArJw7B8hL3dOXEX&#43;nJiS8FAKq5IECvqUyGAAAAAElFTkSuQmCC" src="https://www.eliostruyf.com/uploads/2024/03/azure-function-api.png" alt="Calling the Azure Function on Azure" style="width: 884px;" class="lazyload" />
</a>
<figcaption class="caption__text">Calling the Azure Function on Azure</figcaption>
</figure>
</div>
<h2 id="conclusion">Conclusion</h2>
In this article, I showed you how to use the CLI for Microsoft 365 in TypeScript Azure Functions. We configured the certificate-based authentication and used the Azure Key Vault to store the certificate.
Be sure to read the <a href="https://pnp.github.io/cli-microsoft365/user-guide/cli-certificate-caveats">caveats when working with the CLI and certificate login</a> to understand the limitations of this approach.</content:encoded></item><item><title>Add a support link for a VSCode extension on the marketplace</title><link>https://www.eliostruyf.com/add-support-link-vscode-extension-marketplace/</link><pubDate>Wed, 28 Feb 2024 14:19:19 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/add-support-link-vscode-extension-marketplace/</guid><description>While preparing a new release for Front Matter CMS, I noticed an API call to GitHub failing from the Visual Studio Code marketplace. While looking into it, it requested a SUPPORT.md file in the repository&rsquo;s root.
Show image VSCode Marketplace - Call for the SUPPORT.md file The VSCode Marketplace uses the following API format: https://api.</description><content:encoded>While preparing a new release for Front Matter CMS, I noticed an API call to GitHub failing from the Visual Studio Code marketplace. While looking into it, it requested a <code>SUPPORT.md</code> file in the repository&rsquo;s root.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/02/vscode-marketplace-support.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRoYAAABXRUJQVlA4WAoAAAAQAAAACQAABAAAQUxQSCAAAAABHyCQTfxNWxLXiIiQoSYAEobhTf8MUNMQEf2PNcT9NVZQOCBAAAAA0AEAnQEqCgAFAAFAJiWcAvzhC1zyLAAA/ub7pyDo&#43;lXcK37piW30q1PIFa5h//83WyZ/RRbeSoopxDOGR4AAAA==" src="https://www.eliostruyf.com/uploads/2024/02/vscode-marketplace-support.webp" alt="VSCode Marketplace - Call for the SUPPORT.md file" style="width: 1200px;" class="lazyload" />
</a>
<figcaption class="caption__text">VSCode Marketplace - Call for the SUPPORT.md file</figcaption>
</figure>
</div>
The VSCode Marketplace uses the following API format: <code>https://api.github.com/repos/username/repo/contents/SUPPORT.md</code>.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

You can find more information in the <a href="https://docs.github.com/en/rest/repos/contents?apiVersion=2022-11-28#get-repository-content">get repository content</a> GitHub API documentation.

</blockquote>
This API returns more information about the file if it exists, like the <code>download_url</code> and <code>html_url</code>. The <code>html_url</code> links to the support page from the marketplace.
If you want to add a support link to your extension under the resources section. All you have to do is a <code>SUPPORT.md</code> file in the root of your repository. The content of the file can be anything you want. Once you push the file to the repository, the marketplace picks it up and displays the support link.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/02/vscode-marketplace-support-link.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRooAAABXRUJQVlA4WAoAAAAQAAAACQAABAAAQUxQSCEAAAABHyAgIf4/lRHciIiYhJoASBiGN/0zQE1DRPQ/1hD31wAAVlA4IEIAAADQAQCdASoKAAUAAUAmJaQAAunBDF96gAD&#43;6l1pR3ZvZdYprft8xvULi3B4At//LD43f3wXyDqd1URXyGLqz2GAAAA=" src="https://www.eliostruyf.com/uploads/2024/02/vscode-marketplace-support-link.webp" alt="VSCode Marketplace - Support link" style="width: 1200px;" class="lazyload" />
</a>
<figcaption class="caption__text">VSCode Marketplace - Support link</figcaption>
</figure>
</div></content:encoded></item><item><title>Running .NET Azure Functions on macOS and Visual Studio Code</title><link>https://www.eliostruyf.com/running-net-azure-functions-macos-visual-studio-code/</link><pubDate>Tue, 27 Feb 2024 13:18:52 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/running-net-azure-functions-macos-visual-studio-code/</guid><description>TypeScript is typically my go-to language for building any solution, but sometimes, you must use what is best for the job. In my current project, I am using .NET Core to build Azure Functions, and I had to get myself familiar with using .Net Core and Azure Functions on macOS.</description><content:encoded>TypeScript is typically my go-to language for building any solution, but sometimes, you must use what is best for the job. In my current project, I am using .NET Core to build Azure Functions, and I had to get myself familiar with using .Net Core and Azure Functions on macOS.
As the Microsoft documentation only explained it with Visual Studio for Mac, I had to figure out how to get it working with Visual Studio Code. This post will describe getting .NET Core and Azure Functions working on macOS with Visual Studio Code.
<h2 id="prerequisites">Prerequisites</h2>
To start building. NET-based Azure Functions, you need to install the .NET SDK and Azure Functions Core Tools on your machine.
<h3 id="installing-net-sdk-on-macos">Installing .NET SDK on macOS</h3>
The .NET-supported versions are found on the following <a href="https://dotnet.microsoft.com/en-us/download/dotnet">download .NET</a> page.
I went for the binaries of the .NET 8.0 SDK for macOS <a href="https://dotnet.microsoft.com/en-us/download/dotnet/8.0">download .NET 8.0.201 SDK for macOS Arm64</a>.
If you go for the binary download, once downloaded, you can move the files from the tar file to the directory of your choice. On the .NET download page, they recommend using the <code>$HOME/dotnet</code> directory. In my case, I moved the files to the <code>$HOME/.dotnet</code> directory.
<figure class="codeblock_titled ">
<figcaption class="codeblock_titled__header">Moving the .NET SDK files to the .dotnet directory</figcaption>
<div class="highlight" title="Moving the .NET SDK files to the .dotnet directory"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">cd ~/Downloads
mkdir -p $HOME/.dotnet &amp;&amp; tar zxf dotnet-sdk-8.0.201-osx-arm64.tar.gz -C $HOME/.dotnet</code></pre></td></tr></table>
</div>
</div>
</figure>
<blockquote class='important'>
<div class='mb-2'>
important
</div>

The filename can vary depending on which version you downloaded.

</blockquote>
After moving the files, you must add the .NET SDK to your shell profile or any other profile you use.
In my case, I am using <code>zsh</code>, so I added the following to my <code>.zshrc</code> file and the <code>.zprofile</code> file.
<ul>
<li>Shell profile: <code>~/.profile</code></li>
<li>Bash profile: <code>~/.bash_profile</code>, <code>~/.bashrc</code></li>
<li>Zsh profile: <code>~/.zshrc</code>, <code>~/.zprofile</code></li>
</ul>
In those files, you need to add the following lines:
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">export DOTNET_ROOT=$HOME/.dotnet
export PATH=$PATH:$HOME/.dotnet</code></pre></td></tr></table>
</div>
</div>
<blockquote class='info'>
<div class='mb-2'>
info
</div>

By adding those lines, you permanently make <code>dotnet</code> commands available in your terminal.

</blockquote>
After adding it, restart your terminal or run the following commands to apply the changes:
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"># Change the file to the profile you are using
source ~/.zshrc</code></pre></td></tr></table>
</div>
</div>
Once your profile has been reloaded, you can check if the .NET SDK is installed by running the following command:
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">dotnet --info</code></pre></td></tr></table>
</div>
</div>
<h3 id="installing-azure-functions-core-tools">Installing Azure Functions Core Tools</h3>
The documentation for installing the Azure Functions Core Tools on macOS is up to date. You can find it in the <a href="https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=macos#install-the-azure-functions-core-tools">Install the Azure Functions Core Tools</a> section of the Core Tools Development documentation.
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
2
3
4
5
6
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"># When Homebrew is installed
brew tap azure/functions
brew install azure-functions-core-tools@4

# To update the Azure Functions Core Tools
brew upgrade azure-functions-core-tools@4</code></pre></td></tr></table>
</div>
</div>
To check if the Azure Functions Core Tools are installed, you can run the following command:
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">func --version</code></pre></td></tr></table>
</div>
</div>
<h2 id="creating-a-new-azure-functions-project">Creating a new Azure Functions project</h2>
You can create a new Azure Functions project after installing the .NET SDK and Azure Functions Core Tools. You have the option of creating a new project from your terminal or Visual Studio Code with the <a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions">Azure Functions extension</a>.
<h3 id="using-the-terminal">Using the terminal</h3>
To create a new Azure Functions project, you can use the following command:
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">func init</code></pre></td></tr></table>
</div>
</div>
This command will ask you a few questions to set up the project. You can choose the following options:
<ul>
<li>Select the runtime: <code>dotnet (isolated process)</code></li>
<li>Select the language: <code>C#</code></li>
</ul>
If everything is installed correctly, it should create a new Azure Functions project in the current directory.
New Azure Functions can be added to the project by running the following command:
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">func new</code></pre></td></tr></table>
</div>
</div>
<h3 id="using-visual-studio-code">Using Visual Studio Code</h3>
Suppose you have installed the <a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions">Azure Functions extension</a> in Visual Studio Code. In that case, you can create a new Azure Functions project by clicking on the Azure icon in the sidebar and then clicking the <code>Create New Project</code> button in the workspace section.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/02/azure-function-creation.png" title="Show image">
Show image
<img data-lqip="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAADCAYAAACqPZ51AAAAAklEQVR4AewaftIAAABtSURBVC3BPQrCMACA0S8mrRWaoHsdFHESb&#43;9thHoAl6SQhPy6&#43;J44Xx8vrc3NOUcpmUEpzNEwa03eAlMfoNW3SklcrI13xIhUI6U19PJkPx3Ic8SGRNq&#43;VdVW15a75K93kPbDLkhOdIIP&#43;OjXHzIpMwU8nzyQAAAAAElFTkSuQmCC" src="https://www.eliostruyf.com/uploads/2024/02/azure-function-creation.png" alt="Create a new Azure Function project" style="width: 750px;" class="lazyload" />
</a>
<figcaption class="caption__text">Create a new Azure Function project</figcaption>
</figure>
</div>
It will ask you similar questions as the terminal command to set up the project.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/02/azure-functions-runtime.png" title="Show image">
Show image
<img data-lqip="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAADCAYAAACqPZ51AAAAAklEQVR4AewaftIAAABZSURBVG3BMQqAIBgG0M9&#43;UyHqAkHR0gG6/9RNGlqrRVPQj2iN3lPTvKwi1UgSJOGcg4LCHSNI4lVK2bSI7a11w3FeyLnAB48vklmbWvaubbSpBT4E/Ekp7g9PpCYC5c8cZQAAAABJRU5ErkJggg==" src="https://www.eliostruyf.com/uploads/2024/02/azure-functions-runtime.png" alt="Select the Azure Functions runtime" style="width: 750px;" class="lazyload" />
</a>
<figcaption class="caption__text">Select the Azure Functions runtime</figcaption>
</figure>
</div>
<h2 id="running-the-azure-functions">Running the Azure Functions</h2>
Now that you have created the Azure Functions project, you can run the Azure Functions locally. Start by opening the project in Visual Studio Code if you haven&rsquo;t already. It should suggest installing the <a href="https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp">C# extension</a>, which is required to debug the Azure Functions.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

Additionally, you can install the <a href="https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit">C# Dev Kit</a>.

</blockquote>
You only need to press <code>F5</code> to debug the Azure Functions. It will start the Azure Functions Core Tools and run the Azure Functions locally.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/02/azure-functions-debugging.png" title="Show image">
Show image
<img data-lqip="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAYAAAAxrNxjAAAAAklEQVR4AewaftIAAAC3SURBVD3BTU7DQAyA0c&#43;en4RKQCuxZMWCLfc/DUcgkUjLzNgeuoH35PXt41O0nPs4WEvBNSPh9HYjiWDmRMwt&#43;4hnUT/PEG4/nfEA04zav3EcG4O7mSUmIwwPhwSlFtwa5gPC&#43;ZNbDEQUlcnLRaAaXhL7FSz4l1UVlYQofG2DoZ0AIj2BD0qt5KTkZVlYlxNpVbbrgakyubMFSqe3Ru&#43;N/H563JeKHMeVywwaAqpozYRMRCYxZP8F8v5jEI3Pp2IAAAAASUVORK5CYII=" src="https://www.eliostruyf.com/uploads/2024/02/azure-functions-debugging.png" alt="Debugging the Azure Functions" style="width: 1200px;" class="lazyload" />
</a>
<figcaption class="caption__text">Debugging the Azure Functions</figcaption>
</figure>
</div>
<h2 id="extra-installing-azurite-for-local-development">Extra: Installing Azurite for local development</h2>
Azurite is a local emulator for Azure Storage. You can install Azurite with the following command:
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">npm install -g azurite</code></pre></td></tr></table>
</div>
</div>
To run it locally, you can use the following command:
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code>1
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">azurite</code></pre></td></tr></table>
</div>
</div>
<blockquote class='info'>
<div class='mb-2'>
info
</div>

More information about Azurite can be found on the <a href="https://learn.microsoft.com/en-us/azure/storage/common/storage-use-azurite?tabs=npm%2Cblob-storage">Use the Azurite emulator for local Azure Storage development</a> documentation

</blockquote></content:encoded></item><item><title>Help my browser keeps refreshing my SharePoint page</title><link>https://www.eliostruyf.com/browser-refreshing-sharepoint-page/</link><pubDate>Fri, 23 Feb 2024 14:05:23 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/browser-refreshing-sharepoint-page/</guid><description>One of my customers reported that their SharePoint page kept refreshing in Firefox. While investigating the issue, it turned out it was an issue with the Microsoft Graph permission scope that was missing.
All we had to do was approve the permission scope in the SharePoint Admin Center - API access page, and it was fixed; the page stopped refreshing.</description><content:encoded>One of my customers reported that their SharePoint page kept refreshing in Firefox. While investigating the issue, it turned out it was an issue with the Microsoft Graph permission scope that was missing.
All we had to do was approve the permission scope in the SharePoint Admin Center - API access page, and it was fixed; the page stopped refreshing.
Although the solution is simple, I wanted to understand why this was happening.
<h2 id="why-does-the-page-keep-refreshing">Why does the page keep refreshing?</h2>
Let us first check the experience:
<div class="caption my-4">
<figure class="caption__figure">
<video width="100%" controls>
<source src="https://www.eliostruyf.com/uploads/2024/02/page-refresh-issue.mov" type="video/mp4">
</video>
<figcaption class="caption__text">SharePoint page refresh issue</figcaption>
</figure>
</div>
When you look closely at the video, you will see that the page gets redirected to <code>/_forms/spfxsinglesignon.aspx</code>, bringing you back to the original page.
The <code>/_forms/spfxsinglesignon.aspx</code> page is used to overcome an issue with the third-party cookies, which are blocked by default in Firefox, and soon other browsers will do the same.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

The Chrome team is currently rolling this out (Q3 2024) - <a href="https://developers.google.com/privacy-sandbox/3pcd">Prepare for third-party cookie restrictions</a>

</blockquote>
As Firefox is blocking the third-party cookies, the flow of loading your page and solutions goes like this:
<ul>
<li>The page loads</li>
<li>The solution loads</li>
<li>The solution code tries to retrieve an access token for Microsoft Graph</li>
<li>The page gets redirected to <code>/_forms/spfxsinglesignon.aspx</code> to get the access token</li>
<li>An error is returned (but you do not see this), and the page gets redirected back to the original page</li>
</ul>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/02/msal-error.png" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9&#43;AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAJElEQVR4nGPISIz/nxof&#43;x9Mx8X8T4FikBgIp8RG/09LjP8PAKwBFUdUJJ/5AAAAAElFTkSuQmCC" src="https://www.eliostruyf.com/uploads/2024/02/msal-error.png" alt="Error during the token retrieval" style="width: 1224px;" class="lazyload" />
</a>
<figcaption class="caption__text">Error during the token retrieval</figcaption>
</figure>
</div>
<ul>
<li>The original page loads and it starts all over again</li>
</ul>
<h2 id="why-did-it-not-happen-before">Why did it not happen before?</h2>
The issue does not occur in Chrome or Edge when writing the article. Third-party cookies are not yet blocked by default in these browsers.
As it is not yet blocked, the access token for Microsoft Graph is retrieved with the implicit grant flow, which uses the hidden iframe. As this is not blocked, only an error is returned in the console.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/02/msal-error-console.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRl4AAABXRUJQVlA4WAoAAAAQAAAACQAAAQAAQUxQSA0AAAABD/B294gIsQIR/Q8FAFZQOCAqAAAA0AEAnQEqCgACAAFAJiWUAnQBA310CsAA/vfSRMvtBdvZcg2puVeryuAA" src="https://www.eliostruyf.com/uploads/2024/02/msal-error-console.webp" alt="MSAL token retrieval error" style="width: 2568px;" class="lazyload" />
</a>
<figcaption class="caption__text">MSAL token retrieval error</figcaption>
</figure>
</div>
This error gives the developer enough information to understand what is happening and fix the issue.
<h2 id="how-to-fix-the-issue">How to fix the issue</h2>
<h3 id="solution-1-approve-the-permission-scope">Solution 1: Approve the permission scope</h3>
The clean solution is to approve the permission scope in the SharePoint Admin Center - API access page.
This solution allows your code to retrieve the access token by just one redirect and stops the page from refreshing.
<h3 id="solution-2-configure-sites-for-third-party-cookie-exceptions">Solution 2: Configure sites for third-party cookie exceptions</h3>
It feels like we are back in Internet Explorer, where we had to tell our customers to add their SharePoint URL to the trusted sites. For Firefox, you can configure the third-party cookie exceptions in the settings.
Follow the following steps to configure the exceptions:
<ul>
<li>Open the Firefox settings</li>
<li>Go to the <code>Privacy &amp; Security</code> tab</li>
<li>In the <code>Enhanced Tracking Protection</code> section, click on the <code>Manage Exceptions...</code> button</li>
<li>Add the SharePoint URL to the exceptions</li>
</ul>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/02/firefox-exceptions.png" title="Show image">
Show image
<img data-lqip="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAAAklEQVR4AewaftIAAACZSURBVDXBzWrCQBSA0W9u7oiLYvEHFN0VobQb3/89XIhrF4agCZJpmsxMxgTxHLP/&#43;j6pZotMhMn0A&#43;dqmqbhJSGSoap3LatyGUJY/fwe2Ky3WKuM6tpRFDnn85GB0QgkEf69J68qYoyMRIQ2Bt5UjSECPgTkUZJSous6Rt53vGnf9zdjTBJVZp9zrLXUf452s8MVOVwvDO5Pvx9DV13RrgMAAAAASUVORK5CYII=" src="https://www.eliostruyf.com/uploads/2024/02/firefox-exceptions.png" alt="Firefox third-party cookie exceptions" style="width: 2602px;" class="lazyload" />
</a>
<figcaption class="caption__text">Firefox third-party cookie exceptions</figcaption>
</figure>
</div>
Once configured, the solution will now try to retrieve the access token with the hidden iframe instead of getting redirected to <code>/_forms/spfxsinglesignon.aspx</code>.
<blockquote class='important'>
<div class='mb-2'>
important
</div>

Chrome and Edge have similar settings.

</blockquote>
<h2 id="resources">Resources</h2>
If you want to know more about the third-party cookie restrictions, you can read the following resources:
<ul>
<li><a href="https://developers.google.com/privacy-sandbox/3pcd">Prepare for third-party cookie restrictions</a></li>
<li><a href="https://www.blimped.nl/spfx-authentication-and-third-party-cookies/">SharePoint Framework (SPFx), Authenticating to API&rsquo;s and Third Party Cookies</a></li>
<li><a href="https://desystemshelp.leeds.ac.uk/help-allowing-third-party-cookies/">Allowing third-party cookies on your device</a></li>
<li><a href="https://github.com/SharePoint/sp-dev-docs/issues/5966">Plans for MSAL 2.0 / Third-party cookies #5966</a></li>
</ul></content:encoded></item><item><title>Protect keys by keeping those out of your VS Code settings</title><link>https://www.eliostruyf.com/protect-api-auth-keys-keeping-out-vscode-settings/</link><pubDate>Wed, 21 Feb 2024 12:31:41 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/protect-api-auth-keys-keeping-out-vscode-settings/</guid><description>While implementing the i18n (internationalization) features in Front Matter CMS, I wanted to include the ability for users to use DeepL to translate their content automatically.
To be able to use DeepL, you need to have an authentication key, and the user will provide this authentication key.
Initially, I defined it as a configurable setting in the extension.</description><content:encoded>While implementing the i18n (internationalization) features in <a href="https://frontmatter.codes">Front Matter CMS</a>, I wanted to include the ability for users to use DeepL to translate their content automatically.
To be able to use DeepL, you need to have an authentication key, and the user will provide this authentication key.
Initially, I defined it as a configurable setting in the extension. It is the most straightforward way to do it, but then I realized that keeping the key in the extension settings would be a bad idea as it might lead to a security risk.
In this post, I will explain why it is a bad idea and how you can protect your keys by keeping those out of your Visual Studio Code settings.
The article is intended for developers and extension users.
<ul>
<li>For developers, you will understand why it is a bad idea to keep keys in the settings of the extension and how to protect those keys for your users better.</li>
<li>For extension users, you will understand why you should be careful when providing your API/Authentication keys to an extension and understand how they might be stored.</li>
</ul>
<h2 id="why-it-is-a-bad-idea-to-keep-keys-in-the-settings-of-the-extension">Why it is a bad idea to keep keys in the settings of the extension</h2>
The settings of Visual Studio Code and the installed extensions are stored in JSON files. There are two levels of settings:
<ol>
<li>User Settings: These settings are applied globally to any instance of VS Code.</li>
<li>Workspace Settings: These settings are applied to the current workspace/project.</li>
</ol>
As mentioned, those settings are stored in a <code>settings.json</code> file, and its location depends on the type of setting level you are configuring.
The user settings its <code>settings.json</code> file is stored outside of the current workspace/project into a location which is specific to the operation system the user uses.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

We can consider that the user settings are safe as long the user doesn&rsquo;t share the file or a malicious extension access it.

</blockquote>
The workspace settings are stored in a <code>.vscode/settings.json</code> file in the root of the workspace/project, and this is where a security issue could arise.
If you store your keys in the workspace settings and commit those settings to a repository, you are exposing your keys to anyone with access to the repository.
<h3 id="example-of-an-extension">Example of an extension</h3>
<blockquote class='important'>
<div class='mb-2'>
important
</div>

To illustrate the issue, I will use an example of an extension that uses an API key. I won&rsquo;t mention the extension&rsquo;s name, but I will show you how the settings are stored.

</blockquote>
On the Visual Studio Code marketplace, I searched for an extension that uses OpenAI, as this is a typical example of an extension requiring an API key.
In just seconds, I found one which used a setting named <code>***.apiKey</code>.
The next step is to discover if users accidentally expose their keys. All I need to do is to search for the <code>***.apiKey</code> in the GitHub search.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/02/exposed-api-keys.webp" title="Show image">
Show image
<img data-lqip="data:image/jpeg;base64,UklGRnIAAABXRUJQVlA4WAoAAAAQAAAACQAABQAAQUxQSCMAAAABHyAQSPydVpgpjYgIGYratoGqvroLXlX&#43;ZIYhov8RH6EnPgBWUDggKAAAAHABAJ0BKgoABgABQCYlnALsAYhAAP78nNQFqT9Untiorle/sZNUAAA=" src="https://www.eliostruyf.com/uploads/2024/02/exposed-api-keys.webp" alt="Exposed API Keys" style="width: 1482px;" class="lazyload" />
</a>
<figcaption class="caption__text">Exposed API Keys</figcaption>
</figure>
</div>
There are many results; I didn&rsquo;t have to search for a long time to find them.
<h3 id="what-can-happen-if-your-keys-are-exposed">What can happen if your keys are exposed?</h3>
If your keys are exposed, it can lead to a lot of problems:
<ul>
<li>Financial loss: If you are using a paid service, someone could use your key to make requests, and you will be charged for those requests.</li>
<li>Data loss: If you are using a service that allows you to store data, someone could delete your data.</li>
<li>Reputation loss: If you are using a service that allows you to send emails, someone could send spam emails using your key, and your reputation will be affected.</li>
</ul>
<h2 id="how-to-protect-your-keys">How to protect your keys</h2>
<h3 id="as-an-extension-developer">As an extension developer</h3>
If you are an extension developer, you should avoid storing that key in the Visual Studio Code settings.
Instead, using the SecretStorage API provided by Visual Studio Code is better. This API is cross-platform, and its intention is to store secret or sensitive data.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

I already wrote about this API in a previous post: <a href="https://www.eliostruyf.com/devhack-code-extension-storage-options/">#DevHack: VS Code extension storage options</a>.

</blockquote>
The downside of using the SecretStorage API is that you will need to tell your user to provide the key via the input box or within a custom UI.
For example:
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
</code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript">// On loading your extension, you can retrieve the API key from the secrets storage
const apiKey = context.secrets.get(`deepl.apiKey`);

if (!apiKey) {
 // If the key is not found, you can ask the user to provide it
 vscode.window.showInputBox({
placeHolder: `Enter your DeepL API key`
 }).then((key) =&gt; {
 if (key) {
context.secrets.store(`deepl.apiKey`, key);
 }
 });
}</code></pre></td></tr></table>
</div>
</div>
<h3 id="as-an-extension-user">As an extension user</h3>
As an extension user, you should be careful when providing an extension&rsquo;s API/Authentication keys. If you notice that the extension asks for those keys in the settings, you should know that those keys could be exposed. You can also make the extension developer aware of the issue.
<blockquote class='important'>
<div class='mb-2'>
important
</div>

If you are using an extension that requires an API key, you should check the documentation of the extension to see how the keys are stored.

</blockquote></content:encoded></item><item><title>Using GitHub Project webhooks to manage labeling repo issues</title><link>https://www.eliostruyf.com/github-project-webhooks-manage-labeling-issues/</link><pubDate>Mon, 12 Feb 2024 08:40:39 +0000</pubDate><author>Elio Struyf</author><dc:creator>Elio Struyf</dc:creator><guid>https://www.eliostruyf.com/github-project-webhooks-manage-labeling-issues/</guid><description>For managing the Front Matter CMS releases, I have been using GitHub Projects in combination with GitHub Actions for automatically labeling my issues, which I add to the Project board. I must say: &ldquo;Add to my Project (classic) board.&rdquo;
The classic Projects experience has been discontinued, and there is a big difference when using the new Projects experience, which is creating projects on the user or organization level.</description><content:encoded>For managing the Front Matter CMS releases, I have been using <a href="https://docs.github.com/en/issues/planning-and-tracking-with-projects/learning-about-projects/about-projects">GitHub Projects</a> in combination with GitHub Actions for automatically labeling my issues, which I add to the Project board. I must say: &ldquo;Add to my Project (classic) board.&rdquo;
The classic Projects experience has been discontinued, and there is a big difference when using the new Projects experience, which is creating projects on the user or organization level.
Previously, you could create those classic projects on the repository level, which allowed hooking it up with some GitHub actions to add or remove issue labels when managing them on the project board. These labels enable quick filtering of issues in the list for a specific status or project.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/02/issue-project-labels.webp" title="Show image">
Show image
<img data-lqip="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAADCAYAAACqPZ51AAAAAklEQVR4AewaftIAAABmSURBVE3BQQ6CMBBA0T&#43;2kLAgJsiChTHR&#43;x&#43;Bu5hwAtuggTrTwaXvyTBd58sw3gRo2pb3ugICOKcQqGao6hLd/R677tEIaIXan6n5RRChlEJKiZ8Q7WvPbd/NRHCB/ClYzqDKn&#43;UAG7EtmFsl3fYAAAAASUVORK5CYII=" src="https://www.eliostruyf.com/uploads/2024/02/issue-project-labels.webp" alt="Project labels on the issues" style="width: 900px;" class="lazyload" />
</a>
<figcaption class="caption__text">Project labels on the issues</figcaption>
</figure>
</div>
<blockquote class='info'>
<div class='mb-2'>
info
</div>

Read more about on <a href="https://www.eliostruyf.com/adding-or-deleting-github-project-labels-on-issues/">Adding or deleting GitHub project (classic) labels on issues</a>.

</blockquote>
When I wanted to move to the new project experience, I had to create my project on the user or organizational level, meaning I had to find another solution for automatically labeling my issues.
The approach for automating your project management is by using webhooks. Webhooks allow your integrations to listen to event actions that occur on GitHub, so it can be used to notify you when a new project is created or when you manage the project items (create, edit, delete).
<blockquote class='info'>
<div class='mb-2'>
info
</div>

Read more on <a href="https://docs.github.com/en/webhooks">GitHub webhooks documentation</a>.

</blockquote>
In this article, I will guide you through how you can configure and use the GitHub webhook functionality for project management.
<h2 id="limitation">Limitation</h2>
There is a limitation; the approach I will tell you more about is only possible on projects created at the organizational level. The reason is that when writing this article, GitHub does not yet allow you to create project webhooks on the user level.
<h2 id="my-project-and-repository-setup">My project and repository setup</h2>
My setup is the following:
<ul>
<li>Repository is managed on user level</li>
<li>Project is created on an organizational level</li>
</ul>
<blockquote class='info'>
<div class='mb-2'>
info
</div>

I did not want to move the repository, so I kept it on the user level, but you can also be on an organization.

</blockquote>
<h2 id="github-app">GitHub App</h2>
For the authentication and webhook configuration, I choose to use a GitHub App, as an app provides you with all the functionality you need for this kind of scenario.
You can create a new app in the <a href="https://github.com/settings/apps/new">developer settings - register new GitHub App</a>.
I configured the app as follows:
<ul>
<li>Activate the webhook functionality, and set the URL to your endpoint. If you do not yet know it, you could use a service like <a href="https://smee.io">smee.io</a> to experiment with it.</li>
<li>Set a webhook secret to make the webhook functionality more secure.</li>
<li>Set the permissions
<ul>
<li>Repository permissions:
<ul>
<li>Issues: Read &amp; write</li>
<li>Metadata: Read-only</li>
</ul>
</li>
<li>Organization permissions:
<ul>
<li>Projects: Read-only</li>
</ul>
</li>
</ul>
</li>
<li>Subscribe to Project V2 item events</li>
<li>Create a private key, which you need for authenticating your app.</li>
</ul>
<h3 id="installing-the-app">Installing the app</h3>
Once you have created the app, you can install the app on the user/organization.
If you use a setup similar to mine, you will notice the difference between the user and organization installation permissions.
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/02/github-app-personal.webp" title="Show image">
Show image
<img data-lqip="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAECAYAAAC3OK7NAAAAAklEQVR4AewaftIAAABhSURBVHXBOw7CQAxAweeNreQIyaVokDguPUG05Aik3Wo/IJuGCikzcjmdH7fnNvfWKO1NIBAQBPFp/Ox6Xe9LSmkREUYbqLXi7vwRHaeJISVyzrg7R7SU8jLVMDN67xzYv5tpKTiMXXVVAAAAAElFTkSuQmCC" src="https://www.eliostruyf.com/uploads/2024/02/github-app-personal.webp" alt="GitHub App installed on user level" style="width: 900px;" class="lazyload" />
</a>
<figcaption class="caption__text">GitHub App installed on user level</figcaption>
</figure>
</div>
<div class="caption my-4">
<figure class="caption__figure">
<a class="lightbox" href="https://www.eliostruyf.com/uploads/2024/02/github-app-organization.webp" title="Show image">
Show image
<img data-lqip="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAECAYAAAC3OK7NAAAAAklEQVR4AewaftIAAABjSURBVG3Buw3CUAyG0c9c8/AGZCgaJNalB0QLI5AJsHKD/NNQoZxjp8Pxfnk893Pv5DQjDARC6DPxM/r5ehtaa4OZsd04mYmq&#43;GOriGAXgSSqClWxxN&#43;Zr7W7qoreO2bGgvELyCUvYltfLuYAAAAASUVORK5CYII=" src="https://www.eliostruyf.com/uploads/2024/02/github-app-organization.webp" alt="GitHub App installed on organization level" style="width: 900px;" class="lazyload" />
</a>
<figcaption class="caption__text">GitHub App installed on organization level</figcaption>
</figure>
</div>
<h2 id="the-sample-project">The sample project</h2>
I have created a sample project to get you started. You can find it here: <a href="https://github.com/estruyf/github-project-labeling">GitHub Project Labeling</a>.
<blockquote class='info'>
<div class='mb-2'>
info
</div>

The sample project will also work when you use it on an organizational level only.

</blockquote>
The project makes use of Azure Functions, and if you deploy to Azure, all you need to do is configure the following settings:
<ul>
<li>WEBHOOK_SECRET: set the value which you provided when creating the GitHub App</li>
<li>GITHUB_APP_ID: this can be found on the GitHub App instance once you have created it</li>
<li>GITHUB_APP_PRIVATE_KEY: add the private key. You can put it in Azure Key Vault and link it to your Azure Function.</li>
</ul>
<h3 id="following-the-best-practices">Following the best practices</h3>
The Azure Function follows the <a href="https://docs.github.com/en/webhooks/using-webhooks/best-practices-for-using-webhooks">best practices</a>:
<ul>
<li>Subscribe to a minimum of events</li>
<li>Use a webhook secret and validate it for each call</li>
<li>Check the event type before processing</li>
<li>Use the <code>X-GitHub-Delivery</code> to prevent replay attacks</li>
</ul>
<h3 id="the-logic">The logic</h3>
The logic for the app works as follows:
<h4 id="on-project-item-creation-or-moving-between-statuses">On project item creation or moving between statuses</h4>
<ul>
<li>GitHub triggers the Azure Function webhook</li>
<li>The project item is retrieved and checked if it is an issue; if not, it will not continue.</li>
<li>The issue is retrieved</li>
<li>The repository labels are retrieved</li>
<li>Project label is created and set</li>
<li>The status label is created and set</li>
<li>Other status labels are removed from the issue</li>
</ul>
<h4 id="on-project-item-removal">On project item removal</h4>
<ul>
<li>Removal of the project label</li>
<li>Removal of the status label</li>
</ul></content:encoded></item></channel></rss>

Home · About · News · Docs · Terms