Giter VIP home page Giter VIP logo

Comments (27)

JerryYangKai avatar JerryYangKai commented on July 17, 2024

Hi @grumpykiwi , since we only got JavaScript version of microsoft/teamsfx sdk, so we including webpack to wrapper it and using JSRuntime to trigger it in Blazor.
The webpack source code is in JS/src/index.js, you could add your code such as 'added Groups.Read.All to scopes inside index,.js GetToken() method'.
Then under JS folder , run 'npm install' and 'npm run build' to webpack the code and refresh the webpack file (wwwroot/teamsfx.js).
Finally you could using JSRuntime trigger the func you just updated in TeamsFx.cs.
await jsRuntime.InvokeAsync("TeamsFx.getToken");
We've tried to remove webpack and provide a more convenient way to using sdk in the future

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

Hi

I modified index.js as follows:

var scope = ["User.Read, Presence.Read.All, Group.Read.All, Directory.Read.All, Domain.Read.All, email, GroupMember.Read.All, Mail.Send, offline_access, openid, People.Read.All, profile, TeamMember.Read.All, User.ReadWrite.All"];

Changed in both popupLoginPage() and getToken(). Did the npm stuff, re-ran and get an error on this line of code inside GetUserProfilePhoto()

var photoStream = await graphClient.Me.Photo.Content.Request().GetAsync();

Error is:

{"Consent failed for the scope User.Read, Presence.Read.All, Group.Read.All, Directory.Read.All, Domain.Read.All, email, GroupMember.Read.All, Mail.Send, offline_access, openid, People.Read.All, profile, TeamMember.Read.All, User.ReadWrite.All with error: FailedToOpenWindow\nErrorWithCode.ConsentFailed: Consent failed for the scope User.Read, Presence.Read.All, Group.Read.All, Directory.Read.All, Domain.Read.All, email, GroupMember.Read.All, Mail.Send, offline_access, openid, People.Read.All, profile, TeamMember.Read.All, User.ReadWrite.All with error: FailedToOpenWindow\n at Object.failureCallback (webpack://TeamsFx/./node_modules/@microsoft/teamsfx/dist-esm/src/credential/teamsUserCredential.browser.js?:125:36)\n at m (webpack://TeamsFx/./node_modules/@microsoft/teams-js/dist/MicrosoftTeams.min.js?:1:16239)\n at u (webpack://TeamsFx/./node_modules/@microsoft/teams-js/dist/MicrosoftTeams.min.js?:1:15495)\n at Object.e.authenticate (webpack://TeamsFx/./node_modules/@microsoft/teams-js/dist/MicrosoftTeams.min.js?:1:17717)\n at eval (webpack://TeamsFx/./node_modules/@microsoft/teamsfx/dist-esm/src/credential/teamsUserCredential.browser.js?:102:85)\n at Object.g [as initialize] (webpack://TeamsFx/./node_modules/@microsoft/teams-js/dist/MicrosoftTeams.min.js?:1:36899)\n at eval (webpack://TeamsFx/./node_modules/@microsoft/teamsfx/dist-esm/src/credential/teamsUserCredential.browser.js?:101:66)\n at new Promise ()\n at TeamsUserCredential.eval (webpack://TeamsFx/./node_modules/@microsoft/teamsfx/dist-esm/src/credential/teamsUserCredential.browser.js?:100:20)\n at Generator.next ()"}

I tried defining the scopes differently but that didnt work either.

