Skip to content

Commit ccd21e1

Browse files
Dickson-MwendiaDickson-Mwendia
authored
Merge pull request #59 from Azure-Samples/ciam-samples-overview-updates
Update code samples to align with docs
2 parents 1a9c4a9 + 9f53b5c commit ccd21e1

1 file changed

Lines changed: 46 additions & 46 deletions

File tree

‎README.md‎

Lines changed: 46 additions & 46 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,81 @@ 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:
3329

34-
Please refer to each sample's README for sample-specific recommendations.
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.
3531

36-
## Contents
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.
3733

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

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**. |
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 | 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**](./1-Authentication/0-sign-in-vanillajs/README.md) | [Sign in users](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-sample-sign-in) | [Sign in users](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-prepare-tenant) |
41+
|React SPA|![Sign in users with a React SPA](./1-Authentication/1-sign-in-react/ReadmeFiles/topology.png) | [**Sign in using a React SPA**](./1-Authentication/1-sign-in-react/README.md) | [Sign in users](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-single-page-application-react-sample) | [Sign in users](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-single-page-application-react-prepare-tenant) |
42+
Angular SPA|![Sign in users with an Angular SPA](./1-Authentication/1-sign-in-react/ReadmeFiles/topology.png) | [**Sign in using an Angular SPA**](./1-Authentication/2-sign-in-angular/README.md) | [Sign in users](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-single-page-application-angular-sample) | --- |
43+
Electron desktop app|![Sign in users with an Electron desktop app](./1-Authentication/3-sign-in-electron/ReadmeFiles/topology.png) | [**Sign in using an Electron desktop app**](./1-Authentication/3-sign-in-electron/README.md) | [Sign in users](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-desktop-app-electron-sample-sign-in) | --- |
44+
Node.js browserless app|![Sign in users with a Node.js browserless app](./1-Authentication/4-sign-in-device-code/ReadmeFiles/topology.png) | [**Sign in using a Node.js browserless app**](./1-Authentication/4-sign-in-device-code/README.md) | [Sign in users](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-browserless-app-node-sample-sign-in) | [Sign in users](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-browserless-app-node-sign-in-overview) |
45+
Node.js & Express web app|![Sign in users with a Node.js & Express web app](./1-Authentication/5-sign-in-express/ReadmeFiles/topology.png) | [**Sign in using a Node.js & Express web app**](./1-Authentication/5-sign-in-express/README.md) | [Sign in users](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-web-app-node-sample-sign-in) | [Sign in users](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-web-app-node-sign-in-overview) |
46+
4847

4948
### Chapter 2: Protect an API and call the API from your client app
5049

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. |
50+
The following table summarizes resources with guidance on how to protect your web API with the **Azure AD for Customers**. You then use a client application to sign-in a user, acquire an **Access Token** for your app to call the protected web API.
5851

59-
## We'd love your feedback
6052

61-
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).
53+
Language/platform + app type |Scenario| GitHub code sample | Explore and run code sample | Build and integrate tutorial |
54+
| ------- | -------- | ------------- |-------------|---------------|
55+
Node.js & Express web app|![Sign in users and call an API using a Node.js & Express web app](./2-Authorization/4-call-api-express/ReadmeFiles/topology.png) | [**Sign in users and call an API using a Node.js & Express web app**](./2-Authorization/4-call-api-express/README.md) | [Sign in users and call an API](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-web-app-node-sample-sign-in-call-api) | [Sign in users and call an API](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-web-app-node-sign-in-call-api-overview) |
56+
Node.js daemon application|![Call an API using a Node.js daemon application](./2-Authorization/3-call-api-node-daemon/ReadmeFiles/topology.png)| [**Call an API using a Node.js daemon application**](/2-Authorization/3-call-api-node-daemon/README.md) | [Call an API](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-daemon-node-sample-call-api) |[Call an API](https://learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-daemon-node-call-api-overview) |
57+
Vanilla JavaScript SPA|![Sign in users and call an API using a Vanilla JavaScript SPA](./2-Authorization/0-call-api-vanillajs/ReadmeFiles/topology.png) | [**Sign in users and call an API using a Vanilla JavaScript SPA**](./2-Authorization//0-call-api-vanillajs/README.md) | -- |-- |
58+
React SPA|![Sign in users and call an API using a React SPA](./2-Authorization/1-call-api-react/ReadmeFiles/topology.png) | [**Sign in users and call an API using a React SPA**](./2-Authorization/1-call-api-react/README.md) | -- |-- |
59+
Angular SPA|![Sign in users and call an API using an Angular SPA](./2-Authorization/2-call-api-angular/ReadmeFiles/topology.png) | [**Sign in users and call an API using an Angular SPA**](./2-Authorization/2-call-api-angular/README.md) | -- |-- |
60+
61+
62+
If you're looking for more samples on different authentication and authorization scenarios, see [Samples and guides for customer identity and access management (CIAM) in Azure Active Directory](https://learn.microsoft.com/azure/active-directory/external-identities/customers/samples-ciam-all?tabs=apptype)
6263

6364
## More information
6465

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

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/)
68+
- [Identity Platform Developer Center](https://developer.microsoft.com/identity/customers)
69+
- [Microsoft Entra External ID for customers](https://learn.microsoft.com/azure/active-directory/external-identities/customers/overview-customers-ciam)
6970
- [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)
71+
- [Supported features in Microsoft Entra External ID for customers](https://learn.microsoft.com/azure/active-directory/external-identities/customers/concept-supported-features-customers)
72+
- [Authentication methods and identity providers for customers](https://learn.microsoft.com/azure/active-directory/external-identities/customers/concept-authentication-methods-customers)
73+
- [Microsoft Entra External ID for customers frequently asked questions](https://learn.microsoft.com/azure/active-directory/external-identities/customers/faq-customers)
74+
75+
76+
## We'd love your feedback
77+
78+
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).
7579

76-
See more code samples:
7780

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)
81+
## Community help and support
8082

81-
## Community Help and Support
8283

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`].
84+
- Post a question to [Microsoft Q&A](https://learn.microsoft.com/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.
8685

87-
If you find a bug in the sample, please raise the issue on [GitHub Issues](../../issues).
86+
- Use [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoft-entra-external-id) to get support from the community.
87+
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`].
8888

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

9191
## Contributing
9292

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

97-
## Code of Conduct
97+
## Code of conduct
9898

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

0 commit comments

Comments
 (0)