Connexion Google dans Angular 7 avec l'API .NET Core

J'ai eu un problème similaire, et comme vous avez dit que vous avez déjà configuré CORS dans le back-end, Angular n'ajoute pas d'informations d'identification dans les requêtes API peut être le problème. Le navigateur fait quelque chose lorsque vous tapez le point de terminaison de l'API dans la barre d'URL. Vous pouvez utiliser des intercepteurs angulaires pour ajouter des informations d'identification dans chaque demande. Vérifiez ceci: https://angular.io/guide/http#intercepting-requests -et-réponses

Et pour votre cas particulier, cela peut fonctionner:

export class CookieInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      withCredentials: true
    });
    return next.handle(request);
  }
}

J'ai quelques éléments à ajouter:

1. J'ai vérifié la réponse @Nehuen Antiman et cela fonctionne partiellement pour moi.

2. C'est une bonne pratique de créer un tel intercepteur comme il l'a suggéré, mais ce serait également correct si vous ajoutez simplement le drapeau "withCredentials" à votre service.ts:

   services.AddCors(options =>
   {
       options.AddPolicy(AllowedOriginsPolicy,
       builder =>
       {
           builder.WithOrigins("http://localhost:4200")
               .AllowAnyHeader()
               .AllowAnyMethod()
               .AllowCredentials();
       });
   });
   

3. N'oubliez pas d'ajouter la méthode AllowCredentials () à vos CorsOptions . Voici l'exemple de mon code:

   public loginWithGoogle() {
     return this.http.get<any>(`${environment.api.apiUrl}${environment.api.authentication}externalLogin`,
     {
       params: new HttpParams().set('provider', 'Google'),
       headers: new HttpHeaders()
         .set('Access-Control-Allow-Headers', 'Content-Type')
         .set('Access-Control-Allow-Methods', 'GET')
         .set('Access-Control-Allow-Origin', '*'),
       withCredentials: true
     })
     .pipe(map(data => {
       return data;
     }));
   }
   

