Microsoft Teams SSO - getting a 2400 error when trying to retrieve a token using SSO from a teams application

Question

Microsoft Teams SSO Integration: Error 2400 when the SSO window opens

I'm working on integrating an Angular application into Microsoft Teams, and I'm using SSO to authenticate users via Azure AD. However, I'm encountering issues that I can't seem to resolve.

Current Setup:

• Application Hosting: The app is hosted on https://www.myexampleapp.com/test.

• Azure AD Application ID URI: api://www.myexampleapp.com/test/12345678-abcd-efgh-ijkl-9876543210.

• Teams Manifest:

  {
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
    "manifestVersion": "1.16",
    "version": "1.0.2",
    "id": "12345678-abcd-efgh-ijkl-9876543210",
    "packageName": "com.example.teams-tab-app",
    "developer": {
      "name": "Your Name",
      "websiteUrl": "https://example.com",
      "privacyUrl": "https://example.com",
      "termsOfUseUrl": "https://example.com"
    },
    "name": {
      "short": "Teams Tab App",
      "full": "Teams Tab Application"
    },
    "description": {
      "short": "A simple app",
      "full": "This is a simple app built with Angular."
    },
    "staticTabs": [
      {
        "entityId": "exampleTab",
        "name": "Example Tab",
        "contentUrl": "https://www.myexampleapp.com/test",
        "context": ["personalTab", "channelTab"],
        "scopes": ["personal", "team"]
      }
    ],
    "permissions": ["identity", "messageTeamMembers"],
    "validDomains": ["www.myexampleapp.com"],
    "icons": {
      "color": "color.png",
      "outline": "outline.png"
    },
    "accentColor": "#FF5733",
    "webApplicationInfo": {
      "id": "12345678-abcd-efgh-ijkl-9876543210",
      "resource": "api://www.myexampleapp.com/test/12345678-abcd-efgh-ijkl-9876543210"
    }
  }
  

• Angular Code for Token Acquisition:

  async ngOnInit() {
    microsoftTeams.initialize();
    await this.getAuthToken();
  }
  
  async getAuthToken() {
    try {
      this.authToken = await microsoftTeams.authentication.getAuthToken();
      console.log('Authentication token:', this.authToken);
    } catch (error) {
      console.error('Error retrieving token:', error);
    }
  }
  

• API Permissions:

  • User.Read
  • Files.Read.All
  • (Other permissions related to site collections and access reviews)

Issues:

1. Error 2400: When the app tries to acquire the authentication token, I encounter the following error:

   
    ApiContractViolation {"Description":"Embedded browser flow resulted in 'invalid_client' with description '(pii)'","Domain":"com.microsoft.oneauth","ErrorCode":"2400","Message":"The operation attempted is invalid.","SystemErrorCode":"0","Tag":"49dvr","Type":"OneAuth","additional_query_parameters_count":"1","all_error_tags":"49dvr","api_error_code":"0","api_error_context":"Embedded browser flow resulted in 'invalid_client' with description '(pii)'","api_error_tag":"49dvr","api_name":"AcquireTokenInteractively","api_status_code":"StatusInternal::ApiContractViolation","authority_type":"AAD","authorization_type":"Interactive","broker_app_used":"false","browser_navigation_count":"2","client_id":"112345","correlation_id":"12345","is_successful":"false","msal_version":"1.1.0+00747db6","original_authority":"https://login.microsoftonline.com/9229b2d3-b865-4ecb-942b-580b52e63","prt_enabled":"false","read_token":"ART-3d9b2b5ca34b2|FRT-3d9b27eb5ca2","request_duration":"305","request_new_prt":"false","start_time":"2024-08-18T11:32:54.000Z","stop_time":"2024-08-18T11:32:55.000Z","ui_event_count":"1","was_request_throttled":"false"}
   
   

Any help or guidance would be greatly appreciated!

Please see the attached image:

Answer 1

PII is Personally Identifiable Information. If Microsoft Teams SSO throws an error due to PII, saying

'invalid_client' with description '(pii)'

then the reason your client is invalid is that it's containing PII, which is information that can be used to identify the person. This violates European GDPR, for example.