Most of the time, there're requirements on customise login page. For build in login page, there
are new universal login and classic universal login. Because there are conflict if we open customise login page and use new universal login, we talk about the classic one.

According to the depth of the requirements to customise login page, I category it into 3 layers:

1. basic universal login custom
2. customise universal login with 'lock'
3. customise universal login with 'custom login form'

Also, there's another option to use management API to customise the login page, we haven't touch it yet. So we focus on changes of Auth0 platform.

Basic universal login custom

Both for classic and new universal login, people can change logo, page background color and login button color on dashboard. we could make changes in dashboard -> branding -> universal login -> setting.

Also, can change logo on tenant setting.

Customise universal login with 'lock'

If basic custom is not enough, we could switch on custom login button in dashboard -> branding -> universal login -> login.

The default template is lock. Since the login form is written in lock, we need to use the provided configure options to made the change.

Auth0 provides lock configure options, or we could directly write html/css/jQuery in the script.

Lock configuration

Refer https://auth0.com/docs/libraries/lock/lock-configuration, we can configure login form based on the provided options. these fields are commonly touched:

• add addition sign up fields
• language Dictionary to change text
• allow sign up
• must accept terms

Addition sign up fields

Addition sign up fields will directly add into user metadata at the pre-register hook. The type of the fields could be specified.

var options = { 
	additionalSignUpFields: [
	{ 
		name: "address", 
		placeholder: "enter your address", 
		// The following properties are optional 
		icon: "https://example.com/assests/address_icon.png", 
		prefill: "street 123", 
		validator: function(address) { 
			return { 
				valid: address.length >= 10, 
				hint: "Must have 10 or more chars" // optional 
			}; 
		}
	}, 
	{ 
		name: "full_name", 
		placeholder: "Enter your full name" 
	},
	{ 
		type: "select", 
		name: "location", 
		placeholder: "choose your location", 
		options: [ 
			{value: "us", label: "United States"}, 
			{value: "fr", label: "France"}, 
			{value: "ar", label: "Argentina"} 
		], 
		// The following properties are optional  
		icon: "https://example.com/assests/location_icon.png", 
		prefill: "us" 
	}] 
}

Language Dictionary to change text

languageDictionary: {
                loginLabel: "Login",
                loginSubmitLabel: "Login",
                signUpLabel: "Activate",
                signUpSubmitLabel: "Activate account",
                emailInputPlaceholder: "Email",
                passwordInputPlaceholder: "Password",
                databaseSignUpInstructions: getContactUsText()
}

var isASite = config.callbackURL.indexOf("com.a") > 0;
var getContactUsText = function () {
    var contactLink =
      'Don’t have an account? <a id="contactLink" target="_blank" href="[CONTACT-US-LINK]">contact us</a> to sign up'
             
    return isASite
                ? contactLink.replace("[CONTACT-US-LINK]", contactA)
                : contactLink.replace("[CONTACT-US-LINK]", contactB);
        };

Must accept terms

languageDictionary = { 
    title: config.dict.signin.title,
    signUpTerms: "I have read and agree with the <a href='https://terms-and-conditions/' target='_blank'>terms & conditions</a>"
};
mustAcceptTerms: true

Custom by html/css/jQuery

Although, is not recommended, we could also change everything we want by using plaint html/css/jQuery. We made these changes:

• add background image
• add extra link under login box
• add extra fields in login box

Background image

body{ 
        background-color: #000000; 
        background: url("https://loginbg.jpg") no-repeat; 
        background-size: cover; 
    } 
.auth0-lock.auth0-lock.auth0-lock-opened .auth0-lock-overlay { display: none; }

Extra link out of the login box

With container can add extra inline content.

<div id="hiw-login-container" style="filter: drop-shadow(0 0 0.75rem black)">	</div>
<div style="text-align: center;">
   <a target="_blank" href='https://account'>
	   <div style="color: white; text-decoration: none;" >
		   Create an Account
	   </div>
   </a>
</div>

<script> 
	var options = { container: 'hiw-login-container' }; 
	// initialize 
	var lock = new Auth0Lock('xxxxxx', '<account>.auth0.com', options); 
	// render 
	lock.show(); 
</script>

Extra fields in login box