Le problème semble être que bien que le serveur envoie une réponse 302 (redirection d'url) Angular effectue une requête XMLHttpRequest, il ne redirige pas. Il y a plus de gens qui ont ce problème ...

Pour moi, j'essaie d'intercepter la réponse dans le frontend pour faire une redirection manuelle ou de changer le code de réponse sur le serveur (c'est une réponse 'Challenge' ..) n'a pas

Donc, ce que j'ai fait pour que cela fonctionne, c'est de changer dans Angular l'emplacement window.location au service backend afin que le navigateur puisse gérer la réponse et effectuer la redirection correctement.

REMARQUE : À la fin de l'article, j'explique une solution plus simple pour les applications SPA sans l'utilisation de cookies ou d'authentification AspNetCore.

Le flux complet serait le suivant:

(1) Angular définit l'emplacement du navigateur sur l'API -> (2) L'API envoie 302 réponses -> (3) Le navigateur redirige vers Google -> (4) Google renvoie les données de l'utilisateur sous forme de cookie à l'API -> (5) L'API renvoie le jeton JWT -> (6) Le jeton d'utilisation angulaire

1.- Angular définit l'emplacement du navigateur sur l'API . Nous passons le fournisseur et la returnURL où nous voulons que l'API renvoie le jeton JWT lorsque le processus est terminé.

 private async Task<GoogleJsonWebSignature.Payload> ValidateGoogleToken(string googleTokenId)
    {
        GoogleJsonWebSignature.ValidationSettings settings = new GoogleJsonWebSignature.ValidationSettings();
        settings.Audience = new List<string>() { "Google ClientId here!!" };
        GoogleJsonWebSignature.Payload payload = await GoogleJsonWebSignature.ValidateAsync(googleTokenId, settings);
        return payload;
    }

2.- L'API envoie une réponse Challenge 302. Nous créons la redirection avec le fournisseur et l'URL où nous voulons que Google nous rappelle.

  googleSignInExternal(googleTokenId: string): Observable<SimpleError | ICredentials> {

    return this.httpClient.get(APISecurityRoutes.authRoutes.googlesigninexternal(), {
      params: new HttpParams().set('googleTokenId', googleTokenId)
    })
      .pipe(
        map((result: ICredentials | SimpleError) => {
          if (!(result instanceof SimpleError)) {
            this.credentialsService.setCredentials(result, true);
          }
          return result;

        }),
        catchError(() => of(new SimpleError('error_signin')))
      );

  }

5.- L'API reçoit les données utilisateur de Google et les renvoie Jeton JWT. Dans la chaîne de requête, nous aurons l'URL de retour angulaire. Dans mon cas, si l'utilisateur n'est pas enregistré, je faisais une étape supplémentaire pour demander la permission.

import { AuthService, GoogleLoginProvider } from 'angularx-social-login';
...
  constructor(...,  private socialAuthService: AuthService)
...

  signinWithGoogle() {
    let socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;
    this.isLoading = true;

    this.socialAuthService.signIn(socialPlatformProvider)
      .then((userData) => {
        //on success
        //this will return user data from google. What you need is a user token which you will send it to the server
        this.authenticationService.googleSignInExternal(userData.idToken)
          .pipe(finalize(() => this.isLoading = false)).subscribe(result => {

            console.log('externallogin: ' + JSON.stringify(result));
            if (!(result instanceof SimpleError) && this.credentialsService.isAuthenticated()) {
              this.router.navigate(['/index']);
            }
        });
      });
  }

API pour l'étape supplémentaire d'enregistrement (pour cet appel, Angular doit faire la demande avec 'WithCredentials' afin de recevoir le cookie):

let config = new AuthServiceConfig([
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider('Google ClientId here!!')
  }
]);

export function provideConfig() {
  return config;
}

@NgModule({
  declarations: [
...
  ],
  imports: [
...
  ],
  exports: [
...
  ],
  providers: [
    {
      provide: AuthServiceConfig,
      useFactory: provideConfig
    }
  ]
})

Approche différente pour les applications SPA:

Juste au moment où j'ai fini de le faire fonctionner, j'ai trouvé ça pour SPA applications, il existe une meilleure façon de le faire ( https: // développeurs .google.com / identity / sign-in / web / server-side-flow , Authentification Google JWT avec AspNet Core 2.0 , https://medium.com/mickeysden/react-and-google-oauth-with-net-core-backend-4faaba25ead0 )

Pour cette approche le flux serait:

(1) Angular ouvre l'authentification google -> (2) L'utilisateur s'authentifie -> (3) Google envoie googleToken à angular -> (4) Angular l'envoie à l'API -> (5) L'API le valide contre Google et renvoie le jeton JWT -> (6) Angular utilise le jeton

Pour cela, nous devons installer le package npm ' angularx-social-login ' dans Angular et le ' Google.Apis.Auth 'Package NuGet dans le backend netcore

1. et 4. - Angular ouvre l'authentification Google . Nous utiliserons la bibliothèque angularx-social-login. Une fois que l'utilisateur a chanté dans Angular envoie le googletoken à l'API .

Sur le login.module.ts , nous ajoutons:

[HttpPost("registerexternaluser")]
public async Task<IActionResult> ExternalUserRegistration([FromBody] RegistrationUserDTO registrationUser)
{
    //string identityExternalCookie = Request.Cookies["Identity.External"];//do we have the cookie??

    if (ModelState.IsValid)
    {
        // Get the information about the user from the external login provider
        ExternalLoginInfo info = await _signInMgr.GetExternalLoginInfoAsync();

        if (info == null) return BadRequest("Error registering external user.");

        CredentialsDTO credentials = await _authService.RegisterExternalUser(registrationUser, info);
        return Ok(credentials);
    }

    return BadRequest();
}

Sur notre login.component.ts

// GET: api/auth/signinexternalcallback
[HttpGet("signinexternalcallback")]
public async Task<IActionResult> SigninExternalCallback(string returnUrl = null, string remoteError = null)
{
    //string identityExternalCookie = Request.Cookies["Identity.External"];//do we have the cookie??

    ExternalLoginInfo info = await _signInMgr.GetExternalLoginInfoAsync();

    if (info == null)  return new RedirectResult($"{returnUrl}?error=externalsigninerror");

    // Sign in the user with this external login provider if the user already has a login.
    Microsoft.AspNetCore.Identity.SignInResult result = 
        await _signInMgr.ExternalLoginSignInAsync(info.LoginProvider, info.ProviderKey, isPersistent: false, bypassTwoFactor: true);

    if (result.Succeeded)
    {
        CredentialsDTO credentials = _authService.ExternalSignIn(info);
        return new RedirectResult($"{returnUrl}?token={credentials.JWTToken}");
    }

    if (result.IsLockedOut)
    {
        return new RedirectResult($"{returnUrl}?error=lockout");
    }
    else
    {
        // If the user does not have an account, then ask the user to create an account.

        string loginprovider = info.LoginProvider;
        string email = info.Principal.FindFirstValue(ClaimTypes.Email);
        string name = info.Principal.FindFirstValue(ClaimTypes.GivenName);
        string surname = info.Principal.FindFirstValue(ClaimTypes.Surname);

        return new RedirectResult($"{returnUrl}?error=notregistered&provider={loginprovider}" +
            $"&email={email}&name={name}&surname={surname}");
    }
}

Sur notre authentication.service.ts strong>:

// GET: api/auth/signinexternal
[HttpGet("signinexternal")]
public IActionResult SigninExternal(string provider, string returnUrl)
{
    // Request a redirect to the external login provider.
    string redirectUrl = Url.Action(nameof(SigninExternalCallback), "Auth", new { returnUrl });
    AuthenticationProperties properties = _signInMgr.ConfigureExternalAuthenticationProperties(provider, redirectUrl);

    return Challenge(properties, provider);
}

5.- L'API le valide par rapport à google et renvoie le jeton JWT . Nous utiliserons le package NuGet "Google.Apis.Auth". Je ne vais pas mettre le code complet pour cela, mais assurez-vous que lorsque vous validez le jeton, vous ajoutez l'audience aux paramètres pour une connexion sécurisée:

import { DOCUMENT } from '@angular/common';
...
 constructor(@Inject(DOCUMENT) private document: Document, ...) { }
...
  signInExternalLocation() {
    let provider = 'provider=Google';
    let returnUrl = 'returnUrl=' + this.document.location.origin + '/register/external';

    this.document.location.href = APISecurityRoutes.authRoutes.signinexternal() + '?' + provider + '&' + returnUrl;
  }

Je veux juste clarifier la partie 5 de la réponse de Jevi, car il m'a fallu un certain temps pour comprendre comment obtenir google access_token avec un code d'accès. Voici une méthode serveur complète. redirectUrl doit être égal à l'un des "Origines JavaScript autorisées" de l'API Google Console. Les "URI de redirection autorisés" peuvent être vides.

[HttpPost("ValidateGoogleToken")]
    public async Task<GoogleJsonWebSignature.Payload> ValidateGoogleToken(string code)
    {
        IConfigurationSection googleAuthSection = _configuration.GetSection("Authentication:Google");

        var flow = new GoogleAuthorizationCodeFlow(new GoogleAuthorizationCodeFlow.Initializer
        {
            ClientSecrets = new ClientSecrets
            {
                ClientId = googleAuthSection["ClientId"],
                ClientSecret = googleAuthSection["ClientSecret"]
            }
        });

        var redirectUrl = "http://localhost:6700";
        var response = await flow.ExchangeCodeForTokenAsync(string.Empty, code, redirectUrl, CancellationToken.None);

        GoogleJsonWebSignature.ValidationSettings settings = new GoogleJsonWebSignature.ValidationSettings
        {
            Audience = new List<string>() {googleAuthSection["ClientId"]}
        };

        var payload = await GoogleJsonWebSignature.ValidateAsync(response.IdToken, settings);
        return payload;
    }