157

How to add a parameters to the Google OAuth 2.0 redirect_uri?

Just like this:

redirect_uri=http://www.example.com/redirect.html?a=b

The b of a=b is random.

Anyone can help ?

6 Answers 6

300
  1. You cannot add anything to the redirect URI, redirect URI is constant as set in the app settings of Oauth. eg:http://www.example.com/redirect.html

  2. To pass several parameters to your redirect URI, have them stored in state the parameter before calling the OAuth URL, the URL after authorization will send the same parameters to your redirect URI as state=THE_STATE_PARAMETERS

So for your case, do this:

  1. create a JSON string of your parameters ->

    { "a" : "b" , "c" : 1 }

  2. do a base64UrlEncode , to make it URL safe ->

stateString = base64UrlEncode('{ "a" : "b" , "c" : 1 }');

This is a PHP example of base64UrlEncoding & decoding (http://en.wikipedia.org/wiki/Base64#URL_applications) :

function base64UrlEncode($inputStr)
{
    return strtr(base64_encode($inputStr), '+/=', '-_,');
}

function base64UrlDecode($inputStr)
{
    return base64_decode(strtr($inputStr, '-_,', '+/='));
}

So now the state would be something like: stateString -> asawerwerwfgsg,

Pass this state in the OAuth authorization URL:

https://accounts.google.com/o/oauth2/auth?
  client_id=21302922996.apps.googleusercontent.com&
  redirect_uri=https://www.example.com/back&
  scope=https://www.google.com/m8/feeds/&
  response_type=token&
  state=asdafwswdwefwsdg,

For server-side flow, it will come along with the token : http://www.example.com/redirect.html?token=sdfwerwqerqwer&state=asdafwswdwefwsdg,

For client-side flow, it will come in the hash along with the access token: http://www.example.com/redirect.html#access_token=portyefghsdfgdfgsdgd&state=asdafwswdwefwsdg,

Retrieve the state, base64UrlDecode it, json_decode it, and you have your data.

See more about Google OAuth 2 here:

http://code.google.com/apis/accounts/docs/OAuth2.html

12
  • 1
    base64 is used to obfuscate the data as well as url encode it, if you would need a little bit of extra 'security' through obscurity.
    – ricosrealm
    Commented Jun 2, 2013 at 2:00
  • 23
    The state parameter is used to prevent CSRF attacks during the OAuth flow. You have to set a token in the state parameter when initiating the flow and you should check if you get back the same token in the state parameter when your redirect_uri is hit. Don't do what is done in this answer. A session based solution is probably what you should look at.
    – Rahim
    Commented Feb 23, 2017 at 7:41
  • 2
    How can I use state param to pass several parameters to redirect uri and to prevent CSRF attack at the same time ?
    – hellboy
    Commented Apr 11, 2017 at 11:31
  • 1
    @hellboy I'm wondering the same thing. Did you manage to add several parameters to the state param (custom values and prevent CSRF attacks)? Commented May 7, 2018 at 21:40
  • 1
    In javascript you could use this state: JSON.stringify({ a: "b", b: "c" }), on the state attribute
    – kheengz
    Commented Mar 8, 2021 at 15:12
21

Since the accepted answer does expose the actual data and misuses the state parameter instead of sticking to a nonce to protect against CSRF, I'll try to show a proper method. Rather than passing (read exposing) data it should be kept local. Hydrate it before the request and re-hydrate it after a validated request. "Validated" here means that the state-nonce of request and response match.

You need some kind of temporary client side storage. E.g. for SPA or general websites keep it in state or use the browser's localStorage, a session (or a signed cookie). For mobile apps they should use memory or any other local storage.

Before sending the request generate a nonce (see below) that will be used as state parameter for the request. Store the nonce together with the custom state (e.g. a json) in local storage.

For example, the nonce could be ih4f984hf and the custom state {"role": "customer"}. Then you could store data for re-hydration for that request like this:

"ih4f984hf": {
  "role": "customer"
}

Then use only the nonce as value for the state parameter of the request. (If you absolutely want to combine the nonce and data into the state value be sure to encrypt it and be aware that the length of the value is limited!)

When receiving a response you get the value of the state parameter back. Look it up and if it matches the value in the local storage you may process the data using the stored state. If the nonces do not match the request is potentially from an attacker and should not be processed.

Generating the nonce

Remember that the nature of a nonce is that it is used once only and must be unpredictable! Unpredictable here means ideally random, but practically pseudo-random is ok if the entropry is high enough - in web apps you might want to check Web API Crypto which is supported pretty well.

For further readings this might be helpful:

9
  • 1
    But this is optional and Google's documentation doesn't make it sound like you have to implement this as an additional security measure. Would you say every app that uses Google oauth2 should implement this? Commented Aug 20, 2022 at 13:29
  • The hole point is that you cannot rely on the parameters of the redirect URL without the nonce. I guess there might be cases where that is irrelevant but normally you should keep data out of the URL.
    – Stuck
    Commented Aug 21, 2022 at 14:38
  • Do you mean it's dangerous if someone changes the redirect URL manually? Can you give an example? Commented Aug 21, 2022 at 14:48
  • 1
    The oauth website even states: If a client wishes to include request-specific data in the redirect URL, it can instead use the “state” parameter to store data that will be included after the user is redirected. It can either encode the data in the state parameter itself, or use the state parameter as a session ID to store the state on the server. Source: oauth.com/oauth2-servers/redirect-uris/… To me, that sounds like putting the redirect URL directly into the state. Commented Aug 23, 2022 at 6:28
  • 1
    yes, technically you can put the data there, but from a security and privacy standpoint you must think about which data is fine to expose and what needs to be protected and which attack vectors you application shall mitigate.
    – Stuck
    Commented Aug 25, 2022 at 9:14
5

If you are in .NET you could save the parameters in the Session

HttpContext.Current.Session[{varname}]

and redirect to the authorization page without parameters

Response.Redirect(your_uri_approved_with_no_querystring_parameters);
3
  • 4
    This does not scale when using a webfarm such as azure.
    – spender
    Commented Jan 30, 2014 at 16:32
  • 3
    @spender: so you imply that two requests almost in sequence from the same client might be handled by different servers in the webfarm. If that's the case, this is not the only thing affected, basically Session variable couldn't be used in that scenario for anything. BTW: I am not arguing - actually trying to learn here.
    – rufo
    Commented Jan 30, 2014 at 19:20
  • 8
    It's entirely possible, yes... You can mitigate this by managing session with a session server or backing session off to the database (see msdn.microsoft.com/en-us/library/ms178586.aspx), or to enable sticky sessions on your load-balancer to ensure that clients always return to the same webserver node. All of the options I've mentioned are a PITA to set up, so IMO, storing any client state in Session should be avoided.
    – spender
    Commented Jan 31, 2014 at 2:12
5

In Javascript (Node), you could set the state property to an object of key value pairs.

           const oAuth2Client = await new google.auth.OAuth2(
                clientId: <clientId>,
                clientSecret: <clientSecret>,
                redirectUrl: <redirectUrl>,
            );

            return await oAuth2Client.generateAuthUrl({
                access_type: "offline",
                scope: <scopes>,
                state: JSON.stringify({ a: "y", b: "z" }),
            });

On google authorization complete, it returns of the state, code etc from ulr,

const params = JSON.parse(state); // { a: "y", b: "z" }

2

You can redirect parameter with url as below,

When you get response from google than you can pass parameter with url,

See below php code for same,

if (isset($_GET['code'])) {
   $client->authenticate();
   $_SESSION['token'] = $client->getAccessToken();
   $redirect = 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'];
   header('Location: ' . filter_var($redirect, FILTER_SANITIZE_URL) . '?r=page/view');

}

In above example r=page/view is parameter on which i want the response with parameter

2
  • This is where the state parameter is sent in the google provided PHP code. There are three requests made server side. This means that the final request won't have any query string variables at all.
    – lol
    Commented Jan 2, 2015 at 15:01
  • works like a charm! I know we can send information in the state param but if application is expecting any value directly as the request param, then it fails. The method you have provided is perfect for this scenario. Thanks! Commented Apr 4, 2018 at 13:41
0

You can use the state parameter to hold data by using the nonce in the base64 encoded structure.

If you must pass the data into the state parameter. Build the structure with the nonce within the state parameter. Like so:

{
  "role": "customer",
  "nonce": "ih4f984hf",
}

Once you base64 encode the ~structure~, you can verify it has not been tampered with. Including the randomness.

Warning: You need to verify via your business logic that the data state you are trying to maintain throughout the request is considered public information. There is nothing protecting this data from being decoded via a malicious actor.

For instance if the data is simply representative of a color theme so the user resumes to that state on return, the harmless value is okay to send. It is dependent on your requirements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.