Fetch the position where you want to add fields, and then insert your content.

 var createExtra = function () {
    var addConfirmField = function () {

    var tag =
         '<div class="auth0-lock-input-block auth0-lock-input-show-password" >'+
         '<div class="auth0-lock-input-block auth0-lock-input-password" >'+
         '<div class="auth0-lock-input-wrap auth0-lock-input-wrap-with-icon" >'+
         '<input class="confirm-password" name="confirmPassword" type="password" placeholder="Confirm Password" autocomplete="off" autocapitalize="off"'
          +
         "</input>"+
         "</div>"+
         "</div>"+
         "</div>";
   $(".auth0-lock-input-show-password")
                    .parent()
                    .append(tag);
            };
      
   var addConfirmErrorField = function () {

     var tag =
       '<label class="confirm-password-error" name="confirmPasswordError"'+
                    '">' 
                    +" Those passwords didn’t match. Try again."
                    "</label>";
    $(".auth0-lock-input-show-password")
                    .parent()
                    .append(tag);
            };

    addConfirmField();
    addConfirmErrorField();
 };

Customise universal login with 'custom login form'

After switch on custom login, there's a template dropdown. If select 'custom login form', and preview, can see it's plaint Javascript written page. We can write whatever we want here.

First touch on Auth0 - APP

You first touch on Auth0 should only be Application feature on dashboard. There're different types of App, the common used ones for me are "Machine to Machine" and "Single Page" type.

1. Single page: use this application credential in your frontend app, ex: angular, react, etc.
2. Machine to machine: use this to get token from this tenant.

When to use Single page

When you need to authenticate users with your front-end APP, you can create this type of application, and use the credential. There's a quick start when you create it, so won't mention how to use it here.

When to use Machine to machine

this is needed, when you need to get your JWT token after login, ex: directly call Auth0 endpoint, or get token through hooks/rules, use swagger to authenticate.

Have you successfully created a simple App with Single page application in Auth0?
Congratulations!
We could go further.

Try API

Now, you might want to link your Frontend app with you backend API. here's several tips:

1. you can use the default API to authenticate the call from front ent.
2. create a Single page application to authenticate the frontend
3. you don't have to create a machine to machine application, except you need to use a client Id to get token. For instance, you need to use swagger to Authenticate.
4. you need to add audience and scope into your frontend. Because backend is using audience and domain (may have claims) to authenticate, without these items, the access token is not valid for backend. You could find, the access token become longer after these 2 items are added.

SDKs for Frontend

I found there's 3 SDKs for my Angular application - auth0/auth0-angular, auth0/auth0-spa-js and auth0-js. I was very confused. So here is some explanation:

1. React and Angualr has library, so in angular app, can use auth0/auth0-angular
2. auth0/auth0-spa-js is for single page application, it can be used in app writen by Javascript, Vue, Angular and React
3. auth0-js is the old one, can integrte with more platform, ex: ionic.

So when you choose the SDK, the specific SDK towards your library, ex: auth0/auth0-angular, would be simpler and less work to integrate with.

The content is:

• set up swagger in startup file
• configure authentication through Auth0
• add authorization for swagger.

1. Set up swagger in startup file

Install the nuget package Swashbuckle.AspNetCore
Add the following code to ConfigureServices in Startup.cs

services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new OpenApiInfo { Title = "StudentSIMS", Version = "v1" });
});

Add the following to Configure:

app.UseSwagger();
// Enable middleware to serve swagger-ui (HTML, JS, CSS, etc.),
// specifying the Swagger JSON endpoint.
app.UseSwaggerUI(c =>
{
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "My first API V1");
    c.RoutePrefix = string.Empty; // launch swagger from root
});

Then you should be greeted with a nice Swagger UI, when you run the program.

2. Configure authentication through Auth0

Here we use Auth0 to do authentication. Because how to setup an api in Auth0 is described very clear, we won't repeat it. You can check the quick start after you generate you API on Auth0.

// 1. Add Authentication Services
        services.AddAuthentication(options =>
        {
            options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
            options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
        }).AddJwtBearer(options =>
        {
            options.Authority = 	
                $"https://{Auth0Config.yourDomain}/"
            options.Audience = Auth0Config.yourApiIdentifier;
        });

Remember to enable authentication middleware app.UseAuthentication();

If you want to use permissions, you can add authorization policies in your code. For references, look up https://auth0.com/docs/quickstart/backend/aspnet-core-webapi/01-authorization

Sometimes we need to trigger the changes in a children form, then the parent component can do something in consistent. For example, put a form in a drawer to CRUD some information. Also, you want to monitor the items validation out of the form.

