typescriptazureauthenticationazure-authentication

Generate Token with OAuth 2.0 authorization code flow passing scopes with characters containing slash "/"

I have a scope with the following name pattern: "api://{client-id}/{name-with-slash}"

Example:

Scope name: "portal/aws"

Final scope name: "api://6ea427d1-d3f6-479c-8cc8-f4cb73278354/portal/aws"

I registered this same scope with the same name in the Azure Portal in my application.

Expose an API scopes expose an API register scope detail

API Permission API Permission

However, when I try to redirect the url to /oauth2/v2.0/authorize, I get the following message error:

My code in Typescipt:

const params = [
      "client_id=" + clientId,
      "response_type=code",
      "redirect_uri=" + encodeURIComponent(`${redirectURI}/callback`),
      "response_mode=query",
      "scope=" + encodeURIComponent(scopeName), //api://6ea427d1-d3f6-479c-8cc8-f4cb73278354/portal/aws
      "state=" + state,
      "code_challenge=" + codeChallenge,
      "code_challenge_method=S256"
    ];
    
const urlSSO = `${endpointAzure}/oauth2/v2.0/authorize?${params.join("&")}`;
return urlSSO;

Using the encodeURIComponent function causes Authentication to not recognize the full scope name

Solution

  • invalid_resource - AADSTS500011: The resource principal named api://client-id/portal was not found in the tenant named <tenant-id.>

    These error message usually occurs when application is not registered in tenant which you are requesting or you didn't added and granted admin consent to the scope in API permission blade which you created in Expose an API blade.

    I am getting the error while adding scope like you api://client-id>/portal/aws , The slashes and spaces are invalid character for scope name and could be the restriction, So try by avoiding slashes and spaces and Add this permission on API permission blade and Grant admin consent.

    enter image description here

    Added Application ID URI and Added a scope in Expose an Blade:

    enter image description here

    Added portal.aws scope to API permission blade:

    enter image description here

    enter image description here

    Granted Admin Consent to portal.aws:

    enter image description here

    Using delegated type, authorization_code flow which requires user-interaction.

    Ensure to provide the same tenant-id where you application is registered.

    To get code, I ran below authorization request in browser:

    https://login.microsoftonline.com/<tenant_id>/oauth2/v2.0/authorize?  
client_id=<client_id>
&response_type=code  
&redirect_uri=https://jwt.ms
&response_mode=query  
scope: api://<client-id>/portal.aws
&state=12345

    enter image description here

    After successfully creating authorization_code, Generated access token using below parameters:

    GET https://login.microsoftonline.com/<tenant-id>/oauth2/v2.0/token
Content-Type: application/x-www-form-urlencoded

client_id: <application-id>
client_secret: <client-secret>
scope: api://<client-id>/portal.aws
grant_type: authorization_code
code: <authorization_code generated from browser>
redirect_uri: <REDIRECT_URI

    enter image description here

    References:

    Configure an application to Expose an Web API