IdentityServer4 + WebApi + Angular2 + External Auth

Question

I'm trying to create the following structure:

• WEB API which contains logic (different domain)
• IdentityServer4 API that provides auth (different domain)
• Angular 2 Client (different domain)
• Mobile APP.

Angular 2 client should have Twitter-Sign in button. Below is configuration for Twitter:

    public void Configure(IApplicationBuilder app, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(LogLevel.Debug);

        app.UseCors("CorsPolicy");

        app.UseIdentity();
        app.UseIdentityServer();

        //after identity before mvc
        app.UseTwitterAuthentication(new TwitterOptions
        {
            AuthenticationScheme = "Twitter",
            DisplayName = "Twitter",
            SignInScheme = "Identity.External",
            ConsumerKey = "key",
            ConsumerSecret = "secret",
            AutomaticAuthenticate = true,
            AutomaticChallenge = true,
            SaveTokens = true,
        });
        app.UseMvc();
    }

This configuration saves my access token and secret provided by twitter in my db.

        bool result = false;
        var info = await signInManager.GetExternalLoginInfoAsync();
        if (info != null)
        {
            var tempUser = info.Principal;
            var claims = tempUser.Claims.ToList();

            var userIdClaim = claims?.FirstOrDefault(x => x.Type == ClaimTypes.NameIdentifier);
            var email = claims?.FirstOrDefault(x => x.Type == ClaimTypes.Email);

            if (userIdClaim != null)
            {
                var isRegistered = await IsUserRegistered(info.LoginProvider, info.ProviderKey);
                if (!isRegistered && email != null)
                {
                    var user = new ApplicationUser { UserName = userIdClaim.Value, Email = email.Value };
                    var userCreated = await userManager.CreateAsync(user);
                    isRegistered = userCreated.Succeeded;

                    if (isRegistered)
                    {
                        var addLoginresult = await userManager.AddLoginAsync(user, info);
                        isRegistered = addLoginresult.Succeeded;
                        if (isRegistered)
                        {
                            await signInManager.SignInAsync(user, isPersistent: false);
                        }
                    }
                }

                if (isRegistered)
                {
                    var succeded = await signInManager.ExternalLoginSignInAsync(info.LoginProvider, info.ProviderKey, isPersistent: false);
                    if (succeded.Succeeded)
                    {
                        IdentityResult updateResult = await signInManager.UpdateExternalAuthenticationTokensAsync(info);
                        result = updateResult.Succeeded;



                    }
                }
            }
        }

        if (!result)
        {
            await signInManager.SignOutAsync();
        }

        return Redirect(System.Net.WebUtility.UrlDecode(returnUrl));

What I'm trying to find out is how should I implement my ExternalLoginCallback method to return tokens to Client (Angular or any other) that later will be used to authenticate in WEB API (or multiple APIs). For now I can see Auth cookie in reponse.

Answer 1

Check out this Damienbod's great example on configuring IdentityServer4 with webapi and Angular2 (Angular4 already!) https://damienbod.com/2016/03/02/angular2-openid-connect-implicit-flow-with-identityserver4/

Basically there is no difference if you use twitter external login or IdentityServer4 login itself. You can remove Identity server login form and leave only twitter external login link. In short what you should do:

1. Configure identity server to be able login via twitter at http://youridetityserver/Account/Login

2. Set login link in your angular app to http://youridetityserver/connect/authorize with proper parameters. You can find parameters list here http://docs.identityserver.io/en/release/endpoints/authorize.html

3. In angular2 app extract id_token parameter from returnURL

4. Set Bearer header in calls to your WebApi server from angular2 app

5. Setup WebApi to use IdentityServer authorization.