1. Introduction

GOP (Garena Open Platform) provides web login for Garena websites, such as Payment Center, Booyah Live, Customer Service and so on. We support login using Garena account as well as using most of the popular social media accounts. Currently the available platforms are: Facebook, VK, Line, Google, and Huawei; and there are a few others on the way.

2. GOP OAuth Login Flow

For login using third party social platforms, the login flow largely follow the same steps, with only some minor differences in the third party platforms OAuth API and parameters. The following diagram illustrates the example of login into GOP using a Facebook account:

Let's look at each step in details:

a. User is redirected to GOP for login , with the following parameters:
• client_id: app id on GOP side for the app to login
• platform: third party platform to login with
• locale: language to display
• redirect_uri: uri to redirect the user back to after successfully login with GOP
• ...

b. GOP redirects user to platform login page (such as Facebook login url www.facebook.com/dialog/oauth), with a list of params required by the platform, such as:
• client_id: app id for the app to login on platform side
• redirect_uri: uri to redirect to after successfully login with platform. The redirect_uri here is GOP login uri, which needs to be pre-configured and whitelisted on the platform side.
• scope: the scope to grant to the access token
• ...

c. Platform redirects user back to GOP (to the indicated redirect_uri in last step) after successful login, with parameters such as:
• platform_access_token: GOP can validate the token and get user public information from the it by either extracting directly from the token or calling platform API.
• All the original query params in step a): This is for GOP to login the user to the correct app and then redirect him to the indicated redirect_uri with the platform token.
• ...

d. With platform token, exchanges GOP token with the server side:
• GOP server side validates the platform token, and extracts user information from it.

e. Finally, redirect user back to the app indicated redirect_url with GOP access_token.

3. Google Web Login Integration

There was no problem set in when integrating with Facebook or other popular social media, since most of them follow the same login flow. However, for Google login, this was not so. Next, let’s walk through together all the trials and errors we have experienced along the way.

• Attempt 1: Google Platform Library

  We started the integration by using Google platform javascript library: platform.js. The library enables us to render a sign-in button on the login page. After user has clicked on it, the Google sign-in dialogue will be prop-up; upon the user successfully signing in with Google, the pre-defined callback function will be called and the user information will be passed in as the input parameter.

  Following the instruction in Google's documents, we complete the first attempt by:

  • step 1) include the library in login rendered html.

    
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    				

  • Step 2) render sign-in button on login page. Since at the time when user has been redirected to GOP login page, he has already chosen Google login. In order to avoid unnecessary extra user action, we configure the page to automatically click the button and show the popup window for user on load.

    
    <div class="g-signin2" data-onsuccess="onSignIn"></div>
    				

  • Step 3) exchange GOP token in successful sign in callback function:

    
    function onSignIn(googleUser) {
    	// get user Google access token, then exchange for GOP token
    }
    				

  However, this attempt was not working. By default, the browser blocks all popup windows that are not invoked from direct user action. This means, if the popup window is in response to a button click, it is allowed by the browser; but if the popup window is triggered by a timer event, or in this case triggered by javascript function, it will be blocked by the browser.

  After a lot trial and errors, we were still not able to get around this browser setting. Therefore, we have not other choice but to find another way for Google login.

• Attempt 2: Redirect User to Google OAuth Endpoint

  The second attempt is to redirect user to Google Oauth endpoint https://accounts.google.com/o/oauth2/v2/auth along with a list of required parameters, including redirect_uri after the user successfully signing in with Google.

  The login flow here is generally the same as other social platforms:

  

  However, this attempt is not working either. Google requires to whitelist the redirect_uri at their backend, and only accepts exact uri. This means all the original query params can not be passed back to GOP after user being redirected back to GOP.

• Attempt 3: Write Cookie before Redirect

  In order to solve the query params problems, we decide to store the query params in the cookie instead of appending in the redirect uri. After Google redirecting the user back to GOP with Google access token, we extract out the original query params and then redirecting the user to GOP common login endpoint with the query params and Google access token.

  We can use the following diagram to illustrate the login flow:

  

  Finally, this method is working! However, there is still room for improvement. Since this method relies on writing cookie in user browser, what if the browser does not allow writing cookies?

• Attempt 4: Make Use of State Parameter

  After a lot of research, we find another workaround. The Google Oauth login endpoint provides an optional state parameter. If it is passed to Google in the login request, after user successfully signing in, Google will redirect the user back to the indicated redirect_uri together with the original state parameter.

  Thus we can encode the query params, pass it as the state parameter to Google, and then decode it to extract out the original query params after redirecting back to GOP:

  

  That's it! With the use of state parameter, we finally find the solution to login Google users without relying on cookies!

4. What’s Next

We have walked through all the attempts (and pains...) we have gone through in the Google web login integration process. Next, GOP is going to integrate more social platforms such as Twitter, WeChat and so on. Stay tuned for more posts on the tips for these platforms!