var scope = [
"User.Read",
"Presence.Read.All",
"Group.Read.All",
"Directory.Read.All",
"Domain.Read.All",
"email",
"GroupMember.Read.All",
"Mail.Send",
"offline_access",
"openid",
"People.Read.All",
"profile",
"TeamMember.Read.All",
"User.ReadWrite.All"

I have attached a PDF that shows permissions granted to the app. I dont see anything amiss in the list.

Ideas?

Thanks for your help. Cheers

Mark
PC Teams Status.Core - Microsoft Azure.pdf

from teams-toolkit.

JerryYangKai avatar JerryYangKai commented on July 17, 2024

@SLdragon Could you please help to look at this error? Thanks.

from teams-toolkit.

SLdragon avatar SLdragon commented on July 17, 2024

@grumpykiwi , from your error message, it said "FailedToOpenWindow", did your browser block the popup window? You can take a look in the in the address bar in the browser

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

This is the method that is called when clicking on the Authenticate button. There are a couple of lines that I added for testing, but most of it was generated by the Teams Toolkit Visual Studio template.

`
private async Task GetUserProfilePhoto()
{
try
{
IsLoading = true;
IsEmployeesLoaded = false;

		var graphClient = teamsfx.GetGraphServiceClient();
		var photoStream = await graphClient.Me.Photo.Content.Request().GetAsync();
		var presence = await graphClient.Me.Presence.Request().GetAsync();
		var profile = await graphClient.Me.Request().GetAsync();

		var helper = new Data.GraphHelper(graphClient);
		//			Employees = await helper.GetEmployeeData();

		var emps = await graphClient.Groups[GroupId].Members
			.Request()
			.GetAsync();

		if (photoStream != null)
		{
			// Copy the photo stream to a memory stream
			// to get the bytes out of it
			var memoryStream = new MemoryStream();
			photoStream.CopyTo(memoryStream);
			var photoBytes = memoryStream.ToArray();

			// Generate a data URI for the photo
			UserPhotoUri = $"data:image/png;base64,{Convert.ToBase64String(photoBytes)}";
		}

		Title = profile.JobTitle;
		Status = string.Format("{0} - {1}", presence.Activity, presence.Availability);
		Email = profile.Mail;
	}
	catch (Exception ex)
	{
		e = ex;
		Console.WriteLine(ex.ToString());
	}
	finally
	{
		IsLoading = false;
		// Uncomment this when get group permission issue sorted
		// IsEmployeesLoaded = true;
	}
}

`

The line that fails is
var photoStream = await graphClient.Me.Photo.Content.Request().GetAsync();
which was generated from the toolkit. Error was captured by inserting the catch

This happens inside Team desktop client. I hit F5 from VS to start and it automatically runs in Teams. I dont see any attempts from Teams to open a window and no messages about a blocked popup.

Sorry about the code formatting. Thing has a mind of its own

from teams-toolkit.

SLdragon avatar SLdragon commented on July 17, 2024

Hi, @grumpykiwi , could you share a minimal sample of this issue, so we can take a look and investigate the root cause, thanks!

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

Sample attached. I have removed App Id, Tenant ID and Client Id for security purposes.

Line 140 of tab.razor is where the exception happens. Code execution goes straight to the catch at line 167 where you can see the failed to open window, which is being generated by the toolkit code as far as I can tell.

The customized scopes are in index.js. As you can see I tried 2 different ways to define them. Maybe it is just looking for a different format? I have not found any documentation or hints on a Google search about it, so am guessing.

TeamsStatus.Core.MSFT.zip

I had to remove all of the node modules folders in order to make the zip file small enough to attach.

Let me know what else you need,

Thanks

from teams-toolkit.

SLdragon avatar SLdragon commented on July 17, 2024

Thanks, we will have a try

from teams-toolkit.

SLdragon avatar SLdragon commented on July 17, 2024

Hi, @grumpykiwi , I have one quick question:

When you click the Auth button, did you see the login page in the browser like this?
image

If you do not see this login window, and did you see this block icon in your browser?

image

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

I went into the site settings and allowed popups and notifications for teams.microsoft.com.

The popup appears very briefly but then disappears and I end up with a bunch of 400 errors in the console like this:

Microsoft.TeamsFx.SimpleAuth.Components.Auth.Exceptions.AadUiRequiredException: AADSTS65001: The user or administrator has not consented to use the application with ID '4d902334-ba4f-4830-8525-c884b050ccf2' named ' PC Teams Status.Core'. Send an interactive authorization request for this user and resource.
Trace ID: 4e46b3c1-dcc5-47bf-a819-ad32de230a01
Correlation ID: d0f7d60e-bb59-46d9-98bf-94ad82e11c78
Timestamp: 2021-06-23 13:03:28Z
---> MSAL.NetCore.4.30.0.0.MsalUiRequiredException:
ErrorCode: invalid_grant
Microsoft.Identity.Client.MsalUiRequiredException: AADSTS65001: The user or administrator has not consented to use the application with ID '4d902334-ba4f-4830-8525-c884b050ccf2' named ' PC Teams Status.Core'. Send an interactive authorization request for this user and resource.
Trace ID: 4e46b3c1-dcc5-47bf-a819-ad32de230a01
Correlation ID: d0f7d60e-bb59-46d9-98bf-94ad82e11c78
Timestamp: 2021-06-23 13:03:28Z
at Microsoft.Identity.Client.Internal.Requests.RequestBase.HandleTokenRefreshError(MsalServiceException e, MsalAccessTokenCacheItem cachedAccessTokenItem)
at Microsoft.Identity.Client.Internal.Requests.OnBehalfOfRequest.ExecuteAsync(CancellationToken cancellationToken)
at Microsoft.Identity.Client.Internal.Requests.RequestBase.RunAsync(CancellationToken cancellationToken)
at Microsoft.Identity.Client.ApiConfig.Executors.ConfidentialClientExecutor.ExecuteAsync(AcquireTokenCommonParameters commonParameters, AcquireTokenOnBehalfOfParameters onBehalfOfParameters, CancellationToken cancellationToken)
at Microsoft.TeamsFx.SimpleAuth.Components.Auth.AuthHandler.AcquireTokenBySsoTokenOnBehalfOf(String ssoToken, String[] scopes)
StatusCode: 400
ResponseBody: {"error":"invalid_grant","error_description":"AADSTS65001: The user or administrator has not consented to use the application with ID '4d902334-ba4f-4830-8525-c884b050ccf2' named ' PC Teams Status.Core'. Send an interactive authorization request for this user and resource.\r\nTrace ID: 4e46b3c1-dcc5-47bf-a819-ad32de230a01\r\nCorrelation ID: d0f7d60e-bb59-46d9-98bf-94ad82e11c78\r\nTimestamp: 2021-06-23 13:03:28Z","error_codes":[65001],"timestamp":"2021-06-23 13:03:28Z","trace_id":"4e46b3c1-dcc5-47bf-a819-ad32de230a01","correlation_id":"d0f7d60e-bb59-46d9-98bf-94ad82e11c78","suberror":"consent_required"}
Headers: Cache-Control: no-store, no-cache
Pragma: no-cache
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
P3P: CP="DSP CUR OTPi IND OTRi ONL FIN"
client-request-id: d0f7d60e-bb59-46d9-98bf-94ad82e11c78
x-ms-request-id: 4e46b3c1-dcc5-47bf-a819-ad32de230a01
x-ms-ests-server: 2.1.11829.4 - WUS2 ProdSlices
x-ms-clitelem: 1,65001,0,,
Set-Cookie: fpc=Al1H_D3TVA5JlKKm0o8rjXyL3WreAgAAAPonZdgOAAAAb3TSjhMAAAD7J2XYDgAAAA; expires=Fri, 23-Jul-2021 13:03:28 GMT; path=/; secure; HttpOnly; SameSite=None, x-ms-gateway-slice=estsfd; path=/; secure; httponly, stsservicecookie=estsfd; path=/; secure; samesite=none; httponly
Date: Wed, 23 Jun 2021 13:03:28 GMT

--- End of inner exception stack trace ---
at Microsoft.TeamsFx.SimpleAuth.Components.Auth.AuthHandler.AcquireTokenBySsoTokenOnBehalfOf(String ssoToken, String[] scopes)
at Microsoft.TeamsFx.SimpleAuth.Controllers.AuthController.AcquireAccessTokenBySsoToken(PostTokenRequestBody body)
at Microsoft.TeamsFx.SimpleAuth.Controllers.AuthController.PostToken(PostTokenRequestBody body)
at Microsoft.AspNetCore.Mvc.Infrastructure.ActionMethodExecutor.TaskOfIActionResultExecutor.Execute(IActionResultTypeMapper mapper, ObjectMethodExecutor executor, Object controller, Object[] arguments)
at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.g__Awaited|12_0(ControllerActionInvoker invoker, ValueTask`1 actionResultValueTask)
at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.g__Awaited|10_0(ControllerActionInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Rethrow(ActionExecutedContextSealed context)
at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.g__Awaited|13_0(ControllerActionInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)

Capture

The capture from AD App Registration clearly shows (to me) that the app has all the permissions it needs.

Am I missing something here ? Since the popup appears so briefly, I never get the chance to approve additional permissions.

Also, is there a trick to get this app to run in the desktop client instead of the browser?

Thanks

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

I captured what happens. Hope it helps

Capture.mp4

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

Update. I created 2 brand new Visual Studio solutions from the Teams FX templates.

  1. Template 1. Completed SSO setup and added needed permissions 1 at a time, All added and still working fine
  2. Template 2. Copied over App & Client ID from existing project. Added 1st permission. Failed from that point.

@microsoft/[email protected] : Error - Failed to get access token from authentication server: The AAD configuration in server is invalid.

This leads me to speculate there is something awry with the app registration for 4d902334-ba4f-4830-8525-c884b050ccf2.

In the meantime I will keep plugging away with template 1, adding 1 UI piece at a time, test and repeat. That way if and when it breaks I will know what broke it.. Not necessarily why of course. I shall report back my findings.

Thanks for all your help

from teams-toolkit.

SLdragon avatar SLdragon commented on July 17, 2024

Maybe there is a cache issue when you try to consent the permission,

You can follow the steps to see whether it can solve your problem:

image

  • In the management portal, click revoke permission:

image

The operation may take some time to take effect.
You can restart your application after 1~2 hours, if the login page show the button which you can approve the permission you've requested, then it works.

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

Ran the app this AM. Prompted me 2x for the additional permissions then failed. Log from dev tools is attached.

Beginning to wonder if there is a configuration problem in Azure with that app registration. Probably something quite dumb on my part
teams.microsoft.com-1624543244493.log

from teams-toolkit.

SLdragon avatar SLdragon commented on July 17, 2024

@grumpykiwi , from your error message "The AAD configuration in server is invalid" means that the client id or client secret is not valid.

If you're copy configuration from other project, this may introduce problem.
AFIK client secret is stored in other place, maybe your client secret is not valid

You can refer this for more information about where is the secret:
https://docs.microsoft.com/en-us/aspnet/core/security/app-secrets?view=aspnetcore-5.0&tabs=windows#secret-manager

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

I deleted all previous secrets from the app registration in Azure and created a new one. Copied the value using the button provided into the appsettings.json file and re-ran it. Same error.

I then commented out the client secret line from the JSON file. No change

I just created a brand new Teams Project in VS2019. Did the SSO option under project and ran it. No issue.

I think there is something wrong in the app config somewhere. A difference between the project and Azure App registration. I will try and figure it out over the weekend. I have a working solution I can work with, but would like to sort this out so I can document and hopefully help someone else out that faces the same error.

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

I cloned from github a version of a teams app I had created. At the time of commit, I had added some custom scopes:

User.Read Presence.Read.All Group.Read.All GroupMember.Read.All

The app ran fine on 6/23 when committing. Now, it fails with:

Failed to get access token from authentication server: The AAD configuration in server is invalid.

This is from dev tools

I have not knowingly changed anything in the app config in any portal, yet it has stopped working. Is there some kind of behind the scenes daemon working on the app registrations in Azure that is corrupting the app entry?

I am baffled.

from teams-toolkit.

SLdragon avatar SLdragon commented on July 17, 2024

You can check whether your app secret is correct.

  • From your .csproj file, find the secret id:
    image

  • Then open the settings file in your system: %APPDATA%\Microsoft\UserSecrets<user_secrets_id>\secrets.json

  • Make sure that the "CLIENT_SECRET" in secret json file is align with your current AAD settings

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

I think I figured it out. I have 2 apps created with the toolkit. MyTeamsApp3 and MyTeamsApp5.

Both have this entry in the csproj file:

<PropertyGroup> <TargetFramework>net5.0</TargetFramework> <UserSecretsId>ac2ac231-0188-4f79-bd70-ebcc17700631</UserSecretsId> </PropertyGroup>

I opened the secrets.json file in VS Code and see this:

{ "CLIENT_SECRET": "4f1~93u6-XXXXXXXXXXXX" }

I poked around the Azure App registration portal and found this:

Teams App 5 Secret

What this shows explains what I am seeing.

When I create a 2nd project, the value points to the same file location as the 1st project and is therefore over-writing the secret value with the secret for the latest project. Leaving the previous project dead in the water.

This to me is a bug. The toolkit should generate a random GUID for the folder name on project creation, and place the secrets.json file in there. This would avoid the previous project being over-written.

In summary: The latest toolkit generated project is the only one that is going to work. All previous projects will break with an invalid client secret due to the over-writing.

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

I was able to work around the issue by doing the following:

  1. Created a new folder under the appdata path using the GUID from the ID field in manifest.json
  2. Created a new secret in the app portal. Copied and pasted ID and value into a text file for safe keeping
  3. Created a new secrets,json file in the new folder created in step 1. Using an old secrets.json as guide, created the JSON structure in the file.
  4. Copied in the new secret value prevously saved to the text file in step 2
  5. Updated the csproj file to use the new folder name from step 1
  6. Reran the project with F5. Success.

Hope this helps someone else. This was quite a rabbit hole of a problem. Lots of time spent in Dev Tools and Fiddler to capture what was being sent back and forth so I could nail down the source of the issue.

from teams-toolkit.

SLdragon avatar SLdragon commented on July 17, 2024

@grumpykiwi , thank you very much, seems this is a bug for our VS extension, I will inform our team members who working on the extension of this issue.

from teams-toolkit.

JerryYangKai avatar JerryYangKai commented on July 17, 2024

@grumpykiwi Thanks a lot about report this bug, We have fixed it and it will take affect in next release.

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

from teams-toolkit.

JerryYangKai avatar JerryYangKai commented on July 17, 2024

The new version of VS Teams Toolkit is availbale now in marketplace, we have fixed the bug in this release, please upgrade and try it.

from teams-toolkit.

grumpykiwi avatar grumpykiwi commented on July 17, 2024

from teams-toolkit.

eriolchan avatar eriolchan commented on July 17, 2024

Close this bug since it has been fixed in the latest version. Feel free to reopen the issue if you find the issue again.

from teams-toolkit.

Related Issues (20)

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.