To transfer the state, we need to use ref to monitor the changes. However, the way of using ref is different for a class component from a function component when using hook. Here we will discuss the both way in React / Antd.

The example we used here is to monitor the items' validation status for two children forms. the whole structure is looks like this:

There parent component is a card, and there're two forms inside, left referee details and right questions. When we submit the page, we hope to get the status of the both children forms.

Example codes for children parts

In this case we use class component for the left side, and use function component for the right one.

It could be seen, for the class children component, we don't need to do anything in it to get the status, all the efforts are outside it. In term of the function one, we need to use useImperativeHandle and forwardRef.

useImperativeHandle` customizes the instance value that is exposed to parent components when using `ref

Example codes for the parent part

For the parent component, we need to generate the both ref and use them, the codes are looks like this:

To ref the form, we use wrappedComponentRef to get the instance.

Then it is easy to get the validation status for both forms through the ref instances. The codes are:

 const validateLeft=()=>{
    const {form} =formRef.props
    let result = true
    form.validateFields((errors, values) => {
      if (errors) {
        result=false;
      }
    });
    return result
  }

  const validateRight=()=>{
    let result = true
    questionFormRef.validateFields((errors, values) => {
      if (errors) {
        result=false;
      }
    });
    return result
  }

You might notice, for the class component, we get the form instance by using const {form} =formRef.props . In terms of the hook one, because we send back the "form" in the props, we can use questionFormRef instance directly.

Source

https://3x.ant.design/components/form/

https://reactjs.org/docs/hooks-reference.html

Easy way to send a simple email

Before using the SendGrid service, we need the following preparations:

1. Have an account in SendGrid.
2. Get the API key
3. Set a template

Notice, the API key just show you once, keep it properly.

The template I used is dynamic template which can replace some words in the template. It's:

  <html>
    <head>
      <title></title>
    </head>
    <body>
        Hello {{name}},
        <br /><br/>
        registered successful!
        <br /><br/>
        Please confirm your email address using this link:
        <a href="{{redirect}}"> Comfirm Your Account </a>
        <br /><br/>
        This link will expired in 7 days.
    </body>
  </html>

You can see, the "name", and "redirect" can be replaced when you set your codes in C# like this:

public class TemplateEmailData
    {
        [JsonProperty("subject")]
        public string Subject { get; set; }
        [JsonProperty("name")]
        public string Name { get; set; }
        [JsonProperty("redirect")]
    }

So the SendGrid can handle the request.

Before writing codes, we need to install SendGrid package. In package manager console, use command:

PM> Install-Package SendGrid

Then, the codes are:

