javascript - Agregar inicio de sesión externo con Identity Server 4 y ASP.NET Identity

c# angular

Question

Después de agregar la funcionalidad de autenticación usando Identity Server 4 con ASP.NET Identity, planeo agregar el proveedor de Google para que los usuarios también puedan iniciar sesión con su cuenta de google +. Estoy usando Angular como mi interfaz de usuario y ASP.NET Web Api (Core) como servicio de fondo.

// Login client
public login(email: string, password: string): Observable<any> {
    let body: any = this.encodeParams({ /* cliend_id, grant_type, username, password, scope */ });

    return this.http.post("http://localhost:64023/connect/token", body, this.options)
        .map((res: Response) => {
            const body: any = res.json();
                if (typeof body.access_token !== "undefined") {
                    // Set localStorage with id_token,..
                }
        }).catch((error: any) => { /**/ );
}

// Register Web API
[HttpPost("Create")]
[AllowAnonymous]
public async Task<IActionResult> Create([FromBody]CreateUserViewModel model)
{
    var user = new ApplicationUser
    {
        FirstName = model.FirstName,
        LastName = model.LastName,
        AccessFailedCount = 0,
        Email = model.Email,
        EmailConfirmed = false,
        LockoutEnabled = true,
        NormalizedEmail = model.Email.ToUpper(),
        NormalizedUserName = model.Email.ToUpper(),
        TwoFactorEnabled = false,
        UserName = model.Email
    };

    var result = await _userManager.CreateAsync(user, model.Password);

    if (result.Succeeded)
    {
        await addToRole(model.Email, "user");
        await addClaims(model.Email);
    }

    return new JsonResult(result);
}

// Identity Server Startup 
app.UseGoogleAuthentication(new GoogleOptions
{
    AuthenticationScheme = "Google",
    DisplayName = "Google",
    SignInScheme = "Identity.External",
    // ClientId, ClientSecret,..
});

Después de un inicio de sesión de usuario, localStorage se establece y puedo proteger a los Controladores seguros. Para el proveedor de Google agregué un botón adicional y los siguientes métodos:

initGoogleAPI() {
    let self = this;
    gapi.load(''auth2'', function () {
        self.auth2 = gapi.auth2.init({ /* client_id, cookiepolicy, scope */ });
        self.externalLogin(document.getElementById(''google-button''));
    });
}

externalLogin(element) {
    let self = this;
    this.auth2.attachClickHandler(element, {},
        function (googleUser) {
            // retrieved the id_token, name, email,...
        }, function (error) {
        alert(JSON.stringify(error, undefined, 2));
    });
}

He encontrado algunas soluciones pero solo para aplicaciones MVC y no para un SPA utilizando un marco de lado del cliente. ¿Qué pasos debo seguir a continuación para que funcione el inicio de sesión externo? ¿Es necesario crear un nuevo registro en la Tabla de AspNetUsers cuando un usuario inicia sesión por primera vez utilizando el proveedor externo?

Answer 1

Los inicios de sesión deben ser manejados por identityServer4. Debería devolver un token similar a la aplicación web independientemente de un inicio de sesión local o de un tercero.

Si necesita datos de usuario en el backend de su API web, debe pasarlos como reclamos.

Los comienzos rápidos de IdentityServer4 pueden ser útiles para su código, tienen un ejemplo para los inicios de sesión externos que usted agrega a su IdentityServer y cómo hacer un flujo de inicio de sesión desde una aplicación JavaScript .

Answer 2

Puede verificar este repositorio, puede ignorar el proyecto del servidor ids4 y verificar el cliente angular en el que debe usar un cliente openid para hacer esto, luego el cliente se redirige a la página de inicio de sesión del proyecto ids4 donde inicia sesión y devuelve un token que guarda para que puedas usarlo luego

https://github.com/nertilpoci/Aspnetcore-identityserver4-webapi-angular

https://github.com/nertilpoci/Aspnetcore-identityserver4-webapi-angular/tree/master/ClientApp