Google Drive API Authentication - Make authentication on client?

Question

I am calling the following code on my back end when a user want to access their google drive through my service.

  public static DriveService GetService(string app_userID)
    {

        //get Credentials from client_secret.json file 
        UserCredential credential;
        var path = HttpContext.Current.Server.MapPath(@"~/client_secret.json");
        using (var stream = new FileStream(path, FileMode.Open, FileAccess.Read))
        {
            // The file token.json stores the user's access and refresh tokens, and is created
            // automatically when the authorization flow completes for the first time.
            string credPath = HttpContext.Current.Server.MapPath(@"~/token.json");
            credential = GoogleWebAuthorizationBroker.AuthorizeAsync(
                GoogleClientSecrets.Load(stream).Secrets,
                Scopes,
                app_userID,
                CancellationToken.None,
                new FileDataStore(credPath, true)).Result;
        }

        //create Drive API service.
        DriveService service = new DriveService(new BaseClientService.Initializer()
        {
            HttpClientInitializer = credential,
            ApplicationName = "GoogleDriveRestAPI-v3",
        });
        return service;

The problem though is that I think this code is developed to run on the front end app. I get the following error and I think the program tries to open up a web page for authentication but on the back end server.

{
"Message": "An error has occurred.",
"ExceptionMessage": "One or more errors occurred.",
"ExceptionType": "System.AggregateException",
"StackTrace": "   at System.Threading.Tasks.Task`1.GetResultCore(Boolean .......GoogleDrive.GoogleDriveFilesRepository.GetService(String tt_userID) in ,,,
"InnerException": {
    "Message": "An error has occurred.",
    "ExceptionMessage": "Failed to launch browser with \"...(google url)..." for authorization. See inner exception for details.",
    "ExceptionType": "System.NotSupportedException",
    "StackTrace": "   ...
    "InnerException": {
        "Message": "An error has occurred.",
        "ExceptionMessage": "Access is denied",
        "ExceptionType": "System.ComponentModel.Win32Exception",
        "StackTrace": "   at ...

How do I change so that the end user are authenticated on the client side instead? See my set up below.

Note that I still would like to be able to call the API from the back end if possible.

Does this help you? https://developers.google.com/identity/protocols/OAuth2UserAgent — Kessy, Feb 28 '20 at 14:44
Yes, it might be, I will try to make use of the authentication part and then send the access token to the backend and make use of is as described here: https://stackoverflow.com/questions/21528773/how-to-make-calendarservice-object-using-access-token — Eric1101000101, Mar 02 '20 at 14:31
Hello, was your issue solved? If so, can you post the answer to help more people. If not, can you update the question? — Kessy, Mar 04 '20 at 15:09
Hi, I'm still working on this. I will update when I have an answer. — Eric1101000101, Mar 05 '20 at 09:10

Eric1101000101 · Accepted Answer · 2020-03-07T19:32:36.230

Well, this is how I finally solved it.

The authentication must be done on the client side and therefore also implemented in the java script code. The authentication will result in an authentication code.

Since I do my implementation in vue I used this library: vue-google-oauth2

If you want to implement in javascript directly this tutorial may help (first part up until you get the "code").

The authentication code can be used once for requesting access token. The authentication code needs to be passed to the backend server, in this case by using the API implemented in ASP.NET.

On the backend side I used this library together with this implementation. The only exception is that I set the redirect_uri to "postmessage". With that approach I can get the access token without using a redirect_uri. Not sure of the purpose of redirect_uri. However, no redirect_uri needs to be set in the Google console when using "postmessage".

I used the same clientID on both the server and on the web client. It worked fine but I am not sure if that is how it is supposed to be.

Finally, you need to understand oauth2 to some degree in order to be able to implement oauth2. The diagram at the bottom on this page give a quite good overview. However, if you plan to implement this in a real production environment you should make sure that you master the topic or get help from someone that do.

Can you mark your answer as cossrect so more people can benefit from it? See: https://stackoverflow.blog/2009/01/06/accept-your-own-answers/ — Kessy, Mar 11 '20 at 14:24

Google Drive API Authentication - Make authentication on client?

1 Answers1

Linked