[HttpPost]
[AllowAnonymous]
public async Task<IActionResult> Register(RegisterViewModel model)
        {
            if (ModelState.IsValid)
            {
               // other codes...

                    var dynamicTemplateData = new TemplateEmailData
                    {
                        Subject = "send grid dynamic",
                        Name = "Linda",
                        RedirectUrl = 
                        "https://localhost:44356/account/"
                    };
                    emailService.SendEmail(dynamicTemplateData);
                // other codes... 
            }
            return View(model);
        }   

 public async void SendEmail(TemplateEmailData templateEmailData)
{
            try
            {
                // your own SendGridApiKey
                var client = new SendGridClient(SendGridApiKey);
                var msg = new SendGridMessage();
                msg.SetFrom(new EmailAddress("test@gmail.com", "t"));
                msg.AddTo(new EmailAddress("test@gmail.com", "Linda"));
                msg.SetTemplateId(TemplateID);
				// You own TemplateID
                msg.SetTemplateData(templateEmailData);
                var response = await client.SendEmailAsync(msg);
            }
            catch (Exception e)
            {
                throw;
}

The interesting thing is that we don't need a credential for this service, just need an API key and template ID.

Iterations for template

When we need to dynamically generate iterations from a list or array, the template is looks like this：

And the codes constantly changed to:

public class TemplateEmailData
    {
        [JsonProperty("subject")]
        public string Subject { get; set; }
        [JsonProperty("name")]
        public string Name { get; set; }
        [JsonProperty("redirect")]
        public string RedirectUrl { get; set; }
        [JsonProperty("location")]
        public List<Location> Locations { get; set; }
    }
    public class Location
    {
        [JsonProperty("city")]
        public string City { get; set; }
        [JsonProperty("country")]
        public string Country { get; set; }
    }

Source

https://sendgrid.com/docs/for-developers/sending-email/using-handlebars/#iterations

https://github.com/sendgrid/sendgrid-csharp

There are 3 drawbacks by using class component in React:

1. Big component is hard to split or restructure
2. Logic is scattered in methods which can lead to redundant logic.
3. Coding model is complicated, such as render, props, etc.

To simplify coding in React, Hooks is designed, used in pure methods, which don't need class to complete a component. Notice, Hooks don't work inside classes!

Build-in Hooks

There are 4 commonly used hooks: useState(), useContext(), useReducer() and useEffect().

useState() is used when you need to manipulate state in a function.

import React, {useState} from "react"

export default function Fruit(){
    //declare hookks, initial value for fruit is banana, setFruit is used to handle changes.
    const [fruit, setFruit]=useState("banana");
    
    function handleChange(){
        return setFruit("orange");
    }
    return <button onclick={handleChange}>{fruit}</button>
    // can directly use fruit
}

useEffect() lets you perform side effects. general ways to use it is to request data. Effects are run after updating the DOM. Unlike componentDidMount, effects don't block the browser from updating the screen. Major effects don't need to happen synchronously, so it makes the app more responsive.

function User(Id){
    const [loading, setLoading]=useState(true);
    const [user, setUser]=useState({});
    
    useEffect(()=>{
        setLoading(true);
        fetch(`https://sample/${Id}`)
        .then(response=>response.json())
        .then(data=>{
            setUser(data);
            setLoading(false);
        });
    },[Id]);
    if(loading===true){
        return <p>Loading...</p>
    }
    
    return(
        <div>
          <p> User name: {user.Name}</p>
        </div>
    )
}

Notice: for needs of executing effect each time there is a update, can delete the second parameter in useEffect(); for needs of render once, can make the second parameter as [], so there is no change for a [], it will only executed once.

There are 4 steps:

1. create a class to store sensitive data
2. set up appsettings.json
3. register in startup.cs
4. use the sensitive data

1. create a class to store sensitive data

public class GoogleDocSettings
    {
        public string ApplicationNameSetting { get; set; }
        public string TemplateDocId { get; set; }
        public string ClientId { get; set; }
        public string ClientSecret { get; set; }
    }

2. set up appsettings.json

"googleDoc": {
    "applicationNameSetting": "Google Docs API",
    "templateDocId": "188888888888888************80c",
    "clientId": "597*******1-g*************q.apps.googleusercontent.com",
    "clientSecret": "l**********P"
  }

3. register in startup.cs

services.Configure<GoogleDocSettings>(options =>
            Configuration.GetSection("googleDoc").Bind(options));

4. use the sensitive data

private readonly GoogleDocSettings googleDoc;

public GoogleService(
                      IOptions<GoogleDocSettings> googleOptions)
{
    this.googleDoc = googleOptions.Value;
}

public async Task<bool> UseGoogleDocs(DemoViewModel model)
        {
            try
            {
                UserCredential credential;
                credential = GoogleWebAuthorizationBroker.AuthorizeAsync(
                    new ClientSecrets { ClientId = googleDoc.ClientId, 
                    ClientSecret = googleDoc.ClientSecret },
                    Scopes,
                    "user",
                    CancellationToken.None,
                    new FileDataStore(credPath, true)).Result;

                // Create Google Docs API service.
                var service = new DocsService(new BaseClientService.Initializer()
                {
                    HttpClientInitializer = credential,
                    ApplicationName = googleDoc.ApplicationNameSetting,
                });

                var serviceDrive = new DriveService(
                new BaseClientService.Initializer()
                {
                    HttpClientInitializer = credential,
                    ApplicationName = googleDoc.ApplicationNameSetting,
                });

                // rest codes...

That is it!

Use react to implement a simple render using List like this:

import SuggestionCard from './FakeData';

<List
  loading={this.props.isLoading}
  itemLayout="vertical"
  grid={{ column: 1 }}
  size="large"
  dataSource={talentSuggestions}
  renderItem={item => (
    <List.Item key={item.id}>
      <SuggestionCard SuggestionData={item} ContactTalent={this.clickContack}/>
    </List.Item>
              )}
/>

export default class SuggestionCard extends Component {
render() {
    const suggestionItem = this.props.SuggestionData;

    return (
      <Card 
        title="HI title">
        <Card.Meta
          title="Skills"
          description={
            <div>
              <Tag>skill 1</Tag>
              <Tag>skill 2</Tag>
              <Tag>skill 3</Tag>
            </div>
          }
        />
      </Card>
    );
  }
}

But got a error message of : React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

I checked it again and again, and then found that the error occur because of the wrong import path! I should import this component from

import SuggestionCard from './SuggestionCard';

So this bug was fixed. How ridiculous~~~

Anyway, happy development. Haha~~~~

public class Company
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Introduction { get; set; }

        public ICollection<Employee> Employees { get; set; }
    }
    
    
public class CompanyDto
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

[ApiController]
    [Route("company")]
    public class CompanyController : Controller
    {
        private readonly ICompanyRepository companyRepository;
        private readonly IMapper mapper;

        public CompanyController(ICompanyRepository companyRepository,IMapper mapper)
        {
            this.companyRepository = companyRepository;
            this.mapper = mapper;
        }
        [HttpGet]
        [Route("")]
        public async Task<ActionResult<IEnumerable<CompanyDto>>> GetCompanies()
        {
            var companies = await companyRepository.GetCompaniesAsync();
            var companyDtos = mapper.Map<IEnumerable<CompanyDto>>(companies);
            var model = new List<CompanyDto>();
            foreach (var company in companies)
            {
                CompanyDto companyDto = new CompanyDto
                {
                    Id=company.Id,
                    Name=company.Name
                };
                model.Add(companyDto);
            }
            return Ok(model);
        }
    }

However, if we use AutoMapper, the situation becomes much easier. There are 4 steps.

Install package :

Install AutoMapper.Extensions.Microsoft.DependencyInjection by Nuget package manager.

Create profile

Create a class to build profile:

using AutoMapper;

public class CompanyProfile:Profile
    {
        public CompanyProfile()
        {
            CreateMap<Company, CompanyDto>();
        }
    }

Set up startup.cs

There are two way of append AutoMapper :

public void ConfigureServices(IServiceCollection services)
{
	// add AutoMapper
	services.AddAutoMapper();
}

or

public void ConfigureServices(IServiceCollection services)
{
    // add AutoMapper
            var mappingConfig = new MapperConfiguration(mc =>
            {
                mc.AddProfile(new CompanyProfile());
            });

            IMapper mapper = mappingConfig.CreateMapper();
            services.AddSingleton(mapper);
}

These two ways get almost same results.

Using IMapper in a controller

By using AutoMapper, the codes are as simple as follow:

    [ApiController]
    [Route("company")]
    public class CompanyController : Controller
    {
        private readonly ICompanyRepository companyRepository;
        private readonly IMapper mapper;

        public CompanyController(ICompanyRepository companyRepository,
                                 IMapper mapper)
        {
            this.companyRepository = companyRepository;
            this.mapper = mapper;
        }
        [HttpGet]
        public async Task<ActionResult<IEnumerable<CompanyDto>>> GetCompanies()
        {
            var companies = await companyRepository.GetCompaniesAsync();
            // use automapper to map companies to companyDtos
            var companyDtos = mapper.Map<IEnumerable<CompanyDto>>(companies);
            return Ok(companyDtos);
        }

        [HttpPut("companyId")]
        public async Task<ActionResult> UpdateCompanies(
            int companyId,CompanyDto companyDto )
        {
            var companyEntity = await companyRepository.GetCompaniesAsync(companyId);
            // map companyEntity to companyDto
            // update values in companyDto
            // map back companyDto to Company object
            // this three things simple done by following sentence
            mapper.Map(companyDto, companyEntity);
            await companyRepository.UpdateCompany(companyEntity)
            return NoContent();
        }
    }

Notice:

1. Entities can either contain more properties or less properties than target DTO
2. If the name of the Properties are different between two classes, or people need to combine two properties, it also works fine
3. People can combine two entities into one DTO

1.Contain more or less properties

As is seen in the beginning, Company class contains a "Introduction" property, using AutoMapper can automatic ignore this property without a null exception. If Company contains less property, for instance, CompanyDto contains a "Location" property, after mapping, the "Location" field in the object will be null.

2. Difference or Combination

When property's name is different between the classes, there are methods in AutoMapper can be used. For example, we change the name property to CompayName.

public class Company
    {
        public int Id { get; set; }
        public string CompanyName { get; set; }
        public string Introduction { get; set; }

        public ICollection<Employee> Employees { get; set; }
    }
    
    
public class CompanyDto
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

Create mapper can be:

CreateMap<Company, CompanyDto>()
                .ForMember(dest=>dest.CompanyName,
                opt=>opt.MapFrom(src=>src.Name));

Or if you want to combine two property together in Employee:

public class Employee
    {
        public int Id { get; set; }
        public int CompanyId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }

        public Company Company { get; set; }
    }
    
 public class EmployeeDto
    {
        public int Id { get; set; }
        public int CompanyId { get; set; }

        public string Name { get; set; }
        public string CompanyName { get; set; }
    }
    

Create mapper can be:

CreateMap<Employee, EmployeeDto>()
                .ForMember(dest => dest.Name,
                opt => opt.MapFrom(src => $"{src.FirstName} {src.LastName}"));

3. Combine two entities together

When People want to combine Employee and Company to EmployeeDto, it can be:

[HttpGet]
[Route("")]
public async Task<ActionResult<IEnumerable<EmpDto>>> GetCompanies()
{
   var companies = await companyRepository.GetCompaniesAsync();
   var emps = await companyRepository.GetEmpAsync();
   var empDtos = mapper.Map< IEnumerable<Company>,
                 IEnumerable<CompDto>>(companies);
   mapper.Map<IEnumerable<Employee>,IEnumerable <CompDto>>(emps, empDtos);
   return Ok(empDtos);
}

APIs provided by Google Docs include creating new document, getting a document and updating a document. However, the function is limited. For example, people can't copy paragraphs; insert text or update styles need the index of the text in Google docs.

Because there are not many example codes for ASP.NET core with C#, I write this article.

To integrate with Google Docs, there are steps:

1. turn on the Google Docs API.
2. Prepare the project
3. Manipulate docs in Google Docs

Turn on the Google Docs API & Google Drive API

Creating credential can either refer the official website of Google Docs https://developers.google.com/docs/api/quickstart/dotnet or this article https://thecodehubs.com/google-drive-integration-in-asp-net-mvc/.

Generally, the processing of create credential of Google Docs and Google drive are almost the same. Since I need to copy documents, I need to enable the both APIs. Under the same project in "console.developers.google.com" in "Library" tag, search for them and click enable button.

Prepare the project

Open the NuGet Package Manager Console, install NuGet package of the both API.

Install-Package Google.Apis.Docs.v1
Install-Package Google.Apis.Drive.v3
Install-Package Google.Apis.Drive.v2

Manipulate docs in Google docs

I create a tool class for the functions of manipulate docs, and simply use them in the controller without any set up in Program.cs or Startup.cs. The authentication is done also in the tool class.

Create credential & service

using Google.Apis.Auth.OAuth2;
using Google.Apis.Docs.v1;
using Google.Apis.Docs.v1.Data;
using Google.Apis.Services;
using Google.Apis.Util.Store;
using System.Threading;
using Microsoft.AspNetCore.Hosting;
using Google.Apis.Drive.v3;
namespace Talent.Api.Domain.Services
{
    public class ProfileService : IProfileService
    {
        static string[] Scopes = { DocsService.Scope.Documents,DocsService.Scope.Drive };
        static string ApplicationName = "Google Docs API Export";
        static string TemplateDocId = "1WwKfzg0dSjEnZRaOIchD2TT8RqIORsCBfnGpCil1R0c";
        public async Task<bool> ExportProfileToGoogleDocs(TalentProfileViewModel model)
        {
            try
            {
                UserCredential credential;

                using (var stream = new FileStream(hostingEnvironment.ContentRootPath + 
                "//credentials.json", FileMode.Open, FileAccess.Read))
                {
                    string credPath = 
                        Environment.GetFolderPath(Environment.SpecialFolder.Personal);
                    credPath = Path.Combine(credPath,
                            $"./credentials/{model.Id}/credentials.json");

                    credential = GoogleWebAuthorizationBroker.AuthorizeAsync(
                        GoogleClientSecrets.Load(stream).Secrets,
                        Scopes,
                        "user",
                        CancellationToken.None,
                        new FileDataStore(credPath, true)).Result;
                }
                
                // Create Google Docs API service.
                var service = new DocsService(new BaseClientService.Initializer()
                {
                    HttpClientInitializer = credential,
                    ApplicationName = ApplicationName,
                });

                var serviceDrive = new DriveService(new BaseClientService.Initializer()
                {
                    HttpClientInitializer = credential,
                    ApplicationName = ApplicationName,
                });
            }
        }
    }
}

Copy template

Use template to generate a document, since replace the text in template with wanted text can maintain the style of the content. So I don't need to specify every style of a letter.

// copy template 
var copyDoc = serviceDrive.Files.Copy(new Google.Apis.Drive.v3.Data.File() { Name = 
      $"Export Profile for {model.FirstName}" },TemplateDocId).Execute();
var docCopyId = copyDoc.Id;
var doc = service.Documents.Get(docCopyId).Execute();

If you look at the network of the request of "get()", you can see the structure of the document in Google Doc.

Export text into the document

I get some data from the front-end to export to the document. Here I use the tool class to generate the request list.

 // export data to google doc
ExportDataToGoogleDocs export = new ExportDataToGoogleDocs();
List<Request> requests = export.GetRequest(model, doc.Body.Content);

BatchUpdateDocumentRequest body = new BatchUpdateDocumentRequest() { Requests = requests };
BatchUpdateDocumentResponse response = service.Documents
                        .BatchUpdate(body, doc.DocumentId).Execute();

Codes in the tool class

There are codes of insert text, replace text, update text style, create and clear bullet, etc.

public class ExportDataToGoogleDocs
    {
        public List<Request> GetRequest(DataViewModel model, 
                                        IList<StructuralElement> DocContent)
        {
            try
            {
                List<Request> requests = new List<Request>();
                string text = null;
                if (model?.Certifications.Count > 0)
                {
                    int index = GetIndex("{{certification}}", DocContent);
                    if (index > 0)
                    {
                        int length = 0;
                        for (int i = model.Certifications.Count; i > 0; i--)
                        {
                            var cert = model.Certifications[i - 1];
                            requests.Add(InsertTextRequest(cert.Name + ", "
                                + cert.From + ", " + cert.Year + "\n", index));
                            length = (cert.Name + ", " + cert.From
                                + ", " + cert.Year).Length;
                            requests.Add(UpdateTextStyleRequest(index, length));
                            length = cert.Name.Length;
                            requests.Add(UpdateTextStyleRequest(index, length, 11.0, 
                                                                true));
                        }
                    }
                }
                else
                {
                    text = "Your certification\n";
                }
                requests.Add(NewReplaceRequest("{{certification}}", text));

                text = null;
                if (model.Education.Count > 0)
                {
                    int index = GetIndex("{{education}}", DocContent);
                    if (index > 0)
                    {
                        int length = 0;
                        for (int i = model.Education.Count; i > 0; i--)
                        {
                            var education = model.Education[i - 1];
                            requests.Add(InsertTextRequest(education.Degree + ", "
                                + education.YearOfGraduation + ", " + 
                                education.InstituteName
                                + ", " + education.Country + "\n", index));
                            length = (education.Degree + ", " + 
                                education.YearOfGraduation + ", "
                                + education.InstituteName + ", " + 
                                education.Country).Length;
                            requests.Add(UpdateTextStyleRequest(index, length));
                            length = education.Degree.Length;
                            requests.Add(UpdateTextStyleRequest(index, length, 11.0, 
                                                                true));
                        }
                    }
                }
                else { text = "Your education\n"; }
                requests.Add(NewReplaceRequest("{{education}}", text));

                text = null;
                if (model.Experience.Count > 0)
                {
                    int index = GetIndex("{{experience}}", DocContent);
                    if (index > 0)
                    {
                        for (var i = model.Experience.Count; i > 0; i--)
                        {
                            var experience = model.Experience[i - 1];
                            foreach (var desc in 
                                     experience.Responsibilities.Split("\n").Reverse())
                            {
                                if (desc.Length == 0) continue;
                                requests.Add(InsertTextRequest(desc + "\n", index));
                                requests.Add(UpdateTextStyleRequest(index, desc.Length));
                                requests.Add(AddBulletStyleRequest(index, desc.Length));
                            }
                            requests.Add(InsertTextRequest(experience.Position + "\n", 
                                                           index));
                            requests.Add(ClearBulletStyleRequest(index));
                            requests.Add(UpdateTextStyleRequest(index,
                                experience.Position.Length, 11.0, true));
                            var info = experience.Company + ", " + 
                                experience.Start.ToShortDateString()
                                + " - " + experience.End.ToShortDateString() + "\n";
                            requests.Add(InsertTextRequest(info, index));
                            requests.Add(UpdateTextStyleRequest(index, info.Length));
                            requests.Add(UpdateTextStyleRequest(index, 
                               experience.Company.Length, 11.0, true));
                        }
                    }
                }
                else { text = "Your experience\n"; }
                requests.Add(NewReplaceRequest("{{experience}}", text));

                text = null;
                int skillIndex = GetIndex("{{skills}}", DocContent);
                if (skillIndex > 0)
                {
                    if (model.Skills.Count > 0)
                    {
                        foreach (var skill in model.Skills.AsEnumerable().Reverse())
                        {
                            requests.Add(InsertTextRequest(skill.Name + "\n", 
                                                           skillIndex));
                            requests.Add(AddBulletStyleRequest(skillIndex,
                                                               skill.Name.Length));
                        }
                    }
                    else { text = "Your skills\n"; }
                    requests.Add(NewReplaceRequest("{{skills}}", text));
                }

                text = (model.FirstName.Length > 0 && model.LastName.Length > 0) ?
                     model.FirstName + " " + model.MiddleName + " " + model.LastName
                    : "Your Name";
                requests.Add(NewReplaceRequest("{{name}}", text));

                text = model.Address.City.Length > 0 && model.Address.Country.Length > 0
                    && model.Address.Street.Length > 0 ?
                    model.Address.Number + " " + model.Address.Street + ", " + 
                    model.Address.Suburb + ", "
                    + model.Address.City + ", " + model.Address.Country :
                    "Your address";
                requests.Add(NewReplaceRequest("{{address}}", text));

                text = model.Phone ?? "021 *** ***";
                requests.Add(NewReplaceRequest("{{phone}}", text));

                text = model.Email ?? "name@example.com";
                requests.Add(NewReplaceRequest("{{email}}", text));

                text = model.Summary ?? "Something about you";
                requests.Add(NewReplaceRequest("{{summary}}", text));

                return requests;
            }
            catch (Exception)
            {
                return null;
            }
        }

        private static Request NewReplaceRequest(string preContent, 
                                                 string replaceContent)
        {
            Request request = new Request();
            request.ReplaceAllText = new ReplaceAllTextRequest()
            {
                ContainsText = new SubstringMatchCriteria()
                {
                    Text = (preContent),
                    MatchCase = true
                },
                ReplaceText = replaceContent
            };
            return request;
        }

        private static Request InsertTextRequest(string content, int index)
        {
            Request request = new Request();
            request.InsertText = new InsertTextRequest()
            {
                Text = content,
                Location = new Location() { Index = index }
            };
            return request;
        }

        private static Request AddBulletStyleRequest(int startIndex, int length)
        {
            Request request = new Request();
            request.CreateParagraphBullets = new CreateParagraphBulletsRequest
            {
                Range = new Range { StartIndex = startIndex, EndIndex = startIndex + 
                    length },
                BulletPreset = "BULLET_DISC_CIRCLE_SQUARE"
            };
            return request;
        }

        private static Request ClearBulletStyleRequest(int startIndex)
        {
            Request request = new Request();
            request.DeleteParagraphBullets = new DeleteParagraphBulletsRequest
            {
                Range = new Range { StartIndex = startIndex, EndIndex = startIndex + 1 }
            };
            return request;
        }

        private static Request UpdateTextStyleRequest(int startIndex, int length,
              double fontSize = 11, bool bold = false)
        {
            Request request = new Request();
            request.UpdateTextStyle = new UpdateTextStyleRequest()
            {
                TextStyle = new TextStyle()
                {
                    FontSize = new Dimension() { Magnitude = fontSize, Unit = "PT" },
                    Bold = bold
                },
                Range = new Range() { StartIndex = startIndex, EndIndex = startIndex + 
                    length },
                Fields = "fontSize, bold"
            };
            return request;
        }

        private static int GetIndex(string stringToFind, 
                                    IList<StructuralElement> DocContent)
        {
            var result = DocContent.Where(a => a.Paragraph != null)
                .FirstOrDefault(x => x.Paragraph.Elements.Any(
                    y => y.TextRun.Content.StartsWith(stringToFind, 
                                                      StringComparison.CurrentCulture)
                    ));
            if (result == null)
            {
                return 0;
            }
            return (int)result.StartIndex;
        }

    }