GithubHelp home page GithubHelp logo

azure-samples / ms-identity-javascript-tutorial Goto Github PK

View Code? Open in Web Editor NEW
123.0 32.0 81.0 2.52 MB

A chapterwise tutorial that will take you through the fundamentals of modern authentication with Microsoft identity platform in Vanilla JavaScript.

Home Page: https://aka.ms/aadv2

License: MIT License

JavaScript 64.25% HTML 9.65% PowerShell 25.69% CSS 0.40%
msal msal-js microsoft-identity-platform ms-graph azure-active-directory azure-active-directory-b2c oauth2 oidc single-page-application authentication

ms-identity-javascript-tutorial's People

Contributors

bgavrilms avatar danilosoarescardoso avatar dependabot[bot] avatar derisen avatar haddley avatar idg-sam avatar javigomez avatar kalyankrishna1 avatar microsoft-github-operations[bot] avatar microsoftopensource avatar salman90 avatar v-michaelmi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ms-identity-javascript-tutorial's Issues

There's a broken link in the third chapter link at README.md

There's a broken link in the third chapter link at READ.ME

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Call a web API that calls Microsoft Graph on-behalf-of User
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [x] documentation issue or request

Expected/desired behavior

It's just a point breaking the link to the third chapter in the index page

Minor uncertainties

Which version of Microsoft.Identity.Client are you using?
0144218

image
there is no "id token" in console. You can peek it from the requests in Network tab, but not in the Console

image

typo in Redirect URL I guess. the file 3-Authorization-II/1-call-api/README.md

image

3-Authorization/1-call-api: Web Call API blocked by CORS

Issue

After following the instructions in the 3-Authorization/1-call-api tutorial code, and running the app on localhost, I am able to sign in, but when pressing the "Call API" button, I only see "Calling Web API" and receive the following message on the console:

Access to fetch at 'http://localhost:5000/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

In index.js I have not removed:

// enable CORS (for testing only -remove in production/deployment)
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
    next();
});

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [x ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Call a web API that calls Microsoft Graph on-behalf-of user
    - [ ] 4-2) Call a web API that calls another web API on-behalf-of user
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a

    - [x ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Followed all steps in the tutorial and when clicking on the button receive the above error.

Any log messages given by the failure

Access to fetch at 'http://localhost:5000/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Expected/desired behavior

Expect to see "Web API responded: Hello !"

Library version

As provided in the git repository

Browser and version

Chrome (Version 88.0.4324.104), Edge (Version 88.0.705.56)

Thanks! We'll be in touch soon.

Invalid grant - consent_required

Issue

Please provide us with the following information:

let tokenObj = await getNewAccessToken(userToken);

returns:

{
  error: 'invalid_grant',
  error_description: "AADSTS65001: The user or administrator has not consented to use the application with ID 'APP_ID' named 'APP_NAME'. Send an interactive authorization request for this user and resource.\r\n" +
    'Trace ID: TRACE_ID\r\n',
...
  suberror: 'consent_required'
}
    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ x ] 4-1) Call a web API that calls Microsoft Graph on-behalf-of user
    - [ ] 4-2) Call a web API that calls another web API on-behalf-of user
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a

    - [x ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Expected/desired behavior

get new access token

Library version

Browser and version

Chrome 88.0.4324.150

What is personal Microsoft account

Issue

https://github.com/Azure-Samples/ms-identity-javascript-tutorial/tree/main/1-Authentication/1-sign-in
this page said:

This sample will not work with a personal Microsoft account. If you're signed in to the [Azure portal](https://portal.azure.com/) with a personal Microsoft account and have not created a user account in your directory before, you will need to create one before proceeding.
What is personal microsoft account, what if I want to get access token for a user who can list the todo list?

Please provide us with the following information:

This issue is for the sample

    - [x] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [x] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Call a web API that calls Microsoft Graph on-behalf-of user
    - [ ] 4-2) Call a web API that calls another web API on-behalf-of user
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Any log messages given by the failure

Expected/desired behavior

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

What does the Add Platform example do?

Issue

I've skipped this step while doing the tutorial, in the WEB API registration section:

  1. If you don't have a platform added, select Add a platform and select the Web option.
    1. In the Redirect URI section enter the following redirect URI:
      1. ``
    2. Click Save to save your changes.

I haven't seen any bad consequences. What does this step do? Why is it necessary?

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [x] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Call a web API that calls Microsoft Graph on-behalf-of user
    - [ ] 4-2) Call a web API that calls another web API on-behalf-of user
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ x] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Just follow the tutorial and skip that step.

