Skip to content

Commit adcc63c

Browse files
gavinbarrongavinbarron
authored
chore: update unpkg link to pin to major versions (#1906)
* correcting links to use the right format * updating readme to explain version pinning * removing double @ in urls * added details on why @2 fragment is needed
1 parent 9a98e07 commit adcc63c

File tree

15 files changed

+144
-143
lines changed

15 files changed

+144
-143
lines changed

‎auth.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
3+
<script src="https://unpkg.com/@microsoft/teams-js@2/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
44
<!-- <script src="./packages/mgt/dist/bundle/mgt-loader.js"></script>
55
<script>
66
mgt.TeamsProvider.handleAuth();

‎index.html‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,65 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<title>Microsoft Graph Toolkit Test</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
38

4-
<head>
5-
<meta charset="utf-8" />
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7-
<title>Microsoft Graph Toolkit Test</title>
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
10+
<!-- <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> -->
911

10-
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
11-
<!-- <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> -->
12+
<script src="https://unpkg.com/@microsoft/teams-js@2/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
1213

13-
<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
14+
<!-- <script src="./packages/mgt/dist/bundle/mgt-loader.js"></script> -->
1415

15-
<!-- <script src="./packages/mgt/dist/bundle/mgt-loader.js"></script> -->
16+
<script type="module" src="./packages/mgt/dist/es6/index.js"></script>
17+
</head>
1618

17-
<script type="module" src="./packages/mgt/dist/es6/index.js"></script>
18-
</head>
19-
20-
<body>
21-
<!-- <mgt-teams-provider
19+
<body>
20+
<!-- <mgt-teams-provider
2221
client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"
2322
auth-popup-url="auth.html"
2423
></mgt-teams-provider> -->
2524

26-
<!-- <mgt-teams-msal2-provider
25+
<!-- <mgt-teams-msal2-provider
2726
client-id="72482bff-ecae-44f5-8fdc-513b7f5602e7"
2827
scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
2928
auth-popup-url="auth.html"
3029
></mgt-teams-msal2-provider> -->
3130

32-
<!-- Teams Msal2 provider in SSO mode (see "teams-sso-node" sample) -->
33-
<!-- <mgt-teams-msal2-provider
31+
<!-- Teams Msal2 provider in SSO mode (see "teams-sso-node" sample) -->
32+
<!-- <mgt-teams-msal2-provider
3433
client-id="72482bff-ecae-44f5-8fdc-513b7f5602e7"
3534
scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
3635
auth-popup-url="auth.html"
3736
sso-url="http://localhost:5000/api/token"
3837
http-method="POST"
3938
></mgt-teams-msal2-provider> -->
4039

41-
<!-- <mgt-msal-provider
40+
<!-- <mgt-msal-provider
4241
client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"
4342
scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
4443
redirect-uri="http://localhost:3000"
4544
depends-on="mgt-teams-provider"
4645
></mgt-msal-provider> -->
4746

48-
<!-- <mgt-msal2-provider
47+
<!-- <mgt-msal2-provider
4948
client-id="2dfea037-938a-4ed8-9b35-c05708a1b241"
5049
redirect-uri="http://localhost:3000"
5150
scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
5251
></mgt-msal2-provider> -->
5352

54-
<mgt-mock-provider></mgt-mock-provider>
55-
56-
<mgt-login></mgt-login>
57-
<mgt-person person-query="me" view="twoLines" person-card="click" show-presence></mgt-person>
58-
<mgt-people-picker></mgt-people-picker>
59-
<mgt-teams-channel-picker></mgt-teams-channel-picker>
60-
<mgt-tasks></mgt-tasks>
61-
<mgt-agenda group-by-day></mgt-agenda>
62-
<mgt-people show-presence></mgt-people>
63-
<mgt-todo></mgt-todo>
64-
<mgt-file-list></mgt-file-list>
65-
</body>
53+
<mgt-mock-provider></mgt-mock-provider>
6654

67-
</html>
55+
<mgt-login></mgt-login>
56+
<mgt-person person-query="me" view="twoLines" person-card="click" show-presence></mgt-person>
57+
<mgt-people-picker></mgt-people-picker>
58+
<mgt-teams-channel-picker></mgt-teams-channel-picker>
59+
<mgt-tasks></mgt-tasks>
60+
<mgt-agenda group-by-day></mgt-agenda>
61+
<mgt-people show-presence></mgt-people>
62+
<mgt-todo></mgt-todo>
63+
<mgt-file-list></mgt-file-list>
64+
</body>
65+
</html>

‎packages/mgt/README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,15 @@ You can use the components by referencing the loader directly (via unpkg), or in
4646
### Use via mgt-loader:
4747

4848
```html
49-
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
49+
<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
5050
```
5151

52+
> NOTE: This link will load the highest available version of @microsoft/mgt in the range `>= 2.0.0 < 3.0.0`, omitting the `@2` fragment from the url results in loading the latest version. This could result in loading a new major version and breaking the application.
53+
5254
You can then start using the components in your html page. Here is a full working example with the Msal provider:
5355

5456
```html
55-
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
57+
<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
5658

5759
<mgt-msal-provider client-id="[CLIENT-ID]"></mgt-msal-provider>
5860

‎readme.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,13 +104,15 @@ You can use the components by referencing the loader directly (via unpkg), or in
104104
### Use via mgt-loader:
105105

106106
```html
107-
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
107+
<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
108108
```
109109

110+
> NOTE: This link will load the highest available version of @microsoft/mgt in the range `>= 2.0.0 < 3.0.0`, omitting the `@2` fragment from the url results in loading the latest version. This could result in loading a new major version and breaking the application.
111+
110112
You can then start using the components in your html page. Here is a full working example with the Msal2 provider:
111113

112114
```html
113-
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
115+
<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
114116
<mgt-msal2-provider client-id="[CLIENT-ID]"></mgt-msal2-provider>
115117
<mgt-login></mgt-login>
116118

@@ -154,8 +156,8 @@ cd ./samples/react-app/
154156
yarn start
155157
```
156158

157-
This also means that running the samples in isolation may fail if there are breaking changes between the published version of mgt and the local copy.
158-
To workaround this, use samples that are known to be compatible with a specific release by checking out the appropriate branch or tag first.
159+
This also means that running the samples in isolation may fail if there are breaking changes between the published version of mgt and the local copy.
160+
To workaround this, use samples that are known to be compatible with a specific release by checking out the appropriate branch or tag first.
159161

160162
## Contribute
161163

‎samples/msal2provider-asp-net-core-sso/Pages/Shared/_Layout.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
@if (User.Identity.IsAuthenticated)
1414
{
15-
<script src="https://unpkg.com/@@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
15+
<script src="https://unpkg.com/@@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
1616
<script>
1717
mgt.Providers.globalProvider = new mgt.Msal2Provider({
1818
clientId: "@Configuration["AzureAd:ClientId"]",

‎samples/msal2provider-asp-net-core-sso/README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ To run the sample, you will need to create a client id and secret first and upda
3636

3737
## How it works
3838

39-
The web app is built with ASP.NET Core and users are authenticated with the [Microsoft.Identity.Web](https://www.nuget.org/packages/Microsoft.Identity.Web) package. This allows developers to authenticate users and authorize access to Web APIs (like Microsoft Graph) from the backend.
39+
The web app is built with ASP.NET Core and users are authenticated with the [Microsoft.Identity.Web](https://www.nuget.org/packages/Microsoft.Identity.Web) package. This allows developers to authenticate users and authorize access to Web APIs (like Microsoft Graph) from the backend.
4040

4141
To use MGT components in the app, the client must also be able auth users and fetch tokens for Microsoft Graph. To avoid signing in the user twice just to be able to call Microsoft Graph from the client, we can leverage SSO to automatically sign in users via the current session that was established when the user signed in once.
4242

@@ -45,7 +45,7 @@ First, we reference the toolkit and instantiate a new Msal2Provider in the **Pag
4545
```js
4646
@if (User.Identity.IsAuthenticated)
4747
{
48-
<script src="https://unpkg.com/@@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
48+
<script src="https://unpkg.com/@@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
4949

5050
<script>
5151
mgt.Providers.globalProvider = new mgt.Msal2Provider({
@@ -58,19 +58,19 @@ First, we reference the toolkit and instantiate a new Msal2Provider in the **Pag
5858
}
5959
```
6060

61-
To enable SSO, we need to provide a `loginHint` (the email for the current signed in user) or an `sid` (session id). This will set the provider in SSO mode which will attempt to sign in the user if they are already signed in elsewhere.
61+
To enable SSO, we need to provide a `loginHint` (the email for the current signed in user) or an `sid` (session id). This will set the provider in SSO mode which will attempt to sign in the user if they are already signed in elsewhere.
6262

6363
Notice, we are also setting a redirect Uri to an empty page we created (`/sso.html`) as page for the sso process to redirect to. We've also added this page (`https://localhost/sso.html`) as a SPA redirect uri for our AAD app.
6464

65-
Also notice that we are not setting any scopes here. All scopes are added on the .Net side in **appsettings.json** so that the user consents once when they sign in for the first time.
65+
Also notice that we are not setting any scopes here. All scopes are added on the .Net side in **appsettings.json** so that the user consents once when they sign in for the first time.
6666

6767
Finally, we are now able to use the mgt components through out our app. Here are the components being used in **Index.cshtml**:
6868

6969
```js
7070
@if (User.Identity.IsAuthenticated)
7171
{
7272
<div>Signed in User: <mgt-person person-query="me" view="oneline"></mgt-person></div>
73-
73+
7474
<mgt-people-picker></mgt-people-picker>
7575

7676
<mgt-agenda></mgt-agenda>

‎samples/msal2provider-asp-net-core-sso/appsettings.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
"ClientId": "CLIENT ID GOES HERE",
66
"TenantId": "common",
77
"ClientSecret": "SECRET GOES HERE",
8-
"ClientCertificates": [
9-
],
8+
"ClientCertificates": [],
109
"CallbackPath": "/signin-oidc"
1110
},
1211
"DownstreamApi": {

‎samples/proxy-provider-asp-net-core/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Proxy Provider and ASP.NET Core
22

3-
To use the Microsoft Graph Toolkit with backend authentication, one solution is to proxy all calls from the front end to the back end. The Microsoft Graph Toolkit ships with an authentication provider implementation (ProxyProvider) that enables all components to call the Microsoft Graph via the backend.
3+
To use the Microsoft Graph Toolkit with backend authentication, one solution is to proxy all calls from the front end to the back end. The Microsoft Graph Toolkit ships with an authentication provider implementation (ProxyProvider) that enables all components to call the Microsoft Graph via the backend.
44

55
This sample is a reference on how to leverage the [ProxyProvider](https://learn.microsoft.com/graph/toolkit/providers/proxy) with an ASP.NET Core backend. However, it is worth noting that the ProxyProvider can work with any backend service.
66

@@ -9,7 +9,7 @@ This sample is a reference on how to leverage the [ProxyProvider](https://learn.
99
The ProxyProvider is instantiated in `Views\Shares\_Layout.cshtml`:
1010

1111
```html
12-
<script src='https://unpkg.com/@Html.Raw("@")microsoft/mgt/dist/bundle/mgt-loader.js'></script>
12+
<script src='https://unpkg.com/@Html.Raw("@")microsoft/mgt@2/dist/bundle/mgt-loader.js'></script>
1313
<script>
1414
const provider = new mgt.ProxyProvider("/api/proxy");
1515
provider.login = () => window.location.href = '@Url.Action("SignIn", "Account")';
@@ -24,7 +24,7 @@ This code snippet also defines a login and logout functions that are used by the
2424

2525
## Backend code
2626

27-
The `/api/Proxy` endpoint that handles all calls to the Microsoft Graph is defined in `Controllers\ProxyController.cs`.
27+
The `/api/Proxy` endpoint that handles all calls to the Microsoft Graph is defined in `Controllers\ProxyController.cs`.
2828

2929
This custom implementation simply proxies every method (**GET**, **POST**, **DELETE**, **PUT**, **PATCH**), and makes the actual call to the Microsoft Graph using the token generated through [MSAL.NET](https://github.com/AzureAD/microsoft-authentication-library-for-dotnet). Notice that several headers required by the Microsoft Graph are also proxied with each request.
3030

‎samples/proxy-provider-asp-net-core/Views/Shared/_Layout.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
2020
</environment>
2121

22-
<script src="https://unpkg.com/@Html.Raw("@")microsoft/mgt/dist/bundle/mgt-loader.js"></script>
22+
<script src='https://unpkg.com/@Html.Raw("@")microsoft/mgt@2/dist/bundle/mgt-loader.js'></script>
2323

2424
<script>
2525
const provider = new mgt.ProxyProvider("/api/Proxy");

‎samples/proxy-provider-asp-net-mvc/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Proxy Provider and ASP.NET MVC
22

3-
To use the Microsoft Graph Toolkit with backend authentication, one solution is to proxy all calls from the front end to the back end. The Microsoft Graph Toolkit ships with an authentication provider implementation (ProxyProvider) that enables all components to call the Microsoft Graph via the backend.
3+
To use the Microsoft Graph Toolkit with backend authentication, one solution is to proxy all calls from the front end to the back end. The Microsoft Graph Toolkit ships with an authentication provider implementation (ProxyProvider) that enables all components to call the Microsoft Graph via the backend.
44

55
This sample is a reference on how to leverage the [ProxyProvider](https://learn.microsoft.com/graph/toolkit/providers/proxy) with an ASP.NET MVC backend. However, it is worth nothing that the ProxyProvider can work with any backend service.
66

@@ -9,7 +9,7 @@ This sample is a reference on how to leverage the [ProxyProvider](https://learn.
99
The ProxyProvider is instantiated in `Views\Shares\_Layout.cshtml`:
1010

1111
```html
12-
<script src='https://unpkg.com/@Html.Raw("@")microsoft/mgt/dist/bundle/mgt-loader.js'></script>
12+
<script src='https://unpkg.com/@Html.Raw("@")microsoft/mgt@2/dist/bundle/mgt-loader.js'></script>
1313
<script>
1414
const provider = new mgt.ProxyProvider("https://localhost:44375/api/GraphProxy");
1515
provider.login = () => window.location.href = '@Url.Action("SignIn", "Account")';
@@ -24,7 +24,7 @@ This code snippet also defines a login and logout functions that are used by the
2424

2525
## Backend code
2626

27-
The `/api/GraphProxy` endpoint that handles all calls to the Microsoft Graph is defined in `Controllers\GraphProxyController.cs`.
27+
The `/api/GraphProxy` endpoint that handles all calls to the Microsoft Graph is defined in `Controllers\GraphProxyController.cs`.
2828

2929
This custom implementation simply proxies every method (**GET**, **POST**, **DELETE**, **PUT**, **PATCH**), and makes the actual call to the Microsoft Graph using the token generated through the Auth2.0 On-Behalf-Of (OBO) flow. Notice that several headers required by the Microsoft Graph are also proxied with each request.
3030

0 commit comments

Comments
 (0)