Google script oauth2 Error: redirect_uri_mismatch

Question

I am not asking this question without searching and reading the docs. I spent 2 days so far. I am sure I am missing sth. I am trying to implement google auth on drive spreadsheet. I have tried everything but still getting the error message (redirect_uri_mismatch). Basically, I want a sidepanel with a login screen. User clicks the button, auth magic runs and redirects to another html printing "Success" when the user allows access.

I created a project in google dev console.
created credentials
2.1 Client Id:
131579675294-jc1c0ckuaa7n7ih7eevg19cisthgt00e.apps.googleusercontent.com

2.2 Client secret : XaebFsC18qfMmcZJKgokLEYo
set callback uri:
https:// script.google.com/macros/d/MCgMJPIdD1bbeG1PsFaNug8uUifae5TWT/usercallback
project key : MCgMJPIdD1bbeG1PsFaNug8uUifae5TWT

script id: 1DYEShH45-AtikbEwfAG8w9P7Y39FHhCB-nGHWHOW4mUtq5DZLvubDxev

supposedly projectKey is deprecated and instead script id needs to be used but neither works.
I use oauth2 so I added the external lib : 1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF
Explanation: my gs file has the following code below. I have got a sidebar with a button calls onSignIn() when clicked. I am expecting to access spreadsheets with the auth. As a start point, I want to see the authorization page. After accepting it, I want it to redirect to a page which is the callback_uri and display something simple. However it does gives me the error. The ironic stage was the endpoint browser link I created worked and redirects successfully.

ENDPOINT BROWSER LINK

https://accounts.google.com/o/oauth2/auth?redirect_uri=https%3A%2F%2Fscript.google.com%2Fmacros%2Fd%2FMCgMJPIdD1bbeG1PsFaNug8uUifae5TWT%2Fusercallback&response_type=code&client_id=131579675294-jc1c0ckuaa7n7ih7eevg19cisthgt00e.apps.googleusercontent.com&approval_prompt=force&scope=https%3A%2F%2Fdocs.google.com%2Ffeeds

What am I doing wrong? Your help is appreciated. Thx.

    var CLIENT_ID = '131579675294-jc1c0ckuaa7n7ih7eevg19cisthgt00e.apps.googleusercontent.com';

    var CLIENT_SECRET = 'XaebFsC18qfMmcZJKgokLEYo';

    function onSignIn() {
        var service = getService();
        if (!service.hasAccess()) {
          var authorizationUrl = service.getAuthorizationUrl();
          var template = HtmlService.createTemplate('<a href="<?= authorizationUrl ?>" target="_blank">Authorize</a>');
          template.authorizationUrl = authorizationUrl;
          var page = template.evaluate();
          return HtmlService.createHtmlOutput( page);
        }
    }


      function authCallback(request) {
        var service = getService();
        var authorized = service.handleCallback(request);
        if (authorized) {
            return HtmlService.createHtmlOutput('Success!');
        } else {
            return HtmlService.createHtmlOutput('Denied');
        }
      }



      function getService() {
        return OAuth2.createService('spreadsheets_ozzy123')

            .setAuthorizationBaseUrl('https://accounts.google.com/o/oauth2/auth')

            .setTokenUrl('https://accounts.google.com/o/oauth2/token')

            .setClientId(CLIENT_ID)

            .setClientSecret(CLIENT_SECRET)

            .setCallbackFunction('authCallback')

            .setScope('https://docs.google.com/feeds')  ;   
      }




      function onOpen() {
            SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
                .createMenu('Custom Menu')
                .addItem('Show sidebar', 'showSidebar')
                .addToUi();  
      }


      function showSidebar() {
         var html =  HtmlService.createTemplateFromFile('LoginSideMenu').evaluate();
            SpreadsheetApp.getUi().showSidebar(html); 
      }


      function include(filename) {
          return HtmlService.createHtmlOutputFromFile(filename).getContent();
      }

FULL ERROR

400. That’s an error.

Error: redirect_uri_mismatch

The JavaScript origin in the request, https://n-g7vwwdjiqopmv3hpcys4noea4krn6nxax6uaoda-0lu-script.googleusercontent.com, does not match the ones authorized for the OAuth client. Visit https://console.developers.google.com/apis/credentials/oauthclient/131579675294-jc1c0ckuaa7n7ih7eevg19cisthgt00e.apps.googleusercontent.com?project=131579675294 to update the authorized JavaScript origins.

Learn more

Request Details
redirect_uri=storagerelay://https/n-g7vwwdjiqopmv3hpcys4noea4krn6nxax6uaoda-0lu-script.googleusercontent.com?id=auth704130
response_type=permission id_token
scope=email profile openid
openid.realm=
client_id=131579675294-jc1c0ckuaa7n7ih7eevg19cisthgt00e.apps.googleusercontent.com
ss_domain=https://n-g7vwwdjiqopmv3hpcys4noea4krn6nxax6uaoda-0lu-script.googleusercontent.com
fetch_basic_profile=true
gsiwebsdk=2
That’s all we know.

@ShyamKansagra Thank you so so so much! I was so certain that I was using the right client Id. After accessed it through Resources -> Advanced services, I realized it was not right. Replaced the correct ones but still did not run. then I created a new sheet and carried all the code to the new one. Then it worked!. I am not sure how to credit your comment. Let me know. — BinaryWo
You are welcome :) , I have added the same comment as an answer. You can accept it. — Shyam Kansagra

Shyam Kansagra Shyam Kansagra · Accepted Answer · 2017-01-05T09:10:25

Go to Resources -> Advanced services. Click Google developers console at the bottom.
You would have opened API manager.
Now, go to credentials in the left most panel.
Make sure you have used the same client ID which is shown there in your code. Also, there are 2 options: Authorized js origins and authorized redirect urls.
In option of urls, paste the mismatched url from your 400 error.

Click save and try again.

Google script oauth2 Error: redirect_uri_mismatch

1 Answers