README.md
    page_type: sample
    languages:
    - javascript
    - typescript
    - csharp
    products:
    - angular
    - dotnet
    - msal-js
    - ms-graph
    - azure-storage
    - azure-app-service
    - azure-key-vault
    - azure-active-directory
    - azure-active-directory-b2c
    - microsoft-identity-web
    description: "Tutorial: Enable your Angular single-page application to sign-in users and call APIs with the Microsoft identity platform"
    urlFragment: "ms-identity-javascript-angular-tutorial"

    Tutorial: Enable your Angular single-page application to sign-in users and call APIs with the Microsoft identity platform

    Node Build .NET Build Code Scan GitHub issues npm npm GitHub

    The Microsoft identity platform, along with Azure Active Directory (Azure AD) and Azure Azure Active Directory B2C (Azure AD B2C) are central to the Azure cloud ecosystem. This tutorial aims to take you through the fundamentals of modern authentication with Angular, using the Microsoft Authentication Library for Angular (MSAL Angular).

    We recommend following the chapters in successive order. However, the code samples are self-contained, so feel free to pick samples by topics that you may need at the moment.

    Prerequisites

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

    Recommendations

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

    Contents

    • For Azure AD, start the tutorial from here
    • For Azure AD B2C, start the tutorial from here

    Alternatively, choose below the sample you want to review.

    Chapter 1: Sign-in a user to your application

    Sign-in with Azure AD Sign-in your users with the Azure AD and learn to work with ID Tokens. Learn how single sign-on (SSO) works. Learn to secure your apps to operate in national clouds.
    Sign-in with Azure AD B2C Sign-in your customers with Azure AD B2C. Learn to integrate with external social identity providers. Learn how to use user-flows and custom policies.

    Chapter 2: Sign-in a user and get an Access Token for Microsoft Graph

    Get an Access Token from Azure AD and call Microsoft Graph Authenticate your users and acquire an Access Token for Microsoft Graph and then call the Microsoft Graph API.

    Chapter 3: Protect an API and call the API from your client app

    Protect and call a web API on Azure AD Protect your web API with the Azure AD. Use a client application to sign-in a user, acquire an Access Token for your web API and call your protected Web API.
    Protect and call a web API on Azure AD B2C Protect your web API with Azure AD B2C. Use a client application to sign-in a user, acquire an Access Token for your web API and call your protected web API.

    Chapter 4: Deploy your applications to Azure

    Deploy to Azure Storage and App Service Prepare your app for deployment to various Azure services. Learn how to package and upload files, configure authentication parameters and use Azure services for managing your operations.

    Chapter 5: Control access to your protected API using App Roles and Security Groups

    Call a web API using App Roles Define App Roles and use roles claim in an ID Token to implement Role-based Access Control (RBAC) for your protected web API.
    Call a web API using Security Groups Create Security Groups and use groups claim in an ID Token to implement Role-based Access Control (RBAC) for your protected web API. Handle overage scenarios.

    Chapter 6: Develop and provision a multi-tenant SaaS application

    Call a multi-tenant web API from any tenant Understand multitenancy in Azure AD. Handle provisioning your app to other tenants and control who can access your resources.

    Chapter 7: Dive into advanced scenarios

    Call Microsoft Graph using on-behalf-of flow Use OAuth 2.0 on-behalf-of flow to call Microsoft Graph from your client app via a .NET Core web API. Understand combined consent and .default scope.
    Call a web API using Proof of Possession tokens Acquire proof of possession (PoP) tokens. Learn how to prevent token replay attacks with PoP authentication scheme. Learn how to validate PoP tokens.

    We'd love your feedback!

    Were we successful in addressing your learning objective? Consider taking a moment to share your experience with us.

    More information

    Learn more about the Microsoft identity platform:

    See more code samples:

    Community Help and Support

    Use Stack Overflow to get support from the community. 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 azure-ad azure-ad-b2c msal javascript].

    If you find a bug in the sample, please raise the issue on GitHub Issues.

    To provide a recommendation, visit the following User Voice page.

    Contributing

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

    Code of Conduct

    This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com//Azure-Samples/ms-identity-javascript-angular-tutorial

    发行版本

    当前项目没有发行版本

    贡献者 7

    开发语言

    • PowerShell 36.9 %
    • TypeScript 35.3 %
    • C# 18.3 %
    • HTML 6.6 %
    • JavaScript 1.6 %