Learn More, Pay Less!
Limited Time Offer!
Open Closed

Social login buttons missing #8685


User avatar
0
rcalv002 created
  • ABP Framework version: v8.1.0
  • UI Type: Blazor Server
  • Database System: EF Core
  • Tiered (for MVC) or Auth Server Separated (for Angular): no
  • Exception message and full stack trace:
  • Steps to reproduce the issue:

Attempted to implement social login on our app. as per docs below but the login button doesn't appear when we go to the login page. What's missing?

context.Services.AddAuthentication()
    .AddMicrosoftAccount(MicrosoftAccountDefaults.AuthenticationScheme, options =>
    {
        options.AuthorizationEndpoint = "https://login.microsoftonline.com/guid/oauth2/v2.0/authorize";
        options.TokenEndpoint = "https://login.microsoftonline.com/guid/oauth2/v2.0/token";

        options.ClaimActions.MapCustomJson("picture", _ => "https://graph.microsoft.com/v1.0/me/photo/$value");
        options.SaveTokens = true;

        options.ClientId = configuration["Authentication:Microsoft:ClientId"];
        options.ClientSecret = configuration["Authentication:Microsoft:ClientSecret"];
    })
    .WithDynamicOptions<MicrosoftAccountOptions, MicrosoftAccountHandler>(
        MicrosoftAccountDefaults.AuthenticationScheme,
        options =>
        {
            options.WithProperty(x => x.ClientId);
            options.WithProperty(x => x.ClientSecret, isSecret: true);
        }
    );


10 Answer(s)
  • User Avatar
    0
    rcalv002 created

    If we login with regular auth, and then go to settings -> external providers we can then enable a checkbox for microsoft and type in the id and secret again at which point it works. but it seems this should be automatic because its configured in code?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Yes. if you want to enable it by default. you can comment WithDynamicOptions code.

  • User Avatar
    0
    rcalv002 created

    I have removed the dynamic section and can see it present. Attempting to login with the microsoft acc in the production deployment generates an invalid uri error, because the auth server returns http instead of https which is not allow. We had something similar in the past with identity server and implemented a workaround for it, here https://abp.io/support/questions/3706/Identity-server-production-deployment-with-angular. However this didnt work on iddict, We attempted to fix this with the following but it doesnt work: the value for app:selfurl is the https address in the docker container, the service is still behind nginx proxy so those configs have not changed.

    public override void PreConfigureServices(ServiceConfigurationContext context)
    {
        var hostingEnvironment = context.Services.GetHostingEnvironment();
        var configuration = context.Services.GetConfiguration();
    
        ...
    
        PreConfigure<OpenIddictBuilder>(builder =>
        {
            builder.AddValidation(options =>
            {
                options.AddAudiences("CloudTools");
                options.UseLocalServer();
                options.UseAspNetCore();
                options.SetIssuer(configuration["App:SelfUrl"]);
            });
        });
    
       ...
    }
    

    Sign in Sorry, but we’re having trouble signing you in.

    AADSTS50011: The redirect URI 'http://mydomain.com/signin-microsoft' specified in the request does not match the redirect URIs configured for the application 'myappid'. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    The redirect URI 'http://mydomain.com/signin-microsoft' specified in the request does not match the redirect URIs

    This is an error with the redirect URL, you need to check the redirect URL you configured in Azure.

  • User Avatar
    0
    rcalv002 created

    No, azure only lets you configure redirect that are https:// in application we set env variable App:SelfUrl to https://

    but it seems well-known endpoint might still be returning the http value and so microsoft says invalid redirect.

    the system has been running for a long time behind proxy well, we are just now adding microsoft login.

    Is the scenario clear now?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    but it seems well-known endpoint might still be returning the http value and so microsoft says invalid redirect.

    Can you share some screenshots? thanks.

  • User Avatar
    0
    rcalv002 created

    Here's the call to wellknown

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    you can override the OnRedirectToIdentityProvider method and change the redirect URL

    var previousOnRedirectToIdentityProvider = options.Events.OnRedirectToIdentityProvider;
    options.Events.OnRedirectToIdentityProvider = async ctx =>
    {
        you can change the RedirectUri here
        ctx.ProtocolMessage.RedirectUri = ....;
    
        if (previousOnRedirectToIdentityProvider != null)
        {
            await previousOnRedirectToIdentityProvider(ctx);
        }
    };
    
  • User Avatar
    0
    rcalv002 created

    Thanks for your response, any chance you could indicate where to add this code?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Add to your configuration for social login method。

    context.Services.AddAuthentication()
        .AddMicrosoftAccount(MicrosoftAccountDefaults.AuthenticationScheme, options =>
        {
            options.AuthorizationEndpoint = "https://login.microsoftonline.com/guid/oauth2/v2.0/authorize";
            options.TokenEndpoint = "https://login.microsoftonline.com/guid/oauth2/v2.0/token";
    
            options.ClaimActions.MapCustomJson("picture", _ => "https://graph.microsoft.com/v1.0/me/photo/$value");
            options.SaveTokens = true;
    
            options.ClientId = configuration["Authentication:Microsoft:ClientId"];
            options.ClientSecret = configuration["Authentication:Microsoft:ClientSecret"];
            
            var previousOnRedirectToAuthorizationEndpoint = options.Events.OnRedirectToAuthorizationEndpoint;
            options.Events.OnRedirectToAuthorizationEndpoint = async ctx =>
            {
                you can change the RedirectUri here
                ctx.RedirectUri = ....;
            
                if (previousOnRedirectToAuthorizationEndpoint != null)
                {
                    await previousOnRedirectToAuthorizationEndpoint(ctx);
                }
            };
        })
    
Made with ❤️ on ABP v9.2.0-preview. Updated on February 13, 2025, 10:35