Chrome Extensions with Google authentication

Chrome extensions are plugin-like integrations built by third parties into Chrome. They are essentially JavaScript/HTML code that runs in the context of a browser page in a sandbox with special access to Chrome browser API.

Many Chrome extensions are built to provide convenient integrations to a third-party system or service, like Customer Relationship Management, Customer Service, and Project Management,... and the extension developers all end up developing the same or similar elements of their app:

  • Provision a backend API that will support the client code.

  • Implement user management (login/logout/session) which needs to be correlated with an authenticated user, often a Google or Office 365 user.

  • Support one or more 3rd party authorization flows. For example, a user needs to link his or her CRM account, maybe also a cloud file storage.

  • Proxy requests to 3rd party API's. Quite often direct API communications from JavaScript are blocked by CORS in browsers.

  • Storing various add-in configurations for users or organizations.

  • Offline API access. Often special workers are implemented to run in the background when an extension user is offline.

Aurinko aims to provide the necessary backend functionality for these extensions so that developers could focus on the client code to create the best user experiences. Here are the steps to start using Aurinko as a backend API for your Chrome extension:

  1. Get your developer API keys and put your app's client id into your client code.

  2. To provide Google authentication and to have offline Google API access provision Google OAuth setup.

  3. After your extension client code has initialized test if the current user is already authenticated with Aurinko (logged in):

    curl -X GET -G https://api.aurinko.io/v1/user

    For a logged in user the request will return the user info and its active Aurinko accounts (see step 5). Otherwise, 401 Unauthorized status will be returned in which case your extension needs to ask the user to login (see next step).

  4. To authorize a user start the authorization flow in a popup window. This way your extention can also get offline access to Google API:

    curl -X GET -G https://api.aurinko.io/v1/auth/authorize \
         -d clientId='{APPLICATION\_ID}' \
         -d serviceType='Google' \
         -d scopes='Mail.Send' \
         -d userAccount='primary'   

    The important parameter here is userAccount=primary which turns this account authorization into user session initialization (user login). Upon successful authentication and authorization, a session cookie is set which will allow your app to stay recognized by Aurinko until the user logs out.

    The following JavaScript code is executed in your popup

    window.onload=function(){
        if(window.opener!=null){
            window.opener.postMessage("{\\"status\\":\\"success\\",\\"requestId\\":\\
            "a22ed91e-14a1-49f8-a148-9b5bb33af91a\\",\\"type\\":\\"accountAuthResult
            \\"}",'\*');
        }
        window.close();
    } 

    In addition to the login Aurinko gets access to Google API with the requested scopes: Mail.Send. This will allow your app to work with the Gmail account while the user is not using your extension.

  5. Authorize access to a 3rd party API. Contact us at support@aurinko.io to arrange adding a connector for your system, i.e. {MyCRM}.

    curl -X GET -G https://api.aurinko.io/v1/auth/authorize \
        -d clientId='{APPLICATION\_ID}' \
        -d serviceType='{MyCRM}' \
        -d userAccount='secondary'   

    Upon a successful authentication and authorization an Aurinko account representing your 3rd party API {MyCRM} will be added and your app can issue the following request again :

    curl -X GET -G https://api.aurinko.io/v1/user

    The request will return all Aurinko accounts associated with the current user session:

    {
        "id":
        "3df3ce21-07c0-4cec-a8de-ed4c570ee15c",
        "appId": 1,
        "email": "user@yoxel.net",
        "authOrgId": "yoxel.net",
        "trustedIdentity": true,
        "accounts": [
            {
                "id": 2739,
                "serviceType": "Google",
                "type": "primary",
                "active": true,
                "daemon": false,
                "loginString": "user@yoxel.net",
                "email": "user@yoxel.net",
                "name": "Google User",
                "authUserId":
                "abcdabcb-ad8d-4bee-bd69-787675478785",
                "authOrgId": "yoxel.net",
                "authObtainedAt":
                "2021-03-21T16:58:56.823Z"
            },
            {
                "id": 2740,
                "serviceType": "{MyCRM}",
                "type": "secondary",
                "active": true,
                "daemon": false,
                "loginString": "user@yoxel.net",
                "email": "user@yoxel.net",
                "name": "Crm User",
                "serverUrl": "https://crm.instance",
                "authUserId": "374",
                "authOrgId": "999",
                "authObtainedAt":
                "2021-03-21T17:39:10.513Z"
            }
        ]
    }
  6. Now your extension can access either Google API (through Aurinko's unified API) or the 3rd party API. Specify an account id in the special header X-Aurinko-AccountId and use Aurinko Email/Calendar/Contact to access those accounts.

    curl -H 'X-Aurinko-AccountId: 2739' \
        -X GET https://api.aurinko.io/v1/email/messages 
    curl -H 'X-Aurinko-AccountId: 2740' \
        -X GET https://api.aurinko.io/v1/contacts

Last updated