Skip to content

Commit 157f122

Browse files
Dickson-MwendiaDickson-Mwendia
committed
Update code samples to align with docs
1 parent 1a9c4a9 commit 157f122

1 file changed

Lines changed: 78 additions & 43 deletions

File tree

‎README.md‎

Lines changed: 78 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ products:
88
- msal-node
99
- msal-react
1010
- entra-external-id
11-
description: "Tutorial: Enable your JavaScript application to sign-in users and call APIs with Azure AD for Customers"
11+
description: "Tutorial: Enable your JavaScript applications to sign-in users and call APIs with Azure AD for Customers"
1212
urlFragment: "ms-identity-ciam-javascript-tutorial"
1313
---
1414

@@ -20,81 +20,116 @@ This tutorial aims to take you through the fundamentals of modern authentication
2020

2121
- [Node.js v14 LTS or later](https://nodejs.org/en/download/)
2222
- [Visual Studio Code](https://code.visualstudio.com/download)
23-
- A modern web browser (to use thhe [popup experience](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md#choosing-an-interaction-type) during sign-in and token acquisition, your browser should allow popups)
23+
- A modern web browser (to use the [popup experience](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md#choosing-an-interaction-type) during sign-in and token acquisition, your browser should allow popups)
2424

25-
Please refer to each sample's README for sample-specific prerequisites.
25+
Please refer to each sample's README for sample-specific prerequisites.
2626

27-
## Recommendations
2827

29-
- [jwt.ms](https://jwt.ms) for inspecting your tokens
30-
- [Fiddler](https://www.telerik.com/fiddler) for monitoring your network activity and troubleshooting
31-
- Check [MSAL.js FAQ](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/FAQ.md) and [MSAL Node FAQ](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/faq.md) for your questions
32-
- Follow the [Azure AD Blog](https://techcommunity.microsoft.com/t5/azure-active-directory-identity/bg-p/Identity) to stay up-to-date with the latest developments
28+
The following tables are a summary of code samples alongside links to tutorials on how to integrate various app types with Azure AD for customers:
29+
30+
- The **Explore and run code sample guide** uses a sample app to show you how to add identity and access management (IAM) capabilities to your applications using Microsoft Entra External ID for customers.
31+
32+
- The **Build and integrate tutorial** offers detailed guidance on how to build an app from the ground up, walking you through the packages and code needed to add IAM support to both new or existing applications.
33+
34+
35+
### Chapter 1: Sign-in a user to your application with Azure AD for customers
36+
37+
38+
Language/Platform + App type |Scenario| GitHub code sample | Explore and run code sample guide | Build and integrate tutorial |
39+
| ------- | -------- | ------------- |-------------|---------------|
40+
VanillaJS SPA| ![Sign in users with a Vanilla JavaScript SPA](./1-Authentication/0-sign-in-vanillajs/ReadmeFiles/topology.png) | [**Sign in using a Vanilla JavaScript SPA with Azure AD for Customers**](./2-Authorization//0-call-api-vanillajs/README.md) | [Sign in users](https://learn.microsoft.com/en-us/azure/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-sample-sign-in) | [Sign in users](https://learn.microsoft.com/en-us/azure/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-prepare-tenant) |
3341

34-
Please refer to each sample's README for sample-specific recommendations.
3542

36-
## Contents
3743

38-
### Chapter 1: Sign-in a user to your application
3944

40-
| | |
41-
|---------------|---------------|
42-
| <img src="./1-Authentication/0-sign-in-vanillajs/ReadmeFiles/topology.png" width="200"> | [**Sign-in using VanillaJS SPA**](./1-Authentication/0-sign-in-vanillaJS/README.md) </br> Sign-in your users with **Azure AD for Customers** and learn to work with **ID Tokens**. Learn how **single sign-on (SSO)** works. Learn to integrate with **user-flows** and **external identity providers**. |
43-
| <img src="./1-Authentication/1-sign-in-react/ReadmeFiles/topology.png" width="200"> | [**Sign-in using React SPA**](./1-Authentication/1-sign-in-react/README.md) </br> Sign-in your users with **Azure AD for Customers** and learn to work with **ID Tokens**. Learn how **single sign-on (SSO)** works. Learn to integrate with **user-flows** and **external identity providers**. |
44-
| <img src="./1-Authentication/2-sign-in-angular/ReadmeFiles/topology.png" width="200"> | [**Sign-in using Angular SPA**](./1-Authentication/2-sign-in-angular/README.md) </br> Sign-in your users with **Azure AD for Customers** and learn to work with **ID Tokens**. Learn how **single sign-on (SSO)** works. Learn to integrate with **user-flows** and **external identity providers**. |
45-
| <img src="./1-Authentication/3-sign-in-electron/ReadmeFiles/topology.png" width="200"> | [**Sign-in using Electron desktop app**](./1-Authentication/3-sign-in-electron/README.md) </br> Sign-in your users with **Azure AD for Customers** and learn to work with **ID Tokens**. Learn how **single sign-on (SSO)** works. Learn to integrate with **user-flows** and **external identity providers**. |
46-
| <img src="./1-Authentication/4-sign-in-device-code/ReadmeFiles/topology.png" width="200"> | [**Sign-in using a headless Node.js app**](./1-Authentication/4-sign-in-device-code/README.md) </br> Sign-in your users with **Azure AD for Customers** and learn to work with **ID Tokens**. Learn how **single sign-on (SSO)** works. Learn to integrate with **user-flows** and **external identity providers**. |
47-
| <img src="./1-Authentication/5-sign-in-express/ReadmeFiles/topology.png" width="200"> | [**Sign-in using Express.js web app**](./1-Authentication/5-sign-in-express/README.md) </br> Sign-in your users with **Azure AD for Customers** and learn to work with **ID Tokens**. Learn how **single sign-on (SSO)** works. Learn to integrate with **user-flows** and **external identity providers**. |
4845

4946
### Chapter 2: Protect an API and call the API from your client app
5047

51-
| | |
52-
|-----------------|---------------|
53-
| <img src="./2-Authorization/0-call-api-vanillajs/ReadmeFiles/topology.png" width="200"> | [**Vanilla JavaScript SPA protected and call a web API on Azure AD for Customers**](./2-Authorization//0-call-api-vanillajs/README.md) </br> Protect your web API with the **Azure AD for Customers**. Use a client application to sign-in a user, acquire an **Access Token** for your web API and call your protected web API. |
54-
| <img src="./2-Authorization/1-call-api-react/ReadmeFiles/topology.png" width="200"> | [**React SPA protected and call a web API on Azure AD for Customers**](./2-Authorization/1-call-api-react/README.md) </br> Protect your web API with the **Azure AD for Customers**. Use a client application to sign-in a user, acquire an **Access Token** for your web API and call your protected web API. |
55-
| <img src="./2-Authorization/2-call-api-angular/ReadmeFiles/topology.png" width="200"> | [**Angular SPA protected and call a web API on Azure AD for Customers**](./2-Authorization/2-call-api-angular/README.md) </br> Protect your web API with the **Azure AD for Customers**. Use a client application to sign-in a user, acquire an **Access Token** for your web API and call your protected web API. |
56-
| <img src="./2-Authorization/3-call-api-node-daemon/ReadmeFiles/topology.png" width="200"> | [**Node daemon protected and call a web API on Azure AD for Customers**](./2-Authorization/3-call-api-node-daemon/README.md) </br> Protect your web API with the **Azure AD for Customers**. Use a daemon application to acquire an **Access Token** for your web API and call your protected web API. |
57-
| <img src="./2-Authorization/4-call-api-express/ReadmeFiles/topology.png" width="200"> | [**Node web app protected and call a web API on Azure AD for Customers**](./2-Authorization/4-call-api-express/README.md) </br> Protect your web API with the **Azure AD for Customers**. Use a client application to sign-in a user, acquire an **Access Token** for your web API and call your protected web API. |
48+
49+
50+
51+
###
52+
53+
54+
> Language/Platform | App type | Code sample | Explore and run code sample guide | Build and integrate tutorial |
55+
> | ------- | -------- | ------------- |
56+
> | Single-page application | &#8226; [Sign in users](how-to-single-page-app-vanillajs-sample-sign-in.md) | &#8226; [Sign in users](how-to-single-page-app-vanillajs-prepare-tenant.md) |
57+
58+
### JavaScript, Angular
59+
60+
> [!div class="mx-tdCol2BreakAll"]
61+
> | App type | Code sample guide | Build and integrate guide |
62+
> | ------- | -------- | ------------- |
63+
> | Single-page application | &#8226; [Sign in users](how-to-single-page-application-angular-sample.md) | --- |
64+
65+
### JavaScript, React
66+
67+
> [!div class="mx-tdCol2BreakAll"]
68+
> | App type | Code sample guide | Build and integrate guide |
69+
> | ------- | -------- | ------------- |
70+
> | Single-page application| &#8226; [Sign in users](how-to-single-page-application-react-sample.md) | &#8226; [Sign in users](how-to-single-page-application-react-prepare-tenant.md) |
71+
72+
### JavaScript, Node
73+
74+
> [!div class="mx-tdCol2BreakAll"]
75+
> | App type | Code sample guide | Build and integrate guide |
76+
> | ------- | -------- | ------------- |
77+
> | Browserless | &#8226; [Sign in users](how-to-browserless-app-node-sample-sign-in.md) | &#8226; [Sign in users](how-to-browserless-app-node-sign-in-overview.md ) |
78+
> | Daemon | &#8226; [Call an API](how-to-daemon-node-sample-call-api.md) | &#8226; [Call an API](how-to-daemon-node-call-api-overview.md) |
79+
80+
81+
### JavaScript, Node.js (Express)
82+
83+
> [!div class="mx-tdCol2BreakAll"]
84+
> | App type | Code sample guide | Build and integrate guide |
85+
> | ------- | -------- | ------------- |
86+
> | Web app |&#8226; [Sign in users](how-to-web-app-node-sample-sign-in.md)<br/> &#8226; [Sign in users and call an API](how-to-web-app-node-sample-sign-in-call-api.md) | &#8226; [Sign in users](how-to-web-app-node-sign-in-overview.md)<br/> &#8226; [Sign in users and call an API](how-to-web-app-node-sign-in-call-api-overview.md) |
87+
88+
### JavaScript, Electron
89+
90+
> [!div class="mx-tdCol2BreakAll"]
91+
> | App type | Code sample guide | Build and integrate guide |
92+
> | ------- | -------- | ------------- |
93+
> | Desktop | &#8226; [Sign in users](how-to-desktop-app-electron-sample-sign-in.md) | --- |
94+
5895

5996
## We'd love your feedback
6097

6198
Were we successful in addressing your learning objective? Consider taking a moment to [share your experience with us](https://forms.office.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR_ivMYEeUKlEq8CxnMPgdNZUNDlUTTk2NVNYQkZSSjdaTk5KT1o4V1VVNS4u).
6299

63100
## More information
64101

65-
Learn more about the **Microsoft identity platform**:
102+
Learn more about the **Microsoft Entra External ID for customers**:
66103

67-
- [Microsoft identity platform](https://docs.microsoft.com/azure/active-directory/develop/)
68-
- [Azure Active Directory B2C](https://docs.microsoft.com/azure/active-directory-b2c/)
104+
- [Identity Platform Developer Center](https://developer.microsoft.com/en-us/identity/customers)
105+
- [Microsoft Entra External ID for customers](https://learn.microsoft.com/azure/active-directory/external-identities/customers/overview-customers-ciam)
69106
- [Overview of Microsoft Authentication Library (MSAL)](https://docs.microsoft.com/azure/active-directory/develop/msal-overview)
70-
- [Application types for Microsoft identity platform](https://docs.microsoft.com/azure/active-directory/develop/v2-app-types)
71-
- [Understanding Azure AD application consent experiences](https://docs.microsoft.com/azure/active-directory/develop/application-consent-experience)
72-
- [Understand user and admin consent](https://docs.microsoft.com/azure/active-directory/develop/howto-convert-app-to-be-multi-tenant#understand-user-and-admin-consent)
73-
- [Application and service principal objects in Azure Active Directory](https://docs.microsoft.com/azure/active-directory/develop/app-objects-and-service-principals)
74-
- [Microsoft identity platform best practices and recommendations](https://docs.microsoft.com/azure/active-directory/develop/identity-platform-integration-checklist)
107+
- [Supported features in Microsoft Entra External ID for customers](https://learn.microsoft.com/en-us/azure/active-directory/external-identities/customers/concept-supported-features-customers)
108+
- [Authentication methods and identity providers for customers](https://learn.microsoft.com/en-us/azure/active-directory/external-identities/customers/concept-authentication-methods-customers)
109+
- [Microsoft Entra External ID for customers frequently asked questions](https://learn.microsoft.com/en-us/azure/active-directory/external-identities/customers/faq-customers)
75110

76111
See more code samples:
77112

78-
- [MSAL code samples](https://docs.microsoft.com/azure/active-directory/develop/sample-v2-code)
79-
- [MSAL B2C code samples](https://docs.microsoft.com/azure/active-directory-b2c/code-samples)
113+
- [Samples for customer identity and access management (CIAM) in Azure Active Directory](https://learn.microsoft.com/en-us/azure/active-directory/external-identities/customers/samples-ciam-all?tabs=apptype)
114+
115+
116+
## Community help and support
80117

81-
## Community Help and Support
82118

83-
Use [Stack Overflow](http://stackovergrant.com/questions/tagged/msal) to get support from the community.
84-
Ask your questions on Stack Overflow first and browse existing issues to see if someone has asked your question before.
85-
Make sure that your questions or comments are tagged with [`ms-identity` `azure-ad` `azure-ad-b2c` `msal` `react`].
119+
- Post a question to [Microsoft Q&A](https://learn.microsoft.com/en-us/answers/) to get answers to your identity app development questions directly from Microsoft engineers, Azure Most Valuable Professionals (MVPs), and members of our expert community.
86120

87-
If you find a bug in the sample, please raise the issue on [GitHub Issues](../../issues).
121+
- Use [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoft-entra-external-id) to get support from the community.
122+
Ask your questions on Stack Overflow first and browse existing issues to see if someone has asked your question before. Make sure that your questions or comments are tagged with [`ms-identity` `microsoft-entra-external-id``msal`].
88123

89-
To provide a recommendation, visit the following [User Voice page](https://feedback.azure.com/forums/169401-azure-active-directory).
124+
- If you find a bug in the sample, please raise the issue on [GitHub Issues](../../issues).
90125

91126
## Contributing
92127

93128
This project welcomes contributions and suggestions. Most contributions require you to agree to a
94129
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
95130
the rights to use your contribution. For details, visit [cla.opensource.microsoft.com](https://cla.opensource.microsoft.com).
96131

97-
## Code of Conduct
132+
## Code of conduct
98133

99134
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
100135
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or

0 commit comments

Comments
 (0)