Strategy.prototype.jwtVerify: cannot verify token

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [X] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Call a web API that calls Microsoft Graph on-behalf-of user
    - [ ] 4-2) Call a web API that calls another web API on-behalf-of user
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a

    - [X] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

I followed everything to the letter --- so I've got the SPA and API registered and running. However, the API is not working correctly.

I was able to see the token and parse it at jst.ms (snippet below)

The SPA frontend is getting an Unauthorized error when it tries to go through the API. Console output from the API says the following:

"msg": "authentication failed due to: In Strategy.prototype.jwtVerify: cannot verify token"

The AUD (AUDIENCE) token looks incorrect to me:

Claim type Value Notes
aud 00000003-0000-0000-c000-000000000000 Identifies the intended recipient of the token. In id_tokens, the audience is your app's Application ID, assigned to your app in the Azure portal. Your app should validate this value, and reject the token if the value does not match.

How to verify ID token from SPA sent backend service?

Issue

I have the sample application working with your SPA and your API backend. Getting a validated Access bearer token.... all good.

The thing is that the UI is getting an id_token which is great b/c it has certain groups that my user belongs to. I'd like to send this token to my node api layer, and grant certain permissions based on this group association.

The problem is I have no idea how to verify this ID token.... if I pass it as bearer, it will not validate.... am I thinking about this the wrong way? I would think I would need to validate the ID Token's signature on the node side to make sure that it was a valid token... otherwise someone could forge the ID token (assuming they have a good access token) and get elevated privs.

I've read https://docs.microsoft.com/en-us/azure/active-directory/develop/id-tokens several times but it is unclear to me how to validate this ID token. Any help/guidance is appreciated to clarify my thinking.

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [X] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Call a web API that calls Microsoft Graph on-behalf-of user
    - [ ] 4-2) Call a web API that calls another web API on-behalf-of user
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [X] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Any log messages given by the failure

Expected/desired behavior

A (server side) verified ID token

Library version

latest

Browser and version

node (web api), chrome browser

Mention any other details that might be useful

Thanks! We'll be in touch soon.

App requires reply

Issue

Please provide us with the following information:

This issue is for the sample ms-identity-javascript-tutorial

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [X ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Call a web API that calls Microsoft Graph on-behalf-of user
    - [ ] 4-2) Call a web API that calls another web API on-behalf-of user
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a problem with the user that authenticates with the SPA

    - [ ] bug report -> please search issues before submitting
    - [X ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce - create new user in tenant, attempt to login, you'll get a warning about having a second factor (choose to skip for 14-days) then login with the user, I get an error :AADSTS500113: No reply address is registered for the application.

Any log messages given by the failure AADSTS500113: No reply address is registered for the application.

Expected/desired behavior is it complaining about the app registration of the SPA? I don't see a place to define a reply address....is it talking email?

Library version master branch

Browser and version

Chrome, Edge, Firefox, Safari? Firefox 106.5.0 on windows

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Get Need admin approval dialog when 'Call API' in chapter 4 scenario 1 example

Issue

I setup 2 apps in Azure to run this chapter 4, 1 scenario. I am able to login to my spa.
But when I click the 'Call API' button, I get this dialog saying

Need admin approval
needs permission to access resources in your organization that only an admin can grant. Please ask an admin to grant permission to this app before you can use it.

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ x] 4-1) Call a web API that calls Microsoft Graph on-behalf-of user
    - [ ] 4-2) Call a web API that calls another web API on-behalf-of user
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a

    - [ x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Login via 'localhost:3000' and click 'Call API'.

Any log messages given by the failure

Network trace:
{"error":"invalid_grant","error_description":"AADSTS65001: The user or administrator has not consented to use the application with ID '592f65fc-d5cf-4269-8394-95e8fd467d31' named 'ms-identity-javascript-tutorial-c4s1-spa'. Send an interactive authorization request for this user and resource.\r\nTrace ID: e27b4539-c15c-4deb-b0e3-5e95fa390400\r\nCorrelation ID: 9304a21f-9409-4dee-9838-004d4283c21c\r\nTimestamp: 2022-01-29 18:41:40Z","error_codes":[65001],"timestamp":"2022-01-29 18:41:40Z","trace_id":"e27b4539-c15c-4deb-b0e3-5e95fa390400","correlation_id":"9304a21f-9409-4dee-9838-004d4283c21c","suberror":"consent_required"}

Expected/desired behavior

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Issue with Microsoft Graph on-behalf-of user

Issue

Please provide us with the following information:

Following code

myMSALObj.loginPopup(loginRequest)
        .then(handleResponse)
        .catch(error => {
            console.error(error);
        });

throws error

ServerError: invalid_client: 7000218 - [2021-04-19 18:09:38Z]: AADSTS7000218: The request body must contain the following parameter: 'client_assertion' or 'client_secret'.
Trace ID: <trace-id>
    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [x] 4-1) Call a web API that calls Microsoft Graph on-behalf-of user
    - [ ] 4-2) Call a web API that calls another web API on-behalf-of user
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Any log messages given by the failure

