Connect to Google Translate Data from Blazor Apps

Blazor is a framework for developing modern, client-side web UIs using .NET technology. Instead of coding in JavaScript, developers can use the familiar C# language and .NET libraries to build app UIs.

The CData API Driver for ADO.NET can be used with standard ADO.NET interfaces, such as LINQ and Entity Framework, to interact with live Google Translate data. Since Blazor supports .NET Core, developers can use CData ADO.NET Providers in Blazor apps. In this article, we will guide you to build a simple Blazor app that talks to Google Translate using standard SQL queries.

Install the CData API Driver for ADO.NET

CData ADO.NET Providers allow users to access Google Translate just like they would access SQL Server, using simple SQL queries.

Install the Google Translate ADO.NET Data Provider from the CData website or from NuGet. Search NuGet for "Google Translate ADO.NET Data Provider."

Create a Google Translate-Connected Blazor App

Start by creating a Blazor project that references the CData API Driver for ADO.NET

1. Create a Blazor project on Visual Studio.

2. From the Solution Explorer, right click Dependencies, then click Add Project Reference.
3. In the Reference Manager, click the Browse button, and choose the .dll file of the installed ADO.NET Provider (e.g. System.Data.CData.API.dll, typically located at C:\Program Files\CData\CData API Driver for ADO.NET\lib etstandard2.0).

SELECT Google Translate Data from the Blazor App

1. Open the Index.razor file from the Project page.
2. In a APIConnection object, set the connection string:

   Authentication

   Google Cloud Translation API requires OAuth 2.0 authentication to ensure secure access to translation services, datasets, glossaries, and adaptive MT resources. This authentication method allows you to securely connect to your Google Cloud project and manage translation resources with proper authorization.

   OAuth 2.0 Setup and Configuration

   Step 1: Create Google Cloud Project and Enable API

   To set up OAuth authentication:

   1. Visit the Google Cloud Console
   2. Create a new project or select an existing project
   3. Note down your Project ID (required for all API calls)
   4. Navigate to "APIs & Services" > "Library"
   5. Search for and enable the "Cloud Translation API"
   6. Go to "APIs & Services" > "Credentials"
   7. Click "Create Credentials" and select "OAuth Client ID"
   8. Configure the OAuth consent screen if prompted
   9. Select "Desktop application" or "Web application" as appropriate
   10. Set the authorized redirect URI (CallbackURL)
   11. Copy the Client ID and Client Secret for use in your connection

   Required Connection Properties

   • AuthScheme: Set this to OAuth (required)
   • OAuthClientId: Client ID from Google Cloud Console (required)
   • OAuthClientSecret: Client secret from Google Cloud Console (required)
   • CallbackURL: Redirect URI specified in your OAuth application (required)
   • InitiateOAuth: Set to GETANDREFRESH for automatic token management (recommended)
   • ProjectId: Your Google Cloud project ID or project number (required for queries)

   Required OAuth Scopes

   The Google Cloud Translation API Profile requires the following OAuth scope:

   • https://www.googleapis.com/auth/cloud-translation - Full access to Cloud Translation API resources including translation, datasets, glossaries, and adaptive MT

   For example: Profile=C:\profiles\GoogleTranslate.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackUrl=your_callback_url;

3. The code below creates a simple Blazor app for displaying Google Translate data, using standard SQL to query Google Translate just like SQL Server.

         @page "/"
         @using System.Data;
         @using System.Data.CData.API;
         
         <h1>Hello, world!</h1>
         
         Welcome to your Data app.
         
         <div class="row">
             <div class="col-12">
         
                 @using (APIConnection connection = new APIConnection(
                   "Profile=C:\profiles\GoogleTranslate.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackUrl=your_callback_url;"))
                 {
                     var sql = "SELECT LanguageCode, DisplayName FROM SupportedLanguages WHERE ProjectId = 'my-project-12345'";
                     var results = new DataTable();
         
                     APIDataAdapter dataAdapter = new APIDataAdapter(sql, connection);
                     dataAdapter.Fill(results);
         
                     <table class="table table-bordered">
                         <thead class="thead-light">
                             <tr>
                                 @foreach (DataColumn item in results.Rows[0].Table.Columns)
                                 {
                                     <th scope="col">@item.ColumnName</th>
                                 }
                             </tr>
                         </thead>
                         <tbody>
                             @foreach (DataRow row in results.Rows)
                             {
                                 <tr>
                                     @foreach (var column in row.ItemArray)
                                     {
                                         <td>@column.ToString()</td>
                                     }
                                 </tr>
                             }
                         </tbody>
                     </table>
                 }
             </div>
         </div>
       

4. Rebuild and run the project. The ADO.NET Provider renders Google Translate data as an HTML table in the Blazor app.

   At this point, you have a Google Translate-connected Blazor app, capable of working with live Google Translate data just like you would work with a SQL Server instance. Download a free, 30-day trial and start working with live Google Translate data in your Blazor apps today.