Blazor webassembly access-control-allow-origin error and Google API

Viewed 597

I created a Blazor WebAssembly proj:

enter image description here

In my Google console I created a new Web application project where I specified Authorized Javascript Origin and Authorized redirect URIs, like below

2

In my Blazor proj I added these packages:
Google.Apis.Auth.AspNetCore3
Google.Apis.Drive.v3

My startup.cs

 public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
            services.AddRazorPages();
            ***services
                .AddAuthentication(o =>
                {
                    o.DefaultChallengeScheme = GoogleOpenIdConnectDefaults.AuthenticationScheme;
                    o.DefaultForbidScheme = GoogleOpenIdConnectDefaults.AuthenticationScheme;
                    o.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                })
                .AddCookie()
                .AddGoogleOpenIdConnect(options =>
                {
                    options.ClientId = "{--myclientid--}";
                    options.ClientSecret = {"--myclientsecret--}";
                });***
        }

and also

  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseWebAssemblyDebugging();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseBlazorFrameworkFiles();
            app.UseStaticFiles();
          
            app.UseRouting();

            ***app.UseAuthentication();
            app.UseAuthorization();***


            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapControllers();
                endpoints.MapFallbackToFile("index.html");
            });
        }

I my WeatherforcastController i added this method:

  [HttpGet("DriveFileList")]
        [GoogleScopedAuthorize(DriveService.ScopeConstants.DriveReadonly)]
        public async Task<List<String>> DriveFileList([FromServices] IGoogleAuthProvider auth)
        {
            GoogleCredential cred = await auth.GetCredentialAsync();
            var service = new DriveService(new BaseClientService.Initializer
            {
                HttpClientInitializer = cred
            });
            var files = await service.Files.List().ExecuteAsync();
            var fileNames = files.Files.Select(x => x.Name).ToList();
            return fileNames;
        }

I call above method from my FetchData.razor page like below:

protected override async Task OnInitializedAsync()
{    
     List<String> myFiles = await Http.GetFromJsonAsync<List<String>>("WeatherForecast/DriveFileList");   
}

I run and get a CORS error: 3

Is there a workaround? Are there other approaches to access the Google Api from Blazor WebAssembly?

0 Answers
Related