Expected/desired behavior

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Json format error

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [x] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [x] 4-1) Call a web API that calls Microsoft Graph on-behalf-of user
    - [x] 4-2) Call a web API that calls another web API on-behalf-of user
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

cd 3-Authorization-II/1-call-api/API/AppCreationScripts
./Configure.ps1
cat 3-Authorization-II/1-call-api/API/config.json

json format error: Extra comma
"credentials": {
"tenantID": "xxxxxxxxxxxx",
"clientID": "xxxxxxxxxxxx",
"audience": "xxxxxxxxxxxx",
}

Any log messages given by the failure

Expected/desired behavior

"credentials": {
"tenantID": "xxxxxxxxxxxx",
"clientID": "xxxxxxxxxxxx",
"audience": "xxxxxxxxxxxx"
}

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

There are the same problem on 4-1 and 4-2.

repair method:
update UpdateLine function with this code:

Function UpdateLine([string] $line, [string] $value)
{
    $delimiter = ''
    $index = $line.IndexOf(',')
    if ( $index -ne -1 )
    {
        $delimiter = ','
    }
    $index = $line.IndexOf('=')
    if ($index -eq -1)
    {
        $index = $line.IndexOf(':')
    }
    if ($index -ige 0)
    {
        $line = $line.Substring(0, $index+1) + " "+'"'+$value+'"'+$delimiter
    }
    return $line
}

Thanks! We'll be in touch soon.

Error with OBO via an MSAL.js Access token

Issue

I try to reproduce the sample with a msal.js acquired token (on SPA).
I can get an access token with AcquireSilentToken, then I transmit it to a server method.
This server method try to get a new access token with OBO token query (written in asp.net MVC / C#).

I got this error message :
AADSTS50013: Assertion failed signature validation

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [X ] 4-1) Call a web API that calls Microsoft Graph on-behalf-of user
    - [ ] 4-2) Call a web API that calls another web API on-behalf-of user
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a

    - [X ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Any log messages given by the failure

Here is full error
{
"error": "invalid_grant",
"error_description": "AADSTS50013: Assertion failed signature validation. [Reason - Key was found, but use of the key to verify the signature failed., Thumbprint of key used by client: 'xxxxxxxxxxx', Found key 'Start=10/02/2022 18:06:49, End=10/02/2027 18:06:49', Please visit the Azure Portal, Graph Explorer or directly use MS Graph to see configured keys for app Id '00000000-0000-0000-0000-000000000000'. Review the documentation at https://docs.microsoft.com/en-us/graph/deployments to determine the corresponding service endpoint and https://docs.microsoft.com/en-us/graph/api/application-get?view=graph-rest-1.0&tabs=http to build a query request URL, such as 'https://graph.microsoft.com/beta/applications/00000000-0000-0000-0000-000000000000'].\r\nTrace ID: be86f346-02cf-4139-a9e2-036c7a621900\r\nCorrelation ID: 108f1005-07ef-4a0e-aff2-4bf824c9ac1d\r\nTimestamp: 2023-06-15 15:01:38Z",
"error_codes": [
50013
],
"timestamp": "2023-06-15 15:01:38Z",
"trace_id": "be86f346-02cf-4139-a9e2-036c7a621900",
"correlation_id": "108f1005-07ef-4a0e-aff2-4bf824c9ac1d",
"error_uri": "https://login.microsoftonline.com/error?code=50013"
}

Expected/desired behavior

OBO token query OK

Library version

MSAL 2.0

Browser and version

Chrome

Mention any other details that might be useful

Thanks! We'll be in touch soon.

fix b2c signin readme to remove mention of dynamic and incremental consent

Issue

Dynamic and incremental consent is not available in b2c without a custom policy so the mention of it in the following places is misleading.

https://github.com/Azure-Samples/ms-identity-javascript-tutorial/blob/72196d102a08c4d112298db9ed26b3327b7b0251/3-Authorization-II/2-call-api-b2c/README.md#dynamic-scopes-and-incremental-consent

and

https://github.com/Azure-Samples/ms-identity-javascript-tutorial/tree/main/3-Authorization-II/2-call-api-b2c#dynamic-scopes-and-incremental-consent

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [x] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [x] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Call a web API that calls Microsoft Graph on-behalf-of User
    - [ ]   5) Deploy to Azure Storage and App Service

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [x] documentation issue or request

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.