Code Monkey home page Code Monkey logo

stefb965 / active-directory-javascript-singlepageapp-dotnet-webapi-v2 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from azure-samples/active-directory-javascript-singlepageapp-dotnet-webapi-v2

0.0 2.0 0.0 93 KB

A JavaScript based single page app with a .NET backend that authenticates users for AzureAD, Microsoft personal and work accounts, and more, and calls the backend web api using access tokens, without using any Single Page Application framework

License: MIT License

CSS 0.11% JavaScript 46.44% HTML 16.68% C# 36.42% ASP 0.35%

active-directory-javascript-singlepageapp-dotnet-webapi-v2's Introduction

services platforms author
active-directory
dotnet (backend), JavaScript (frontend)
jmprieur

JavaScript Single Page Application with an ASP.NET backend, using msal.js

Getting Started Library Docs Support Protocol

Table of contents

Introduction

The MSAL preview library for JavaScript gives your app the ability to begin using the Microsoft Cloud by supporting Microsoft Azure Active Directory and Microsoft Accounts in a converged experience using industry standard OAuth2 and OpenID Connect. This sample us a JavaScript Single Page with an ASP.NET backend. It demonstrates all the normal lifecycles your application should experience, including:

  • How to get a token
  • How to refresh a token
  • How to call a backend Web API
  • How to sign a user out of your application

Prerequisites

To use this sample, you will need :

Register the application

  1. Sign into the App Registration Portal using either your personal or work or school account.

  2. Choose Add an app.

  3. Enter a name for the app, and choose Create application.

    The registration page displays, listing the properties of your app.

  4. Copy the Application Id (also named ClientID) to the clipboard. This is the unique identifier for your app.

  5. Under Platforms, choose Add Platform.

  6. Choose Web.

  7. Make sure the Allow Implicit Flow check box is selected, and enter https://localhost:44302/ as the Redirect URI.

  8. Choose Save.

Build and run the sample

  1. Download or clone the repository for this sample.

  2. Using your favorite IDE, open app.js in App/scripts.

  3. Replace the clientId GUID with the application ID of your registered Azure application.

  4. open Web.confg in the root of the application.

  5. Replace the value of the Ida::Audience application setting with the application ID of your registered Azure application.

  6. Replace the value of the Ida::Tenant application setting with the name of the AAD tenant in which you have registered your application (the form should something.onmicrosoft.com)

  7. Run the application in Visual Studio, for choose, from the toolback under the main menubar, which browser to use and use the Debug | Start without debugging command. The browser opens, navigating to http://localhost:44302.

  8. When the page gets displayed, click on the Login button.

  9. When the popup window appears, sign-in with your personal or work or school account and grant the requested permissions.

  10. Click on User to see information about the Signed-in user, and TodoList to edit the todo list (you can add, delete, edit new items)

The sample was tested with Chrome, Edge and Internet Explorer. For Internet explorer, be sure to read the msal.js FAQ Using msal.js with Internet Explorer

About the code.

  • The creation of the user agent application is done in app.js, configured by the clientID.

  • when the user presses the login button (sign-in happens, in app.js by a call to loginPopup().

  • when the user presses Todo, the list is fetched from the ASP.NET backend. this happens in todoListCtrl.js, by attempting to call acquireTokenSilent, and then, if it fails calling acquireTokenPopup. The access token is then used to call the backend (which has the same clientID as the JavaScript front-end). This happens in getTodoList.

  • when the user presses the logout button (sign-out happens, in app.js through a call to logout().

Community Help and Support

We use Stack Overflow with the community to provide support. We highly recommend you 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 [msal.js].

If you find and bug or have a feature request, please raise the issue on GitHub Issues.

To provide a recommendation, visit our User Voice page.

Contributing

If you'd like to contribute to this sample, see CONTRIBUTING.MD.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Security Library

This library controls how users sign-in and access services. We recommend you always take the latest version of our library in your app when possible.

Security Reporting

If you find a security issue with our libraries or services please report it to [email protected] with as much detail as possible. Your submission may be eligible for a bounty through the Microsoft Bounty program. Please do not post security issues to GitHub Issues or any other public site. We will contact you shortly upon receiving the information. We encourage you to get notifications of when security incidents occur by visiting this page and subscribing to Security Advisory Alerts.

Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License (the "License");

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.