Azure B2C、.NET Core与Blazor WebAssembly环境下集成Google One Tap登录的可行性及实施咨询

Hey there! Great question—you absolutely can integrate Google One Tap with Azure B2C without ditching your existing setup. Google One Tap is just a streamlined front-end flow for Google's OIDC auth, and Azure B2C's flexible custom policies let you hook this into your existing identity pipeline. Let's break down how to do it, plus alternatives if you run into hurdles.

Is Integration Possible? #

Short answer: Yes. Azure B2C supports custom identity providers via OIDC, and Google One Tap works by issuing a Google ID token that Azure B2C can validate, then exchange for its own tokens (so you keep using Azure B2C tokens to secure your .NET Core API—no big changes needed there).

Basic Implementation Steps #

Here's the high-level workflow to get this up and running:

1. Configure Google Cloud Console for One Tap

   • Create a new OAuth 2.0 client ID in Google Cloud Console, setting the authorized JavaScript origins to your Blazor WASM app's URL.
   • Set the authorized redirect URI to your Azure B2C tenant's auth response endpoint: https://<your-b2c-tenant>.b2clogin.com/<your-b2c-tenant>.onmicrosoft.com/oauth2/authresp
   • Enable Google One Tap in the client settings (under the "OAuth consent screen" or "Credentials" section).

2. Add Google as an Identity Provider in Azure B2C

   • Use Azure B2C custom policies (not the built-in user flow, since we need more control) to add Google as an OIDC identity provider.
   • Configure the provider with your Google client ID/secret, and set the metadata address to https://accounts.google.com/.well-known/openid-configuration.

3. Integrate One Tap into Your Blazor WASM Client

   • Add the Google One Tap script to your index.html:

     <script src="https://accounts.google.com/gsi/client" async defer></script>
     

   • In your login component, initialize One Tap and handle the credential response. Here's a simplified example:

     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
             await JS.InvokeVoidAsync("initGoogleOneTap");
         }
     }
     

   • Add the corresponding JavaScript to handle the token exchange with Azure B2C:

     function initGoogleOneTap() {
         google.accounts.id.initialize({
             client_id: "YOUR_GOOGLE_CLIENT_ID",
             callback: handleCredentialResponse
         });
         google.accounts.id.prompt(); // Triggers the One Tap prompt
     }
     
     function handleCredentialResponse(response) {
         // Send Google's ID token to Azure B2C to get a B2C token
         fetch('https://<your-b2c-tenant>.b2clogin.com/<your-b2c-tenant>.onmicrosoft.com/B2C_1A_signup_signin/oauth2/v2.0/token', {
             method: 'POST',
             headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
             body: new URLSearchParams({
                 grant_type: 'authorization_code',
                 id_token_hint: response.credential,
                 client_id: 'YOUR_AZURE_B2C_APP_CLIENT_ID',
                 redirect_uri: 'https://<your-blazor-app>.com/authentication/login-callback',
                 scope: 'openid offline_access',
                 response_type: 'id_token token'
             })
         })
         .then(res => res.json())
         .then(data => {
             // Pass the B2C tokens to Blazor's auth system
             window.dispatchEvent(new CustomEvent('b2cTokenReceived', { detail: data }));
         });
     }
     

   • Update your Blazor auth logic to handle the b2cTokenReceived event and set the user's authentication state.

4. Configure Azure B2C Custom Policy to Validate Google Tokens

   • Add a claims provider in your custom policy to validate the Google ID token, verify its signature and claims (like email, issuer), and map those claims to Azure B2C's user attributes (e.g., email, given_name).
   • Ensure the policy issues an Azure B2C ID/access token after successful validation, which your .NET Core API can continue to accept as before.

5. Test the Flow

   • Run your Blazor app, trigger the One Tap prompt, and confirm that after selecting a Google account, you're authenticated with Azure B2C tokens and can access your API.

Alternatives If You Run Into Complexity #

If configuring custom policies feels too heavy, here are some workarounds:

• Direct Google One Tap to API: Skip Azure B2C entirely for Google users—let your Blazor app get a Google ID token, then have your .NET Core API validate it directly. Note: This means losing Azure B2C's unified user management, multi-IDP support, and policy enforcement.
• Optimize Azure B2C's Built-in Google Login: Customize the Azure B2C login UI to add a prominent "Sign in with Google" button, and use embedded sign-in to reduce page jumps. It's not One Tap, but it can feel almost as smooth.
• Use Azure AD B2C Embedded Sign-In: Embed the Azure B2C login flow directly into your Blazor app using the MSAL.js library, eliminating full-page redirects and making the login process feel more integrated.

内容的提问来源于stack exchange，提问作者Pking